/* BUNDLE clubos-blog.css · R119R4ADESK5CFIX15P3FIX8MOB1 */

/* ===== SOURCE: blog-public.css ===== */
/*
 * 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;
    }
}


/* R115 FIX11 — accent vertical visible sur le commentaire tout juste publié. */
.blog-modal-comment-item.is-just-posted > .c-row{position:relative;padding-left:7px}
.blog-modal-comment-item.is-just-posted > .c-row::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:2px;border-radius:999px;background:#8ec5ff;box-shadow:0 0 0 1px rgba(142,197,255,.08)}
:root[data-theme="dark"] .blog-modal-comment-item.is-just-posted > .c-row::before{background:#60a5fa;box-shadow:0 0 8px rgba(96,165,250,.22)}


/* R118 R3 FIX12 — métriques sociales compactes et liste des partages. */
.blog-wall-social-metric { border:0; background:transparent; padding:.16rem .08rem; cursor:pointer; }
.blog-wall-social-metric > span { font-weight:700; }
.blog-wall-social-metric:not(.blog-wall-share-metric) .club-social-icon { width:20px; height:20px; flex-basis:20px; }
.blog-wall-share-metric .club-social-icon-share { width:20px; height:20px; flex-basis:20px; }
.cab-share-list-overlay { position:fixed; inset:0; z-index:111100; display:grid; place-items:center; padding:1rem; background:rgba(15,23,42,.34); backdrop-filter:blur(2px); }
.cab-share-list-dialog { width:min(420px,calc(100vw - 2rem)); max-height:min(70dvh,620px); display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--site-border,#dbe3ef); border-radius:16px; background:var(--site-surface,#fff); color:var(--site-text,#172033); box-shadow:0 28px 90px rgba(15,23,42,.3); }
.cab-share-list-head { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.9rem 1rem; border-bottom:1px solid var(--site-border,#dbe3ef); }
.cab-share-list-title { margin:0; font-size:1rem; font-weight:800; }
.cab-share-list-close { width:36px; height:36px; border:0; border-radius:999px; background:var(--site-surface-2,#f1f5f9); font-size:1.25rem; line-height:1; }
.cab-share-list-body { overflow:auto; padding:.45rem; }
.cab-share-list-person { display:flex; align-items:center; gap:.7rem; min-height:58px; padding:.55rem .65rem; border-radius:12px; color:inherit; text-decoration:none; }
.cab-share-list-person:hover,.cab-share-list-person:focus-visible { background:var(--site-surface-2,#f1f5f9); outline:none; }
.cab-share-list-avatar { width:42px; height:42px; flex:0 0 42px; border-radius:999px; object-fit:cover; background:#dbeafe; }
.cab-share-list-avatar-fallback { display:grid; place-items:center; font-weight:800; color:#1d4ed8; }
.cab-share-list-name { min-width:0; font-weight:750; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cab-share-list-empty { padding:1.1rem; text-align:center; color:#64748b; }
@media (max-width:575.98px) {
    .blog-wall-social-metric:not(.blog-wall-share-metric) .club-social-icon,
    .blog-wall-share-metric .club-social-icon-share { width:20px; height:20px; flex-basis:20px; }
    .blog-wall-social-metric { font-size:.84rem; gap:5px; }
    .cab-share-list-overlay { align-items:end; padding:0; padding-bottom:calc(var(--clubos-mobile-nav-height,64px) + var(--clubos-mobile-safe-bottom,0px)); }
    .cab-share-list-dialog { width:100%; max-width:none; max-height:min(62dvh,560px); border-radius:18px 18px 0 0; border-bottom:0; }
}


/* R118 R3 FIX12 FIX1 — résumé réactions: total puis types; zéro masqué. */
.blog-wall-reactions-summary[hidden],
.blog-wall-social-metric[hidden] { display: none !important; }
.blog-wall-reactions-summary .js-blog-card-reactions-total-text {
    min-width: .7em;
    font-variant-numeric: tabular-nums;
}
.blog-wall-reactions-summary .blog-reaction-icons-stack { margin-left: 1px; }


/* R118 R3 FIX12 FIX2 — commentaires mobile plus larges et plus denses. */
@media (max-width: 820px) {
    .blog-modal-comments .c-group {
        --comment-rail-width: 36px;
        padding-left: var(--comment-rail-width);
        margin-top: .2rem;
    }

    .blog-modal-comments .c-group > svg.c-rails {
        width: var(--comment-rail-width);
    }

    .blog-modal-comments .c-item {
        padding-top: 4px;
    }

    .blog-modal-comments .blog-modal-comment-main {
        gap: .36rem;
    }

    .blog-modal-comments .blog-modal-comment-avatar {
        margin-left: -4px;
    }

    .blog-modal-comments .blog-modal-comment-bubble {
        padding: .42rem .68rem;
        border-radius: 15px;
    }

    .blog-modal-comments .blog-modal-comment-actions {
        margin-left: calc(24px + .36rem);
        margin-top: .02rem;
        gap: .55rem;
    }

    .blog-modal-comments .blog-modal-comment-actions .btn-link,
    .blog-modal-comments .blog-modal-comment-actions .blog-comment-time {
        line-height: 1.05;
    }
}


/* R119.4A DESK5C FIX15P3FIX8 — texte pleine largeur + CTA En voir plus superposé. */
.blog-post-preview {
    position: relative;
}
.blog-post-preview.has-inline-read-more {
    padding-right: 0 !important;
}
.blog-post-preview-inline-link {
    position: absolute;
    right: .28rem;
    bottom: -.08rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    min-height: 1.72rem;
    padding: .14rem .58rem;
    border: 1px solid rgba(100, 116, 139, .18);
    border-radius: 999px;
    color: #2563eb;
    font-size: .9rem;
    font-weight: 750;
    line-height: 1.15;
    text-decoration: none;
    background: rgba(241, 245, 249, .97);
    box-shadow: 0 2px 7px rgba(15, 23, 42, .10);
    backdrop-filter: blur(2px);
}
.blog-post-preview-inline-link:hover,
.blog-post-preview-inline-link:focus-visible {
    color: #1d4ed8;
    background: #e8eef6;
    border-color: rgba(37, 99, 235, .24);
    text-decoration: none;
}
:root[data-theme="dark"] .blog-post-preview-inline-link {
    color: #93c5fd;
    border-color: rgba(148, 163, 184, .24);
    background: rgba(30, 41, 59, .97);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .26);
}
:root[data-theme="dark"] .blog-post-preview-inline-link:hover,
:root[data-theme="dark"] .blog-post-preview-inline-link:focus-visible {
    color: #bfdbfe;
    background: #334155;
}

/* ===== SOURCE: people-discovery-feed.css ===== */
/* ClubOS R119.4A DESK3 compatibility boundary.
 * The desktop shell starts at 650px. Below 650px the pre-R119.4A mobile
 * geometry stays authoritative: one column, normal document scroll, no rails,
 * no desktop discovery blocks.
 */
.club-discovery-layout{display:block;min-width:0;width:100%}
.club-discovery-center{min-width:0;width:100%}
.club-discovery-left,.club-discovery-right,.club-discovery-center-head,.club-discovery-content-filters,.club-people-discovery-mobile-host,.club-desktop-mix-host{display:none}

@media(max-width:649.98px){
  body.club-discovery-independent-scroll,
  body.club-discovery-shell-persistent,
  body.club-r1194-desktop-shell{
    overflow:auto!important;
    height:auto!important;
  }
  #clubDesktopLeftRailHost,#clubDesktopRightRailHost,
  .club-desktop-edge-handle{display:none!important}
  #site-shell-main:has(.club-discovery-layout){
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding-left:calc(var(--bs-gutter-x,.75rem) * .5)!important;
    padding-right:calc(var(--bs-gutter-x,.75rem) * .5)!important;
    height:auto!important;
    overflow:visible!important;
  }
  .club-discovery-layout,.club-discovery-center{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    height:auto!important;
    overflow:visible!important;
    margin:0!important;
    padding:0!important;
  }
  .club-discovery-left,.club-discovery-right,.club-discovery-center-head,
  .club-discovery-content-filters,.club-people-discovery-mobile-host,
  .club-desktop-mix-host{display:none!important}
  #blogWallCardsContainer{
    display:flex!important;
    width:auto!important;
    max-width:none!important;
    margin-left:calc(-.5 * var(--bs-gutter-x,1rem))!important;
    margin-right:calc(-.5 * var(--bs-gutter-x,1rem))!important;
  }
  #blogWallCardsContainer>.js-blog-post-card-col{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    flex:0 0 100%!important;
  }
}

/* ===== SOURCE: blog-post-display.css ===== */
:root {
    --post-display-max-width: 1400px;
    --post-display-reader-width: minmax(0, 920px);
    --post-display-comments-width: 380px;
    --post-display-max-height: 92vh;
    --post-display-main-media-height: 410px;
    --post-display-gap: 24px;
    --post-display-overlay: rgba(245, 247, 250, .68);
    --long-reader-modal-margin: 30px;
}

.post-display-overlay {
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
        max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    background: var(--post-display-overlay);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.post-display-overlay.d-none {
    display: none !important;
}

.post-display-dialog {
    width: min(var(--post-display-max-width), calc(100vw - 32px));
    height: min(var(--post-display-max-height), 980px);
    max-height: var(--post-display-max-height);
    border-radius: 16px;
    isolation: isolate;
}

.post-display-header {
    min-height: 66px;
    position: relative;
    z-index: 8;
    background: inherit;
}

.post-display-heading {
    min-width: 0;
}

.post-display-mode-label {
    display: block;
    margin-bottom: 2px;
    color: #64748b;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.post-display-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.post-display-mode-switch {
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    padding: 6px 12px;
    background: #fff;
    color: #1d4ed8;
    font-size: .86rem;
    font-weight: 700;
}

.post-display-progress {
    height: 3px;
    flex: 0 0 3px;
    overflow: hidden;
    background: rgba(148, 163, 184, .22);
}

.post-display-progress-bar {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #2563eb, #7c3aed);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .12s linear;
}

.post-display-content {
    padding: 0;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.post-display-loading,
.post-display-error {
    margin: 24px;
}

.post-display-layout {
    display: grid;
    grid-template-columns: var(--post-display-reader-width) minmax(340px, var(--post-display-comments-width));
    gap: var(--post-display-gap);
    min-height: 100%;
    padding: 24px;
}

.post-display-reader {
    min-width: 0;
    max-width: 950px;
}

.post-display-article-title {
    margin: 0 0 10px;
    color: #172033;
    font-size: clamp(1.8rem, 2.7vw, 2.65rem);
    line-height: 1.12;
    overflow-wrap: anywhere;
}

.post-display-intro {
    margin: 18px 0;
    padding-left: 16px;
    border-left: 4px solid #60a5fa;
    color: #475569;
    font-size: 1.08rem;
    line-height: 1.6;
}

.post-display-main-media {
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: var(--post-display-main-media-height);
    margin: 18px 0 22px !important;
}

.post-display-main-media .blog-modal-image {
    width: 100%;
    max-width: 100%;
    max-height: var(--post-display-main-media-height);
    object-fit: contain;
}

.post-display-reader .blog-modal-content-body {
    max-width: 82ch;
    margin-inline: auto;
    font-size: 1rem;
    line-height: 1.65;
}

.post-display-reader .blog-modal-content-body img {
    max-width: 100%;
    height: auto;
}

.post-display-interactions {
    min-width: 0;
    align-self: start;
    max-height: calc(var(--post-display-max-height) - 160px);
    padding: 4px 4px 16px 18px;
    overflow: auto;
    border-left: 1px solid rgba(148, 163, 184, .3);
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.post-display-interactions .blog-modal-comments {
    margin-top: 0 !important;
}

.post-display-footer {
    position: relative;
    z-index: 7;
    background: #fff;
}

.post-display-footer.is-inline {
    flex: 0 0 auto;
    width: 100%;
    border-top: 1px solid rgba(148, 163, 184, .3);
}

.post-display-footer.is-inline .blog-modal-social-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: .5rem;
    row-gap: .2rem;
    margin-bottom: .18rem;
    padding: .42rem 0;
}

.post-display-footer.is-inline .blog-modal-social-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
}

.post-display-footer.is-inline .blog-modal-social-summary > :first-child,
.post-display-footer.is-inline .blog-modal-social-stats,
.post-display-footer.is-inline .blog-recent-reactions-inline {
    align-items: center;
}

.post-display-footer.is-inline .blog-modal-social-stats {
    display: inline-flex;
    align-self: center;
    line-height: 1.15;
}

.post-display-footer.is-inline .post-display-stat-shares .post-display-stat-icon {
    display: inline;
}

.post-display-footer.is-inline .post-display-stat-shares .post-display-stat-label {
    display: none;
}

.post-display-footer.is-inline .js-post-reaction-trigger,
.post-display-footer.is-inline .js-comment-reaction-trigger {
    -webkit-touch-callout: none;
    user-select: none;
    touch-action: manipulation;
}

.blog-reaction-user-avatar.is-avatar-fallback {
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .16);
}

:root[data-theme="dark"] .blog-reaction-user-avatar.is-avatar-fallback {
    box-shadow: 0 0 0 1px rgba(226, 232, 240, .28);
}

.post-display-footer.is-inline .blog-modal-comments-filter {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
}

.post-display-footer.is-inline .blog-modal-comment-form,
.post-display-footer.is-inline .blog-modal-comment-form > .d-flex,
.post-display-footer.is-inline .blog-modal-comment-bar-inner > .d-flex {
    width: 100%;
    min-width: 0;
}

.post-display-scroll-locked {
    overflow: hidden !important;
}

@media (hover: hover) {
    .blog-reaction-trigger-wrap:hover .blog-reaction-picker {
        display: inline-flex;
    }

    .blog-reaction-trigger-wrap.is-picker-dismissed .blog-reaction-picker {
        display: none !important;
    }
}

.js-comment-reactions-summary {
    appearance: none;
    margin: 0;
    padding: 1px 5px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    font: inherit;
}

.js-comment-reactions-summary:hover,
.js-comment-reactions-summary:focus-visible {
    color: #1d4ed8 !important;
    background: rgba(37, 99, 235, .08);
    outline: none;
}

.post-display-comment-reactions-popover {
    position: fixed;
    z-index: 10020;
    width: min(340px, calc(100vw - 24px));
    max-height: min(420px, calc(100vh - 24px));
    overflow: auto;
    padding: 10px;
    border: 1px solid rgba(148, 163, 184, .38);
    border-radius: 14px;
    color: #172033;
    background: #fff;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .24);
}

.post-display-comment-reactions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 4px 8px;
}

.post-display-comment-reactions-close {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    color: #334155;
    background: #e2e8f0;
    font-size: 1.3rem;
    line-height: 1;
}

.post-display-comment-reactions-list {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.post-display-comment-reaction-person {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 7px 5px;
    border-radius: 10px;
}

.post-display-comment-reaction-person:hover {
    background: #f1f5f9;
}

.post-display-comment-reaction-avatar {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    color: #1e3a8a;
    background: #dbeafe;
    font-weight: 800;
}

.post-display-comment-reaction-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-display-comment-reaction-name {
    min-width: 0;
    overflow: hidden;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.post-display-comment-reaction-value {
    color: #475569;
    font-size: .85rem;
    white-space: nowrap;
}

:root[data-theme="dark"] .post-display-dialog,
:root[data-theme="dark"] .post-display-footer,
:root[data-theme="dark"] .post-display-header {
    background: #111a2c;
}

:root[data-theme="dark"] .post-display-article-title {
    color: #edf4ff;
}

:root[data-theme="dark"] .post-display-intro,
:root[data-theme="dark"] .post-display-mode-label {
    color: #a9bdd7;
}

:root[data-theme="dark"] .post-display-mode-switch {
    color: #bfdbfe;
    border-color: #475569;
    background: #17233a;
}

:root[data-theme="dark"] .post-display-interactions {
    border-left-color: rgba(148, 163, 184, .28);
}

:root[data-theme="dark"] .post-display-overlay {
    --post-display-overlay: rgba(15, 23, 42, .58);
}

:root[data-theme="dark"] .post-display-comment-reactions-popover {
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, .3);
    background: #17233a;
}

:root[data-theme="dark"] .post-display-comment-reaction-person:hover {
    background: rgba(148, 163, 184, .12);
}

:root[data-theme="dark"] .post-display-comment-reaction-value {
    color: #cbd5e1;
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .post-display-overlay {
        background: rgba(245, 247, 250, .84);
    }

    :root[data-theme="dark"] .post-display-overlay {
        background: rgba(15, 23, 42, .72);
    }
}

@media (max-width: 1100px) {
    .post-display-layout {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
        gap: 18px;
        padding: 18px;
    }
}

@media (max-width: 820px) {
    .post-display-overlay {
        padding: 0;
    }

    .post-display-dialog {
        width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }

    .post-display-layout {
        display: block;
        padding: 16px;
    }

    .post-display-interactions {
        max-height: none;
        margin-top: 24px;
        padding: 20px 0 8px;
        overflow: visible;
        border-top: 1px solid rgba(148, 163, 184, .3);
        border-left: 0;
    }

    .post-display-main-media,
    .post-display-main-media .blog-modal-image {
        max-height: 48vh;
    }

    .post-display-header {
        min-height: 58px;
        padding: 8px 12px;
    }

    .post-display-mode-switch {
        padding: 5px 9px;
    }
}

/* État explicite des mutations de réaction. */
.blog-reaction-trigger-wrap.is-reaction-pending {
    opacity: .72;
}

.blog-reaction-trigger-wrap.is-reaction-pending .blog-reaction-picker {
    pointer-events: none;
}

.post-display-comment-reactions-truncated {
    margin: 8px 4px 2px;
    color: #64748b;
    font-size: .78rem;
    line-height: 1.35;
}

:root[data-theme="dark"] .post-display-comment-reactions-truncated {
    color: #94a3b8;
}

/*
 * Version 2026.07.26.2 : composeur de commentaire inspiré des réseaux sociaux.
 * Le formulaire reste le même dans les modes lecture, média et article long,
 * seule sa présentation est adoucie et adaptée au thème actif.
 */
.post-display-footer .blog-modal-comment-form {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px !important;
    margin-top: 7px;
    padding: 7px 8px;
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 18px;
    background: #f0f2f5;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
}

.post-display-footer .blog-modal-comment-form > .d-flex:last-child {
    width: 100%;
    min-width: 0;
    gap: 7px !important;
}

.post-display-footer .blog-modal-comment-form .form-control {
    min-width: 0;
    border-color: transparent;
    border-radius: 14px;
    background: rgba(255, 255, 255, .76);
    box-shadow: none;
}

.post-display-footer .blog-modal-comment-form .form-control:focus {
    border-color: rgba(37, 99, 235, .3);
    background: #fff;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .12);
}

.post-display-footer .blog-modal-comment-form button[type="submit"] {
    flex: 0 0 auto;
    border-radius: 12px;
}

.post-display-footer .blog-modal-reply-context:not(.d-none) {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 4px;
}

:root[data-theme="dark"] .post-display-footer .blog-modal-comment-form {
    border-color: rgba(148, 163, 184, .2);
    background: #263244;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

:root[data-theme="dark"] .post-display-footer .blog-modal-comment-form .form-control {
    color: #e5edf8;
    border-color: transparent;
    background: rgba(15, 23, 42, .7);
}

:root[data-theme="dark"] .post-display-footer .blog-modal-comment-form .form-control:focus {
    border-color: rgba(96, 165, 250, .42);
    background: #111a2c;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, .14);
}


/* Version 2026.07.26.3 : stabilité et lisibilité du sélecteur de réactions. */
.blog-reaction-trigger-wrap::after {
    left: -10px;
    right: -10px;
    bottom: calc(100% - 2px);
    height: 20px;
}

.blog-reaction-picker {
    pointer-events: auto;
}

.blog-reaction-choice {
    position: relative;
    transition: transform 130ms ease, background-color 130ms ease, box-shadow 130ms ease;
}

.blog-reaction-choice.is-selected,
.blog-reaction-choice[aria-pressed="true"] {
    background: rgba(37, 99, 235, .14);
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2563eb;
    transform: translateY(-2px) scale(1.08);
}

:root[data-theme="dark"] .blog-reaction-choice.is-selected,
:root[data-theme="dark"] .blog-reaction-choice[aria-pressed="true"] {
    background: rgba(96, 165, 250, .22);
    box-shadow: 0 0 0 2px #0f172a, 0 0 0 4px #60a5fa;
}

/*
 * Version 2026.07.26.4 : composeur multiligne et avatars robustes.
 */
.post-display-footer .blog-modal-comment-form > .d-flex:last-child {
    align-items: flex-end;
}

.post-display-footer textarea.js-modal-comment-input {
    box-sizing: border-box;
    min-height: 36px;
    max-height: 142px;
    padding-top: 8px;
    padding-bottom: 8px;
    overflow-y: hidden;
    resize: none;
    line-height: 1.35;
    scrollbar-width: thin;
}

.post-display-footer textarea.js-modal-comment-input[aria-busy="true"],
.post-display-footer form[aria-busy="true"] textarea.js-modal-comment-input {
    opacity: .72;
}

.blog-person-avatar.is-avatar-fallback,
.blog-reaction-user-avatar.is-avatar-fallback,
.blog-modal-comment-avatar.is-avatar-fallback,
.post-display-comment-reaction-avatar.is-avatar-fallback {
    display: inline-grid;
    place-items: center;
    font-weight: 800;
    text-transform: uppercase;
}

@media (max-width: 820px) {
    .post-display-footer textarea.js-modal-comment-input {
        max-height: 126px;
    }
}

/* Version 2026.07.26.5 : outils emoji/image du commentaire et pièce jointe. */
.post-display-comment-composer-row {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    width: 100%;
    min-width: 0;
}

.post-display-comment-composer-row textarea.js-modal-comment-input {
    flex: 1 1 auto;
    min-width: 0;
}

/* Club Alex Borg 8.15.9.7.4 — identité du compte qui commente. */
.post-display-comment-account {
    position: relative;
    display: inline-grid;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    padding: 0;
    place-items: center;
    align-self: flex-end;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: help;
    outline: none;
}

.post-display-comment-account-avatar {
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--bs-border-color, #dee2e6) 82%, transparent);
}

.post-display-comment-account-avatar.is-fallback {
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--bs-primary, #0d6efd) 12%, var(--bs-body-bg, #fff));
    color: var(--bs-primary, #0d6efd);
    font-size: .74rem;
    font-weight: 800;
}

.post-display-comment-account-tooltip {
    position: absolute;
    left: 0;
    bottom: calc(100% + .48rem);
    z-index: 60;
    width: max-content;
    max-width: min(17rem, calc(100vw - 2rem));
    padding: .42rem .58rem;
    border: 1px solid color-mix(in srgb, var(--bs-border-color, #dee2e6) 72%, transparent);
    border-radius: .58rem;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #212529);
    box-shadow: 0 .65rem 1.7rem rgba(15, 23, 42, .18);
    font-size: .72rem;
    font-weight: 650;
    line-height: 1.2;
    opacity: 0;
    visibility: hidden;
    transform: translateY(.2rem);
    transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
    pointer-events: none;
}

.post-display-comment-account:hover .post-display-comment-account-tooltip,
.post-display-comment-account:focus .post-display-comment-account-tooltip,
.post-display-comment-account:focus-visible .post-display-comment-account-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.post-display-comment-account:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-primary, #0d6efd) 20%, transparent);
}

.post-display-comment-tools {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 3px;
}

.post-display-comment-tool {
    display: inline-grid;
    width: 30px;
    height: 30px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #64748b;
    font-size: 1rem;
    line-height: 1;
}

.post-display-comment-tool:hover,
.post-display-comment-tool:focus-visible {
    background: rgba(100, 116, 139, .12);
    color: #1d4ed8;
    outline: none;
}

.post-display-comment-emoji-panel {
    position: absolute;
    right: 52px;
    bottom: calc(100% + 7px);
    z-index: 30;
    width: min(310px, calc(100vw - 44px));
    padding: 8px;
    border: 1px solid #d7dde6;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .2);
}

.post-display-comment-emoji-categories {
    display: flex;
    gap: 3px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e5e7eb;
}

.post-display-comment-emoji-category,
.post-display-comment-emoji-item {
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    line-height: 1;
}

.post-display-comment-emoji-category {
    width: 32px;
    height: 28px;
}

.post-display-comment-emoji-category.is-active,
.post-display-comment-emoji-category:hover,
.post-display-comment-emoji-category:focus-visible {
    background: #e8f0ff;
    outline: none;
}

.post-display-comment-emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 2px;
    max-height: 168px;
    padding-top: 7px;
    overflow-y: auto;
}

.post-display-comment-emoji-item {
    min-height: 32px;
    font-size: 1.2rem;
}

.post-display-comment-emoji-item:hover,
.post-display-comment-emoji-item:focus-visible {
    background: #f0f2f5;
    outline: none;
    transform: scale(1.08);
}

.post-display-comment-image-preview {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid rgba(148, 163, 184, .3);
    border-radius: 12px;
    background: rgba(255, 255, 255, .72);
}

.post-display-comment-image-preview[hidden] {
    display: none;
}

.post-display-comment-image-preview img {
    width: 48px;
    height: 48px;
    border-radius: 9px;
    object-fit: cover;
}

.post-display-comment-image-preview-name {
    overflow: hidden;
    color: #475569;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.post-display-comment-image-remove {
    display: inline-grid;
    width: 26px;
    height: 26px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(100, 116, 139, .12);
    color: #475569;
    font-size: 1.1rem;
}

.blog-comment-attachment-link {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-top: 7px;
}

.blog-comment-attachment-image {
    display: block;
    max-width: min(100%, 420px);
    max-height: 360px;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 12px;
    object-fit: contain;
    background: #f8fafc;
}

:root[data-theme="dark"] .post-display-comment-emoji-panel {
    border-color: rgba(148, 163, 184, .3);
    background: #172033;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .46);
}

:root[data-theme="dark"] .post-display-comment-emoji-categories {
    border-bottom-color: rgba(148, 163, 184, .22);
}

:root[data-theme="dark"] .post-display-comment-emoji-category.is-active,
:root[data-theme="dark"] .post-display-comment-emoji-category:hover,
:root[data-theme="dark"] .post-display-comment-emoji-category:focus-visible,
:root[data-theme="dark"] .post-display-comment-emoji-item:hover,
:root[data-theme="dark"] .post-display-comment-emoji-item:focus-visible {
    background: rgba(96, 165, 250, .18);
}

:root[data-theme="dark"] .post-display-comment-image-preview {
    border-color: rgba(148, 163, 184, .24);
    background: rgba(15, 23, 42, .68);
}

:root[data-theme="dark"] .post-display-comment-image-preview-name {
    color: #cbd5e1;
}

:root[data-theme="dark"] .blog-comment-attachment-image {
    border-color: rgba(148, 163, 184, .26);
    background: #0f172a;
}

@media (max-width: 620px) {
    .post-display-comment-tools {
        gap: 1px;
    }
    .post-display-comment-tool {
        width: 27px;
        height: 27px;
        font-size: .92rem;
    }
    .post-display-comment-emoji-panel {
        right: 4px;
    }
}

[data-post-display-scroll-region="1"]:focus {
    outline: none;
}

[data-post-display-scroll-region="1"]:focus-visible {
    outline: 2px solid rgba(37, 99, 235, .42);
    outline-offset: -2px;
}

.blog-modal-content-body p:empty,
.blog-modal-content-body div:empty {
    display: none;
}

.blog-modal-content-body hr {
    height: 1px;
    margin: 1.35rem 0;
    border: 0;
    background: rgba(100, 116, 139, .32);
}

/*
 * Version 2026.07.27.6.4 : synthèse sociale compacte sur téléphone.
 * Les libellés restent complets pour les lecteurs d'écran via aria-label.
 */
.post-display-stat {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

.post-display-stat-icon {
    display: none;
    line-height: 1;
}

.post-display-stat strong {
    font-weight: inherit;
}

@media (max-width: 820px) {
    .post-display-footer.is-inline .blog-modal-social-summary {
        display: grid;
        width: 100%;
        min-width: 0;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 6px;
        row-gap: 2px;
        margin-bottom: 0;
        padding: .32rem 0;
    }

    .post-display-footer.is-inline .blog-modal-social-summary > :first-child {
        display: flex !important;
        min-width: 0;
        flex: 1 1 auto;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        overflow: hidden;
    }

    .post-display-footer.is-inline .blog-reaction-icons-stack {
        flex: 0 0 auto;
    }

    .post-display-footer.is-inline .js-modal-post-recent-reactions {
        min-width: 0;
        flex: 1 1 auto;
        overflow: hidden;
    }

    .post-display-footer.is-inline .blog-recent-reactions-inline {
        width: 100%;
        gap: 4px;
    }

    .post-display-footer.is-inline .blog-recent-reactions-avatars {
        flex: 0 0 auto;
    }

    .post-display-footer.is-inline .blog-recent-reactions-text {
        flex: 1 1 auto;
        max-width: none;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: .72rem;
        line-height: 1.2;
    }

    .post-display-footer.is-inline .js-modal-post-reactions-total {
        flex: 0 0 auto;
        font-size: .72rem;
    }

    .post-display-footer.is-inline .blog-modal-social-stats {
        display: inline-flex !important;
        min-width: 0;
        flex: 0 0 auto;
        gap: 6px !important;
        font-size: .74rem;
    }

    .post-display-footer.is-inline .post-display-stat-icon {
        display: inline;
        font-size: .82rem;
    }

    .post-display-footer.is-inline .post-display-stat-comments .post-display-stat-label,
    .post-display-footer.is-inline .post-display-stat-separator {
        display: none;
    }

    .post-display-footer.is-inline .blog-modal-scroll-bottom-btn {
        display: none !important;
    }

    .post-display-footer.is-inline .blog-modal-social-actions {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch;
        gap: 0;
        padding-bottom: .24rem;
    }

    .post-display-footer.is-inline .blog-modal-social-actions > .blog-reaction-trigger-wrap,
    .post-display-footer.is-inline .blog-modal-social-actions > .btn-link,
    .post-display-footer.is-inline .blog-modal-social-actions > span:not(.post-display-stat) {
        display: flex;
        min-width: 0;
        align-items: center;
        justify-content: center;
        padding: .42rem .2rem !important;
        border-radius: 8px;
        text-align: center;
    }

    .post-display-footer.is-inline .blog-modal-social-actions > .blog-reaction-trigger-wrap .btn-link {
        width: 100%;
        padding: 0 !important;
        text-align: center;
    }

    .post-display-footer.is-inline .blog-modal-social-actions > .btn-link:hover,
    .post-display-footer.is-inline .blog-modal-social-actions > .blog-reaction-trigger-wrap:hover {
        background: rgba(100, 116, 139, .08);
    }

    .post-display-footer.is-inline .blog-modal-comments-filter {
        grid-column: 1 / -1;
        width: 100%;
        margin-top: 4px;
    }
}

@media (max-width: 430px) {
    .post-display-footer.is-inline .blog-reaction-icon-mini {
        width: 19px;
        height: 19px;
        font-size: .68rem;
    }

    .post-display-footer.is-inline .blog-reaction-user-avatar {
        width: 18px;
        height: 18px;
    }

    .post-display-footer.is-inline .js-modal-post-reactions-total,
    .post-display-footer.is-inline .blog-modal-social-stats {
        font-size: .68rem;
    }
}


/* Club Alex Borg 8.15.9.7.8 — composeur commentaire compact et utile.
 * Objectif : donner la largeur au texte, pas aux accessoires.
 * Commun aux modes Lecture, Média et Article long, Day/Night. */
.post-display-comment-composer-row {
    position: relative;
    align-items: flex-start;
    gap: 4px;
}

.post-display-comment-account {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    margin-top: 4px;
    margin-left: -4px;
    align-self: flex-start;
}

.post-display-comment-account-avatar {
    width: 24px;
    height: 24px;
}

.post-display-comment-account-avatar.is-fallback {
    font-size: .64rem;
}

.post-display-comment-input-shell {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.post-display-comment-input-shell textarea.js-modal-comment-input {
    width: 100%;
    min-height: 38px;
    padding: 7px 60px 7px 10px;
    border-radius: 14px;
}

.post-display-comment-tools {
    position: absolute;
    z-index: 3;
    right: 5px;
    bottom: 5px;
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bs-body-bg, #fff) 76%, transparent);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.post-display-comment-tool {
    width: 24px;
    height: 24px;
    font-size: .9rem;
}

.post-display-comment-submit {
    display: inline-grid;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    margin: 4px -2px 0 0;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #0d6efd;
    cursor: pointer;
    font-size: 1.28rem;
    line-height: 1;
    transition: color .12s ease, background-color .12s ease, transform .12s ease;
}

.post-display-comment-submit:hover,
.post-display-comment-submit:focus-visible {
    background: rgba(13, 110, 253, .11);
    color: #075bd8;
    outline: none;
    transform: translateX(1px);
}

.post-display-comment-submit:disabled,
.post-display-comment-submit[aria-disabled="true"] {
    color: #94a3b8;
    cursor: default;
    transform: none;
}

:root[data-theme="dark"] .post-display-comment-tools,
:root[data-bs-theme="dark"] .post-display-comment-tools {
    background: rgba(15, 23, 42, .72);
}

:root[data-theme="dark"] .post-display-comment-submit,
:root[data-bs-theme="dark"] .post-display-comment-submit {
    color: #60a5fa;
}

:root[data-theme="dark"] .post-display-comment-submit:hover,
:root[data-theme="dark"] .post-display-comment-submit:focus-visible,
:root[data-bs-theme="dark"] .post-display-comment-submit:hover,
:root[data-bs-theme="dark"] .post-display-comment-submit:focus-visible {
    background: rgba(96, 165, 250, .14);
    color: #93c5fd;
}

@media (max-width: 820px) {
    .post-display-comment-account {
        flex-basis: 24px;
        width: 24px;
        height: 24px;
        margin-left: -3px;
    }

    .post-display-comment-account-avatar {
        width: 22px;
        height: 22px;
    }

    .post-display-comment-input-shell textarea.js-modal-comment-input {
        padding-right: 56px;
    }

    .post-display-comment-tool {
        width: 22px;
        height: 22px;
        font-size: .84rem;
    }

    .post-display-comment-submit {
        flex-basis: 28px;
        width: 28px;
        height: 28px;
        font-size: 1.18rem;
    }
}


/* Club Alex Borg 8.15.9.7.10 — métriques sociales compactes.
 * Les compteurs restent lisibles sans transformer la ligne sociale en phrase.
 * SVG inline = même dessin en Day/Night, sans emoji dépendant de l'OS. */
.blog-modal-social-stats {
    margin-left: auto;
    gap: 10px !important;
    white-space: nowrap;
}

.post-display-stat-comments,
.post-display-stat-shares {
    color: #64748b;
    gap: 4px;
    font-variant-numeric: tabular-nums;
}

.post-display-stat-icon-svg {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.post-display-stat-icon-share {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
}

.post-display-stat-comments strong,
.post-display-stat-shares strong {
    color: inherit;
    font-weight: 600;
    line-height: 1;
}

/* Les vieux libellés/separateurs ne doivent plus reprendre de place si un fragment
 * historique est réhydraté par le navigateur. */
.post-display-stat-comments .post-display-stat-label,
.post-display-stat-shares .post-display-stat-label,
.blog-modal-social-stats .post-display-stat-separator {
    display: none !important;
}

:root[data-theme="dark"] .post-display-stat-comments,
:root[data-theme="dark"] .post-display-stat-shares {
    color: #a8b6ca;
}

@media (max-width: 820px) {
    .post-display-footer.is-inline .blog-modal-social-stats {
        gap: 8px !important;
    }

    .post-display-footer.is-inline .post-display-stat-icon-svg {
        width: 16px;
        height: 16px;
        flex-basis: 16px;
    }

    .post-display-footer.is-inline .post-display-stat-icon-share {
        width: 17px;
        height: 17px;
        flex-basis: 17px;
    }
}

/* Club Alex Borg 8.15.9.7.11 — barre sociale réellement compacte.
 * En lecture/article long: une seule ligne interactive pour réactions, commentaires,
 * partages et types de réactions. Pas de noms dans le résumé compact. */
.post-display-social-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 2px 0 6px;
}

.post-display-social-reaction-wrap {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.post-display-social-tool,
.post-display-social-reaction-types {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    min-height: 30px;
    padding: 4px 7px;
    border: 0;
    border-radius: 9px;
    color: #55657a;
    background: transparent;
    font: inherit;
    font-size: .79rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: color 130ms ease, background-color 130ms ease, transform 130ms ease;
}

.post-display-social-tool:hover,
.post-display-social-tool:focus-visible,
.post-display-social-reaction-types:hover,
.post-display-social-reaction-types:focus-visible {
    color: #1d4ed8;
    background: rgba(37, 99, 235, .07);
    outline: none;
}

.post-display-social-tool:active,
.post-display-social-reaction-types:active {
    transform: translateY(1px);
}

.post-display-social-tool.is-passive {
    cursor: default;
    opacity: .74;
}

.post-display-social-tool-reaction.is-reacted {
    color: #2563eb;
}

.post-display-social-tool strong {
    color: inherit;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.post-display-social-tool-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    min-height: 18px;
    font-size: 1rem;
    line-height: 1;
}

.club-social-like-svg,
.club-social-icon,
.club-social-action-svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.club-social-like-svg.is-filled {
    fill: currentColor;
    stroke-width: 1.45;
}

.post-display-social-reaction-types {
    margin-left: auto;
    padding-inline: 5px;
}

.post-display-social-reaction-types .blog-reaction-icons-stack {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.post-display-social-reaction-types .blog-reaction-icon-mini {
    width: 19px;
    height: 19px;
    margin-left: -3px;
    font-size: .72rem;
    box-shadow: 0 0 0 1.5px #fff;
}

.post-display-social-reaction-types .blog-reaction-icon-mini:first-child {
    margin-left: 0;
}

.post-display-footer.is-inline .blog-modal-comments-filter {
    margin-top: 3px;
}

/* Les anciens blocs résumé + actions ne doivent plus réserver de hauteur dans les
 * fragments 9.7.11. Les classes restent supportées pour les vieux fragments en cache. */
.post-display-footer.is-inline .blog-modal-social-summary:empty,
.post-display-footer.is-inline .blog-modal-social-actions:empty {
    display: none !important;
}

:root[data-theme="dark"] .post-display-social-tool,
:root[data-theme="dark"] .post-display-social-reaction-types {
    color: #b6c3d7;
}

:root[data-theme="dark"] .post-display-social-tool:hover,
:root[data-theme="dark"] .post-display-social-tool:focus-visible,
:root[data-theme="dark"] .post-display-social-reaction-types:hover,
:root[data-theme="dark"] .post-display-social-reaction-types:focus-visible {
    color: #bfdbfe;
    background: rgba(96, 165, 250, .13);
}

:root[data-theme="dark"] .post-display-social-tool-reaction.is-reacted {
    color: #60a5fa;
}

:root[data-theme="dark"] .post-display-social-reaction-types .blog-reaction-icon-mini {
    box-shadow: 0 0 0 1.5px #111a2c;
}

@media (max-width: 430px) {
    .post-display-social-toolbar {
        gap: 3px;
    }

    .post-display-social-tool,
    .post-display-social-reaction-types {
        min-height: 28px;
        padding: 3px 5px;
        font-size: .73rem;
    }

    .club-social-like-svg,
    .club-social-icon,
    .club-social-action-svg {
        width: 17px;
        height: 17px;
        flex-basis: 17px;
    }

    .post-display-social-reaction-types .blog-reaction-icon-mini {
        width: 18px;
        height: 18px;
        font-size: .68rem;
    }
}

@media (min-width: 1101px) {
    .is-mode-reading .post-display-dialog {
        width: min(1460px, calc(100vw - 32px));
    }

    .is-mode-reading .post-display-layout {
        grid-template-columns: minmax(0, 1fr) minmax(390px, 410px);
        gap: 20px;
    }

    .is-mode-reading .post-display-interactions {
        padding-left: 14px;
    }
}

/*
 * Club Alex Borg 8.15.9.7.13 — lecteur compact desktop pour publications sans
 * grand visuel. Une URL / carte de lien sans média principal reste dans cette
 * variante : le critère est la présence réelle d'un grand bloc visuel dans le
 * lecteur, pas l'existence d'un lien.
 */
.post-display-header-menu-host {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.post-display-header-menu-host:empty {
    display: none;
}

.post-display-header-menu-host .blog-post-card-menu {
    position: relative;
    top: auto;
    right: auto;
    z-index: 12;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
}

.post-display-header-menu-host .blog-post-card-menu-toggle {
    width: 34px;
    height: 34px;
    border-color: transparent;
    background: rgba(148, 163, 184, .14);
    font-size: 1.22rem;
}

.post-display-header-menu-host .blog-post-card-menu-toggle:hover,
.post-display-header-menu-host .blog-post-card-menu-toggle:focus-visible {
    border-color: rgba(100, 116, 139, .22);
    background: rgba(148, 163, 184, .24);
}

.post-display-header-menu-host .blog-post-card-menu-popover {
    top: calc(100% + .42rem);
    right: 0;
    z-index: 10040;
}

.post-display-compact-discussion {
    margin-top: 22px;
    padding-top: 8px;
    border-top: 1px solid rgba(148, 163, 184, .28);
}

.post-display-compact-discussion-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin-bottom: 8px;
    padding: 2px 0 6px;
}

.post-display-compact-discussion-controls .post-display-social-toolbar {
    min-width: 0;
    padding-bottom: 0;
}

.post-display-compact-discussion-controls .blog-modal-comments-filter {
    width: auto;
    min-width: 170px;
    margin: 0;
}

.post-display-layout-compact .blog-modal-comments {
    margin-top: 0 !important;
}

@media (min-width: 821px) {
    .is-compact-reading.post-display-dialog,
    .is-compact-reading .post-display-dialog {
        width: min(790px, calc(100vw - 48px));
        height: min(92vh, 920px);
        max-height: 92vh;
    }

    .is-compact-reading .post-display-header {
        min-height: 58px;
        padding: 8px 12px 8px 16px;
    }

    .is-compact-reading .post-display-heading {
        display: flex;
        align-items: baseline;
        gap: .55rem;
        min-width: 0;
    }

    .is-compact-reading .post-display-mode-label {
        flex: 0 0 auto;
        margin: 0;
        font-size: .65rem;
        letter-spacing: .075em;
    }

    .is-compact-reading .blog-post-modal-title {
        min-width: 0;
        overflow: hidden;
        color: #1f2937;
        font-size: .98rem;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .is-compact-reading .post-display-layout-compact {
        display: block;
        min-height: 0;
        padding: 0;
    }

    .is-compact-reading .post-display-layout-compact .post-display-reader {
        width: 100%;
        max-width: none;
        padding: 18px 20px 12px;
    }

    .is-compact-reading .post-display-layout-compact .post-display-article-title {
        margin-bottom: 8px;
        font-size: clamp(1.42rem, 2vw, 1.8rem);
        line-height: 1.15;
    }

    .is-compact-reading .post-display-layout-compact .blog-modal-meta {
        margin-bottom: 14px !important;
    }

    .is-compact-reading .post-display-layout-compact .blog-modal-content-body {
        max-width: none;
        margin-inline: 0;
        font-size: .98rem;
        line-height: 1.58;
    }

    .is-compact-reading .post-display-layout-compact .post-display-reader-embed {
        margin-top: 14px;
    }

    .is-compact-reading .post-display-content {
        scrollbar-gutter: stable;
    }

    .is-compact-reading .post-display-footer {
        padding: 8px 12px 10px;
        box-shadow: 0 -8px 18px rgba(15, 23, 42, .045);
    }

    .is-compact-reading .post-display-footer .blog-modal-comment-form {
        margin-top: 0;
    }

    .is-compact-reading .blog-post-modal-close {
        display: inline-grid;
        width: 34px;
        height: 34px;
        padding: 0;
        place-items: center;
        border-radius: 50%;
        background: rgba(148, 163, 184, .14);
        font-size: 1.45rem;
    }

    .is-compact-reading .blog-post-modal-close:hover,
    .is-compact-reading .blog-post-modal-close:focus-visible {
        background: rgba(148, 163, 184, .24);
        outline: none;
    }
}

:root[data-theme="dark"] .post-display-header-menu-host .blog-post-card-menu-toggle,
:root[data-theme="dark"] .is-compact-reading .blog-post-modal-close {
    color: #cbd5e1;
    background: rgba(148, 163, 184, .13);
}

:root[data-theme="dark"] .is-compact-reading .blog-post-modal-title {
    color: #edf4ff;
}

:root[data-theme="dark"] .post-display-compact-discussion {
    border-top-color: rgba(148, 163, 184, .24);
}

@media (max-width: 820px) {
    .post-display-compact-discussion-controls {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .post-display-compact-discussion-controls .blog-modal-comments-filter {
        width: 100%;
        min-width: 0;
    }
}


/* R103 FIX15D — panneau commentaires desktop plus confortable. */
@media (min-width: 1200px) {
    :root {
        --post-display-max-width: 1580px;
        --post-display-comments-width: clamp(460px, 34vw, 600px);
        --post-display-gap: 18px;
    }
    .post-display-dialog {
        width: min(var(--post-display-max-width), calc(100vw - 24px));
    }
    .post-display-layout {
        grid-template-columns: minmax(0, 1fr) minmax(430px, var(--post-display-comments-width));
        gap: var(--post-display-gap);
        padding: 20px;
    }
    .post-display-reader {
        max-width: none;
    }
    .post-display-interactions {
        padding-left: 12px;
    }
    .is-mode-reading .post-display-dialog {
        width: min(1580px, calc(100vw - 24px));
    }
    .is-mode-reading .post-display-layout {
        grid-template-columns: minmax(0, 1fr) minmax(460px, clamp(480px, 35vw, 620px));
        gap: 18px;
    }
    .is-mode-reading .post-display-interactions {
        padding-left: 10px;
    }
}
@media (min-width: 1280px) {
    .post-display-layout,
    .is-mode-reading .post-display-layout {
        grid-template-columns: minmax(0, 1fr) minmax(500px, clamp(520px, 36vw, 640px));
    }
}


/* R115 FIX14 — commentaire fraîchement ajouté : accent gauche stable pendant le reflow. */
.blog-modal-comment-item.is-just-posted > .c-row .blog-modal-comment-bubble,
.blog-modal-comment-item.is-target-comment > .c-row .blog-modal-comment-bubble {
  border-left: 3px solid #60a5fa !important;
}
.blog-modal-comment-item.is-just-posted > .c-row .blog-modal-comment-bubble {
  box-shadow: 0 0 0 2px rgba(96,165,250,.18);
}
:root[data-theme="dark"] .blog-modal-comment-item.is-just-posted > .c-row .blog-modal-comment-bubble,
:root[data-theme="dark"] .blog-modal-comment-item.is-target-comment > .c-row .blog-modal-comment-bubble {
  border-left-color: #7db7ff !important;
}


/* R115 FIX17 — contrôles du lecteur au-dessus de la publication. */
@media (min-width: 821px) {
    #blogModalScrollBottomBtn {
        position: fixed !important;
        right: auto !important;
        bottom: auto !important;
        z-index: 2147483600 !important;
        width: 46px;
        height: 46px;
        display: inline-grid;
        place-items: center;
        border-radius: 999px;
        font-size: 1.55rem;
        font-weight: 800;
        line-height: 1;
        cursor: pointer;
        pointer-events: auto !important;
        box-shadow: 0 10px 26px rgba(37, 99, 235, .28);
    }
}

#blogReactionsListModal {
    z-index: 2147483640 !important;
}
#blogReactionsListModal .modal-dialog,
#blogReactionsListModal .modal-content {
    position: relative;
    z-index: 2147483641 !important;
}
.post-display-comment-reactions-popover {
    z-index: 2147483640 !important;
}


/* R115 FIX18 — publication musique + photo ouverte depuis le média.
 * On conserve le header normal (pas de chrome média superposé), la photo passe
 * avant le player et la colonne gauche exploite réellement l'espace disponible. */
@media (min-width: 821px) {
    .is-media-music-hybrid .post-display-layout-music-media-hybrid {
        grid-template-columns: minmax(0, 1fr) minmax(360px, 420px) !important;
        gap: 18px !important;
        padding: 18px 20px !important;
    }
    .is-media-music-hybrid .post-display-music-reader {
        width: 100% !important;
        max-width: none !important;
        min-width: 0;
    }
    .is-media-music-hybrid .post-display-music-gallery,
    .is-media-music-hybrid [data-post-display-music="1"],
    .is-media-music-hybrid .blog-modal-music-wrap,
    .is-media-music-hybrid [data-music-share-card] {
        width: 100% !important;
        max-width: none !important;
    }
    .is-media-music-hybrid .post-display-music-gallery {
        margin: 12px 0 16px !important;
    }
    .is-media-music-hybrid .post-display-music-gallery .blog-modal-image,
    .is-media-music-hybrid .post-display-music-gallery img[data-post-image-viewer-index] {
        display: block;
        width: 100% !important;
        max-width: none !important;
        max-height: 56vh !important;
        object-fit: contain !important;
        border-radius: 12px;
    }
    .is-media-music-hybrid .post-display-reader-music {
        margin-top: 0 !important;
        margin-bottom: 18px !important;
    }
    .is-media-music-hybrid .post-display-music-interactions {
        min-width: 0;
    }
}


/* R115 FIX18 — le bouton haut/bas sort du stacking/transform de la modale.
 * Le JS le porte temporairement sous <body>, donc position:fixed reste vraiment fixe. */
#blogModalScrollBottomBtn.r115-reader-jump-portal {
    position: fixed !important;
    z-index: 2147483600 !important;
    width: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    display: inline-grid !important;
    place-items: center !important;
    pointer-events: auto !important;
    line-height: 1 !important;
    font-size: 1.48rem !important;
    font-weight: 850 !important;
    box-shadow: 0 12px 28px rgba(37, 99, 235, .30) !important;
}


/* R115 FIX19 — fermeture du mode hybride photo + musique.
 * Le bouton est rattaché à la colonne média gauche et non au bord droit de la modale. */
@media (min-width: 821px) {
    .is-media-music-hybrid .post-display-music-reader {
        position: relative !important;
        padding-top: 54px !important;
    }
    .is-media-music-hybrid .post-display-hybrid-close-host {
        position: absolute;
        top: 6px;
        right: 6px;
        z-index: 80;
        display: flex;
        justify-content: flex-end;
        pointer-events: auto;
        gap: 8px;
    }
    .is-media-music-hybrid .post-display-hybrid-close-host #blogPostModalClose {
        pointer-events: auto;
        width: 42px;
        height: 42px;
        border-radius: 999px;
        box-shadow: 0 8px 22px rgba(15, 23, 42, .14);
    }
}

/* R115 FIX19 — filet de sécurité pour le bouton de navigation du lecteur. */
#blogModalScrollBottomBtn.r115-reader-jump-portal {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    user-select: none !important;
}

/* R116 R2 FIX1 — ancrage viewport ferme du saut haut/bas desktop. */
@media (min-width: 821px) {
    #blogModalScrollBottomBtn.r115-reader-jump-portal {
        position: fixed !important;
        transform: none !important;
        will-change: auto !important;
    }
}


/* R118 R3 FIX12 FIX1 — métriques, commentaires et navigation mobile demandés. */
.post-display-comments-title-mobile,
.post-display-comments-breakdown-mobile { display: none; }

@media (max-width: 820px) {
    /* E — le libellé technique n'apporte rien sur l'écran mobile. */
    .is-mode-long .post-display-mode-label { display: none !important; }

    /* F — fermeture nettement plus visible sans réduire la cible tactile. */
    .is-mode-long .blog-post-modal-close {
        display: inline-grid;
        width: 46px;
        height: 46px;
        place-items: center;
        padding: 0;
        font-size: 2.55rem;
        font-weight: 850;
        line-height: .75;
    }

    /* G/H/I — résumé grammatical compact, sans « au total » ni réponse zéro. */
    .post-display-comments-title-desktop,
    .post-display-comments-breakdown-desktop { display: none !important; }
    .post-display-comments-title-mobile,
    .post-display-comments-breakdown-mobile { display: inline !important; }
    .post-display-comments-heading { align-items: baseline !important; gap: .35rem .6rem !important; }
    .post-display-comments-heading > .text-muted { gap: .35rem !important; }

    /* N/O — le tri partage la ligne des métriques et reste volontairement étroit. */
    .post-display-social-toolbar {
        width: 100%;
        min-width: 0;
        flex-wrap: nowrap !important;
        gap: 2px !important;
    }
    .post-display-social-toolbar .blog-modal-comments-filter {
        order: 80;
        flex: 1 1 112px;
        width: auto !important;
        min-width: 92px !important;
        max-width: 132px !important;
        height: 30px;
        margin: 0 2px 0 auto !important;
        padding: 2px 24px 2px 7px;
        font-size: .72rem;
        line-height: 1.1;
    }
    .post-display-social-toolbar .post-display-social-reaction-types {
        order: 90;
        flex: 0 0 auto;
        margin-left: 0;
    }
    .post-display-social-toolbar .post-display-social-tool { flex: 0 0 auto; }

    /* P — smiley, média et envoi alignés et +25 % environ. */
    .post-display-comment-composer-row { align-items: center; }
    .post-display-comment-account { align-self: center; margin-top: 0; }
    .post-display-comment-tools {
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
    }
    .post-display-comment-tool {
        width: 28px;
        height: 28px;
        font-size: 1.05rem;
        line-height: 1;
    }
    .post-display-comment-submit {
        flex-basis: 35px;
        width: 35px;
        height: 35px;
        margin-top: 0;
        font-size: 1.48rem;
        align-self: center;
    }
    .post-display-comment-input-shell textarea.js-modal-comment-input {
        min-height: 42px;
        padding-right: 68px;
    }

    /* Q — la vraie navigation globale est dockée sous la publication. */
    body.post-display-mobile-nav-visible .blog-post-modal-overlay {
        bottom: calc(var(--clubos-mobile-nav-height, 64px) + var(--clubos-mobile-safe-bottom, 0px));
    }
    body.post-display-mobile-nav-visible .is-mode-long .post-display-footer.is-inline {
        bottom: calc(var(--clubos-mobile-nav-height, 64px) + var(--clubos-mobile-safe-bottom, 0px));
    }
    body.post-display-mobile-nav-visible .post-display-comments-fab {
        bottom: calc(min(46dvh, 360px) + var(--clubos-mobile-nav-height, 64px) + var(--clubos-mobile-safe-bottom, 0px) + 22px + env(safe-area-inset-bottom));
    }
    .clubos-mobile-nav.post-display-mobile-nav-docked {
        z-index: calc(var(--z-blog-article-overlay, 120060) + 40) !important;
        pointer-events: auto !important;
    }
    body.post-display-mobile-nav-visible.post-display-comment-composer-focused .clubos-mobile-nav.post-display-mobile-nav-docked {
        display: none !important;
    }
    body.post-display-mobile-nav-visible.post-display-comment-composer-focused .blog-post-modal-overlay { bottom: 0; }
    body.post-display-mobile-nav-visible.post-display-comment-composer-focused .is-mode-long .post-display-footer.is-inline { bottom: 0; }
    body.post-display-mobile-nav-visible.post-display-comment-composer-focused .post-display-comments-fab {
        bottom: calc(min(46dvh, 360px) + 22px + env(safe-area-inset-bottom));
    }
}


/* R118 R3 FIX12 FIX2 — header mobile plus stable et composeur relevé. */
@media (max-width: 820px) {
    .post-display-header {
        align-items: flex-start;
        padding: max(8px, calc(env(safe-area-inset-top) + 6px)) 12px 8px;
    }

    .post-display-heading {
        min-width: 0;
        padding-top: 2px;
        padding-right: 4px;
    }

    .post-display-header-actions {
        flex: 0 0 auto;
        align-items: flex-start;
        gap: 8px;
    }

    .post-display-mode-switch,
    .post-display-header-menu-host .blog-post-card-menu-toggle,
    .blog-post-modal-close {
        flex: 0 0 auto;
    }

    .post-display-footer:not(.is-inline) .blog-modal-comment-form {
        margin-bottom: 6px;
    }
}

/* R118 R3 FIX5 — icône image du composeur de commentaire. */
.post-display-comment-tool-icon{display:block;width:21px;height:21px;object-fit:contain;pointer-events:none}
.post-display-comment-tool{padding:0}


/* R118 R3 FIX12 FIX6 — icône image commentaire bornée. */
.post-display-comment-tool > .post-display-comment-tool-icon {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    object-fit: contain !important;
    pointer-events: none;
}


/* R119.4A DESK5C FIX15P3FIX4 — stable emoji picker geometry, no scrollbar flicker. */
.post-display-comment-emoji-grid,
.js-comment-emoji-grid {
  height:168px!important;
  max-height:168px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  scrollbar-gutter:stable!important;
  contain:layout paint;
}
.post-display-comment-emoji-grid button,
.js-comment-emoji-grid button { transform:none!important; box-sizing:border-box; }
.post-display-comment-emoji-grid button:hover,
.post-display-comment-emoji-grid button:focus-visible,
.js-comment-emoji-grid button:hover,
.js-comment-emoji-grid button:focus-visible {
  transform:none!important;
  background:rgba(8,102,255,.10)!important;
  box-shadow:0 0 0 2px rgba(8,102,255,.10),0 4px 12px rgba(8,102,255,.14)!important;
}

/* ===== SOURCE: blog-post-display-mobile-footer-gap.css ===== */
/*
 * Lecteur long mobile : le pied d'interaction est fixe et recouvre le flux.
 * Un espace terminal mesuré est donc créé APRES les commentaires, dans le
 * conteneur qui défile réellement. Le correctif ne repose plus sur la seule
 * hauteur du texte de l'article.
 */
@media (max-width: 820px) {
    .is-mode-long.post-display-overlay {
        --post-display-mobile-footer-height: 142px;
        --post-display-mobile-tail-space: 154px;
    }

    .is-mode-long .post-display-content {
        padding-bottom: 0 !important;
        scroll-padding-bottom: calc(
            var(--post-display-mobile-tail-space, 154px)
            + env(safe-area-inset-bottom)
        );
    }

    .is-mode-long .post-display-reader {
        padding-bottom: 0 !important;
    }

    /*
     * La mise en page mobile est une colonne flex : ce pseudo-élément se place
     * après .post-display-interactions et garantit que le dernier commentaire,
     * ses actions et « Tous les commentaires sont chargés » peuvent remonter
     * entièrement au-dessus du pied fixe.
     */
    .is-mode-long .post-display-layout::after {
        content: "";
        display: block;
        order: 4;
        width: 100%;
        height: var(--post-display-mobile-tail-space, 154px);
        flex: 0 0 var(--post-display-mobile-tail-space, 154px);
        pointer-events: none;
    }

    .is-mode-long .post-display-interactions,
    .is-mode-long .post-display-interactions .blog-modal-comments {
        scroll-margin-bottom: var(--post-display-mobile-tail-space, 154px);
    }

    .is-mode-long .post-display-comments-fab {
        bottom: calc(
            var(--post-display-mobile-footer-height, 142px)
            + 20px
            + env(safe-area-inset-bottom)
        );
    }
}

/* ===== SOURCE: blog-comment-experience.css ===== */
/* ClubOS — finition des fils de commentaires. */
.blog-comment-replies-toggle {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--bs-primary, #0d6efd);
    font-size: .78rem;
    font-weight: 700;
    margin: .25rem 0 .2rem 2.65rem;
    padding: .25rem .35rem;
    border-radius: .45rem;
}
.blog-comment-replies-toggle:hover,
.blog-comment-replies-toggle:focus-visible { background: rgba(13,110,253,.09); outline: none; }
.blog-comment-pinned-badge {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    margin-left: .35rem;
    color: #845400;
    font-size: .68rem;
    font-weight: 800;
    vertical-align: middle;
}
.club-comment-mention-popup {
    position: absolute;
    z-index: 2147483000;
    left: .5rem;
    right: .5rem;
    bottom: calc(100% + .35rem);
    max-height: 18rem;
    overflow: auto;
    padding: .35rem;
    border: 1px solid rgba(15, 23, 42, .16);
    border-radius: .8rem;
    background: var(--bs-body-bg, #fff);
    box-shadow: 0 18px 50px rgba(15, 23, 42, .22);
}
.post-display-comment-composer-row,
.blog-comment-inline-editor,
.blog-comment-form { position: relative; }
.club-comment-mention-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .65rem;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    padding: .5rem .6rem;
    border-radius: .6rem;
}
.club-comment-mention-option:hover,
.club-comment-mention-option:focus-visible,
.club-comment-mention-option.is-active { background: rgba(13,110,253,.10); outline: none; }
.club-comment-mention-option img,
.club-comment-mention-initial {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    object-fit: cover;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    background: #e8eef8;
    font-weight: 800;
}
.club-comment-purge-dialog {
    width: min(34rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    padding: 0;
    border: 0;
    border-radius: 1rem;
    color: var(--bs-body-color, #172033);
    background: var(--bs-body-bg, #fff);
    box-shadow: 0 28px 90px rgba(0,0,0,.32);
}
.club-comment-purge-dialog::backdrop { background: rgba(15,23,42,.62); }
.club-comment-purge-card header,
.club-comment-purge-card footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid rgba(15,23,42,.12);
}
.club-comment-purge-card footer { justify-content: flex-end; border-top: 1px solid rgba(15,23,42,.12); border-bottom: 0; }
.club-comment-purge-card h2 { margin: 0; font-size: 1.2rem; }
.club-comment-purge-card small { color: #b42318; font-weight: 800; letter-spacing: .08em; }
.club-comment-dialog-close { border: 0; border-radius: 50%; width: 2.35rem; height: 2.35rem; font-size: 1.65rem; background: rgba(100,116,139,.14); }
.club-comment-purge-body { padding: 1.15rem 1.2rem; }
.club-comment-purge-body label { display: grid; gap: .4rem; font-weight: 700; }
.club-comment-purge-body textarea { width: 100%; border: 1px solid rgba(100,116,139,.45); border-radius: .65rem; padding: .7rem; resize: vertical; }
.club-comment-purge-error { margin-top: .6rem; color: #b42318; font-size: .86rem; font-weight: 700; }
.blog-modal-comments-filter { min-width: 10.5rem; }
@media (max-width: 640px) {
    .blog-comment-replies-toggle { margin-left: 2.2rem; }
    .club-comment-mention-popup { left: 0; right: 0; }
}
.blog-comment-mention { color: var(--bs-primary, #0d6efd); font-weight: 750; text-decoration: none; }
.blog-comment-mention:hover { text-decoration: underline; }

/* Flux continu des commentaires et menu d’actions dans la top layer. */
.blog-comments-stream-sentinel,
.blog-comments-stream-end {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 3.25rem;
    margin: .75rem 0 .25rem;
    color: var(--bs-secondary-color, #64748b);
    font-size: .82rem;
    text-align: center;
}
.blog-comments-stream-sentinel { cursor: pointer; border-radius: .75rem; }
.blog-comments-stream-sentinel:hover { background: rgba(13,110,253,.06); }
.blog-comments-stream-spinner {
    width: 1rem; height: 1rem; border-radius: 50%;
    border: 2px solid rgba(100,116,139,.25); border-top-color: var(--bs-primary, #0d6efd);
    animation: club-comment-stream-spin .75s linear infinite;
}
@keyframes club-comment-stream-spin { to { transform: rotate(360deg); } }
.blog-comment-actions-menu[popover] {
    position: fixed !important;
    z-index: 2147483647 !important;
    margin: 0 !important;
    max-height: min(70vh, 28rem);
    overflow: auto;
    inset: auto;
    box-shadow: 0 24px 70px rgba(15,23,42,.34);
}
.blog-comment-actions-menu[popover]::backdrop { background: transparent; }

/* 8.2 — visibilité personnelle/modération et composants ClubUI. */
.blog-comment-actions-menu.club-ui-menu {
    display: block;
    z-index: var(--club-ui-layer-menu, 2147482000) !important;
}
.blog-comment-actions-menu.club-ui-menu[hidden] { display: none !important; }
.blog-modal-comment-item.is-hidden-comment > .blog-modal-comment-main .blog-modal-comment-bubble {
    border: 1px dashed rgba(100,116,139,.55);
    background: color-mix(in srgb, var(--bs-body-bg, #fff) 86%, #94a3b8 14%);
}
.blog-modal-comment-item.is-hidden-context { opacity: .72; }
.blog-comment-hidden-badge {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    margin-left: .35rem;
    padding: .12rem .4rem;
    border-radius: 999px;
    background: rgba(100,116,139,.14);
    color: var(--bs-secondary-color, #64748b);
    font-size: .72rem;
    font-weight: 700;
    cursor: help;
}
.blog-comment-hide-scope-dialog { width: min(92vw, 620px); }
.blog-comment-hide-choice {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    padding: .9rem;
    margin-bottom: .75rem;
    border: 1px solid rgba(148,163,184,.34);
    border-radius: .85rem;
    cursor: pointer;
}
.blog-comment-hide-choice:has(input:checked) {
    border-color: var(--bs-primary, #0d6efd);
    background: rgba(13,110,253,.07);
}
.blog-comment-hide-choice input { margin-top: .25rem; }
.blog-comment-hide-choice span { display: grid; gap: .25rem; }
.blog-comment-hide-choice small { color: var(--bs-secondary-color, #64748b); line-height: 1.4; }
.js-comment-unhide-action { color: var(--bs-primary, #0d6efd) !important; }
@media (pointer: coarse), (max-width: 768px) {
    .blog-comment-actions-menu-trigger,
    .js-comment-unhide-action,
    .blog-modal-comment-actions button { min-height: 44px; }
}


/* AU.4 — @Alex explicite : réponse privée au demandeur, jamais un commentaire social autonome. */
.club-alex-interaction { margin-top:.65rem; padding:.65rem .75rem; border:1px solid var(--bs-border-color, #d9dde3); border-radius:.75rem; background:rgba(127,127,127,.06); max-width:48rem; }
.club-alex-interaction__head { font-size:.83rem; font-weight:700; margin-bottom:.3rem; }
.club-alex-interaction__privacy, .club-alex-interaction__note { font-weight:400; opacity:.68; }
.club-alex-interaction__body { font-size:.9rem; line-height:1.4; overflow-wrap:anywhere; }
.club-alex-interaction__note { font-size:.72rem; margin-top:.35rem; }
.club-alex-interaction--failed .club-alex-interaction__body { opacity:.76; }
.club-alex-interaction--delayed .club-alex-interaction__body { opacity:.82; font-style:italic; }
.club-alex-interaction__spinner { display:inline-block; width:.7rem; height:.7rem; border:.12rem solid currentColor; border-right-color:transparent; border-radius:50%; vertical-align:-.06rem; animation:clubAlexSpin .8s linear infinite; }
@keyframes clubAlexSpin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .club-alex-interaction__spinner { animation:none; } }

/* Club Alex Borg 9.8.0AV.1 — provenance visible des réponses sociales d'agents IA. */
.blog-comment-ai-indicator {
    margin-left: .2rem;
    vertical-align: .02em;
}
.blog-modal-comment-bubble .blog-comment-ai-indicator,
.card .blog-comment-ai-indicator {
    font-size: .58rem;
}


/* AV.1 R3 — profondeur visuelle bornée des fils.
 * La hiérarchie logique reste complète, mais à partir du 3e niveau visuel
 * on cesse d'ajouter un retrait horizontal. Les réponses profondes gardent
 * ainsi une largeur lisible sur mobile et desktop.
 */
.c-node.blog-modal-comment-item.is-visual-depth-capped > .c-group {
    --comment-rail-width: 0px;
    padding-left: 0;
}
.c-node.blog-modal-comment-item.is-visual-depth-capped > .c-group > svg.c-rails {
    display: none;
}
.c-node.blog-modal-comment-item.is-visual-depth-capped > .c-group > .c-item {
    padding-left: 0;
}


/* ClubOS R103 — l'autocomplétion @mention est portalisée dans le viewport, jamais tronquée par le panneau commentaires. */
.club-comment-mention-popup.is-viewport-layer {
    position: fixed !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 2147483600 !important;
    max-width: calc(100vw - 16px);
    overscroll-behavior: contain;
}


/* ClubOS R103 FIX1 — fils plus compacts et rail gris = action de repli. */
.blog-modal-comments .blog-comments-stream-end {
    min-height: 1.45rem !important;
    margin: .18rem 0 .12rem !important;
    padding: 0 !important;
}
.blog-modal-comments .blog-comments-stream-sentinel {
    min-height: 2rem;
    margin: .28rem 0 .16rem;
}
.blog-modal-comments-tree .c-group {
    margin-top: .18rem;
}
.blog-modal-comments-tree .c-item {
    padding-top: 4px;
}
.blog-modal-comments-tree .c-group > svg.c-rails[data-comment-branch-collapse="1"] {
    pointer-events: auto !important;
    cursor: pointer;
    z-index: 2;
}
.blog-modal-comments-tree .c-group > svg.c-rails[data-comment-branch-collapse="1"]:hover path,
.blog-modal-comments-tree .c-group > svg.c-rails[data-comment-branch-collapse="1"]:focus-visible path {
    stroke: #94a3b8;
    stroke-width: 3;
}
.blog-modal-comments-tree .c-group > svg.c-rails[data-comment-branch-collapse="1"]:focus-visible {
    outline: none;
}
.js-comment-replies-toggle[aria-expanded="true"] {
    display: none !important;
}


/* R103 FIX15D — profondeur lisible : moins de largeur perdue par niveau. */
@media (min-width: 821px) {
    .blog-modal-comments-tree .c-group {
        --comment-rail-width: 18px;
    }
    .blog-modal-comments-tree .c-row,
    .blog-modal-comments-tree .blog-modal-comment-main {
        gap: 4px;
    }
    .blog-modal-comments-tree .actions {
        margin-left: calc(var(--c-avatar-size) + 4px);
    }
    .blog-modal-comments-tree .blog-comment-replies-toggle {
        margin-left: 2rem;
    }
}
@media (max-width: 820px) {
    .blog-modal-comments-tree .c-group {
        --comment-rail-width: 28px;
    }
}

/* ===== SOURCE: blog-ai-consent-banner.css ===== */
/* R103 FIX15B — invitation non bloquante au consentement de participation IA. */
.club-ai-consent-banner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin: 0 0 14px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--bs-primary, #0d6efd) 24%, var(--bs-border-color, #dee2e6));
    border-radius: 16px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--bs-primary, #0d6efd) 7%, var(--bs-body-bg, #fff)), var(--bs-body-bg, #fff));
    color: var(--bs-body-color, #172033);
    box-shadow: 0 8px 28px rgba(15, 23, 42, .06);
}
.club-ai-consent-banner__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: color-mix(in srgb, var(--bs-primary, #0d6efd) 13%, transparent);
    font-size: 1.15rem;
}
.club-ai-consent-banner__copy { min-width: 0; }
.club-ai-consent-banner__copy strong { display: block; font-size: .96rem; line-height: 1.3; }
.club-ai-consent-banner__copy p { margin: 4px 0 0; color: var(--bs-secondary-color, #667085); font-size: .84rem; line-height: 1.45; }
.club-ai-consent-banner__feedback { min-height: 0; margin-top: 4px; color: var(--bs-primary, #0d6efd); font-size: .78rem; font-weight: 700; }
.club-ai-consent-banner__feedback:empty { display: none; }
.club-ai-consent-banner__actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.club-ai-consent-banner__actions .btn { white-space: nowrap; }
.club-ai-consent-banner.is-success { border-color: rgba(25, 135, 84, .35); background: color-mix(in srgb, #198754 7%, var(--bs-body-bg, #fff)); }
.club-ai-consent-banner.is-declined { border-color: rgba(100,116,139,.32); background: var(--bs-body-bg, #fff); }
@media (max-width: 760px) {
    .club-ai-consent-banner { grid-template-columns: auto minmax(0, 1fr); align-items: start; padding: 13px; }
    .club-ai-consent-banner__actions { grid-column: 1 / -1; justify-content: flex-start; padding-left: 0; }
    .club-ai-consent-banner__actions .btn-link { padding-left: .25rem; }
}
:root[data-theme="dark"] .club-ai-consent-banner { box-shadow: none; }

/* ===== SOURCE: blog-comment-image-viewer.css ===== */
/* Visionneuse des images jointes aux commentaires. */
.blog-comment-attachment-link {
    appearance: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: zoom-in;
}

.blog-comment-attachment-link:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .48);
    outline-offset: 3px;
    border-radius: 14px;
}

.comment-image-viewer[hidden],
.comment-image-viewer.is-hidden {
    display: none !important;
}

.comment-image-viewer {
    position: fixed;
    inset: 0;
    z-index: var(--club-ui-layer-topmost, 2147483000);
    display: grid;
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 12px;
    overflow: hidden;
    place-items: center;
    border: 0;
    color: inherit;
    background: rgba(236, 240, 246, .74);
    backdrop-filter: blur(2.5px);
    -webkit-backdrop-filter: blur(2.5px);
    isolation: isolate;
    pointer-events: auto;
    overscroll-behavior: contain;
}

.comment-image-viewer::backdrop {
    background: transparent;
}

.comment-image-viewer:not([open]):not(.is-open) {
    pointer-events: none;
}

.comment-image-viewer-dialog {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
    width: min(1780px, calc(100vw - 24px));
    height: min(1080px, calc(100dvh - 24px));
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .2);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 72px rgba(15, 23, 42, .28);
}

.comment-image-viewer-dialog:focus {
    outline: none;
}

.comment-image-viewer-stage {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: #030712;
}

.comment-image-viewer-stagebar {
    position: absolute;
    z-index: 4;
    top: 14px;
    right: 14px;
    left: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
}

.comment-image-viewer-close,
.comment-image-viewer-toolbar {
    pointer-events: auto;
}

.comment-image-viewer-close,
.comment-image-viewer-tool {
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(15, 23, 42, .72);
    color: #fff;
    box-shadow: 0 7px 20px rgba(0, 0, 0, .25);
    backdrop-filter: blur(5px);
}

.comment-image-viewer-close {
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
    font-size: 1.65rem;
    line-height: 1;
}

.comment-image-viewer-toolbar {
    display: flex;
    gap: 6px;
    padding: 5px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .58);
    box-shadow: 0 7px 20px rgba(0, 0, 0, .2);
    backdrop-filter: blur(5px);
}

.comment-image-viewer-tool {
    min-width: 36px;
    height: 34px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 1.1rem;
    font-weight: 700;
}

.comment-image-viewer-tool.is-wide {
    min-width: 70px;
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
}

.comment-image-viewer-close:hover,
.comment-image-viewer-close:focus-visible,
.comment-image-viewer-tool:hover,
.comment-image-viewer-tool:focus-visible {
    border-color: rgba(255, 255, 255, .65);
    background: rgba(30, 41, 59, .94);
    outline: none;
}

.comment-image-viewer-viewport {
    position: relative;
    grid-row: 1 / 4;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    cursor: default;
}

.comment-image-viewer-viewport.is-zoomed {
    cursor: grab;
}

.comment-image-viewer-viewport.is-dragging {
    cursor: grabbing;
}

.comment-image-viewer-viewport:focus-visible {
    outline: 2px solid rgba(96, 165, 250, .75);
    outline-offset: -3px;
}

.comment-image-viewer-image {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    max-width: calc(100% - 30px);
    max-height: calc(100% - 30px);
    width: auto;
    height: auto;
    object-fit: contain;
    transform: translate3d(0, 0, 0) scale(1);
    transform-origin: center center;
    translate: -50% -50%;
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
}

.comment-image-viewer-loading,
.comment-image-viewer-error {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: min(460px, calc(100% - 40px));
    padding: 12px 18px;
    border-radius: 12px;
    background: rgba(15, 23, 42, .78);
    color: #fff;
    text-align: center;
    transform: translate(-50%, -50%);
}

.comment-image-viewer-help {
    position: absolute;
    z-index: 3;
    bottom: 13px;
    left: 50%;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .65);
    color: rgba(255, 255, 255, .9);
    font-size: .76rem;
    transform: translateX(-50%);
    pointer-events: none;
    white-space: nowrap;
}

.comment-image-viewer-panel {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    border-left: 1px solid #e2e8f0;
    background: #fff;
}

.comment-image-viewer-panel-header {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 20px 18px 16px;
    border-bottom: 1px solid #e2e8f0;
}

.comment-image-viewer-avatar {
    display: inline-grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    overflow: hidden;
    border: 2px solid rgba(37, 99, 235, .18);
    border-radius: 50%;
    background: #dbeafe;
    color: #1d4ed8;
    font-weight: 800;
}

.comment-image-viewer-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.comment-image-viewer-identity {
    min-width: 0;
}

.comment-image-viewer-author {
    display: block;
    overflow: hidden;
    color: #111827;
    font-size: .98rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comment-image-viewer-date {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: .78rem;
    line-height: 1.35;
}

.comment-image-viewer-panel-body {
    min-height: 0;
    padding: 20px 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.comment-image-viewer-kicker {
    margin-bottom: 10px;
    color: #64748b;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.comment-image-viewer-comment {
    color: #1f2937;
    font-family: var(--bs-body-font-family, system-ui, -apple-system, "Segoe UI", sans-serif);
    font-size: .96rem;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.comment-image-viewer-comment.is-empty {
    color: #94a3b8;
    font-style: italic;
}

.comment-image-viewer-open {
    overscroll-behavior: none;
}

:root[data-theme="dark"] .comment-image-viewer {
    background: rgba(15, 23, 42, .7);
}

:root[data-theme="dark"] .comment-image-viewer-dialog,
:root[data-theme="dark"] .comment-image-viewer-panel {
    background: #111827;
    color: #e5e7eb;
}

:root[data-theme="dark"] .comment-image-viewer-panel {
    border-left-color: #334155;
}

:root[data-theme="dark"] .comment-image-viewer-panel-header {
    border-bottom-color: #334155;
}

:root[data-theme="dark"] .comment-image-viewer-author,
:root[data-theme="dark"] .comment-image-viewer-comment {
    color: #f1f5f9;
}

:root[data-theme="dark"] .comment-image-viewer-date,
:root[data-theme="dark"] .comment-image-viewer-kicker {
    color: #94a3b8;
}

@media (max-width: 920px) {
    .comment-image-viewer {
        padding: 0;
    }

    .comment-image-viewer-dialog {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr) auto;
        width: 100vw;
        height: 100dvh;
        max-width: none;
        max-height: none;
        border: 0;
        border-radius: 0;
    }

    .comment-image-viewer-panel {
        max-height: 34dvh;
        border-top: 1px solid #e2e8f0;
        border-left: 0;
    }

    .comment-image-viewer-panel-header {
        padding: 11px 14px 9px;
    }

    .comment-image-viewer-panel-body {
        padding: 10px 14px 15px;
    }

    .comment-image-viewer-help {
        display: none;
    }
}

@media (max-width: 520px) {
    .comment-image-viewer-stagebar {
        top: 9px;
        right: 9px;
        left: 9px;
    }

    .comment-image-viewer-close {
        width: 38px;
        height: 38px;
    }

    .comment-image-viewer-tool {
        min-width: 32px;
        height: 31px;
        padding: 0 8px;
    }

    .comment-image-viewer-tool.is-wide {
        min-width: 58px;
    }

    .comment-image-viewer-image {
        max-width: calc(100% - 12px);
        max-height: calc(100% - 12px);
    }
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .comment-image-viewer {
        background: rgba(238, 242, 247, .96);
    }

    :root[data-theme="dark"] .comment-image-viewer {
        background: rgba(15, 23, 42, .96);
    }
}

/* ===== SOURCE: messaging-image-viewer.css ===== */
.messaging-image-viewer {
    width: 100vw;
    max-width: none;
    height: 100vh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(3, 8, 20, .97);
    color: #fff;
}
.messaging-image-viewer::backdrop { background: rgba(3, 8, 20, .88); }
.messaging-image-viewer-shell { position: relative; width: 100%; height: 100%; overflow: hidden; }
.messaging-image-viewer-toolbar {
    position: absolute; inset: 0 0 auto; z-index: 4; min-height: 62px; padding: .65rem 1rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    background: linear-gradient(180deg, rgba(3, 8, 20, .9), rgba(3, 8, 20, 0));
}
.messaging-image-viewer-actions { display: flex; align-items: center; gap: .45rem; }
.messaging-image-viewer-actions button,
.messaging-image-viewer-actions a {
    min-width: 42px; min-height: 42px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center; padding: .4rem .75rem;
    background: rgba(15,23,42,.72); color: #fff; text-decoration: none; cursor: pointer;
}
.messaging-image-viewer-actions button:hover,
.messaging-image-viewer-actions a:hover { background: rgba(51,65,85,.92); }
.messaging-image-viewer-stage {
    position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden;
    touch-action: none; cursor: default; user-select: none;
}
.messaging-image-viewer-stage.is-zoomed { cursor: grab; }
.messaging-image-viewer-stage.is-dragging { cursor: grabbing; }
.messaging-image-viewer-stage img {
    max-width: 92vw; max-height: 88vh; object-fit: contain; transform-origin: center center;
    transition: transform 80ms linear; pointer-events: none; -webkit-user-drag: none;
}
.messaging-image-viewer-stage.is-dragging img { transition: none; }
.messaging-image-viewer-nav {
    position: absolute; top: 50%; z-index: 3; transform: translateY(-50%); width: 52px; height: 72px;
    border: 0; border-radius: .8rem; background: rgba(15,23,42,.62); color: #fff; font-size: 2.8rem;
}
.messaging-image-viewer-nav.is-prev { left: 1rem; }
.messaging-image-viewer-nav.is-next { right: 1rem; }
.messaging-image-viewer-nav:hover { background: rgba(51,65,85,.92); }
.messaging-image-viewer-counter { font-weight: 700; text-shadow: 0 1px 4px #000; }
html.messaging-image-viewer-open { overflow: hidden; }
@media (max-width: 700px) {
    .messaging-image-viewer-toolbar { align-items: flex-start; }
    .messaging-image-viewer-actions { flex-wrap: wrap; justify-content: flex-end; }
    .messaging-image-viewer-actions a { font-size: 0; width: 42px; padding: 0; }
    .messaging-image-viewer-actions a::before { content: '⇩'; font-size: 1.2rem; }
    .messaging-image-viewer-nav { width: 42px; height: 58px; }
    .messaging-image-viewer-nav.is-prev { left: .35rem; }
    .messaging-image-viewer-nav.is-next { right: .35rem; }
}

/* ClubOS 8.14.0-B.3.2.4 — visionneuse médias commune. */
.messaging-image-viewer {
    z-index: 2147483000;
    overscroll-behavior: contain;
}
.messaging-image-viewer-toolbar {
    padding-top: max(.65rem, env(safe-area-inset-top));
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
}
.messaging-image-viewer-stage:focus-visible {
    outline: 2px solid rgba(255,255,255,.75);
    outline-offset: -4px;
}
.messaging-image-viewer-nav[hidden] { display: none !important; }
.post-display-media-image,
.blog-modal-image,
.post-display-reading-gallery-item img {
    cursor: zoom-in;
}
@media (max-width: 700px) {
    .messaging-image-viewer-stage img {
        max-width: 100vw;
        max-height: 100dvh;
    }
    .messaging-image-viewer-toolbar {
        min-height: 58px;
        gap: .45rem;
    }
    .messaging-image-viewer-actions {
        flex-wrap: nowrap;
        gap: .3rem;
    }
    .messaging-image-viewer-actions button,
    .messaging-image-viewer-actions a {
        min-width: 40px;
        min-height: 40px;
        padding: .3rem .55rem;
    }
}
@media (max-height: 520px) and (orientation: landscape) {
    .messaging-image-viewer-toolbar {
        min-height: 48px;
        padding-top: max(.3rem, env(safe-area-inset-top));
        padding-bottom: .3rem;
    }
    .messaging-image-viewer-actions button,
    .messaging-image-viewer-actions a {
        min-width: 38px;
        min-height: 38px;
    }
    .messaging-image-viewer-stage img {
        max-height: 100dvh;
    }
}


/* ClubOS 8.14.0-B.3.2.5 — couche interactive réellement prioritaire. */
.messaging-image-viewer,
.messaging-image-viewer[open],
.messaging-image-viewer-shell {
    pointer-events: auto !important;
}
.messaging-image-viewer-toolbar {
    z-index: 30;
    pointer-events: none;
}
.messaging-image-viewer-counter,
.messaging-image-viewer-actions,
.messaging-image-viewer-actions > * {
    pointer-events: auto;
}
.messaging-image-viewer-stage {
    z-index: 10;
    pointer-events: auto !important;
}
.messaging-image-viewer-nav {
    z-index: 20;
    pointer-events: auto;
}

/* ===== SOURCE: blog-comment-history.css ===== */
/* ClubOS 6.9.1 — historique des modifications de commentaires. */
.blog-comment-history-dialog {
    width: min(680px, calc(100vw - 32px));
    max-height: min(82vh, 780px);
    padding: 0;
    border: 0;
    border-radius: 18px;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #111827);
    box-shadow: 0 28px 80px rgba(2, 6, 23, .38);
    overflow: hidden;
}
.blog-comment-history-dialog::backdrop {
    background: rgba(15, 23, 42, .62);
    backdrop-filter: blur(2px);
}
.blog-comment-history-shell {
    display: flex;
    flex-direction: column;
    max-height: min(82vh, 780px);
}
.blog-comment-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--bs-border-color, #d9dee7);
}
.blog-comment-history-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 750;
}
.blog-comment-history-close {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(127, 127, 127, .14);
    color: inherit;
    font-size: 1.35rem;
    line-height: 1;
}
.blog-comment-history-close:hover,
.blog-comment-history-close:focus-visible {
    background: rgba(127, 127, 127, .24);
    outline: 2px solid rgba(37, 99, 235, .35);
    outline-offset: 2px;
}
.blog-comment-history-body {
    overflow: auto;
    padding: 1rem 1.1rem .6rem;
}
.blog-comment-history-state {
    padding: 1.5rem .5rem;
    color: var(--bs-secondary-color, #64748b);
    text-align: center;
}
.blog-comment-history-item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: .65rem;
    margin-bottom: .9rem;
}
.blog-comment-history-avatar {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    overflow: hidden;
    background: #dbeafe;
    color: #1e3a8a;
    font-weight: 750;
}
.blog-comment-history-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.blog-comment-history-bubble {
    min-width: 0;
    padding: .65rem .78rem;
    border-radius: 17px;
    background: #f0f2f5;
}
.blog-comment-history-author {
    display: block;
    margin-bottom: .15rem;
    font-weight: 750;
}
.blog-comment-history-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.38;
}
.blog-comment-history-text.is-collapsed {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
}
.blog-comment-history-more {
    margin-top: .2rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-weight: 750;
}
.blog-comment-history-more:hover,
.blog-comment-history-more:focus-visible {
    text-decoration: underline;
}
.blog-comment-history-date {
    display: block;
    margin-top: .25rem;
    color: var(--bs-secondary-color, #64748b);
    font-size: .78rem;
}
.blog-comment-history-current {
    margin-left: .4rem;
    color: var(--bs-primary, #2563eb);
    font-weight: 700;
}
.blog-comment-history-footer {
    padding: .75rem 1.1rem 1rem;
    border-top: 1px solid var(--bs-border-color, #d9dee7);
    color: var(--bs-secondary-color, #64748b);
    font-size: .8rem;
    font-weight: 600;
}
:root[data-theme="dark"] .blog-comment-history-bubble {
    background: #263246;
}
@media (max-width: 575.98px) {
    .blog-comment-history-dialog {
        width: calc(100vw - 16px);
        max-height: 90vh;
        border-radius: 14px;
    }
    .blog-comment-history-shell { max-height: 90vh; }
    .blog-comment-history-body { padding-inline: .75rem; }
}

/* ===== SOURCE: blog-user-block-dialog.css ===== */
.blog-user-block-dialog {
    width: min(540px, calc(100vw - 32px));
    max-height: min(720px, calc(100vh - 32px));
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #172033);
    box-shadow: 0 24px 80px rgba(15, 23, 42, .32);
    overflow: hidden;
}

.blog-user-block-dialog::backdrop {
    background: rgba(15, 23, 42, .58);
    backdrop-filter: blur(2px);
}

.blog-user-block-dialog-shell {
    display: flex;
    flex-direction: column;
    max-height: inherit;
    margin: 0;
}

.blog-user-block-dialog-header,
.blog-user-block-dialog-footer {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-color: var(--bs-border-color, #dfe3ea);
}

.blog-user-block-dialog-header {
    justify-content: center;
    position: relative;
    border-bottom: 1px solid var(--bs-border-color, #dfe3ea);
}

.blog-user-block-dialog-header h2 {
    margin: 0;
    font-size: 1.22rem;
    font-weight: 750;
}

.blog-user-block-dialog-close {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--bs-tertiary-bg, #eef1f5);
    color: inherit;
    font-size: 1.85rem;
    line-height: 1;
}

.blog-user-block-dialog-body {
    overflow: auto;
    padding: 26px 20px 20px;
}

.blog-user-block-dialog-identity {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 1.18rem;
}

.blog-user-block-dialog-avatar {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--bs-tertiary-bg, #e7ecf3);
    font-size: 1.45rem;
    font-weight: 700;
}

.blog-user-block-dialog-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-user-block-dialog-summary {
    margin: 0 auto 22px;
    max-width: 460px;
    text-align: center;
    color: var(--bs-secondary-color, #667085);
    line-height: 1.42;
}

.blog-user-block-dialog-choice {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 10px;
    padding: 14px 0;
    border-top: 1px solid var(--bs-border-color, #dfe3ea);
    border-bottom: 1px solid var(--bs-border-color, #dfe3ea);
}

.blog-user-block-dialog-choice-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bs-tertiary-bg, #eef1f5);
    color: #111827;
}

.blog-user-block-dialog-choice span:nth-child(2) {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.blog-user-block-dialog-choice small {
    color: var(--bs-secondary-color, #667085);
}

.blog-user-block-dialog-radio {
    width: 20px;
    height: 20px;
    border: 5px solid #0d6efd;
    border-radius: 50%;
}

.blog-user-block-dialog-warning {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--bs-tertiary-bg, #f3f5f8);
}

.blog-user-block-dialog-warning p {
    margin: 4px 0 0;
    color: var(--bs-secondary-color, #667085);
    line-height: 1.42;
}

.blog-user-block-dialog-error {
    margin: 14px 0 0;
    color: var(--bs-danger, #dc3545);
    font-weight: 600;
}

.blog-user-block-dialog-footer {
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid var(--bs-border-color, #dfe3ea);
}

.blog-user-block-dialog-footer .btn {
    min-width: 112px;
}

@media (max-width: 560px) {
    .blog-user-block-dialog {
        width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
        border-radius: 14px;
    }

    .blog-user-block-dialog-body {
        padding: 22px 16px 16px;
    }

    .blog-user-block-dialog-footer {
        padding: 14px 16px;
    }
}

/* ===== SOURCE: blog-post-display-media.css ===== */
.post-display-overlay.is-mode-media {
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
        max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    background: rgba(245, 247, 250, .64);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.is-mode-media .post-display-dialog {
    position: relative;
    width: min(1560px, calc(100vw - 32px));
    height: min(94dvh, 1040px);
    max-height: 94dvh;
    overflow: hidden;
    background: #fff;
}

.is-mode-media .post-display-header {
    position: absolute;
    z-index: 12;
    top: 0;
    right: 0;
    left: 0;
    min-height: 68px;
    padding: 10px 14px;
    color: #f8fafc;
    border: 0;
    background: transparent;
    pointer-events: none;
}

.is-mode-media .post-display-header > * {
    pointer-events: auto;
}

.is-mode-media .post-display-heading {
    display: flex;
    align-items: center;
}

.is-mode-media .post-display-mode-label,
.is-mode-media .blog-post-modal-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.post-display-media-brand,
.post-display-media-account-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.post-display-media-close,
.post-display-media-round-control {
    display: grid;
    position: relative;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    color: #fff;
    background: rgba(15, 23, 42, .78);
    box-shadow: 0 5px 18px rgba(0, 0, 0, .2);
    text-decoration: none;
}

.post-display-media-close {
    font-size: 1.65rem;
    line-height: 1;
}


.post-display-media-notifications-toggle {
    color: #9a6700;
    border-color: rgba(148, 163, 184, .32);
    background: rgba(248, 250, 252, .92);
    box-shadow: 0 4px 14px rgba(15, 23, 42, .12);
}

.post-display-media-notifications-toggle:hover,
.post-display-media-notifications-toggle:focus-visible {
    color: #7c4f00;
    background: #fff;
}

.post-display-media-close:hover,
.post-display-media-close:focus-visible,
.post-display-media-round-control:hover,
.post-display-media-round-control:focus-visible {
    color: #fff;
    background: rgba(51, 65, 85, .94);
    outline: 3px solid rgba(147, 197, 253, .7);
    outline-offset: 2px;
}

.post-display-media-logo {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: #2563eb;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .2);
}

.post-display-media-logo img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.post-display-media-round-control img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.post-display-media-notification-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 18px;
    padding: 1px 5px;
    border: 2px solid #0f172a;
    border-radius: 999px;
    color: #fff;
    background: #dc2626;
    font-size: .68rem;
    font-weight: 800;
    text-align: center;
}

.is-mode-media .post-display-mode-switch {
    color: #fff;
    border-color: rgba(255, 255, 255, .32);
    background: rgba(15, 23, 42, .78);
}

.is-mode-media .post-display-progress {
    position: absolute;
    z-index: 13;
    top: 0;
    right: 0;
    left: 0;
    background: transparent;
}

.is-mode-media .post-display-content,
.is-mode-media .blog-modal-post,
.is-mode-media .post-display-layout {
    height: 100%;
    min-height: 0;
}

.is-mode-media .post-display-content {
    flex: 1 1 auto;
    overflow: hidden;
    scrollbar-gutter: auto;
}

.is-mode-media .post-display-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 400px);
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    padding: 0;
}

.post-display-media-stage {
    display: flex;
    min-width: 0;
    min-height: 0;
    height: 100%;
    align-items: center;
    justify-content: center;
    padding: 18px;
    overflow: hidden;
    background:
        radial-gradient(circle at center, rgba(30, 41, 59, .32), transparent 68%),
        #03060b;
}

.post-display-media-image {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center center;
}

.post-display-media-empty {
    color: #94a3b8;
}

.post-display-media-panel {
    display: flex;
    min-width: 0;
    min-height: 0;
    height: 100%;
    flex-direction: column;
    color: #172033;
    background: #fff;
    box-shadow: -10px 0 28px rgba(2, 6, 23, .12);
}

.post-display-media-panel-header {
    flex: 0 0 auto;
    min-height: 112px;
    padding: 76px 18px 10px;
    border-bottom: 1px solid rgba(148, 163, 184, .25);
}

.post-display-media-scroll {
    flex: 1 1 auto;
    min-height: 0;
    padding: 16px 18px 28px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.post-display-media-dock {
    position: relative;
    z-index: 5;
    flex: 0 0 auto;
    min-width: 0;
    border-top: 1px solid rgba(148, 163, 184, .32);
    background: #fff;
    box-shadow: 0 -8px 22px rgba(15, 23, 42, .06);
}

.post-display-media-panel .post-display-article-title {
    margin-bottom: 12px;
    font-size: clamp(1.35rem, 1.8vw, 2rem);
}

.post-display-media-text {
    position: relative;
    margin: 14px 0;
    line-height: 1.55;
}

.post-display-media-text.is-clipped {
    max-height: var(--post-media-text-limit);
    overflow: hidden;
    mask-image: linear-gradient(to bottom, #000 80%, transparent);
}

.post-display-read-full {
    margin: 0 0 18px;
}

.post-display-media-scroll .blog-modal-comments {
    margin-top: 12px !important;
    padding-top: 12px;
    padding-bottom: 16px;
    border-top: 1px solid rgba(148, 163, 184, .3);
}

.is-mode-media .post-display-footer {
    width: 100%;
    max-height: none;
    margin: 0;
    overflow: visible;
    background: #fff;
}

.post-display-media-dock .blog-modal-comment-bar-inner {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.post-display-media-dock .blog-modal-comment-form,
.post-display-media-dock .blog-modal-comment-form > .d-flex,
.post-display-media-dock .blog-modal-comment-form .form-control {
    min-width: 0;
}

.post-display-media-dock .blog-modal-comment-form > .d-flex:last-child {
    flex: 0 0 auto;
}

:root[data-theme="dark"] .post-display-overlay.is-mode-media {
    background: rgba(15, 23, 42, .54);
}

:root[data-theme="dark"] .post-display-media-panel,
:root[data-theme="dark"] .post-display-media-dock,
:root[data-theme="dark"] .is-mode-media .post-display-footer {
    color: #e2e8f0;
    background: #111a2c;
}

@media (max-width: 900px) {
    .post-display-overlay.is-mode-media {
        padding: 0;
    }

    .is-mode-media .post-display-dialog {
        width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }

    .is-mode-media .post-display-layout {
        display: flex;
        height: 100%;
        flex-direction: column;
    }

    .post-display-media-stage {
        min-height: 0;
        flex: 0 0 42%;
        padding: max(12px, env(safe-area-inset-top)) 10px 10px;
    }

    .post-display-media-panel {
        min-height: 0;
        flex: 1 1 58%;
    }

    .post-display-media-panel-header {
        min-height: 0;
        padding: 10px 14px;
    }

    .post-display-media-scroll {
        padding: 14px;
    }

    .post-display-media-dock {
        max-height: 44dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .post-display-media-dock .blog-modal-comment-form > .d-flex:last-child {
        position: sticky;
        bottom: 0;
        padding-top: 6px;
        background: inherit;
    }

    .is-mode-media .post-display-header {
        min-height: 58px;
        padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right))
            8px max(8px, env(safe-area-inset-left));
    }

    .post-display-media-logo,
    .post-display-media-close,
    .post-display-media-round-control {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .post-display-media-logo img {
        width: 31px;
        height: 31px;
    }

    .post-display-media-account-controls {
        gap: 6px;
    }

    .is-mode-media .post-display-mode-switch {
        max-width: 108px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .post-display-overlay.is-mode-media {
        background: rgba(245, 247, 250, .82);
    }

    :root[data-theme="dark"] .post-display-overlay.is-mode-media {
        background: rgba(15, 23, 42, .7);
    }
}


/* Version 2026.07.26.3 : panneau de notifications réel dans le chrome média. */
.post-display-media-notification-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.post-display-media-notifications-toggle {
    border: 1px solid rgba(255, 255, 255, .22);
}

.post-display-media-notifications-panel {
    z-index: 10040 !important;
    top: calc(100% + 10px) !important;
    right: 0 !important;
    left: auto !important;
    width: min(420px, calc(100vw - 32px)) !important;
    max-height: min(72vh, 680px);
    overflow-y: auto;
    color: #172033;
    background: #fff;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .24) !important;
}

:root[data-theme="dark"] .post-display-media-notifications-panel {
    color: #e2e8f0;
    background: #111a2c;
    border-color: #334155 !important;
}

@media (max-width: 600px) {
    .post-display-media-notifications-panel {
        position: fixed !important;
        top: max(62px, env(safe-area-inset-top)) !important;
        right: 10px !important;
        left: 10px !important;
        width: auto !important;
        max-height: calc(100dvh - 82px);
    }
}

/* Version 2026.07.27.6.4 : scène média plus compacte et adaptative sur téléphone. */
@media (max-width: 900px) {
    .post-display-media-stage {
        height: clamp(225px, 34dvh, 310px);
        flex: 0 0 auto;
        padding: max(62px, calc(env(safe-area-inset-top) + 54px)) 8px 8px;
    }

    .post-display-media-stage.is-landscape-media {
        height: clamp(215px, 31dvh, 285px);
    }

    .post-display-media-stage.is-square-media {
        height: clamp(270px, 38dvh, 360px);
    }

    .post-display-media-stage.is-portrait-media {
        height: clamp(320px, 46dvh, 460px);
    }

    .post-display-media-image {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
    }

    .post-display-media-panel {
        flex: 1 1 auto;
    }

    .post-display-media-scroll {
        min-height: 0;
    }

    .post-display-media-dock {
        max-height: min(40dvh, 340px);
    }
}

@media (max-width: 430px) {
    .post-display-media-stage {
        height: clamp(205px, 32dvh, 275px);
    }

    .post-display-media-stage.is-landscape-media {
        height: clamp(205px, 29dvh, 255px);
    }

    .post-display-media-stage.is-square-media {
        height: clamp(255px, 36dvh, 325px);
    }

    .post-display-media-stage.is-portrait-media {
        height: clamp(300px, 44dvh, 410px);
    }

    .post-display-media-panel-header {
        padding: 8px 12px;
    }

    .post-display-media-scroll {
        padding: 12px;
    }
}


/* Version 2026.07.27.6.5 : toute la prévisualisation ouvre le lecteur long. */
.post-display-media-article-preview {
    padding: 2px 0 14px;
    cursor: pointer;
    border-radius: 10px;
}

.post-display-media-article-preview:hover {
    background: rgba(37, 99, 235, .035);
}

.post-display-media-article-preview:focus-visible {
    outline: 2px solid rgba(37, 99, 235, .55);
    outline-offset: 4px;
}

.post-display-media-article-preview .post-display-read-full,
.post-display-media-article-preview a,
.post-display-media-article-preview button {
    cursor: pointer;
}

/* ClubOS 8.12.0 — navigation dans la galerie publique d'un profil. */
.post-display-profile-gallery-nav {
    position: fixed;
    top: 50%;
    z-index: calc(var(--z-blog-modal, 110080) + 8);
    transform: translateY(-50%);
    width: clamp(3.1rem, 4.4vw, 4.25rem);
    height: clamp(3.1rem, 4.4vw, 4.25rem);
    border: 1px solid rgba(255,255,255,.75);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.9);
    color: #24324a;
    box-shadow: 0 12px 30px rgba(0,0,0,.28);
    font-size: clamp(2.3rem, 4vw, 3.4rem);
    line-height: 1;
    cursor: pointer;
}
.post-display-profile-gallery-nav:hover,
.post-display-profile-gallery-nav:focus-visible { background: #fff; transform: translateY(-50%) scale(1.04); }
.post-display-profile-gallery-nav.is-prev { left: clamp(.6rem, 1.6vw, 1.8rem); }
.post-display-profile-gallery-nav.is-next { right: clamp(.6rem, 1.6vw, 1.8rem); }
:root[data-theme="dark"] .post-display-profile-gallery-nav {
    background: rgba(21,31,50,.92);
    border-color: rgba(180,205,240,.45);
    color: #f8fafc;
}
@media (max-width: 720px) {
    .post-display-profile-gallery-nav { width: 2.7rem; height: 2.7rem; font-size: 2.15rem; }
    .post-display-profile-gallery-nav.is-prev { left: .3rem; }
    .post-display-profile-gallery-nav.is-next { right: .3rem; }
}

:root[data-theme="dark"] .is-mode-media .post-display-dialog {
    background: #111a2c;
}

/* R116 R2 FIX1 — le menu de publication suit la croix en mode média. */
.post-display-media-brand .post-display-header-menu-host {
    display: flex;
    align-items: center;
    position: relative;
}
.post-display-media-brand .post-display-header-menu-host .blog-post-card-menu-toggle,
.post-display-media-brand .post-display-header-menu-host button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
}


/* R119.4A DESK5C FIX15P3FIX8 — media modal chrome restored + day/night controls. */
.post-display-media-header .post-display-heading,
.post-display-media-header .post-display-mode-label,
.post-display-media-header #blogPostModalTitle {
    display: none !important;
}
.post-display-media-header {
    justify-content: flex-end;
    min-height: 0;
    padding: 14px 16px 0;
    border-bottom: 0;
    background: transparent;
}
.post-display-media-header-actions {
    width: auto;
    margin-left: auto;
    gap: 10px;
}
.post-display-media-header-actions .post-display-mode-switch {
    display: none !important;
}
.post-display-media-header-actions .post-display-header-menu-host {
    display: flex;
    align-items: center;
    position: relative;
}
.post-display-media-header-actions .post-display-header-menu-host .blog-post-card-menu-toggle,
.post-display-media-header-actions .post-display-header-menu-host button,
.post-display-media-close {
    display: grid;
    width: 44px;
    height: 44px;
    min-width: 44px;
    place-items: center;
    border: 1px solid rgba(100, 116, 139, .24);
    border-radius: 50%;
    color: #0f172a;
    background: rgba(241, 245, 249, .96);
    box-shadow: 0 6px 18px rgba(15, 23, 42, .13);
}
.post-display-media-header-actions .post-display-header-menu-host .blog-post-card-menu-toggle:hover,
.post-display-media-header-actions .post-display-header-menu-host .blog-post-card-menu-toggle:focus-visible,
.post-display-media-close:hover,
.post-display-media-close:focus-visible {
    color: #020617;
    background: #e2e8f0;
    outline: 3px solid rgba(96, 165, 250, .55);
    outline-offset: 2px;
}
:root[data-theme="dark"] .post-display-media-header-actions .post-display-header-menu-host .blog-post-card-menu-toggle,
:root[data-theme="dark"] .post-display-media-header-actions .post-display-header-menu-host button,
:root[data-theme="dark"] .post-display-media-close {
    color: #f8fafc;
    border-color: rgba(255, 255, 255, .24);
    background: rgba(15, 23, 42, .86);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}
:root[data-theme="dark"] .post-display-media-header-actions .post-display-header-menu-host .blog-post-card-menu-toggle:hover,
:root[data-theme="dark"] .post-display-media-header-actions .post-display-header-menu-host .blog-post-card-menu-toggle:focus-visible,
:root[data-theme="dark"] .post-display-media-close:hover,
:root[data-theme="dark"] .post-display-media-close:focus-visible {
    color: #fff;
    background: rgba(51, 65, 85, .98);
}
.post-display-media-stage.has-external-embed.is-youtube-embed {
    padding: 24px;
    background: #edf2f7;
}
.post-display-media-stage.has-external-embed.is-youtube-embed .post-display-media-stage-embed .cab-post-embed {
    overflow: hidden;
    border: 1px solid rgba(100, 116, 139, .22);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(15, 23, 42, .14), 0 0 0 1px rgba(255,255,255,.75);
}
.post-display-media-stage.has-external-embed.is-youtube-embed .cab-post-embed-visual,
.post-display-media-stage.has-external-embed.is-youtube-embed .cab-post-embed-player {
    background: #dfe6ee;
}
:root[data-theme="dark"] .post-display-media-stage.has-external-embed.is-youtube-embed {
    background: #d8e0e8;
}

/* ===== SOURCE: blog-post-display-long.css ===== */
.is-mode-long.post-display-overlay {
    padding: var(--long-reader-modal-margin);
    background: rgba(245, 247, 250, .7);
    -webkit-backdrop-filter: blur(2.5px);
    backdrop-filter: blur(2.5px);
}

.is-mode-long .post-display-dialog {
    width: min(calc(100vw - (2 * var(--long-reader-modal-margin))), 1520px);
    height: calc(100vh - (2 * var(--long-reader-modal-margin)));
    max-width: 1520px;
    max-height: none;
    margin: auto;
}

.is-mode-long .post-display-header {
    position: sticky;
    top: 0;
}

.is-mode-long .post-display-layout {
    grid-template-columns: minmax(170px, 210px) minmax(0, 1fr) minmax(310px, 360px);
    grid-template-rows: minmax(0, 1fr);
    justify-content: center;
    height: 100%;
    min-height: 0;
    padding: 18px;
}


/* AV.1 R7 — un article sans H2/H3 n'a pas de sommaire : ne jamais réserver
 * une colonne vide qui ferait tomber le lecteur dans les 165–190 px du TOC. */
.is-mode-long .post-display-layout.post-display-layout-no-toc {
    grid-template-columns: minmax(0, 1fr) minmax(310px, 360px);
}

.is-mode-long .post-display-layout.post-display-layout-no-toc .post-display-reader {
    max-width: 980px;
}

.is-mode-long .blog-modal-post {
    height: 100%;
    min-height: 0;
}

.is-mode-long .post-display-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.is-mode-long .post-display-reader {
    position: relative;
    width: 100%;
    max-width: 860px;
    min-height: 0;
    padding-right: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.is-mode-long .post-display-reader .blog-modal-content-body {
    max-width: 78ch;
    font-family: var(--bs-body-font-family, system-ui, -apple-system, "Segoe UI", sans-serif);
    font-size: 1rem;
    line-height: 1.65;
}

.is-mode-long .post-display-reader .blog-modal-content-body h2,
.is-mode-long .post-display-reader .blog-modal-content-body h3 {
    scroll-margin-top: 92px;
}

.is-mode-long .post-display-reader .blog-modal-content-body p {
    margin: 0 0 .9rem;
}

.is-mode-long .post-display-reader .blog-modal-content-body h2 {
    margin: 1.45rem 0 .75rem;
    font-size: 1.55rem;
    line-height: 1.25;
}

.is-mode-long .post-display-reader .blog-modal-content-body h3 {
    margin: 1.2rem 0 .65rem;
    font-size: 1.28rem;
    line-height: 1.3;
}

.post-display-toc {
    position: static;
    align-self: stretch;
    height: 100%;
    min-height: 0;
    max-height: none;
    padding: 12px;
    overflow: auto;
    border: 1px solid #d7dde6;
    border-radius: 12px;
    background: #eef1f5;
    box-shadow: inset -1px 0 0 rgba(148, 163, 184, .12);
}

.is-mode-long .post-display-interactions {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    height: 100%;
    min-height: 0;
    max-height: none;
    padding: 4px 0 0 16px;
    overflow: hidden;
}

.is-mode-long .post-display-interactions .blog-modal-comments {
    flex: 1 1 auto;
    min-height: 0;
    padding-right: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.is-mode-long .post-display-footer.is-inline {
    margin-top: 12px;
    padding: 12px 8px 0;
}

.post-display-toc-toggle {
    width: 100%;
    padding: 0 0 8px;
    border: 0;
    background: transparent;
    color: #1e293b;
    font-weight: 800;
    text-align: left;
}

.post-display-toc ol {
    margin: 0;
    padding-left: 24px;
    list-style-position: outside;
}

.post-display-toc li {
    margin: 7px 0;
    padding-left: 1px;
}

.post-display-toc li.is-subsection {
    margin-left: 12px;
    font-size: .9em;
}

.post-display-toc a {
    color: #475569;
    text-decoration: none;
}

.post-display-toc a.is-active {
    color: #1d4ed8;
    font-weight: 800;
}

:root[data-theme="dark"] .post-display-toc {
    border-color: rgba(148, 163, 184, .28);
    background: #1b273b;
}

:root[data-theme="dark"] .is-mode-long.post-display-overlay {
    background: rgba(15, 23, 42, .58);
}

:root[data-theme="dark"] .post-display-toc-toggle,
:root[data-theme="dark"] .post-display-toc a {
    color: #cbd5e1;
}

:root[data-theme="dark"] .post-display-toc a.is-active {
    color: #93c5fd;
}

@media (max-width: 1280px) {
    .is-mode-long .post-display-layout {
        grid-template-columns: minmax(0, 820px) minmax(300px, 350px);
        grid-template-rows: auto minmax(0, 1fr);
    }

    .post-display-toc {
        grid-column: 1 / -1;
        height: auto;
        max-height: 220px;
    }
}

@media (max-width: 820px) {
    .is-mode-long.post-display-overlay {
        padding: 0;
    }

    .is-mode-long .post-display-dialog {
        width: 100vw;
        height: 100dvh;
    }

    .is-mode-long .post-display-layout {
        display: block;
        height: auto;
    }

    .post-display-toc {
        height: auto;
        max-height: none;
        margin-bottom: 18px;
    }

    .post-display-toc-toggle[aria-expanded="false"] + ol {
        display: none;
    }

    .is-mode-long .post-display-content,
    .is-mode-long .post-display-reader,
    .is-mode-long .post-display-interactions {
        height: auto;
        max-height: none;
        overflow: visible;
    }
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .is-mode-long.post-display-overlay {
        background: rgba(245, 247, 250, .84);
    }

    :root[data-theme="dark"] .is-mode-long.post-display-overlay {
        background: rgba(15, 23, 42, .72);
    }
}

/*
 * Version 2026.07.27.6.4 : lecteur long réellement défilable sur téléphone.
 * Le sommaire devient un menu compact superposé au lieu de pousser tout l'article.
 */
.post-display-toc-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.post-display-toc-toggle-icon {
    font-size: 1rem;
    line-height: 1;
}

@media (max-width: 820px) {
    .is-mode-long .post-display-dialog {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .is-mode-long .post-display-content {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
        -webkit-overflow-scrolling: touch;
    }

    .is-mode-long .post-display-layout {
        display: flex;
        min-height: 100%;
        height: auto;
        flex-direction: column;
        gap: 0;
        padding: 12px;
    }

    .is-mode-long .post-display-reader {
        order: 2;
        width: 100%;
        max-width: none;
        min-height: 0;
        padding-right: 0;
        overflow: visible;
    }

    .is-mode-long .post-display-interactions {
        order: 3;
        width: 100%;
        height: auto;
        min-height: 0;
        margin-top: 22px;
        padding: 18px 0 4px;
        overflow: visible;
        border-top: 1px solid rgba(148, 163, 184, .3);
        border-left: 0;
    }

    .is-mode-long .post-display-interactions .blog-modal-comments {
        overflow: visible;
    }

    .post-display-toc {
        position: sticky;
        z-index: 18;
        top: 0;
        order: 1;
        width: auto;
        height: auto;
        min-height: 0;
        max-height: none;
        align-self: flex-start;
        margin: 0 0 10px;
        padding: 0;
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .post-display-toc-toggle {
        width: auto;
        padding: 8px 12px;
        border: 1px solid #cbd5e1;
        border-radius: 999px;
        color: #334155;
        background: rgba(238, 241, 245, .97);
        box-shadow: 0 4px 14px rgba(15, 23, 42, .1);
    }

    .post-display-toc ol {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        width: min(360px, calc(100vw - 32px));
        max-height: min(62dvh, 520px);
        margin: 0;
        padding: 12px 14px 12px 36px;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
        border: 1px solid #d7dde6;
        border-radius: 14px;
        background: #eef1f5;
        box-shadow: 0 16px 38px rgba(15, 23, 42, .2);
    }

    .post-display-toc ol[hidden] {
        display: none !important;
    }

    .post-display-toc li {
        margin: 8px 0;
    }

    :root[data-theme="dark"] .post-display-toc-toggle,
    :root[data-theme="dark"] .post-display-toc ol {
        color: #dbeafe;
        border-color: #475569;
        background: rgba(27, 39, 59, .98);
    }
}


/* Version 2026.07.27.6.5 : accès rapide aux commentaires et composeur mobile permanent. */
.post-display-comments-jump {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    color: #334155;
    background: rgba(238, 241, 245, .97);
    font: inherit;
    font-weight: 750;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .08);
}

.post-display-comments-fab {
    position: absolute;
    z-index: 35;
    right: 18px;
    bottom: 22px;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(148, 163, 184, .48);
    border-radius: 50%;
    color: #fff;
    background: #2563eb;
    box-shadow: 0 9px 24px rgba(37, 99, 235, .32);
    font-size: 1.15rem;
    font-weight: 900;
}

.post-display-comments-fab:hover,
.post-display-comments-fab:focus-visible {
    background: #1d4ed8;
    transform: translateY(-1px);
}

:root[data-theme="dark"] .post-display-comments-jump {
    color: #dbeafe;
    border-color: #475569;
    background: rgba(27, 39, 59, .98);
}

@media (max-width: 820px) {
    .post-display-toc {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }

    .post-display-comments-jump { display: inline-flex; }

    .post-display-toc ol {
        flex-basis: 100%;
    }

    .is-mode-long .post-display-content {
        padding-bottom: calc(min(46dvh, 360px) + 14px + env(safe-area-inset-bottom));
    }

    .is-mode-long .post-display-footer.is-inline {
        position: fixed;
        z-index: 120080;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        max-height: min(46dvh, calc(360px + env(safe-area-inset-bottom)));
        margin: 0;
        padding: 6px 10px calc(7px + env(safe-area-inset-bottom));
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
        border-top: 1px solid rgba(148, 163, 184, .35);
        background: rgba(255, 255, 255, .98);
        box-shadow: 0 -10px 28px rgba(15, 23, 42, .13);
    }

    :root[data-theme="dark"] .is-mode-long .post-display-footer.is-inline {
        background: rgba(17, 26, 44, .98);
    }

    .is-mode-long .post-display-footer.is-inline .blog-modal-social-summary {
        margin-bottom: 0;
        padding: 2px 0 4px;
    }

    .is-mode-long .post-display-footer.is-inline .blog-modal-social-actions {
        padding-bottom: 2px;
    }

    .is-mode-long .post-display-footer.is-inline .blog-modal-comment-form {
        padding: 5px 6px;
    }

    .post-display-comments-fab {
        position: fixed;
        z-index: 120090;
        right: 14px;
        bottom: calc(min(46dvh, 360px) + 22px + env(safe-area-inset-bottom));
        width: 44px;
        height: 44px;
    }
}

/* Le composeur mobile reste réellement visible: les résumés se compactent, le formulaire ne défile pas. */
@media (max-width: 820px) {
    .is-mode-long .post-display-footer.is-inline {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* MOB1: le picker principal s'ouvre vers le haut. Le footer compact
       l'écrasait avec overflow:hidden, contrairement aux pickers de commentaires. */
    .is-mode-long .post-display-footer.is-inline.is-reaction-picker-open {
        overflow: visible !important;
    }
    .is-mode-long .post-display-footer.is-inline.is-reaction-picker-open .blog-reaction-trigger-wrap.is-open,
    .is-mode-long .post-display-footer.is-inline.is-reaction-picker-open .blog-reaction-picker {
        z-index: 120140 !important;
    }

    .is-mode-long .post-display-footer.is-inline .blog-modal-comment-bar-inner {
        display: flex;
        min-height: 0;
        max-height: 100%;
        flex-direction: column;
    }

    .is-mode-long .post-display-footer.is-inline .blog-modal-social-summary,
    .is-mode-long .post-display-footer.is-inline .blog-modal-social-actions {
        flex: 0 0 auto;
    }

    .is-mode-long .post-display-footer.is-inline .blog-modal-comment-form {
        position: sticky;
        z-index: 2;
        bottom: 0;
        flex: 0 0 auto;
        margin-top: 3px;
        background: inherit;
    }
}

/* Club Alex Borg 8.15.9.7.12 — polish desktop : la marge morte à droite
 * est rendue aux commentaires, sans écraser le corps de l'article. */
@media (min-width: 1281px) {
    .is-mode-long .post-display-layout {
        grid-template-columns: minmax(165px, 190px) minmax(0, 1fr) minmax(420px, 470px);
        gap: 14px;
        padding: 18px 8px 18px 16px;
    }

    .is-mode-long .post-display-reader {
        max-width: 810px;
        padding-right: 4px;
    }

    .is-mode-long .post-display-interactions {
        padding-left: 10px;
        padding-right: 0;
    }

    .is-mode-long .post-display-interactions .blog-modal-comments {
        padding-right: 2px;
    }


    .is-mode-long .post-display-layout.post-display-layout-no-toc {
        grid-template-columns: minmax(0, 1fr) minmax(420px, 470px);
    }

    .is-mode-long .post-display-layout.post-display-layout-no-toc .post-display-reader {
        max-width: 980px;
    }

    .is-mode-long .post-display-footer.is-inline {
        padding-inline: 2px;
    }
}


/* ClubOS R103 FIX1 — navigation commentaires mobile explicite et compacte. */
@media (max-width: 820px) {
    .post-display-toc {
        gap: 7px;
        margin-bottom: 8px;
    }
    .post-display-comments-jump {
        display: inline-flex;
        min-height: 38px;
        padding: 7px 11px;
    }
    .post-display-comments-fab {
        display: grid;
        width: 42px;
        height: 42px;
        right: 12px;
        box-shadow: 0 8px 22px rgba(37, 99, 235, .32);
    }
}


/* ClubOS R103 FIX4 — Sommaire + accès commentaires sur la même ligne mobile. */
@media (max-width: 820px) {
    .post-display-toc-toggle,
    .post-display-comments-jump {
        flex: 0 0 auto;
        white-space: nowrap;
    }
    .post-display-comments-jump {
        max-width: calc(100% - 128px);
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ClubOS R116 R2 FIX2 — le bouton bleu desktop pilote le lecteur d'article,
   pas les commentaires. Il est porté sous <body> par JS pour survivre aux
   remplacements Ajax/SPA et rester fixe dans le viewport. */
.post-display-reader-jump-fab {
    position: fixed;
    z-index: 2147483600;
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 1px solid rgba(148, 163, 184, .48);
    border-radius: 50%;
    color: #fff;
    background: #2563eb;
    box-shadow: 0 10px 26px rgba(37, 99, 235, .34);
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    transition: transform .14s ease, background-color .14s ease, opacity .14s ease;
}
.post-display-reader-jump-fab[hidden] { display: none !important; }
.post-display-reader-jump-fab:hover,
.post-display-reader-jump-fab:focus-visible {
    background: #1d4ed8;
    transform: translateY(-1px);
}

/* Sur desktop l'ancien FAB commentaires ne doit jamais se faire passer pour
   le bouton de navigation de l'article. Les commentaires sont déjà visibles
   dans la colonne droite. */
@media (min-width: 821px) {
    .post-display-comments-fab { display: none !important; }
}

@media (max-width: 820px) {
    .post-display-reader-jump-fab { display: none !important; }
}


/* R116 R2 FIX2 — un seul runtime desktop pour le saut haut/bas.
 * L'ancien #blogModalScrollBottomBtn peut survivre dans le shell SPA : on le
 * neutralise afin qu'il ne capte plus de clic ni ne concurrence le FAB body. */
@media (min-width: 821px) {
    #blogModalScrollBottomBtn,
    #blogModalScrollBottomBtn.r115-reader-jump-portal {
        display: none !important;
        pointer-events: none !important;
    }
    .post-display-reader-jump-fab[data-post-reader-jump="1"] {
        position: fixed !important;
        z-index: 2147482000 !important;
        transform: none !important;
        margin: 0 !important;
    }
}

/* ===== SOURCE: blog-post-display-ergonomics.css ===== */
/* R103 FIX15D1 — ergonomie desktop renforcée.
 * Chargé APRES blog-post-display-long.css afin que le mode Article long
 * ne puisse plus écraser les largeurs FIX15D. Mobile <= 820px inchangé. */

@media (min-width: 1200px) {
    /* Lecture standard / média : récupérer un peu plus d'écran sans coller aux bords. */
    .post-display-overlay:not(.is-mode-long) .post-display-dialog:not(.is-compact-reading),
    .is-mode-reading .post-display-dialog:not(.is-compact-reading) {
        width: min(1640px, calc(100vw - 20px));
        max-width: 1640px;
    }

    .post-display-overlay:not(.is-mode-long) .post-display-layout,
    .is-mode-reading .post-display-layout {
        gap: 16px;
        padding: 18px;
    }

    .post-display-overlay:not(.is-mode-long) .post-display-interactions,
    .is-mode-reading .post-display-interactions {
        padding-left: 8px;
    }
}

/* Article long : le CSS long historique est chargé après blog-post-display.css.
 * FIX15D ne pouvait donc pas gagner sur ses max-width/colonnes. Cette feuille
 * est volontairement chargée après lui. */
@media (min-width: 1281px) {
    .is-mode-long .post-display-dialog {
        width: min(calc(100vw - (2 * var(--long-reader-modal-margin))), 1640px);
        max-width: 1640px;
    }

    .is-mode-long .post-display-layout {
        grid-template-columns:
            minmax(190px, 220px)
            minmax(0, 1fr)
            minmax(500px, 550px);
        gap: 14px;
        padding: 16px 8px 16px 14px;
    }

    .is-mode-long .post-display-reader {
        width: 100%;
        max-width: none;
        padding-right: 2px;
    }

    .is-mode-long .post-display-reader .blog-modal-content-body {
        max-width: 80ch;
    }

    .is-mode-long .post-display-toc {
        padding: 12px 14px;
    }

    .is-mode-long .post-display-interactions {
        padding-left: 6px;
        padding-right: 0;
    }

    .is-mode-long .post-display-interactions .blog-modal-comments {
        padding-right: 1px;
    }

    .is-mode-long .post-display-footer.is-inline {
        padding-inline: 1px;
    }
}

@media (min-width: 1500px) {
    .is-mode-long .post-display-layout {
        grid-template-columns:
            minmax(205px, 230px)
            minmax(0, 1fr)
            minmax(520px, 570px);
    }
}

/* R103 FIX15F — article long SANS sommaire.
 * Le layout avec sommaire est volontairement laissé tel quel : le gain demandé
 * concerne uniquement la colonne vide/perdue visible quand aucun H2/H3 n'existe. */
@media (min-width: 1281px) {
    .is-mode-long .post-display-layout.post-display-layout-no-toc {
        grid-template-columns: minmax(0, 1fr) minmax(560px, 620px);
        gap: 14px;
    }

    .is-mode-long .post-display-layout.post-display-layout-no-toc .post-display-reader {
        width: 100%;
        max-width: none;
    }

    .is-mode-long .post-display-layout.post-display-layout-no-toc .post-display-interactions {
        min-width: 0;
        padding-left: 4px;
    }
}

@media (min-width: 1500px) {
    .is-mode-long .post-display-layout.post-display-layout-no-toc {
        grid-template-columns: minmax(0, 1fr) minmax(590px, 650px);
    }
}


/* R118 R3 FIX12 FIX2 — article long mobile mieux docké et plus compact. */
@media (max-width: 820px) {
    .is-mode-long .post-display-header {
        padding: max(8px, calc(env(safe-area-inset-top) + 6px)) 10px 8px 12px;
    }

    .is-mode-long .post-display-content {
        padding-bottom: calc(
            min(42dvh, 320px)
            + var(--clubos-mobile-nav-height, 64px)
            + var(--clubos-mobile-safe-bottom, 0px)
            + 16px
        );
    }

    .is-mode-long .post-display-footer.is-inline {
        right: 0;
        left: 0;
        bottom: calc(var(--clubos-mobile-nav-height, 64px) + var(--clubos-mobile-safe-bottom, 0px));
        max-height: min(42dvh, 320px);
        padding: 6px 10px 6px;
        border-radius: 16px 16px 0 0;
    }

    .is-mode-long .post-display-footer.is-inline .blog-modal-comment-form {
        margin-bottom: 0;
    }

    .post-display-comments-fab {
        right: 12px;
    }
}


/* R118 R3 FIX12 FIX3 — correction structurelle du viewport mobile.
 * FIX12/FIX2 réduisait l'overlay ET décalait les éléments fixed de la hauteur
 * de la bottom-nav. Avec backdrop-filter l'overlay devient le containing block
 * des fixed : résultat = double décalage, header hors écran et footer trop haut.
 * Ici l'overlay reprend tout le viewport ; seul le dialogue réserve la bottom-nav. */
@media (max-width: 820px) {
    body.post-display-mobile-nav-visible .blog-post-modal-overlay {
        inset: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        align-items: flex-start !important;
        justify-content: center !important;
        padding: 0 !important;
    }

    body.post-display-mobile-nav-visible .post-display-dialog,
    body.post-display-mobile-nav-visible .is-mode-long .post-display-dialog,
    body.post-display-mobile-nav-visible .is-mode-media .post-display-dialog {
        width: 100vw !important;
        height: calc(100dvh - var(--clubos-mobile-nav-height, 64px) - var(--clubos-mobile-safe-bottom, 0px)) !important;
        max-height: calc(100dvh - var(--clubos-mobile-nav-height, 64px) - var(--clubos-mobile-safe-bottom, 0px)) !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    body.post-display-mobile-nav-visible.post-display-comment-composer-focused .post-display-dialog,
    body.post-display-mobile-nav-visible.post-display-comment-composer-focused .is-mode-long .post-display-dialog,
    body.post-display-mobile-nav-visible.post-display-comment-composer-focused .is-mode-media .post-display-dialog {
        height: 100dvh !important;
        max-height: 100dvh !important;
    }

    body.post-display-mobile-nav-visible .is-mode-long .post-display-footer.is-inline {
        bottom: calc(var(--clubos-mobile-nav-height, 64px) + var(--clubos-mobile-safe-bottom, 0px)) !important;
    }

    body.post-display-mobile-nav-visible.post-display-comment-composer-focused .is-mode-long .post-display-footer.is-inline {
        bottom: 0 !important;
    }

    body.post-display-mobile-nav-visible .post-display-header {
        position: relative;
        top: auto;
        flex: 0 0 auto;
        min-height: 62px;
        padding-top: max(10px, calc(env(safe-area-inset-top) + 8px));
        overflow: visible;
    }

    body.post-display-mobile-nav-visible .post-display-header-actions {
        min-height: 44px;
        align-items: center;
    }

    body.post-display-mobile-nav-visible .post-display-header-menu-host .blog-post-card-menu-toggle,
    body.post-display-mobile-nav-visible .blog-post-modal-close,
    body.post-display-mobile-nav-visible .post-display-mode-switch {
        margin-top: 0 !important;
        transform: none !important;
    }
}

/* R118 R3 FIX12 FIX8 — contrat mobile publication / navigation / player.
 * Ordre vertical voulu en consultation : contenu -> métriques+commentaire -> player -> nav.
 * Le player et la nav disparaissent uniquement pendant la saisie d'un commentaire. */
@media (max-width: 820px) {
    body.post-display-mobile-nav-visible .post-display-dialog,
    body.post-display-mobile-nav-visible .is-mode-long .post-display-dialog,
    body.post-display-mobile-nav-visible .is-mode-media .post-display-dialog {
        height: calc(
            100dvh
            - var(--clubos-mobile-nav-height, 64px)
            - var(--clubos-mobile-player-height, 0px)
            - var(--clubos-mobile-safe-bottom, 0px)
        ) !important;
        max-height: calc(
            100dvh
            - var(--clubos-mobile-nav-height, 64px)
            - var(--clubos-mobile-player-height, 0px)
            - var(--clubos-mobile-safe-bottom, 0px)
        ) !important;
    }

    body.post-display-mobile-nav-visible .is-mode-long .post-display-content {
        padding-bottom: calc(
            min(42dvh, 320px)
            + var(--clubos-mobile-nav-height, 64px)
            + var(--clubos-mobile-player-height, 0px)
            + var(--clubos-mobile-safe-bottom, 0px)
            + 16px
        ) !important;
    }

    body.post-display-mobile-nav-visible .is-mode-long .post-display-footer.is-inline {
        bottom: calc(
            var(--clubos-mobile-nav-height, 64px)
            + var(--clubos-mobile-player-height, 0px)
            + var(--clubos-mobile-safe-bottom, 0px)
        ) !important;
    }

    body.post-display-mobile-nav-visible .post-display-comments-fab {
        bottom: calc(
            min(42dvh, 320px)
            + var(--clubos-mobile-nav-height, 64px)
            + var(--clubos-mobile-player-height, 0px)
            + var(--clubos-mobile-safe-bottom, 0px)
            + 22px
        ) !important;
    }

    body.post-display-mobile-nav-visible #site-shell-player-zone.post-display-mobile-player-zone-docked {
        position: relative;
        z-index: calc(var(--z-blog-article-overlay, 120060) + 15) !important;
        pointer-events: auto !important;
    }

    body.post-display-mobile-nav-visible #site-shell-player-zone.post-display-mobile-player-zone-docked .global-music-player {
        z-index: calc(var(--z-blog-article-overlay, 120060) + 15) !important;
        pointer-events: auto !important;
    }

    body.post-display-mobile-nav-visible.post-display-comment-composer-focused #site-shell-player-zone.post-display-mobile-player-zone-docked {
        display: none !important;
    }

    body.post-display-mobile-nav-visible.post-display-comment-composer-focused .post-display-dialog,
    body.post-display-mobile-nav-visible.post-display-comment-composer-focused .is-mode-long .post-display-dialog,
    body.post-display-mobile-nav-visible.post-display-comment-composer-focused .is-mode-media .post-display-dialog {
        height: 100dvh !important;
        max-height: 100dvh !important;
    }

    body.post-display-mobile-nav-visible.post-display-comment-composer-focused .is-mode-long .post-display-content {
        padding-bottom: calc(min(42dvh, 320px) + 16px) !important;
    }

    body.post-display-mobile-nav-visible.post-display-comment-composer-focused .is-mode-long .post-display-footer.is-inline {
        bottom: 0 !important;
    }

    body.post-display-mobile-nav-visible.post-display-comment-composer-focused .post-display-comments-fab {
        bottom: calc(min(42dvh, 320px) + 22px) !important;
    }
}

/* ===== SOURCE: blog-post-card-menu.css ===== */
/*
 * Menu "trois points" des cartes blog publiques.
 *
 * Ce fichier fait uniquement l'habillage visuel du bouton/menu.
 * Aucune logique métier, aucune action backend.
 */

.blog-post-card {
    position: relative;
}

/*
 * Hotfix clipping menu:
 * le popover du menu carte est dans une carte qui est en overflow hidden
 * dans le socle blog.
 * On ouvre l'overflow seulement quand le menu est ouvert.
 */
.blog-post-card.is-menu-open {
    overflow: visible;
}

.blog-post-card-menu {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: var(--z-blog-card-local, 850);
}

.blog-post-card-menu.is-open {
    z-index: var(--z-blog-card-local-open, 860);
}

@media (hover: hover) and (pointer: fine) {
    .blog-post-card-menu {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-2px);
        transition: opacity 140ms ease, visibility 140ms ease, transform 140ms ease;
    }
    .blog-post-card:hover .blog-post-card-menu,
    .blog-post-card:focus-within .blog-post-card-menu,
    .blog-post-card-menu.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }
}

/*
 * Petite animation discrète quand une carte change de place après pin/unpin.
 * On reste volontairement simple: légère opacité + léger décalage.
 */
.js-blog-post-card-col {
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.js-blog-post-card-col.is-reordering {
    opacity: 0.45;
    transform: translateY(-4px);
}

.blog-post-card-menu-toggle {
    width: 2rem;
    height: 2rem;
    border: 1px solid #d0d7de;
    border-radius: 999px;
    background: #ffffff;
    color: #334155;
    font-size: 1.25rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.blog-post-card-menu-toggle:hover,
.blog-post-card-menu-toggle:focus-visible {
    background: #f8fafc;
    border-color: #94a3b8;
}

.blog-post-card-menu-popover {
    position: absolute;
    top: calc(100% + 0.375rem);
    right: 0;
    min-width: 15rem;
    background: #ffffff;
    border: 1px solid #d0d7de;
    border-radius: 0.75rem;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
    z-index: var(--z-blog-card-popover, 870);
    padding: 0.35rem;
}

.blog-post-card-menu-item {
    width: 100%;
    border: 0;
    background: transparent;
    border-radius: 0.5rem;
    text-align: left;
    padding: 0.55rem 0.65rem;
    color: #0f172a;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.blog-post-card-menu-item-icon {
    width: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/*
 * L'emoji "épingle" natif est visuellement rouge sur beaucoup de plateformes.
 * On le passe en rendu gris/noir discret pour éviter un accent trop flashy.
 */
.blog-post-card-menu-item-icon.is-pin-icon,
.blog-post-state-icon.is-pinned {
    filter: grayscale(1) saturate(0) brightness(0.5);
}

.blog-post-card-menu-item-icon.is-favorite-icon {
    color: #f59e0b;
}

.blog-post-card-menu-item-label {
    line-height: 1.2;
}

.blog-post-card-menu-separator {
    margin: 0.45rem 0.35rem 0.35rem;
    border: 0;
    border-top: 1px solid #e2e8f0;
}

.blog-post-card-menu-item:hover,
.blog-post-card-menu-item:focus-visible {
    background: #f1f5f9;
}

.blog-post-card-menu-item.is-danger {
    color: #b91c1c;
}

.blog-post-state-icons {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: 0.4rem;
}

.blog-post-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    line-height: 1;
    width: 1rem;
    height: 1rem;
    color: #64748b;
}

.blog-post-state-icon.is-actionable {
    cursor: pointer;
}

.blog-post-state-icon.is-actionable:hover,
.blog-post-state-icon.is-actionable:focus-visible {
    transform: translateY(-1px);
}

.blog-post-state-icon.is-pinned {
    color: #6b7280;
    opacity: 0.5;
    filter: grayscale(1) saturate(0);
}

.blog-post-state-icon.js-post-state-icon-profile {
    color: #6b7280;
    opacity: 0.5;
    filter: grayscale(1) saturate(0);
}

.blog-post-state-icon.is-muted {
    color: #334155;
}

.blog-post-state-icon.is-favorite {
    color: #f59e0b;
    opacity: 1;
    filter: none;
}

/*
 * La modale de confirmation doit passer devant la topbar et ses popovers.
 * Le projet a des éléments UI qui montent jusqu'à ~1400.
 * On force donc un plan supérieur pour modale + backdrop.
 */
#blogPostCardActionConfirmModal {
    z-index: calc(var(--z-blog-modal, 110080) + 10);
}

#blogPostCardPinScopeModal {
    z-index: calc(var(--z-blog-modal, 110080) + 10);
}

.modal-backdrop.show {
    z-index: var(--z-blog-modal-backdrop, 110070);
}

.blog-post-card-confirm-fallback-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.62);
    z-index: var(--z-blog-modal-backdrop, 110070);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.blog-post-card-confirm-fallback-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.blog-post-card-pin-scope-fallback-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.62);
    z-index: var(--z-blog-modal-backdrop, 110070);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.blog-post-card-pin-scope-fallback-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/*
 * Thème sombre:
 * - on garde les mêmes classes
 * - on adapte seulement les couleurs
 */
[data-theme="dark"] .blog-post-card-menu-toggle {
    background: #1f2937;
    border-color: #334155;
    color: #f8fafc;
}

[data-theme="dark"] .blog-post-card-menu-toggle:hover,
[data-theme="dark"] .blog-post-card-menu-toggle:focus-visible {
    background: #334155;
    border-color: #475569;
}

[data-theme="dark"] .blog-post-card-menu-popover {
    background: #0f172a;
    border-color: #334155;
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.55);
}

[data-theme="dark"] .blog-post-card-menu-item {
    color: #f8fafc;
}

[data-theme="dark"] .blog-post-card-menu-item-icon.is-pin-icon,
[data-theme="dark"] .blog-post-state-icon.is-pinned {
    filter: grayscale(1) saturate(0) brightness(1.35);
}

[data-theme="dark"] .blog-post-card-menu-item-icon.is-favorite-icon {
    color: #fbbf24;
}

[data-theme="dark"] .blog-post-card-menu-item:hover,
[data-theme="dark"] .blog-post-card-menu-item:focus-visible {
    background: #1e293b;
}

[data-theme="dark"] .blog-post-card-menu-item.is-danger {
    color: #fca5a5;
}

[data-theme="dark"] .blog-post-card-menu-separator {
    border-top-color: #334155;
}

[data-theme="dark"] .blog-post-state-icon {
    color: #cbd5e1;
}

[data-theme="dark"] .blog-post-state-icon.is-pinned {
    color: #e2e8f0;
    opacity: 0.5;
    filter: grayscale(1) saturate(0);
}

[data-theme="dark"] .blog-post-state-icon.js-post-state-icon-profile {
    color: #e2e8f0;
    opacity: 0.5;
    filter: grayscale(1) saturate(0);
}

[data-theme="dark"] .blog-post-state-icon.is-muted {
    color: #f8fafc;
}

[data-theme="dark"] .blog-post-state-icon.is-favorite {
    color: #fbbf24;
    opacity: 1;
    filter: none;
}

#blogPostCardPinScopeModal .modal-body .btn {
    text-align: left;
}

.blog-post-pin-scope-block {
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 0.8rem 0.9rem;
    background: #f8fafc;
}

.blog-post-pin-scope-block + .blog-post-pin-scope-block {
    margin-top: 0.65rem;
}

.blog-post-pin-scope-title {
    color: #0f172a;
}

.blog-post-pin-scope-description {
    color: #475569;
    font-size: 0.9rem;
}

[data-theme="dark"] .blog-post-pin-scope-block {
    background: #111827;
    border-color: #334155;
}

[data-theme="dark"] .blog-post-pin-scope-title {
    color: #f8fafc;
}

[data-theme="dark"] .blog-post-pin-scope-description {
    color: #cbd5e1;
}


/* Prompt 4 · polish menu cartes */
.blog-post-card-menu-toggle {
    box-shadow: 0 6px 16px rgba(15, 23, 42, .08);
    transition: transform 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}
.blog-post-card-menu-toggle:hover,
.blog-post-card-menu-toggle:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(15, 23, 42, .14);
}
.blog-post-card-menu-popover {
    min-width: 238px;
    border-radius: .95rem;
    border-color: rgba(148, 163, 184, .24);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .18);
    animation: blogPostMenuFadeIn 140ms ease;
    transform-origin: top right;
}
.blog-post-card-menu-item {
    border-radius: .7rem;
}
.blog-post-card-menu-item:hover,
.blog-post-card-menu-item:focus-visible {
    transform: translateX(1px);
}
@keyframes blogPostMenuFadeIn {
    from { opacity: 0; transform: translateY(-4px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
[data-theme="dark"] .blog-post-card-menu-popover {
    border-color: rgba(125, 180, 255, .18);
    box-shadow: 0 20px 46px rgba(2, 6, 23, .48);
}

/* ClubOS 8.10.0 — menus de publication sobres, monochromes et mieux espacés. */
.blog-post-card-menu-popover {
    min-width: 17rem;
    padding: .45rem;
}

.blog-post-card-menu-item {
    display: grid;
    grid-template-columns: 1.35rem minmax(0, 1fr);
    column-gap: .72rem;
    row-gap: .12rem;
    align-items: center;
    padding: .68rem .72rem;
}

.blog-post-card-menu-item-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 1.35rem;
    min-width: 1.35rem;
    color: #172033 !important;
    opacity: .92;
    filter: grayscale(1) saturate(0) contrast(1.35) brightness(.42) !important;
}

.blog-post-card-menu-item-label {
    grid-column: 2;
    color: inherit;
    font-weight: 650;
}

.blog-post-card-menu-item-description {
    grid-column: 2;
    color: #64748b;
    font-size: .74rem;
    line-height: 1.3;
}

.blog-post-card-menu-item-icon.is-favorite-icon,
.blog-post-card-menu-item-icon.is-pin-icon {
    color: inherit !important;
}

[data-theme="dark"] .blog-post-card-menu-item-icon {
    color: #f1f5f9 !important;
    opacity: .96;
    filter: grayscale(1) saturate(0) contrast(1.2) brightness(2.15) !important;
}

[data-theme="dark"] .blog-post-card-menu-item-description {
    color: #9fb0c9;
}

/* ClubOS 8.11.0 — menu plus compact et descriptions réellement sous le libellé. */
.blog-post-card-menu-popover {
    right: -0.55rem;
    min-width: 13.5rem;
    width: min(16.75rem, calc(100vw - 2rem));
}
.blog-post-card-menu-item {
    display: grid;
    grid-template-columns: 1.15rem minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: .62rem;
    row-gap: .12rem;
    align-items: start;
}
.blog-post-card-menu-item-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin-top: .08rem;
}
.blog-post-card-menu-item-label {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    font-weight: 650;
}
.blog-post-card-menu-item-description {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    color: #64748b;
    font-size: .72rem;
    line-height: 1.28;
}
[data-theme="dark"] .blog-post-card-menu-item-description { color: #9fb0c9; }


/* 8.15.9.2.1.2 — signalement public compact et contextuel. */
.blog-post-card-menu-public-report-item .is-public-report-icon {
    color: #64748b;
    filter: grayscale(1) saturate(0);
    font-size: 1rem;
}

.blog-public-report-mobile-trigger {
    display: none;
}

@media (hover: none), (pointer: coarse) {
    .blog-public-report-mobile-trigger {
        position: absolute;
        right: .38rem;
        bottom: .34rem;
        z-index: var(--z-blog-card-local, 850);
        width: 1.45rem;
        height: 1.45rem;
        padding: 0;
        border: 0;
        border-radius: .35rem;
        background: transparent;
        color: #475569;
        opacity: .5;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        touch-action: pan-x pan-y;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
        transition: opacity 120ms ease, transform 120ms ease, background-color 120ms ease;
    }

    .blog-public-report-mobile-trigger::before {
        content: "";
        width: 0;
        height: 0;
        border-left: .31rem solid transparent;
        border-right: .31rem solid transparent;
        border-bottom: .54rem solid currentColor;
    }

    .blog-public-report-mobile-trigger.is-pressing {
        opacity: .9;
        transform: scale(1.12);
        background: rgba(100, 116, 139, .08);
    }

    /* Un visiteur anonyme n'a pas besoin d'un menu trois-points mobile
       si sa seule action serait le signalement public : le triangle suffit. */
    .blog-post-card-menu[data-public-report-only="1"] {
        display: none;
    }

    /* Pour les membres, le menu mobile conserve les actions sociales,
       mais le signalement public reste volontairement sur le triangle. */
    .blog-post-card-menu-public-report-item,
    .blog-post-card-menu-public-report-separator {
        display: none !important;
    }
}

@media (hover: hover) and (pointer: fine) {
    .blog-post-card-menu-public-report-item {
        color: #475569;
    }
    .blog-post-card-menu-public-report-item:hover,
    .blog-post-card-menu-public-report-item:focus-visible {
        color: #0f172a;
    }
}

:root[data-theme="dark"] .blog-public-report-mobile-trigger {
    color: #cbd5e1;
}

/* Club Alex Borg 8.15.9.7.3 — menu plus large, plus court et hiérarchisé. */
.blog-post-card-menu-popover {
    min-width: 17.75rem;
    width: min(18.4rem, calc(100vw - 1.25rem));
    padding: .32rem;
}

.blog-post-card-menu-item {
    grid-template-columns: 1.18rem minmax(0, 1fr);
    column-gap: .58rem;
    row-gap: .05rem;
    padding: .48rem .58rem;
    border-radius: .52rem;
    font-size: .88rem;
}

.blog-post-card-menu-item-icon {
    width: 1.18rem;
    min-width: 1.18rem;
    font-size: .92rem;
    margin-top: .02rem;
}

.blog-post-card-menu-item-label {
    line-height: 1.18;
}

.blog-post-card-menu-item-description {
    font-size: .70rem;
    line-height: 1.22;
    margin-top: .04rem;
}

.blog-post-card-menu-separator {
    margin: .28rem .42rem;
}

.blog-post-card-menu-group {
    display: contents;
}

@media (max-width: 420px) {
    .blog-post-card-menu-popover {
        width: min(18rem, calc(100vw - 1rem));
        right: -.35rem;
    }
}


/* Club Alex Borg 8.15.9.7.5 — menu plus haut mais plus dense. */
.blog-post-card-menu-popover {
    max-height: calc(100dvh - 3.25rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.blog-post-card-menu-item {
    padding-top: .42rem;
    padding-bottom: .42rem;
}
.blog-post-card-menu-separator {
    margin-top: .22rem;
    margin-bottom: .22rem;
}
@media (max-width: 767.98px) {
    body.clubos-mobile-active .club-ui-menu.blog-post-card-menu-popover.club-ui-menu-mobile-sheet {
        max-height: min(78dvh, 660px) !important;
        padding: .38rem !important;
    }
    body.clubos-mobile-active .club-ui-menu.blog-post-card-menu-popover.club-ui-menu-mobile-sheet .blog-post-card-menu-item {
        min-height: 46px !important;
        padding-top: .38rem !important;
        padding-bottom: .38rem !important;
    }
    body.clubos-mobile-active .club-ui-menu.blog-post-card-menu-popover.club-ui-menu-mobile-sheet .blog-post-card-menu-separator {
        margin-top: .18rem;
        margin-bottom: .18rem;
    }
}

/* AV.1 R7 — titres longs : réserver la place du menu et des icônes d'état. */
.blog-post-card .blog-post-title {
    display: flex;
    align-items: flex-start;
    gap: .35rem;
    min-width: 0;
    min-height: calc(1.24em * 2);
    padding-right: 2.65rem;
    overflow: visible;
}

.blog-post-card .blog-post-title > a {
    display: -webkit-box;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.blog-post-card .blog-post-title > .blog-post-state-icons {
    flex: 0 0 auto;
    margin-left: 0;
    padding-top: .12rem;
    white-space: nowrap;
}



/* R6 FIX3 — une confirmation destructive ouverte depuis ARTICLE LONG doit passer
   devant l'overlay de lecture, jamais derrière. */
#blogPostCardActionConfirmModal.blog-post-action-confirm-over-article {
    z-index: calc(var(--z-blog-article-overlay, 120060) + 40) !important;
}
.modal-backdrop.blog-post-action-confirm-backdrop-over-article {
    z-index: calc(var(--z-blog-article-overlay, 120060) + 30) !important;
}
.blog-post-card-confirm-fallback-backdrop.is-over-article {
    z-index: calc(var(--z-blog-article-overlay, 120060) + 30) !important;
}

/* ===== SOURCE: blog-post-reshare.css ===== */
/* Club Alex Borg 8.15.9.6.0 — repartage interne riche + partage externe V1 */

.cab-reshare-commentary {
    margin: .55rem 0 .7rem;
    font-size: .92rem;
    line-height: 1.45;
    color: var(--site-text, #172033);
    white-space: normal;
}

.cab-reshare-original {
    display: grid;
    grid-template-columns: minmax(0, 96px) minmax(0, 1fr);
    gap: .7rem;
    align-items: stretch;
    margin: .55rem 0 .2rem;
    padding: .55rem;
    border: 1px solid color-mix(in srgb, var(--site-border, #d9e1ec) 90%, transparent);
    border-radius: .95rem;
    background: color-mix(in srgb, var(--site-surface, #fff) 92%, var(--site-bg, #f4f7fb));
    color: inherit;
    overflow: hidden;
}
.cab-reshare-original:hover {
    border-color: color-mix(in srgb, var(--site-accent, #0d6efd) 40%, var(--site-border, #d9e1ec));
}
.cab-reshare-original-image {
    width: 96px;
    height: 86px;
    object-fit: cover;
    border-radius: .7rem;
    align-self: center;
}
.cab-reshare-original-visual {
    width: 96px;
    height: 86px;
    display: grid;
    place-items: center;
    padding: .45rem;
    border-radius: .7rem;
    overflow: hidden;
    color: #fff;
    text-align: center;
    font-size: .68rem;
    font-weight: 850;
    line-height: 1.18;
    text-shadow: 0 1px 2px rgba(15,23,42,.28);
}
.cab-reshare-original.no-visual {
    grid-template-columns: minmax(0, 1fr);
}
.cab-reshare-original-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .12rem;
}
.cab-reshare-original-author,
.cab-reshare-original-preview,
.cab-reshare-original-link {
    display: block;
}
.cab-reshare-original-author {
    font-size: .72rem;
    font-weight: 700;
    color: var(--site-muted, #68758a);
}
.cab-reshare-original-title {
    display: block;
    font-size: .91rem;
    line-height: 1.22;
    color: var(--site-text, #172033);
}
.cab-reshare-original-preview {
    margin-top: .08rem;
    font-size: .76rem;
    line-height: 1.28;
    color: var(--site-muted, #68758a);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cab-reshare-original-link {
    margin-top: .18rem;
    font-size: .72rem;
    font-weight: 750;
    color: var(--site-accent, #0d6efd);
}
.cab-reshare-original.is-locked {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    color: var(--site-muted, #68758a);
}
.cab-reshare-original.is-locked strong,
.cab-reshare-original.is-locked span span {
    display: block;
}
.cab-reshare-original.is-locked strong {
    font-size: .82rem;
    color: var(--site-text, #172033);
}
.cab-reshare-original.is-locked span span {
    margin-top: .12rem;
    font-size: .74rem;
    line-height: 1.3;
}

/* Dialogue dynamique de repartage. Toujours compact, y compris mobile. */
.cab-reshare-dialog {
    /* Hotfix 9.7.9 : reste interactive au-dessus du lecteur Article long/Lecture,
       y compris dans le fallback sans top-layer natif. */
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-blog-article-overlay, 120060) + 120);
    pointer-events: auto;
    width: min(560px, calc(100vw - 1.25rem));
    max-width: 560px;
    max-height: min(86dvh, 680px);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 1.25rem;
    overflow: hidden;
    background: var(--site-surface, #fff);
    color: var(--site-text, #172033);
    box-shadow: 0 28px 90px rgba(15, 23, 42, .28);
}
.cab-reshare-dialog::backdrop {
    background: rgba(15, 23, 42, .42);
    backdrop-filter: blur(2px);
}
.cab-reshare-shell {
    display: flex;
    flex-direction: column;
    max-height: inherit;
}
.cab-reshare-header {
    display: flex;
    align-items: flex-start;
    width: 100%;
    gap: .7rem;
    padding: 1rem 1rem .55rem;
    border-bottom: 1px solid color-mix(in srgb, var(--site-border, #d9e1ec) 80%, transparent);
}
.cab-reshare-header-copy {
    flex: 1 1 auto;
    min-width: 0;
}
.cab-reshare-header h2 {
    margin: 0;
    font-size: 1.12rem;
    line-height: 1.2;
}
.cab-reshare-header p {
    margin: .22rem 0 0;
    font-size: .77rem;
    color: var(--site-muted, #68758a);
}
.cab-reshare-close {
    flex: 0 0 auto;
    margin-left: auto;
    width: 2rem;
    height: 2rem;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--site-muted, #68758a);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}
.cab-reshare-close:hover,
.cab-reshare-close:focus-visible {
    background: color-mix(in srgb, var(--site-border, #d9e1ec) 45%, transparent);
    color: var(--site-text, #172033);
}
.cab-reshare-body {
    overflow: auto;
    overscroll-behavior: contain;
    padding: .85rem 1rem;
}
.cab-reshare-source {
    padding: .65rem .75rem;
    border-radius: .8rem;
    background: color-mix(in srgb, var(--site-bg, #f4f7fb) 78%, var(--site-surface, #fff));
}
.cab-reshare-source-author {
    display: block;
    font-size: .72rem;
    color: var(--site-muted, #68758a);
}
.cab-reshare-source-title {
    display: block;
    margin-top: .1rem;
    font-size: .88rem;
}
.cab-reshare-label {
    display: block;
    margin: .8rem 0 .35rem;
    font-size: .78rem;
    font-weight: 800;
}
.cab-reshare-textarea {
    width: 100%;
    min-height: 84px;
    max-height: 180px;
    resize: vertical;
    padding: .65rem .7rem;
    border: 1px solid var(--site-border, #d9e1ec);
    border-radius: .8rem;
    background: var(--site-surface, #fff);
    color: inherit;
}
.cab-reshare-counter {
    margin-top: .18rem;
    text-align: right;
    font-size: .68rem;
    color: var(--site-muted, #68758a);
}
.cab-reshare-scope-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .45rem;
}
.cab-reshare-scope {
    position: relative;
}
.cab-reshare-scope input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.cab-reshare-scope label {
    min-height: 64px;
    display: grid;
    place-items: center;
    gap: .15rem;
    padding: .5rem .35rem;
    border: 1px solid var(--site-border, #d9e1ec);
    border-radius: .85rem;
    background: var(--site-surface, #fff);
    cursor: pointer;
    text-align: center;
    font-size: .78rem;
    font-weight: 800;
}
.cab-reshare-scope input:checked + label {
    border-color: var(--site-accent, #0d6efd);
    background: color-mix(in srgb, var(--site-accent, #0d6efd) 8%, var(--site-surface, #fff));
    box-shadow: inset 0 0 0 1px var(--site-accent, #0d6efd);
}
.cab-reshare-scope.is-disabled label {
    opacity: .38;
    cursor: not-allowed;
}
.cab-reshare-note {
    margin: .7rem 0 0;
    font-size: .71rem;
    color: var(--site-muted, #68758a);
}
.cab-reshare-error {
    margin-top: .7rem;
    padding: .55rem .65rem;
    border-radius: .7rem;
    background: #fff1f2;
    color: #9f1239;
    font-size: .76rem;
}
.cab-reshare-footer {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: .75rem 1rem 1rem;
    border-top: 1px solid color-mix(in srgb, var(--site-border, #d9e1ec) 80%, transparent);
}
.cab-reshare-footer button {
    min-height: 38px;
    border-radius: .7rem;
    padding: .45rem .8rem;
}
.cab-reshare-cancel {
    border: 0;
    background: color-mix(in srgb, var(--site-border, #d9e1ec) 32%, transparent);
}
.cab-reshare-submit {
    border: 0;
    background: var(--site-accent, #0d6efd);
    color: #fff;
    font-weight: 750;
}
.cab-reshare-external {
    border: 1px solid color-mix(in srgb, var(--site-accent, #0d6efd) 35%, var(--site-border, #d9e1ec));
    background: color-mix(in srgb, var(--site-accent, #0d6efd) 6%, var(--site-surface, #fff));
    color: var(--site-accent, #0d6efd);
    font-weight: 750;
}
.cab-reshare-external:hover,
.cab-reshare-external:focus-visible {
    background: color-mix(in srgb, var(--site-accent, #0d6efd) 12%, var(--site-surface, #fff));
}
.cab-reshare-external-note {
    margin: .5rem 0 0;
    font-size: .71rem;
    color: var(--site-muted, #68758a);
}

@media (max-width: 575.98px) {
    .cab-reshare-dialog {
        width: min(calc(100vw - 1rem), 520px);
        max-height: min(82dvh, 620px);
        border-radius: 1rem;
    }
    .cab-reshare-header { padding: .8rem .8rem .5rem; }
    .cab-reshare-body { padding: .7rem .8rem; }
    .cab-reshare-footer { padding: .65rem .8rem .8rem; }
    .cab-reshare-scope-grid { gap: .35rem; }
    .cab-reshare-scope label {
        min-height: 58px;
        padding: .4rem .25rem;
        font-size: .72rem;
    }
    .cab-reshare-original {
        grid-template-columns: 74px minmax(0, 1fr);
        padding: .45rem;
        gap: .55rem;
    }
    .cab-reshare-original-image,
    .cab-reshare-original-visual {
        width: 74px;
        height: 72px;
    }
    .cab-reshare-original-visual {
        padding: .35rem;
        font-size: .61rem;
    }
}

/* ===== SOURCE: blog-post-public-preview.css ===== */
/* Club Alex Borg 8.15.9.7.0 — aperçu public volontaire */
.cab-public-preview-modal{z-index:2065}
.cab-public-preview-dialog{max-width:620px;width:calc(100% - 2rem)}
.cab-public-preview-card{border:1px solid rgba(148,163,184,.28);border-radius:22px;box-shadow:0 28px 80px rgba(15,23,42,.18);overflow:hidden}
.cab-public-preview-header{align-items:flex-start;padding:1.15rem 1.2rem .55rem}
.cab-public-preview-header .btn-close{margin:.15rem 0 0 auto;flex:0 0 auto}
.cab-public-preview-kicker{font-size:.68rem;font-weight:850;letter-spacing:.08em;color:#1976ff;text-transform:uppercase;margin-bottom:.22rem}
.cab-public-preview-header .modal-title{font-size:1.32rem;font-weight:820;line-height:1.15;color:#172033}
.cab-public-preview-subtitle{margin:.32rem 0 0;color:#66758a;font-size:.9rem;line-height:1.35}
.cab-public-preview-body{padding:.8rem 1.2rem 1rem}
.cab-public-preview-switch-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem .95rem;border:1px solid #dbe4ef;border-radius:16px;background:#f7f9fc;cursor:pointer}
.cab-public-preview-switch-row strong{display:block;color:#1f2937;font-size:.95rem}
.cab-public-preview-switch-row small{display:block;color:#69788c;font-size:.78rem;margin-top:.12rem;line-height:1.3}
.cab-public-preview-switch{position:relative;display:inline-flex;flex:0 0 auto}
.cab-public-preview-switch input{position:absolute;opacity:0;pointer-events:none}
.cab-public-preview-switch span{width:42px;height:24px;border-radius:999px;background:#cbd5e1;position:relative;transition:.18s ease}
.cab-public-preview-switch span:after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:3px;left:3px;box-shadow:0 1px 4px rgba(15,23,42,.25);transition:.18s ease}
.cab-public-preview-switch input:checked+span{background:#1677ff}
.cab-public-preview-switch input:checked+span:after{transform:translateX(18px)}
.cab-public-preview-fields{margin-top:.9rem;padding:.95rem;border-radius:16px;border:1px solid #e1e8f1;background:#fff;transition:.18s ease}
.cab-public-preview-fields.is-disabled{opacity:.48;pointer-events:none;filter:saturate(.55)}
.cab-public-preview-fields .form-label{font-size:.83rem;font-weight:760;color:#283548}
.cab-public-preview-fields .form-control{border-radius:12px;border-color:#cbd6e4;box-shadow:none}
.cab-public-preview-fields .form-control:focus{border-color:#62a2ff;box-shadow:0 0 0 3px rgba(22,119,255,.10)}
.cab-public-preview-counter{font-size:.72rem;color:#8090a4;font-variant-numeric:tabular-nums}
.cab-public-preview-image-row{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:.75rem;align-items:center;padding:.7rem .75rem;border:1px solid #dfe7f0;border-radius:14px;background:#fafbfd;cursor:pointer}
.cab-public-preview-image-thumb{width:54px;height:42px;border-radius:10px;background:#e8edf4 center/cover no-repeat;border:1px solid #d8e1ec}
.cab-public-preview-image-copy strong{display:block;font-size:.84rem;color:#253249}
.cab-public-preview-image-copy small{display:block;font-size:.73rem;line-height:1.25;color:#738196;margin-top:.1rem}
.cab-public-preview-image-row input{width:18px;height:18px}
.cab-public-preview-safety{display:flex;gap:.5rem;align-items:flex-start;margin-top:.85rem;padding:.65rem .75rem;border-radius:13px;background:#f4f7fb;color:#66758a;font-size:.77rem;line-height:1.35}
.cab-public-preview-footer{padding:.2rem 1.2rem 1.15rem;gap:.5rem}
.cab-public-preview-footer .btn{border-radius:11px;min-height:40px}

@media (max-width: 575.98px){
  .cab-public-preview-modal .modal-dialog{margin:.65rem auto!important;min-height:calc(100% - 1.3rem)!important;display:flex!important;align-items:center!important}
  .cab-public-preview-dialog{max-width:calc(100vw - 1rem);width:calc(100vw - 1rem)!important}
  .cab-public-preview-card{height:auto!important;min-height:0!important;max-height:calc(100dvh - 1.3rem)!important;border-radius:20px!important;overflow:hidden!important}
  .cab-public-preview-body{overflow:auto;-webkit-overflow-scrolling:touch;padding:.7rem .9rem .9rem}
  .cab-public-preview-header{padding:.95rem .95rem .45rem}
  .cab-public-preview-header .modal-title{font-size:1.18rem}
  .cab-public-preview-subtitle{font-size:.82rem}
  .cab-public-preview-switch-row{padding:.72rem .78rem}
  .cab-public-preview-fields{padding:.78rem;margin-top:.72rem}
  .cab-public-preview-footer{padding:.2rem .9rem .85rem;display:grid;grid-template-columns:1fr 1fr}
  .cab-public-preview-footer .btn-outline-secondary{grid-column:1/-1;order:-1}
}

/* Club Alex Borg 9.8.0X — aperçu public réellement visible sur mobile/Site Shell. */
.cab-public-preview-modal { z-index: 111180 !important; }
body.cab-public-preview-open > .modal-backdrop.show { z-index: 111170; }
@media (max-width: 575.98px) {
  .cab-public-preview-modal.show { position:fixed!important; inset:0!important; display:block!important; padding:0!important; background:var(--bs-body-bg)!important; overflow:hidden!important; }
  .cab-public-preview-modal .modal-dialog { width:100vw!important; max-width:none!important; min-height:100dvh!important; height:100dvh!important; margin:0!important; align-items:stretch!important; }
  .cab-public-preview-modal .modal-content { width:100%!important; min-height:100dvh!important; height:100dvh!important; max-height:100dvh!important; border:0!important; border-radius:0!important; box-shadow:none!important; background:var(--bs-body-bg)!important; display:flex!important; flex-direction:column!important; }
  .cab-public-preview-header { flex:0 0 auto; padding:calc(.7rem + env(safe-area-inset-top,0px)) .85rem .55rem; border-bottom:1px solid var(--bs-border-color)!important; }
  .cab-public-preview-body { flex:1 1 auto; min-height:0; overflow-y:auto; padding:.75rem .8rem; }
  .cab-public-preview-footer { flex:0 0 auto; padding:.45rem .8rem calc(.7rem + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--bs-border-color)!important; background:var(--bs-body-bg); }
}

/* ===== SOURCE: blog-post-ai-disclosure.css ===== */
/* Club Alex Borg 8.15.9.7.7 — badge AI autonome + explication discrète Day/Night. */
.cab-ai-disclosure-dialog { max-width: 31rem; }
.cab-ai-learn-dialog { max-width: 37rem; }
.cab-ai-disclosure-card,
.cab-ai-learn-card {
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 1.1rem;
    overflow: hidden;
    background: #ffffff;
    color: #172033;
    box-shadow: 0 24px 70px rgba(15,23,42,.22);
}
.cab-ai-disclosure-header { padding: 1rem 1.1rem .55rem; align-items: flex-start; }
.cab-ai-disclosure-kicker { color: #0d6efd; font-size: .67rem; font-weight: 800; letter-spacing: .07em; }
.cab-ai-disclosure-header .modal-title { font-size: 1.28rem; font-weight: 760; }
.cab-ai-disclosure-body { padding: .65rem 1.1rem 1rem; }
.cab-ai-disclosure-info,
.cab-ai-disclosure-choice { border: 1px solid #dbe3ef; background: #f8fafc; border-radius: .85rem; padding: .9rem; }
.cab-ai-disclosure-info { color: #334155; font-size: .9rem; line-height: 1.48; }
.cab-ai-info-badge { display: inline-flex; align-items: center; gap: .28rem; margin-bottom: .72rem; color: #2563eb; font-size: .74rem; font-weight: 850; }
.cab-ai-info-badge span { display: inline-flex; width: 1rem; height: 1rem; align-items: center; justify-content: center; border: 1px solid currentColor; border-radius: 50%; font-size: .62rem; }
.cab-ai-info-lead { color: #172033; }
.cab-ai-info-fine { color: #64748b; font-size: .82rem; }
.cab-ai-disclosure-choice { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; }
.cab-ai-disclosure-choice > span:first-child { display: grid; gap: .18rem; min-width: 0; }
.cab-ai-disclosure-choice strong { font-size: .9rem; }
.cab-ai-disclosure-choice small { color: #64748b; font-size: .76rem; line-height: 1.3; }
.cab-ai-disclosure-note { margin-top: .7rem; color: #64748b; font-size: .75rem; line-height: 1.35; }
.cab-ai-disclosure-footer { padding: .75rem 1.1rem 1rem; gap: .45rem; }

/* L’auteur reste cliquable/survolable, mais le badge AI vit désormais hors du trigger profil. */
.blog-person-meta-profile {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    flex: 0 1 auto;
    border-radius: .48rem;
    padding: .08rem .12rem;
    margin: -.08rem 0 -.08rem -.12rem;
    transition: background-color 140ms ease, color 140ms ease;
}
.blog-person-meta-profile .blog-person-meta-name {
    min-width: 0;
    max-width: min(13rem, 38vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.blog-person-meta-profile[data-profile-hover-linkable="1"] { cursor: pointer; outline: none; }
.blog-person-meta-profile[data-profile-hover-linkable="1"]:hover,
.blog-person-meta-profile[data-profile-hover-linkable="1"]:focus-visible { background: rgba(37, 99, 235, .08); color: #0f172a; }
.blog-person-meta-profile[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-profile[data-profile-hover-linkable="1"]:hover .blog-person-meta-name,
.blog-person-meta-profile[data-profile-hover-linkable="1"]:focus-visible .blog-person-meta-name { text-decoration-color: currentColor; }
.blog-person-meta-inline > .blog-person-meta-text { flex: 1 1 auto; }

.blog-post-ai-indicator {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    margin: 0 .08rem 0 0;
    color: #3978c8;
    font-size: .61rem;
    font-weight: 850;
    line-height: 1;
    vertical-align: .04em;
    cursor: pointer;
    outline: none;
    white-space: nowrap;
    isolation: isolate;
}
.blog-post-ai-indicator-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: .78rem;
    height: .78rem;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: .5rem;
    font-weight: 900;
    line-height: 1;
}
.blog-post-ai-indicator-label { letter-spacing: .015em; }
.blog-post-ai-indicator::after {
    content: attr(data-ai-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + .48rem);
    z-index: 2260;
    width: max-content;
    max-width: min(16rem, 72vw);
    padding: .42rem .55rem;
    border-radius: .52rem;
    background: #172033;
    color: #fff;
    box-shadow: 0 8px 24px rgba(15,23,42,.2);
    font-size: .68rem;
    font-weight: 550;
    line-height: 1.3;
    text-align: left;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, .18rem);
    transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
    pointer-events: none;
}
.blog-post-ai-indicator:hover::after,
.blog-post-ai-indicator:focus-visible::after,
.blog-post-ai-indicator:focus::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.blog-post-ai-indicator:focus-visible { border-radius: .35rem; box-shadow: 0 0 0 2px rgba(37,99,235,.22); }

.cab-ai-learn-body { padding: .6rem 1.1rem 1rem; max-height: min(64vh, 31rem); overflow-y: auto; overscroll-behavior: contain; }
.cab-ai-learn-intro { margin: 0 0 .9rem; color: #475569; font-size: .9rem; line-height: 1.5; }
.cab-ai-learn-grid { display: grid; gap: .65rem; }
.cab-ai-learn-item { display: grid; grid-template-columns: 1.7rem minmax(0,1fr); gap: .65rem; padding: .72rem .78rem; border: 1px solid #e2e8f0; border-radius: .82rem; background: #fbfdff; }
.cab-ai-learn-icon { display: flex; align-items: center; justify-content: center; width: 1.55rem; height: 1.55rem; border-radius: .5rem; background: #eaf2ff; color: #2563eb; font-size: .72rem; font-weight: 850; }
.cab-ai-learn-item h3 { margin: 0 0 .14rem; font-size: .86rem; font-weight: 780; color: #172033; }
.cab-ai-learn-item p { margin: 0; color: #5d6b80; font-size: .79rem; line-height: 1.42; }
.cab-ai-learn-note { margin-top: .75rem; padding: .72rem .8rem; border-radius: .82rem; background: #eef5ff; color: #355275; font-size: .8rem; line-height: 1.43; }

/* Les deux modales sont compactes, centrées et isolées du shell, en Day comme en Night. */
.cab-ai-disclosure-modal,
.cab-ai-learn-modal { z-index: 2180 !important; }
.cab-ai-disclosure-modal.show,
.cab-ai-learn-modal.show { display: flex !important; align-items: center !important; justify-content: center !important; padding: 1rem !important; }
body.cab-ai-disclosure-open > .modal-backdrop.show,
body.cab-ai-disclosure-open .modal-backdrop.show { z-index: 2170 !important; background: rgba(15, 23, 42, .42) !important; opacity: 1 !important; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.cab-ai-disclosure-fallback-backdrop { position: fixed; inset: 0; z-index: 2170; background: rgba(15, 23, 42, .42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

/* NIGHT */
[data-theme="dark"] .cab-ai-disclosure-card,
[data-theme="dark"] .cab-ai-learn-card { background: #111827; color: #f8fafc; border-color: rgba(125, 180, 255, .16); box-shadow: 0 26px 78px rgba(2,6,23,.62); }
[data-theme="dark"] .cab-ai-disclosure-info,
[data-theme="dark"] .cab-ai-disclosure-choice { background: #172033; border-color: #334155; color: #e5edf8; }
[data-theme="dark"] .cab-ai-info-lead,
[data-theme="dark"] .cab-ai-learn-item h3 { color: #f1f5f9; }
[data-theme="dark"] .cab-ai-info-fine,
[data-theme="dark"] .cab-ai-disclosure-choice small,
[data-theme="dark"] .cab-ai-disclosure-note,
[data-theme="dark"] .cab-ai-learn-intro,
[data-theme="dark"] .cab-ai-learn-item p { color: #a8b6ca; }
[data-theme="dark"] .cab-ai-learn-item { background: #151f31; border-color: #2b3b55; }
[data-theme="dark"] .cab-ai-learn-icon { background: #20355a; color: #8bbcff; }
[data-theme="dark"] .cab-ai-learn-note { background: #172b49; color: #bfd6f4; }
[data-theme="dark"] .blog-post-ai-indicator { color: #82b8ff; }
[data-theme="dark"] .blog-post-ai-indicator::after { background: #eef4ff; color: #152033; box-shadow: 0 10px 28px rgba(0,0,0,.38); }
[data-theme="dark"] .blog-person-meta-profile[data-profile-hover-linkable="1"]:hover,
[data-theme="dark"] .blog-person-meta-profile[data-profile-hover-linkable="1"]:focus-visible { background: rgba(125,180,255,.12); color: #e6ebf5; }
[data-theme="dark"] .cab-ai-disclosure-card .btn-close,
[data-theme="dark"] .cab-ai-learn-card .btn-close { filter: invert(1) grayscale(100%) brightness(190%); opacity: .78; }
[data-theme="dark"] .cab-ai-disclosure-card .btn-light,
[data-theme="dark"] .cab-ai-learn-card .btn-light { background: #1d293b; border-color: #334155; color: #e8eef8; }
[data-theme="dark"] .cab-ai-disclosure-card .btn-outline-primary { color: #8bbcff; border-color: #4776b5; }
[data-theme="dark"] .cab-ai-disclosure-card .btn-outline-primary:hover { background: #24446f; color: #fff; }

@media (max-width: 767.98px) {
    body.clubos-mobile-active .cab-ai-disclosure-modal,
    body.clubos-mobile-active .cab-ai-learn-modal,
    .cab-ai-disclosure-modal,
    .cab-ai-learn-modal { padding: .75rem !important; }
    body.clubos-mobile-active .cab-ai-disclosure-modal .modal-dialog,
    body.clubos-mobile-active .cab-ai-learn-modal .modal-dialog,
    .cab-ai-disclosure-modal .modal-dialog,
    .cab-ai-learn-modal .modal-dialog { width: min(calc(100vw - 1.25rem), 37rem) !important; max-width: 37rem !important; min-height: 0 !important; height: auto !important; margin: auto !important; display: flex !important; align-items: center !important; }
    body.clubos-mobile-active .cab-ai-disclosure-modal .modal-content,
    body.clubos-mobile-active .cab-ai-learn-modal .modal-content,
    .cab-ai-disclosure-modal .modal-content,
    .cab-ai-learn-modal .modal-content { width: 100% !important; min-height: 0 !important; height: auto !important; max-height: min(82dvh, 38rem) !important; border-radius: 1.15rem !important; overflow: hidden !important; }
    .cab-ai-disclosure-body,
    .cab-ai-learn-body { overflow-y: auto; overscroll-behavior: contain; }
    .cab-ai-disclosure-footer { flex-wrap: wrap; }
    .cab-ai-learn-item { grid-template-columns: 1.55rem minmax(0,1fr); gap: .55rem; padding: .65rem .68rem; }
    .cab-ai-learn-body { max-height: 58dvh; }
}

@media (max-width: 420px) {
    .cab-ai-disclosure-header { padding: .88rem .92rem .42rem; }
    .cab-ai-disclosure-body,
    .cab-ai-learn-body { padding-left: .92rem; padding-right: .92rem; }
    .cab-ai-disclosure-footer { padding: .62rem .92rem .82rem; }
    .cab-ai-disclosure-footer .btn { font-size: .82rem; padding: .48rem .72rem; }
}

/* ===== SOURCE: blog-post-embeds.css ===== */
.cab-post-embed {
    position: relative;
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(100, 116, 139, .24);
    border-radius: 14px;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #172033);
    box-shadow: 0 4px 18px rgba(15, 23, 42, .08);
}

.cab-post-embed-visual,
.cab-post-embed-player {
    position: relative;
    width: 100%;
    aspect-ratio: var(--cab-embed-ratio, 1.7778);
    min-height: 180px;
    overflow: hidden;
    background: #080d16;
}

.cab-post-embed.is-provider-tiktok .cab-post-embed-visual,
.cab-post-embed.is-provider-tiktok .cab-post-embed-player {
    max-height: min(76vh, 720px);
}

.cab-post-embed-thumbnail,
.cab-post-embed-player iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.cab-post-embed-thumbnail {
    object-fit: cover;
}

.cab-post-embed-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 5rem);
    font-weight: 800;
    color: #fff;
    background: radial-gradient(circle at 25% 20%, #334155, #080d16 70%);
}

.cab-post-embed-provider-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: .3rem .6rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, .82);
    color: #fff;
    font-size: .76rem;
    font-weight: 700;
    backdrop-filter: blur(8px);
}

.cab-post-embed-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 46px;
    padding: .7rem 1rem;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .96);
    color: #111827;
    font-weight: 800;
    box-shadow: 0 10px 32px rgba(0, 0, 0, .28);
}

.cab-post-embed-play:hover,
.cab-post-embed-play:focus-visible {
    transform: translate(-50%, -50%) scale(1.04);
    outline: 3px solid rgba(59, 130, 246, .45);
}

.cab-post-embed-player-close {
    position: absolute;
    z-index: 3;
    top: 10px;
    right: 10px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 23, 42, .82);
    color: #fff;
    font-size: 1.45rem;
    line-height: 1;
}

.cab-post-embed-copy {
    display: grid;
    gap: .35rem;
    padding: .9rem 1rem 1rem;
}

.cab-post-embed-source {
    color: #64748b;
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .035em;
}

.cab-post-embed-title {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 800;
}

.cab-post-embed-description {
    display: -webkit-box;
    overflow: hidden;
    color: #475569;
    font-size: .9rem;
    line-height: 1.35;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.cab-post-embed-open {
    width: fit-content;
    color: #2563eb;
    font-size: .86rem;
    font-weight: 700;
    text-decoration: none;
}

.cab-post-embed-open:hover,
.cab-post-embed-open:focus-visible {
    text-decoration: underline;
}

.blog-post-card .cab-post-embed {
    margin-top: .45rem;
}

.blog-post-card .cab-post-embed-copy {
    padding: .7rem .8rem .8rem;
}

.blog-post-card .cab-post-embed-description {
    -webkit-line-clamp: 2;
}

.blog-modal-post .cab-post-embed,
.blog-content > .cab-post-embed {
    margin: 1rem 0;
}

.blog-modal-embed-wrap {
    width: 100%;
    min-width: 0;
}

.post-display-reader-embed {
    width: min(100%, 82ch);
    margin: 1.25rem auto;
}

.post-display-reader-embed .cab-post-embed {
    margin: 0;
}

.post-display-media-panel-embed {
    margin-top: .85rem;
}

.post-display-media-panel-embed .cab-post-embed {
    margin: 0;
    box-shadow: none;
}

.post-display-media-stage.has-external-embed {
    overflow: auto;
    padding: 24px;
}

.post-display-media-stage-embed {
    width: min(100%, 1120px);
    margin: auto;
}

.post-display-media-stage-embed .cab-post-embed {
    margin: 0;
    box-shadow: 0 18px 54px rgba(0, 0, 0, .38);
}

.post-display-media-stage-embed .cab-post-embed-visual,
.post-display-media-stage-embed .cab-post-embed-player {
    max-height: calc(100dvh - 210px);
}

.cab-post-embed.is-playing {
    border-color: rgba(59, 130, 246, .45);
}

.cab-post-embed-player-close:hover,
.cab-post-embed-player-close:focus-visible {
    background: rgba(15, 23, 42, .96);
    outline: 3px solid rgba(255, 255, 255, .55);
}

.cab-composer-link-preview {
    margin-top: .75rem;
    border: 1px solid rgba(100, 116, 139, .28);
    border-radius: 12px;
    overflow: hidden;
    background: var(--bs-body-bg, #fff);
}

.cab-composer-link-preview-status {
    padding: .6rem .8rem;
    color: #64748b;
    font-size: .82rem;
}

.cab-composer-link-preview-status[data-state="error"] {
    color: #b91c1c;
    background: rgba(239, 68, 68, .08);
}

.cab-composer-link-preview-card {
    display: grid;
    grid-template-columns: minmax(110px, 30%) 1fr auto;
    gap: .8rem;
    align-items: center;
    padding: .75rem;
    border-top: 1px solid rgba(100, 116, 139, .2);
}

.cab-composer-link-preview-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 9px;
    background: #e2e8f0;
}

.cab-composer-link-preview-copy {
    min-width: 0;
}

.cab-composer-link-preview-provider {
    color: #64748b;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.cab-composer-link-preview-title {
    margin-top: .15rem;
    font-weight: 800;
    line-height: 1.2;
}

.cab-composer-link-preview-description {
    display: -webkit-box;
    overflow: hidden;
    margin-top: .25rem;
    color: #64748b;
    font-size: .83rem;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.cab-composer-preview-link-card {
    display: grid;
    grid-template-columns: minmax(100px, 30%) 1fr;
    gap: .8rem;
    margin-top: .8rem;
    overflow: hidden;
    border: 1px solid rgba(100, 116, 139, .25);
    border-radius: 12px;
}

.cab-composer-preview-link-card img {
    width: 100%;
    height: 100%;
    min-height: 100px;
    object-fit: cover;
}

.cab-composer-preview-link-card > div {
    padding: .75rem .75rem .75rem 0;
}

.cab-composer-preview-link-card p {
    margin: .35rem 0 0;
    color: #64748b;
    font-size: .84rem;
}

.cab-composer-preview-link-source {
    margin-bottom: .2rem;
    color: #64748b;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
}

[data-theme="dark"] .cab-post-embed,
[data-theme="dark"] .cab-composer-link-preview {
    border-color: rgba(148, 163, 184, .25);
    background: #111827;
    color: #f8fafc;
}

[data-theme="dark"] .cab-post-embed-description,
[data-theme="dark"] .cab-post-embed-source,
[data-theme="dark"] .cab-composer-link-preview-description,
[data-theme="dark"] .cab-composer-link-preview-provider,
[data-theme="dark"] .cab-composer-link-preview-status {
    color: #94a3b8;
}

@media (max-width: 900px) {
    .post-display-media-stage.has-external-embed {
        height: auto;
        min-height: 230px;
        max-height: 48dvh;
        padding: max(62px, calc(env(safe-area-inset-top) + 54px)) 8px 8px;
    }

    .post-display-media-stage-embed .cab-post-embed-visual,
    .post-display-media-stage-embed .cab-post-embed-player {
        min-height: 190px;
        max-height: 42dvh;
    }
}

@media (max-width: 575.98px) {
    .cab-composer-link-preview-card {
        grid-template-columns: 92px 1fr;
    }
    .cab-composer-link-preview-remove {
        grid-column: 1 / -1;
        justify-self: end;
    }
    .cab-post-embed-visual,
    .cab-post-embed-player {
        min-height: 170px;
    }
}

/* Cartes de liens dans les commentaires et leurs composeurs. */
.blog-comment-external-link {
    color: #2563eb;
    overflow-wrap: anywhere;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.blog-comment-embed-wrap {
    margin-top: .55rem;
    width: min(100%, 520px);
}

.cab-post-embed.is-context-comment {
    border-radius: 11px;
    box-shadow: none;
    background: rgba(255, 255, 255, .72);
}

.cab-post-embed.is-context-comment .cab-post-embed-media {
    display: grid;
    grid-template-columns: minmax(118px, 34%) 1fr;
    min-width: 0;
}

.cab-post-embed.is-context-comment .cab-post-embed-visual,
.cab-post-embed.is-context-comment .cab-post-embed-player {
    min-height: 116px;
    aspect-ratio: 16 / 9;
    border-radius: 0;
}

.cab-post-embed.is-context-comment .cab-post-embed-copy {
    align-content: center;
    min-width: 0;
    padding: .65rem .75rem;
}

.cab-post-embed.is-context-comment .cab-post-embed-title {
    display: -webkit-box;
    overflow: hidden;
    font-size: .88rem;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.cab-post-embed.is-context-comment .cab-post-embed-description {
    font-size: .78rem;
    -webkit-line-clamp: 2;
}

.cab-post-embed.is-context-comment .cab-post-embed-provider-badge {
    top: 7px;
    left: 7px;
    padding: .2rem .45rem;
    font-size: .66rem;
}

.cab-post-embed.is-context-comment .cab-post-embed-play {
    min-height: 36px;
    padding: .45rem .68rem;
    font-size: .78rem;
}

.cab-post-embed.is-context-comment.is-playing .cab-post-embed-media {
    display: block;
}

.cab-post-embed.is-context-comment.is-playing .cab-post-embed-player {
    min-height: 220px;
}

.post-display-comment-link-preview {
    width: 100%;
    order: 2;
}

.cab-comment-link-preview-status,
.cab-comment-link-preview-card {
    margin-bottom: .45rem;
    border: 1px solid rgba(100, 116, 139, .24);
    border-radius: 10px;
    background: var(--bs-body-bg, #fff);
}

.cab-comment-link-preview-status {
    padding: .5rem .65rem;
    color: #64748b;
    font-size: .78rem;
}

.cab-comment-link-preview-status[data-state="error"] {
    color: #9a3412;
    background: rgba(251, 146, 60, .1);
}

.cab-comment-link-preview-card {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    gap: .55rem;
    align-items: center;
    overflow: hidden;
    padding: .45rem;
}

.cab-comment-link-preview-image,
.cab-comment-link-preview-placeholder {
    width: 92px;
    height: 58px;
    border-radius: 7px;
    background: #e2e8f0;
}

.cab-comment-link-preview-image {
    object-fit: cover;
}

.cab-comment-link-preview-placeholder {
    display: grid;
    place-items: center;
    color: #475569;
    font-size: 1.3rem;
    font-weight: 800;
}

.cab-comment-link-preview-copy {
    min-width: 0;
}

.cab-comment-link-preview-provider {
    color: #64748b;
    font-size: .67rem;
    font-weight: 800;
    text-transform: uppercase;
}

.cab-comment-link-preview-title {
    display: -webkit-box;
    overflow: hidden;
    margin-top: .1rem;
    font-size: .82rem;
    font-weight: 800;
    line-height: 1.2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.cab-comment-link-preview-description {
    display: -webkit-box;
    overflow: hidden;
    margin-top: .12rem;
    color: #64748b;
    font-size: .72rem;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.cab-comment-link-preview-remove {
    border: 0;
    border-radius: 8px;
    padding: .35rem .5rem;
    background: transparent;
    color: #64748b;
    font-size: .75rem;
    font-weight: 700;
}

.cab-comment-link-preview-remove:hover,
.cab-comment-link-preview-remove:focus-visible {
    background: rgba(100, 116, 139, .12);
    color: var(--bs-body-color, #172033);
    outline: none;
}

[data-theme="dark"] .cab-post-embed.is-context-comment,
[data-theme="dark"] .cab-comment-link-preview-status,
[data-theme="dark"] .cab-comment-link-preview-card {
    background: #111827;
    border-color: rgba(148, 163, 184, .25);
}

@media (max-width: 575.98px) {
    .cab-post-embed.is-context-comment .cab-post-embed-media {
        grid-template-columns: 104px 1fr;
    }
    .cab-post-embed.is-context-comment .cab-post-embed-description {
        display: none;
    }
    .cab-comment-link-preview-card {
        grid-template-columns: 76px minmax(0, 1fr) auto;
    }
    .cab-comment-link-preview-image,
    .cab-comment-link-preview-placeholder {
        width: 76px;
        height: 48px;
    }
}

.cab-comment-link-preview-status {
    display: flex;
    gap: .65rem;
    align-items: center;
    justify-content: space-between;
}

.cab-comment-link-preview-status-text {
    min-width: 0;
}

.blog-comment-inline-preview-option {
    display: flex;
    gap: .45rem;
    align-items: center;
    margin-top: .45rem;
    color: #64748b;
    font-size: .78rem;
    cursor: pointer;
}

.blog-comment-inline-preview-option input {
    flex: 0 0 auto;
}

/* 8.9.2 — iframe YouTube collé dans le texte d'une publication. */
.cab-post-inline-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: .75rem 0;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .14);
    border-radius: 14px;
    background: #020617;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
}

.cab-post-inline-embed iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.blog-post-card .cab-post-inline-embed {
    margin: .5rem 0 .65rem;
    border-radius: 10px;
    box-shadow: none;
}

[data-theme="dark"] .cab-post-inline-embed {
    border-color: rgba(96, 165, 250, .28);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
}


/* R115 FIX9 — cartes d'aperçu plus premium sur le mur. */
.blog-post-card .cab-post-embed {
    background: linear-gradient(145deg, #fbfeff 0%, #eefaff 44%, #f9fcff 100%);
    border-color: rgba(125, 192, 216, .34);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
    isolation: isolate;
}

.blog-post-card .cab-post-embed::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,0) 38%, rgba(153,236,255,.16) 100%);
    z-index: 0;
}

.blog-post-card .cab-post-embed > * {
    position: relative;
    z-index: 1;
}

.blog-post-card .cab-post-embed-source {
    color: #4f6b80;
}

.blog-post-card .cab-post-embed-description {
    color: #42576a;
}

:root[data-theme="dark"] .blog-post-card .cab-post-embed {
    background: linear-gradient(145deg, #0f2435 0%, #12344c 45%, #0a1624 100%);
    border-color: rgba(88, 171, 214, .26);
    box-shadow: 0 14px 30px rgba(2, 8, 23, .36), inset 0 1px 0 rgba(255,255,255,.04);
}

:root[data-theme="dark"] .blog-post-card .cab-post-embed::before {
    background: linear-gradient(135deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 38%, rgba(72,168,214,.16) 100%);
}

:root[data-theme="dark"] .blog-post-card .cab-post-embed-source {
    color: #9cc4d7;
}

:root[data-theme="dark"] .blog-post-card .cab-post-embed-description {
    color: #d0dfeb;
}

/* R119.2 FIX1 — le lecteur long reprend la carte riche visible sur le mur. */
.post-display-reader-embed .cab-post-embed {
    background: linear-gradient(145deg, #fbfeff 0%, #eefaff 44%, #f9fcff 100%);
    border-color: rgba(125, 192, 216, .34);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
    isolation: isolate;
}

.post-display-reader-embed .cab-post-embed::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,0) 38%, rgba(153,236,255,.16) 100%);
    z-index: 0;
}

.post-display-reader-embed .cab-post-embed > * {
    position: relative;
    z-index: 1;
}

.post-display-reader-embed .cab-post-embed-copy {
    display: grid;
    visibility: visible;
    opacity: 1;
}

.post-display-reader-embed .cab-post-embed-source { color: #4f6b80; }
.post-display-reader-embed .cab-post-embed-description { color: #42576a; }

:root[data-theme="dark"] .post-display-reader-embed .cab-post-embed {
    background: linear-gradient(145deg, #0f2435 0%, #12344c 45%, #0a1624 100%);
    border-color: rgba(88, 171, 214, .26);
    box-shadow: 0 14px 30px rgba(2, 8, 23, .36), inset 0 1px 0 rgba(255,255,255,.04);
}

:root[data-theme="dark"] .post-display-reader-embed .cab-post-embed::before {
    background: linear-gradient(135deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 38%, rgba(72,168,214,.16) 100%);
}


/* R119.4A DESK5C FIX15P3FIX7 — feed YouTube compact + SVG play. */
.cab-post-embed-play {
    width: 74px;
    height: 74px;
    min-width: 74px;
    min-height: 74px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
}
.cab-post-embed-play-icon {
    display: inline-flex;
    width: 74px;
    height: 74px;
}
.cab-post-embed-play-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .24));
}
.blog-post-card .cab-post-embed-copy.is-feed-card-copy {
    gap: .15rem;
    padding: .68rem .8rem .76rem;
}
.blog-post-card .cab-post-embed-copy.is-feed-card-copy .cab-post-embed-title {
    font-size: 1rem;
    line-height: 1.28;
}
@media (max-width: 767.98px) {
    .cab-post-embed-play,
    .cab-post-embed-play-icon {
        width: 68px;
        height: 68px;
        min-width: 68px;
        min-height: 68px;
    }
}

/* ===== SOURCE: blog-post-enrichments.css ===== */
.cab-embed-enrichment{border-top:1px solid rgba(127,127,127,.22);background:var(--bs-body-bg,#fff)}
.cab-embed-enrichment-tabs{display:flex;align-items:center;gap:.35rem;padding:.55rem .7rem;overflow-x:auto;scrollbar-width:thin}
.cab-embed-tab,.cab-embed-enrich-edit{border:0;border-radius:999px;padding:.42rem .72rem;background:transparent;color:var(--bs-secondary-color,#5e6672);font-weight:700;white-space:nowrap;cursor:pointer}
.cab-embed-tab:hover,.cab-embed-tab:focus-visible,.cab-embed-enrich-edit:hover,.cab-embed-enrich-edit:focus-visible{background:rgba(13,110,253,.09);color:var(--bs-primary,#0d6efd);outline:none}
.cab-embed-tab.is-active{background:rgba(13,110,253,.14);color:var(--bs-primary,#0d6efd)}
.cab-embed-enrich-edit{margin-left:auto;border:1px solid rgba(13,110,253,.28);color:var(--bs-primary,#0d6efd)}
.cab-embed-panel{padding:.8rem 1rem 1rem;max-height:30rem;overflow:auto}
.cab-embed-summary{margin:0 0 .8rem;white-space:pre-line;line-height:1.55}
.cab-embed-key-points{margin:0;padding-left:1.25rem;display:grid;gap:.45rem}
.cab-embed-chapters{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.cab-embed-seek,.cab-embed-transcript-line{width:100%;display:grid;grid-template-columns:4.9rem minmax(0,1fr);gap:.65rem;align-items:start;border:0;border-radius:.65rem;padding:.55rem .65rem;background:transparent;text-align:left;color:inherit;cursor:pointer}
.cab-embed-seek:hover,.cab-embed-transcript-line:hover,.cab-embed-seek:focus-visible,.cab-embed-transcript-line:focus-visible{background:rgba(13,110,253,.09);outline:none}
.cab-embed-seek time,.cab-embed-transcript-line time{font-variant-numeric:tabular-nums;color:var(--bs-primary,#0d6efd);font-weight:800}
.cab-embed-transcript-segments{display:grid;gap:.2rem}
.cab-embed-transcript-line span{line-height:1.45}
.cab-embed-transcript-text{white-space:pre-wrap;line-height:1.55}
.cab-embed-enrichment-meta{padding:.2rem 1rem .7rem;color:var(--bs-secondary-color,#687386);font-size:.78rem;text-align:right}
.cab-enrichment-export-tools{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem;margin:0 0 .65rem;color:var(--bs-secondary-color,#687386);font-size:.82rem}
.cab-enrichment-export{border:1px solid rgba(127,127,127,.35);border-radius:.45rem;padding:.2rem .48rem;background:transparent;color:inherit;font-size:.76rem;font-weight:800;cursor:pointer}
.cab-enrichment-export:hover,.cab-enrichment-export:focus-visible{border-color:var(--bs-primary,#0d6efd);color:var(--bs-primary,#0d6efd);outline:none}
.cab-enrichment-dialog{width:min(850px,calc(100vw - 2rem));max-height:min(940px,calc(100vh - 2rem));border:0;border-radius:1rem;padding:0;box-shadow:0 24px 80px rgba(0,0,0,.32);background:var(--bs-body-bg,#fff);color:var(--bs-body-color,#1e293b)}
.cab-enrichment-dialog::backdrop{background:rgba(15,23,42,.62);backdrop-filter:blur(2px)}
.cab-enrichment-dialog-shell{position:relative;display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto;max-height:inherit}
.cab-enrichment-dialog header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1rem 1.2rem;border-bottom:1px solid rgba(127,127,127,.25)}
.cab-enrichment-dialog h2{margin:.12rem 0 0;font-size:1.35rem}.cab-enrichment-kicker{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--bs-primary,#0d6efd);font-weight:800}
.cab-enrichment-save-state{display:block;min-height:1.1rem;margin-top:.2rem;color:var(--bs-secondary-color,#687386);font-size:.78rem}
.cab-enrichment-close{width:2.35rem;height:2.35rem;border:0;border-radius:50%;font-size:1.65rem;line-height:1;background:rgba(127,127,127,.14);color:inherit;cursor:pointer}
.cab-enrichment-close:hover,.cab-enrichment-close:focus-visible{background:rgba(127,127,127,.25);outline:3px solid rgba(13,110,253,.18)}
.cab-enrichment-restore,.cab-enrichment-import-confirm{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1.2rem;border-bottom:1px solid rgba(127,127,127,.2);background:rgba(13,110,253,.08)}
.cab-enrichment-restore[hidden],.cab-enrichment-import-confirm[hidden]{display:none}
.cab-enrichment-restore>div,.cab-enrichment-import-confirm>div{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}.cab-enrichment-restore span{margin-left:.35rem;color:var(--bs-secondary-color,#687386);font-size:.82rem}
.cab-enrichment-import-confirm{background:rgba(255,193,7,.14)}
.cab-enrichment-scroll{overflow:auto;padding:1rem 1.2rem;display:grid;gap:1rem}
.cab-enrichment-scroll label{display:grid;gap:.4rem;font-weight:750}.cab-enrichment-scroll textarea,.cab-enrichment-scroll input[type=text],.cab-enrichment-scroll input:not([type]){width:100%;border:1px solid rgba(127,127,127,.4);border-radius:.7rem;padding:.7rem .8rem;background:var(--bs-body-bg,#fff);color:inherit;font:inherit;font-weight:400;resize:vertical}
.cab-enrichment-scroll textarea:focus,.cab-enrichment-scroll input:focus{outline:3px solid rgba(13,110,253,.2);border-color:var(--bs-primary,#0d6efd)}
.cab-enrichment-scroll small,.cab-enrichment-import-status{font-weight:400;color:var(--bs-secondary-color,#687386)}
.cab-enrichment-import{padding:.85rem;border:1px dashed rgba(13,110,253,.45);border-radius:.8rem;display:grid;gap:.45rem}.cab-enrichment-import input{display:block;margin-top:.4rem;font-weight:400}
.cab-enrichment-language{max-width:11rem}
.cab-enrichment-segment-editor{border:1px solid rgba(127,127,127,.28);border-radius:.8rem;padding:.75rem .85rem}.cab-enrichment-segment-editor summary{cursor:pointer;font-weight:800}.cab-enrichment-segment-editor p{margin:.7rem 0;color:var(--bs-secondary-color,#687386);font-size:.86rem}.cab-enrichment-segment-editor code{font-size:.8rem}.cab-enrichment-segment-editor textarea{min-height:12rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.84rem;line-height:1.45}
.cab-enrichment-inline-actions,.cab-enrichment-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.55rem;flex-wrap:wrap;margin-top:.65rem}.cab-enrichment-toolbar{margin-top:0;padding:.75rem;border-radius:.8rem;background:rgba(127,127,127,.08)}.cab-enrichment-toolbar .cab-enrichment-export-tools{margin:0}
.cab-enrichment-preview{border:1px solid rgba(13,110,253,.28);border-radius:.85rem;padding:1rem;background:rgba(13,110,253,.045)}.cab-enrichment-preview[hidden]{display:none}.cab-enrichment-preview h3{margin:0 0 .85rem;font-size:1.08rem}.cab-enrichment-preview h4{margin:1rem 0 .5rem;font-size:.95rem}.cab-enrichment-preview-line{padding:.25rem 0}.cab-enrichment-preview-transcript{max-height:18rem;overflow:auto;white-space:pre-wrap;margin:0;padding:.75rem;border-radius:.65rem;background:rgba(15,23,42,.06);font:inherit;font-size:.87rem;line-height:1.45}
.cab-enrichment-error{padding:.7rem .8rem;border-radius:.65rem;background:#fff0f1;color:#b4232c;font-weight:700}
.cab-enrichment-dialog footer{display:flex;align-items:center;gap:.65rem;padding:1rem 1.2rem;border-top:1px solid rgba(127,127,127,.25);background:var(--bs-body-bg,#fff)}.cab-enrichment-footer-spacer{flex:1}
.cab-enrichment-confirm{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1rem;padding:2rem;text-align:center;background:color-mix(in srgb,var(--bs-body-bg,#fff) 92%,transparent);backdrop-filter:blur(4px)}.cab-enrichment-confirm[hidden]{display:none}.cab-enrichment-confirm p{margin:.35rem 0 0;color:var(--bs-secondary-color,#687386)}.cab-enrichment-confirm>div:last-child{display:flex;gap:.65rem;flex-wrap:wrap;justify-content:center}
.cab-embed-seek-notice{position:fixed;left:50%;bottom:1rem;z-index:2147483647;transform:translate(-50%,1rem);opacity:0;pointer-events:none;background:#111827;color:#fff;border-radius:.65rem;padding:.7rem 1rem;transition:.2s}.cab-embed-seek-notice.is-visible{opacity:1;transform:translate(-50%,0)}
@media(max-width:680px){.cab-embed-enrichment-tabs{padding:.5rem}.cab-embed-enrich-edit{margin-left:0}.cab-embed-panel{padding:.7rem}.cab-embed-seek,.cab-embed-transcript-line{grid-template-columns:4rem minmax(0,1fr);padding:.5rem}.cab-enrichment-dialog{width:100vw;max-width:none;height:100dvh;max-height:none;border-radius:0}.cab-enrichment-dialog-shell{height:100dvh;max-height:100dvh}.cab-enrichment-dialog footer{position:sticky;bottom:0}.cab-enrichment-restore,.cab-enrichment-import-confirm{align-items:flex-start;flex-direction:column}.cab-enrichment-toolbar{align-items:flex-start;flex-direction:column}.cab-enrichment-dialog footer{flex-wrap:wrap}.cab-enrichment-footer-spacer{display:none}.cab-enrichment-dialog footer .btn{flex:1 1 calc(50% - .4rem)}.cab-enrichment-dialog footer .js-enrichment-delete{flex-basis:100%}}
@media(prefers-reduced-motion:reduce){.cab-embed-seek-notice{transition:none}}

/* ===== SOURCE: blog-multi-media.css ===== */
/* ClubOS 7.9 — galerie du composeur, cartes multi-images et navigation média. */
.cab-composer-gallery-wrap { border:1px solid #d9e1ec; border-radius:14px; padding:12px; background:#f8fafc; }
.cab-composer-gallery-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.cab-composer-gallery-head > div { display:flex; align-items:baseline; gap:8px; }
.cab-composer-gallery-head span { color:#64748b; font-size:.8rem; }
.cab-composer-gallery-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.cab-composer-gallery-card { min-width:0; overflow:hidden; border:1px solid #d7dfeb; border-radius:12px; background:#fff; box-shadow:0 3px 10px rgba(15,23,42,.05); }
.cab-composer-gallery-card.is-dragging { opacity:.45; }
.cab-composer-gallery-visual { position:relative; aspect-ratio:16/10; overflow:hidden; background:#080b11; display:grid; place-items:center; }
.cab-composer-gallery-visual img { width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; display:block; }
.cab-composer-gallery-position { position:absolute; top:7px; left:7px; padding:3px 7px; border-radius:999px; color:#fff; background:rgba(15,23,42,.8); font-size:.7rem; font-weight:750; }
.cab-composer-gallery-toolbar { position:absolute; top:6px; right:6px; display:flex; gap:4px; opacity:0; transform:translateY(-2px); transition:.15s ease; }
.cab-composer-gallery-card:hover .cab-composer-gallery-toolbar,
.cab-composer-gallery-card:focus-within .cab-composer-gallery-toolbar { opacity:1; transform:none; }
.cab-composer-gallery-action { display:grid; width:30px; height:30px; padding:0; place-items:center; border-radius:50%; box-shadow:0 2px 7px rgba(15,23,42,.18); }
.cab-composer-gallery-drag-handle { display:grid; width:30px; height:30px; place-items:center; border-radius:50%; color:#334155; background:#fff; box-shadow:0 2px 7px rgba(15,23,42,.18); cursor:grab; user-select:none; }
.cab-composer-gallery-drag-handle:active { cursor:grabbing; }
.cab-composer-gallery-alt { display:grid; gap:5px; padding:9px; }
.cab-composer-gallery-alt label { font-size:.76rem; font-weight:700; }
.cab-composer-gallery-alt small { justify-self:end; }
.cab-composer-gallery-help { margin-top:8px; color:#64748b; font-size:.76rem; }
.cab-composer-preview-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:12px; }
.cab-composer-preview-gallery-item { margin:0; overflow:hidden; border-radius:10px; background:#080b11; }
.cab-composer-preview-gallery-item img { width:100%; aspect-ratio:4/3; object-fit:contain; display:block; }
.cab-composer-preview-gallery-item figcaption { padding:6px 8px; color:#64748b; font-size:.72rem; }
.cab-composer-link-choices { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.cab-composer-link-choice { border:1px solid #cbd5e1; border-radius:999px; padding:4px 10px; color:#334155; background:#fff; font-size:.75rem; }
.cab-composer-link-choice.is-selected { border-color:#2563eb; color:#fff; background:#2563eb; }
.cab-composer-link-preview-card { align-items:stretch; }
.cab-composer-link-preview-visual { position:relative; flex:0 0 145px; min-height:110px; overflow:hidden; border-radius:10px; background:#e9eef5; }
.cab-composer-link-preview-visual img { width:100%; height:100%; object-fit:cover; }
.cab-composer-link-preview-thumbnail-button { position:absolute; right:6px; bottom:6px; font-size:.7rem; }
.cab-composer-link-preview-copy { display:grid; gap:6px; align-content:start; }
.cab-composer-link-preview-source { overflow:hidden; color:#64748b; font-size:.72rem; text-overflow:ellipsis; white-space:nowrap; }

.blog-post-gallery { position:relative; display:grid; gap:3px; overflow:hidden; border-radius:12px; aspect-ratio:16/10; margin-top:.35rem; margin-bottom:.37rem; background:#e7edf5; }
.blog-post-gallery-count-1 { grid-template-columns:1fr; }
.blog-post-gallery-count-2 { grid-template-columns:repeat(2,1fr); }
.blog-post-gallery-count-3 { grid-template-columns:1.35fr 1fr; grid-template-rows:repeat(2,1fr); }
.blog-post-gallery-count-3 .blog-post-gallery-item:first-child { grid-row:1/3; }
.blog-post-gallery-count-4 { grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(2,1fr); }
.blog-post-gallery-item { position:relative; min-width:0; min-height:0; overflow:hidden; display:block; text-decoration:none; }
.blog-post-gallery .blog-post-image-link { margin:0; }
.blog-post-gallery-item .blog-post-image { width:100%; height:100%; object-fit:cover; display:block; }
.blog-post-gallery-more { position:absolute; inset:0; display:grid; place-items:center; color:#fff; background:rgba(15,23,42,.58); font-size:1.35rem; font-weight:800; }
.blog-post-gallery .blog-post-visibility-badge { position:absolute; right:8px; bottom:8px; z-index:2; pointer-events:none; }

.blog-post-page-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:20px 0; }
.blog-post-page-gallery-count-1 { grid-template-columns:1fr; }
.blog-post-page-gallery-count-3 .blog-post-page-gallery-item:first-child { grid-row:span 2; }
.blog-post-page-gallery-item { display:block; overflow:hidden; min-height:180px; border-radius:14px; background:#e8edf4; }
.blog-post-page-gallery-item img { width:100%; height:100%; max-height:540px; object-fit:cover; display:block; }

.post-display-reading-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin:0 0 1.25rem; overflow:hidden; border-radius:16px; }
.post-display-reading-gallery-count-3 .post-display-reading-gallery-item:first-child { grid-row:span 2; }
.post-display-reading-gallery-item { position:relative; min-height:180px; padding:0; overflow:hidden; border:0; background:#e8edf4; }
.post-display-reading-gallery-item img { width:100%; height:100%; object-fit:cover; display:block; }
.post-display-reading-gallery-more { position:absolute; inset:0; display:grid; place-items:center; color:#fff; background:rgba(15,23,42,.58); font-size:2rem; font-weight:800; }

.post-display-media-stage { position:relative; }
.post-display-media-thumbnails { position:absolute; right:14px; bottom:14px; left:14px; display:flex; gap:7px; overflow-x:auto; padding:7px; border-radius:13px; background:rgba(5,10,20,.72); backdrop-filter:blur(8px); z-index:4; }
.post-display-media-thumbnail { flex:0 0 64px; width:64px; height:48px; padding:0; overflow:hidden; border:2px solid transparent; border-radius:8px; background:#111827; }
.post-display-media-thumbnail.is-active { border-color:#4aa3ff; box-shadow:0 0 0 2px rgba(74,163,255,.25); }
.post-display-media-thumbnail img { width:100%; height:100%; object-fit:cover; display:block; }
.post-display-media-nav { position:absolute; top:50%; z-index:4; display:grid; width:44px; height:44px; place-items:center; border:0; border-radius:50%; color:#fff; background:rgba(15,23,42,.76); transform:translateY(-50%); font-size:2rem; line-height:1; }
.post-display-media-nav:hover,
.post-display-media-nav:focus-visible { background:rgba(37,99,235,.92); }
.post-display-media-nav.is-previous { left:14px; }
.post-display-media-nav.is-next { right:14px; }
.post-display-media-counter { position:absolute; top:14px; right:14px; z-index:4; padding:5px 9px; border-radius:999px; color:#fff; background:rgba(15,23,42,.72); font-size:.76rem; font-weight:700; }

:root[data-theme="dark"] .cab-composer-gallery-wrap,
:root[data-theme="dark"] .cab-composer-gallery-card { border-color:#334155; background:#142033; }
:root[data-theme="dark"] .cab-composer-link-choice { color:#e5edf8; border-color:#475569; background:#172238; }

@media (max-width:767.98px) {
  .cab-composer-gallery-grid { grid-template-columns:1fr; }
  .cab-composer-gallery-toolbar { opacity:1; transform:none; }
  .cab-composer-link-preview-card { display:grid; }
  .cab-composer-link-preview-visual { min-height:170px; }
  .blog-post-page-gallery { grid-template-columns:1fr; }
  .blog-post-page-gallery-item { min-height:150px; }
  .post-display-reading-gallery { grid-template-columns:1fr 1fr; }
  .post-display-reading-gallery-item { min-height:125px; }
  .post-display-media-thumbnails { right:8px; bottom:8px; left:8px; }
  .post-display-media-nav { width:38px; height:38px; }
  .post-display-media-nav.is-previous { left:8px; }
  .post-display-media-nav.is-next { right:8px; }
}


/* AV.1.1 R6 FIX5 — one portrait image is media, not a crop tile. */
.blog-post-gallery-count-1.is-portrait,
.blog-post-gallery-count-1.is-contained { background:#080b11; }
.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-gallery-item .blog-post-image,
.blog-post-gallery-count-1.is-contained .blog-post-gallery-item .blog-post-image { width:auto; max-width:100%; height:100%; max-height:100%; object-fit:contain; }
@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; }
  .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-gallery-item .blog-post-image,
  .blog-post-gallery-count-1.is-contained .blog-post-gallery-item .blog-post-image { width:100%; height:auto; max-width:100%; max-height:none; object-fit:contain; }
}


/* AV.1.1 R6 FIX7 — a single image is never a crop tile.
 * Desktop keeps the card rhythm and contains the full media; mobile lets the
 * image define its natural height. Multi-image galleries keep their tile crop. */
.blog-post-gallery-count-1 {
  background:#080b11;
}
.blog-post-gallery-count-1 .blog-post-gallery-item {
  display:flex;
  align-items:center;
  justify-content:center;
}
.blog-post-gallery-count-1 .blog-post-gallery-item .blog-post-image {
  width:auto !important;
  max-width:100% !important;
  height:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  transform:none;
}
.blog-post-gallery-count-1 .blog-post-image-link:hover .blog-post-image,
.blog-post-gallery-count-1 .blog-post-image-link:focus-visible .blog-post-image {
  transform:none;
}
@media (max-width:767.98px) {
  .blog-post-gallery-count-1 {
    aspect-ratio:auto !important;
    min-height:0 !important;
  }
  .blog-post-gallery-count-1 .blog-post-gallery-item {
    display:block;
    height:auto !important;
    min-height:0 !important;
  }
  .blog-post-gallery-count-1 .blog-post-gallery-item .blog-post-image {
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
    max-height:none !important;
    object-fit:contain !important;
  }
}


/* AV.1.1 R6 FIX8 — cache-safe single-media fit + viewport-aware portrait stage.
 * One media item is never a crop tile. The same image supplies a blurred,
 * colour-adaptive backdrop while the foreground remains completely visible. */
.blog-post-gallery-count-1 {
  background:#080b11;
}
.blog-post-gallery-count-1 .blog-post-gallery-item {
  width:100%;
  display:flex !important;
  align-items:center;
  justify-content:center;
}
.blog-post-gallery-count-1 .blog-post-gallery-item .blog-post-image {
  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) {
  .blog-post-gallery-count-1 {
    aspect-ratio:auto !important;
    min-height:0 !important;
  }
  .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;
  }
  .blog-post-gallery-count-1 .blog-post-gallery-item .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;
  }
}



.cab-composer-preview-gallery-item { position:relative; isolation:isolate; background:#080b11; }
.cab-composer-preview-gallery-item::before { content:""; position:absolute; inset:-10px; z-index:0; background-image:var(--cab-composer-image-bg, none); background-size:cover; background-position:center; filter:blur(24px) saturate(.86); transform:scale(1.08); opacity:.38; pointer-events:none; }
.cab-composer-preview-gallery-item > img { position:relative; z-index:1; object-fit:contain !important; object-position:center center !important; }

/* AV.1.1 R6 FIX9 — deterministic single-media stage.
 * Do not infer presentation from portrait metadata and do not rely on cascade luck.
 * A single image is a photograph, not a crop tile. */
.cab-composer-gallery-visual {
  position:relative;
  isolation:isolate;
  background:#080b11;
}
.cab-composer-gallery-visual::before {
  content:"";
  position:absolute;
  inset:-12px;
  z-index:0;
  background-image:var(--cab-composer-image-bg, none);
  background-size:cover;
  background-position:center;
  filter:blur(28px) saturate(.86);
  transform:scale(1.08);
  opacity:.42;
  pointer-events:none;
}
.cab-composer-gallery-visual > img {
  position:relative;
  z-index:1;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
}
.blog-post-gallery.is-single-media {
  position:relative;
  isolation:isolate;
  background:#080b11;
}
.blog-post-gallery.is-single-media::before {
  opacity:.42 !important;
  filter:blur(32px) saturate(.86) !important;
  transform:scale(1.10) !important;
}
.blog-post-gallery.is-single-media .blog-post-gallery-item {
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  display:block !important;
}
.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) {
  .blog-post-gallery.is-single-media {
    aspect-ratio:auto !important;
    height:min(68svh, 620px) !important;
    min-height:min(48svh, 390px);
  }
  .blog-post-gallery.is-single-media .blog-post-gallery-item,
  .blog-post-gallery.is-single-media .blog-post-image {
    width:100% !important;
    height:100% !important;
  }
}

/* AV.1.1 R6 FIX11 — composer gallery layout hardening.
 * FIX10 was accidentally serialized with literal backslash-n sequences.
 * Controls live in a dedicated header outside the clipped media viewport. */
.cab-composer-gallery-card {
  min-width:0;
  overflow:hidden;
  border:1px solid #d7dfeb;
  border-radius:12px;
  background:#fff;
}
.cab-composer-gallery-card-head {
  position:relative;
  z-index:10;
  min-height:44px;
  padding:6px 8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  background:#f8fafc;
  border-bottom:1px solid #e2e8f0;
  overflow:visible;
}
.cab-composer-gallery-card-head .cab-composer-gallery-position {
  position:static !important;
  flex:0 0 auto;
  padding:3px 7px;
  color:#fff;
  background:rgba(15,23,42,.86);
}
.cab-composer-gallery-card-head .cab-composer-gallery-toolbar {
  position:static !important;
  z-index:11;
  display:flex !important;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:nowrap;
  gap:4px;
  margin-left:auto;
  opacity:1 !important;
  transform:none !important;
  visibility:visible !important;
  pointer-events:auto !important;
}
.cab-composer-gallery-card-head .cab-composer-gallery-action,
.cab-composer-gallery-card-head .cab-composer-gallery-drag-handle {
  position:relative;
  z-index:12;
  flex:0 0 30px;
  width:30px;
  height:30px;
}
.cab-composer-gallery-card-head .cab-composer-gallery-action:disabled {
  opacity:.35;
  cursor:not-allowed;
}
.cab-composer-gallery-visual {
  position:relative;
  isolation:isolate;
  width:100%;
  aspect-ratio:var(--cab-composer-media-ratio, 16 / 10) !important;
  min-height:150px;
  max-height:min(52vh, 460px);
  overflow:hidden;
  background:#080b11;
}
.cab-composer-gallery-visual > img {
  position:relative;
  z-index:1;
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
}
:root[data-theme="dark"] .cab-composer-gallery-card-head {
  background:#142033;
  border-bottom-color:#334155;
}
@media (max-width:767.98px) {
  .cab-composer-gallery-card-head { padding:6px; }
  .cab-composer-gallery-card-head .cab-composer-gallery-toolbar { gap:3px; }
  .cab-composer-gallery-visual { max-height:min(58svh, 520px); }
}

/* OVH R6 HOTFIX2 — mobile single-media ratio correction.
 * A landscape image must keep a landscape stage. Only portrait media uses the
 * viewport-height stage introduced for tall phone photos. */
@media (max-width:767.98px) {
  .blog-post-gallery.is-single-media:not(.is-portrait) {
    aspect-ratio:16 / 10 !important;
    height:auto !important;
    min-height:0 !important;
  }
  .blog-post-gallery.is-single-media:not(.is-portrait) .blog-post-gallery-item,
  .blog-post-gallery.is-single-media:not(.is-portrait) .blog-post-image {
    width:100% !important;
    height:100% !important;
  }
  .blog-post-gallery.is-single-media.is-portrait {
    aspect-ratio:auto !important;
    height:min(68svh, 620px) !important;
    min-height:min(48svh, 390px) !important;
  }
}

/* R118 R3 FIX12 FIX9 — smart wall collage.
 * Goal: keep a stable 16:9 desktop stage, maximize useful photo area according
 * to the lead media orientation, show at most four tiles, and let +N live on
 * the fourth tile. Mobile keeps a denser composition without overlap. */
.blog-post-gallery.is-smart-collage {
  aspect-ratio:16 / 9;
  grid-auto-flow:dense;
  gap:3px;
  background:#dfe7f2;
}
.blog-post-gallery.is-smart-collage .blog-post-gallery-item {
  min-width:0;
  min-height:0;
  width:100%;
  height:100%;
  overflow:hidden;
}
.blog-post-gallery.is-smart-collage .blog-post-gallery-item .blog-post-image {
  width:100% !important;
  height:100% !important;
  min-width:0;
  min-height:0;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center center;
  transform:none;
}
.blog-post-gallery.is-smart-collage .blog-post-image-link:hover .blog-post-image,
.blog-post-gallery.is-smart-collage .blog-post-image-link:focus-visible .blog-post-image {
  transform:scale(1.018);
}

/* Three media: portrait/unknown lead = tall left hero + two right tiles. */
.blog-post-gallery-count-3.is-smart-collage.is-layout-portrait-lead {
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  grid-template-rows:repeat(2,minmax(0,1fr));
}
.blog-post-gallery-count-3.is-smart-collage.is-layout-portrait-lead .blog-post-gallery-item:nth-child(1) {
  grid-column:1;
  grid-row:1 / 3;
}
.blog-post-gallery-count-3.is-smart-collage.is-layout-portrait-lead .blog-post-gallery-item:nth-child(2) {
  grid-column:2;
  grid-row:1;
}
.blog-post-gallery-count-3.is-smart-collage.is-layout-portrait-lead .blog-post-gallery-item:nth-child(3) {
  grid-column:2;
  grid-row:2;
}

/* Three media: landscape/square lead = wide hero + two lower tiles. */
.blog-post-gallery-count-3.is-smart-collage.is-layout-landscape-lead {
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:minmax(0,1.12fr) minmax(0,.88fr);
}
.blog-post-gallery-count-3.is-smart-collage.is-layout-landscape-lead .blog-post-gallery-item:nth-child(1) {
  grid-column:1 / 3;
  grid-row:1;
}
.blog-post-gallery-count-3.is-smart-collage.is-layout-landscape-lead .blog-post-gallery-item:nth-child(2) {
  grid-column:1;
  grid-row:2;
}
.blog-post-gallery-count-3.is-smart-collage.is-layout-landscape-lead .blog-post-gallery-item:nth-child(3) {
  grid-column:2;
  grid-row:2;
}

/* Four items remain a deterministic 2x2 mosaic. Portrait-heavy sets receive a
 * slightly higher stage only on small screens to avoid excessive head/foot crop. */
.blog-post-gallery-count-4.is-smart-collage {
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
}

.blog-post-gallery.is-smart-collage .blog-post-gallery-more {
  z-index:3;
  font-size:clamp(1.35rem,4vw,2rem);
  text-shadow:0 2px 8px rgba(0,0,0,.45);
}

@media (max-width:767.98px) {
  .blog-post-gallery.is-smart-collage {
    width:100%;
    max-width:100%;
    gap:2px;
  }
  .blog-post-gallery-count-3.is-smart-collage.is-layout-portrait-lead {
    aspect-ratio:16 / 10;
    grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  }
  .blog-post-gallery-count-3.is-smart-collage.is-layout-landscape-lead {
    aspect-ratio:4 / 3;
    grid-template-rows:minmax(0,1.08fr) minmax(0,.92fr);
  }
  .blog-post-gallery-count-4.is-smart-collage.is-layout-portrait-heavy {
    aspect-ratio:4 / 3;
  }
  .blog-post-gallery.is-smart-collage .blog-post-gallery-item .blog-post-image {
    transform:none !important;
  }
}

/* ===== SOURCE: blog-post-edit-modal.css ===== */
/*
 * Styles complémentaires du modal d'édition.
 *
 * Règle de ce fichier:
 * - on réutilise en priorité les classes du composeur create (.cab-*)
 * - ici on ajoute seulement ce qui est spécifique à l'édition
 */

#blogPostEditModal {
    z-index: var(--z-blog-modal, 110080);
}

#blogPostEditModal .modal-dialog {
    margin: 1rem auto;
    max-height: calc(100vh - 2rem);
}

#blogPostEditModal .modal-content {
    max-height: calc(100vh - 2rem);
    background: #f0f0f0;
    box-shadow: 0 18px 42px rgba(100, 116, 139, 0.35);
}

#blogPostEditModal .modal-body {
    overflow-y: auto;
}

#blogPostEditModal textarea,
#blogPostEditModal input,
#blogPostEditModal select {
    background: #ffffff;
}

#blogPostEditModal .modal-footer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.6rem;
}

.blog-post-edit-image-preview-wrap {
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    overflow-y: auto;
    overflow-x: hidden;
    background: #f8fafc;
    max-width: 100%;
    max-height: 360px;
}

.blog-post-edit-image-preview {
    display: block;
    width: 100%;
    max-height: none;
    object-fit: contain;
}

/*
 * Backdrop fallback de l'édition.
 * Sert de sécurité si bootstrap ne gère pas le backdrop.
 */
.blog-post-edit-fallback-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.62);
    z-index: var(--z-blog-modal-backdrop, 110070);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.blog-post-edit-fallback-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
}

[data-theme="dark"] #blogPostEditModal .modal-content {
    background: #0f172a;
    color: #f8fafc;
    box-shadow:
        0 0 0 5px rgba(68, 221, 255, 0.2),
        0 18px 42px rgba(2, 6, 23, 0.65);
}

[data-theme="dark"] #blogPostEditModal .modal-header,
[data-theme="dark"] #blogPostEditModal .modal-footer {
    border-color: #334155;
}

[data-theme="dark"] #blogPostEditModal .cab-composer-visibility-inline {
    background: #1f2937;
    border-color: #334155;
}

[data-theme="dark"] #blogPostEditModal .cab-composer-visibility-select {
    color: #f8fafc;
}

[data-theme="dark"] #blogPostEditModal textarea,
[data-theme="dark"] #blogPostEditModal input,
[data-theme="dark"] #blogPostEditModal select {
    background: #111827;
    color: #f8fafc;
    border-color: #334155;
}

[data-theme="dark"] #blogPostEditModal .cab-composer-emoji-panel {
    background: #111827;
    border-color: #334155;
    box-shadow: 0 16px 28px rgba(2, 6, 23, 0.66);
}

[data-theme="dark"] #blogPostEditModal .cab-composer-emoji-title {
    color: #cbd5e1;
}

[data-theme="dark"] #blogPostEditModal .cab-composer-emoji-item:hover,
[data-theme="dark"] #blogPostEditModal .cab-composer-emoji-item:focus-visible {
    background: #1f2937;
}

[data-theme="dark"] #blogPostEditModal .cab-composer-emoji-categories {
    border-bottom-color: #334155;
}

[data-theme="dark"] #blogPostEditModal .cab-composer-emoji-category:hover,
[data-theme="dark"] #blogPostEditModal .cab-composer-emoji-category:focus-visible {
    background: #1f2937;
}

[data-theme="dark"] #blogPostEditModal .cab-composer-emoji-category.is-active {
    color: #7dd3fc;
    background: #1e3a5f;
}

[data-theme="dark"] #blogPostEditModal .cab-composer-add-row {
    background: #0f172a;
    border-color: #334155;
}

[data-theme="dark"] #blogPostEditModal .cab-composer-action-icon {
    background: #111827;
    color: #e5edf9;
}

[data-theme="dark"] #blogPostEditModal .cab-composer-action-icon:hover,
[data-theme="dark"] #blogPostEditModal .cab-composer-action-icon:focus-visible {
    background: #1f2937;
}

[data-theme="dark"] #blogPostEditModal .cab-composer-action-icon.is-more {
    background: transparent;
}

[data-theme="dark"] #blogPostEditModal .cab-composer-action-icon.is-more:hover,
[data-theme="dark"] #blogPostEditModal .cab-composer-action-icon.is-more:focus-visible {
    background: #1e293b;
}

[data-theme="dark"] #blogPostEditModal .cab-composer-background-picker {
    background: #111827;
    border-color: #334155;
}

[data-theme="dark"] #blogPostEditModal .cab-composer-background-section-title {
    color: #cbd5e1;
}


/* R118 R3 FIX6 — édition en deux étapes + confirmation de sortie toujours au premier plan. */
#blogPostEditModal .blog-post-edit-step-two{
    display:block;
}
#blogPostEditModal .blog-post-edit-step-two.d-none{
    display:none!important;
}
#blogPostEditModal .blog-edit-finalize-head{
    padding:.8rem .9rem;
    margin-bottom:.85rem;
    border:1px solid var(--bs-border-color,#d7e0eb);
    border-radius:12px;
    background:var(--bs-tertiary-bg,#f8fafc);
}
#blogPostEditModal .cab-composer-illustration-choices{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:.65rem;
}
#blogPostEditModal .cab-composer-illustration-card{
    border:1px solid var(--bs-border-color,#d7e0eb);
    border-radius:10px;
    padding:.35rem;
    background:var(--bs-body-bg,#fff);
    min-width:0;
}
#blogPostEditModal .cab-composer-illustration-card img{
    width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:7px;cursor:pointer;
}
#blogPostEditModal .cab-composer-illustration-card .btn{width:100%;margin-top:.35rem}
#blogPostEditModal .modal-footer{gap:.5rem}
body.cab-edit-leave-open > #blogPostEditLeaveModal.cab-leave-submodal:not(.d-none){
    position:fixed!important;inset:0!important;display:flex!important;align-items:center;justify-content:center;
    z-index:2147483500!important;isolation:isolate;pointer-events:auto!important;
}
body.cab-edit-leave-open > #blogPostEditLeaveModal .cab-leave-submodal-backdrop{
    position:absolute!important;inset:0!important;z-index:0!important;pointer-events:auto!important;
    background:rgba(15,23,42,.55);
}
body.cab-edit-leave-open > #blogPostEditLeaveModal .cab-leave-submodal-dialog{
    position:relative!important;z-index:1!important;pointer-events:auto!important;
    width:min(560px,calc(100vw - 2rem));max-height:calc(100dvh - 2rem);overflow:auto;
    background:var(--bs-body-bg,#fff);color:var(--bs-body-color,#111827);border-radius:14px;
    padding:1.1rem;box-shadow:0 24px 70px rgba(2,6,23,.32);
}
@media(max-width:720px){
    #blogPostEditModal .cab-composer-illustration-choices{
        display:flex;overflow-x:auto;gap:.6rem;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
        scrollbar-width:none;padding-bottom:.25rem;
    }
    #blogPostEditModal .cab-composer-illustration-choices::-webkit-scrollbar{display:none}
    #blogPostEditModal .cab-composer-illustration-card{flex:0 0 calc(100% - 34px);scroll-snap-align:start}
    #blogPostEditModal .modal-footer{flex-wrap:wrap}
    #blogPostEditModal .modal-footer .btn{flex:1 1 auto}
    body.cab-edit-leave-open > #blogPostEditLeaveModal .d-flex.justify-content-end{flex-wrap:wrap}
    body.cab-edit-leave-open > #blogPostEditLeaveModal .d-flex.justify-content-end .btn{flex:1 1 100%}
}

/* R118 R3 FIX5 — icônes outils cohérentes mobile. */
#blogPostEditModal .cab-composer-action-icon-asset{display:block;width:23px;height:23px;object-fit:contain;pointer-events:none}
#blogPostEditModal .cab-composer-action-icon-asset--png{width:24px;height:24px}
#blogPostEditModal .cab-composer-action-icon{padding:0}


/* R118 R3 FIX12 FIX6 — icônes édition: taille verrouillée. */
#blogPostEditModal .cab-composer-action-icon > .cab-composer-action-icon-asset {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    object-fit: contain !important;
    pointer-events: none;
}
#blogPostEditModal .cab-composer-action-icon > .cab-composer-action-icon-asset--png {
    width: 26px !important;
    height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
}
@media (max-width: 767.98px) {
    #blogPostEditModal .cab-composer-action-icon > .cab-composer-action-icon-asset {
        width: 27px !important;
        height: 27px !important;
        max-width: 27px !important;
        max-height: 27px !important;
    }
    #blogPostEditModal .cab-composer-action-icon > .cab-composer-action-icon-asset--png {
        width: 29px !important;
        height: 29px !important;
        max-width: 29px !important;
        max-height: 29px !important;
    }
}

/* ===== SOURCE: blog-post-composer.css ===== */
/*
 * Style dédié à la modale de composition blog (V1).
 * Source visuelle unique pour le composeur.
 */

.cab-post-composer-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
    position: relative;
    z-index: var(--z-blog-composer-sticky, 900);
    transition: transform 220ms ease, opacity 220ms ease, box-shadow 220ms ease;
}

.cab-post-composer-wrap.is-sticky {
    position: fixed;
    top: var(--blog-composer-sticky-top, 72px);
    left: var(--blog-composer-sticky-left, 0px);
    width: var(--blog-composer-sticky-width, 100%);
    max-width: none;
    right: auto;
    margin-bottom: 0;
    padding: 0.32rem 0.5rem;
    z-index: var(--z-blog-composer-sticky, 900);
    pointer-events: none;
}

.cab-post-composer-wrap.is-sticky .cab-post-composer-compact {
    pointer-events: auto;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.15);
}

.cab-post-composer-wrap.is-sticky.is-hidden {
    transform: translateY(calc(-100% - 10px));
    opacity: 0;
    pointer-events: none;
}

.cab-post-composer-sticky-placeholder {
    display: none;
    width: 100%;
}

.cab-post-composer-sticky-placeholder.is-active {
    display: block;
}

/*
 * Bloc compact de composition en haut de la liste blog.
 * Ce bloc remplace l'ancien header "Blog + Nouveau post".
 */
.cab-post-composer-compact {
    width: min(860px, 100%);
    border: 1px solid #d6deea;
    border-radius: 999px;
    background: #f5f8fd;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.cab-post-composer-compact-avatar {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: #0d6efd;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex: 0 0 auto;
}

.cab-post-composer-compact-avatar.is-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease;
}

.cab-post-composer-compact-avatar.is-link:hover,
.cab-post-composer-compact-avatar.is-link:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, .18);
}

.cab-post-composer-compact-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    border-radius: 999px;
    background: #e8edf5;
    color: #334155;
    text-align: left;
    padding: 0.62rem 1rem;
    font-size: 0.95rem;
}

.cab-post-composer-compact-input:hover,
.cab-post-composer-compact-input:focus-visible {
    background: #dde6f2;
}

.cab-post-composer-compact-photo {
    border: 1px solid #c8d2e2;
    border-radius: 999px;
    background: #ffffff;
    color: #1f2937;
    padding: 0.5rem 0.85rem;
    font-size: 0.92rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
}

.cab-post-composer-compact-photo:hover,
.cab-post-composer-compact-photo:focus-visible {
    background: #f8fafc;
}

.cab-post-composer-compact-more {
    width: 40px;
    height: 40px;
    border: 1px solid #c8d2e2;
    border-radius: 999px;
    background: #ffffff;
    color: #334155;
    font-size: 1.5rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.cab-post-composer-compact-more:hover,
.cab-post-composer-compact-more:focus-visible {
    background: #f8fafc;
}

@media (max-width: 575.98px) {
    .cab-post-composer-compact {
        border-radius: 14px;
        align-items: stretch;
        flex-wrap: wrap;
    }

    .cab-post-composer-compact-input {
        width: calc(100% - 48px - 0.6rem);
        min-height: 42px;
    }
}

/*
 * Petite sous-modale de choix rapide (brouillons / planifiées).
 * Elle est indépendante de la grande modale composeur.
 */
.cab-composer-quick-actions-submodal {
    position: fixed;
    inset: 0;
    z-index: 60090;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

.cab-composer-quick-actions-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.52);
}

.cab-composer-quick-actions-dialog {
    position: relative;
    z-index: 1;
    width: min(520px, calc(100vw - 24px));
    border: 1px solid #d1d5db;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.28);
    padding: 12px;
}

.cab-composer-quick-actions-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 10px;
}

.cab-composer-quick-actions-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.cab-composer-quick-actions-grid-main {
    margin-bottom: 0;
}

.cab-composer-quick-action-card {
    border: 1px solid #d6deea;
    border-radius: 12px;
    background: #f8fbff;
    color: #0f172a;
    min-height: 78px;
    padding: 0.7rem 0.9rem;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.cab-composer-quick-action-card:hover,
.cab-composer-quick-action-card:focus-visible {
    background: #eef5ff;
    border-color: #9ec2f5;
}

.cab-composer-quick-action-icon {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: #dbeafe;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex: 0 0 auto;
}

.cab-composer-quick-action-title {
    font-weight: 600;
    font-size: 1rem;
}

#blogWallViewOpenButton.cab-composer-quick-action-card {
    position: relative;
}
#blogWallViewOpenButton.cab-composer-quick-action-card .cab-wall-view-active-badge {
    margin-left: auto;
    flex: 0 0 auto;
}
#blogWallViewOpenButton.cab-composer-quick-action-card.is-active {
    border-color: #7aa7f4;
    background: #edf4ff;
}

.cab-composer-quick-sort-section {
    border-top: 1px solid #e2e8f0;
    padding-top: 10px;
}

.cab-composer-quick-sort-title {
    font-size: 0.82rem;
    color: #64748b;
    font-weight: 600;
    margin-bottom: 8px;
}

.cab-composer-quick-sort-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.cab-composer-quick-sort-button {
    border: 1px solid #d6deea;
    border-radius: 10px;
    background: #f8fbff;
    color: #0f172a;
    min-height: 40px;
    padding: 0.45rem 0.5rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.88rem;
}

.cab-composer-quick-sort-button:hover,
.cab-composer-quick-sort-button:focus-visible {
    background: #eef5ff;
    border-color: #9ec2f5;
}

.cab-composer-quick-sort-button.is-active-choice {
    border-color: #7aa7f4;
    background: #edf4ff;
}

/*
 * Modale simple "Mes brouillons".
 * Chaque ligne est cliquable pour ouvrir la modale d'édition existante.
 */
.cab-composer-drafts-submodal {
    position: fixed;
    inset: 0;
    z-index: 60095;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

.cab-composer-drafts-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.52);
}

.cab-composer-drafts-dialog {
    position: relative;
    z-index: 1;
    width: min(760px, calc(100vw - 24px));
    max-height: min(76vh, 760px);
    overflow: auto;
    border: 1px solid #d1d5db;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.28);
    padding: 12px;
}

.cab-composer-drafts-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 10px;
}

.cab-composer-drafts-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.cab-composer-draft-card {
    border: 1px solid #d6deea;
    border-radius: 12px;
    background: #f8fbff;
    padding: 0.6rem;
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 0.65rem;
    align-items: start;
    text-align: left;
}

.cab-composer-draft-card:hover,
.cab-composer-draft-card:focus-visible {
    background: #eef5ff;
    border-color: #9ec2f5;
}

.cab-composer-draft-thumb {
    width: 88px;
    height: 66px;
    border-radius: 10px;
    overflow: hidden;
    background: #dbe3ee;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.cab-composer-draft-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cab-composer-draft-title {
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 4px;
}

.cab-composer-draft-excerpt {
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.25;
    margin-bottom: 4px;
}

.cab-composer-draft-date {
    font-size: 0.8rem;
    color: #64748b;
}

.cab-composer-drafts-empty {
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    color: #64748b;
    background: #f8fafc;
}

/*
 * Modale agenda hebdomadaire.
 * Conçue pour être réutilisable en:
 * - consultation des planifications existantes
 * - sélection future d'un créneau date/heure
 */
.cab-composer-scheduled-submodal {
    position: fixed;
    inset: 0;
    z-index: 60100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

.cab-composer-scheduled-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.52);
}

.cab-composer-scheduled-dialog {
    position: relative;
    z-index: 1;
    width: min(1240px, calc(100vw - 24px));
    max-height: min(85vh, 920px);
    overflow: hidden;
    border: 1px solid #d1d5db;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.30);
    display: grid;
    grid-template-rows: auto auto auto 1fr;
}

.cab-composer-scheduled-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 10px 12px;
    border-bottom: 1px solid #e2e8f0;
}

.cab-composer-scheduled-subtitle {
    font-size: 0.86rem;
    color: #64748b;
    margin-top: 2px;
}

.cab-composer-scheduled-toolbar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.7rem;
    padding: 8px 12px;
    border-bottom: 1px solid #e2e8f0;
}

.cab-composer-scheduled-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.cab-composer-scheduled-month {
    justify-self: center;
    font-weight: 700;
    font-size: 1.05rem;
}

.cab-composer-scheduled-week-header {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border-bottom: 1px solid #e2e8f0;
}

.cab-composer-scheduled-day-head {
    padding: 8px 8px;
    text-align: center;
    border-right: 1px solid #e2e8f0;
}

.cab-composer-scheduled-day-head:last-child {
    border-right: 0;
}

.cab-composer-scheduled-day-short {
    font-size: 0.82rem;
    color: #64748b;
}

.cab-composer-scheduled-day-number {
    display: block;
    font-weight: 600;
    color: #0f172a;
}

.cab-composer-scheduled-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    min-height: 420px;
    overflow: auto;
}

.cab-composer-scheduled-day-column {
    border-right: 1px solid #e2e8f0;
    padding: 8px;
    min-height: 100%;
    position: relative;
    background-image: linear-gradient(to bottom, rgba(148, 163, 184, 0.18) 1px, transparent 1px);
    background-size: 100% 34px;
}

.cab-composer-scheduled-day-column:last-child {
    border-right: 0;
}

.cab-composer-scheduled-empty-day {
    color: #94a3b8;
    font-size: 0.84rem;
    padding: 0.5rem 0.25rem;
}

.cab-composer-scheduled-card {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #f8fbff;
    margin-bottom: 8px;
    text-align: left;
    overflow: hidden;
}

.cab-composer-scheduled-card:hover,
.cab-composer-scheduled-card:focus-visible {
    border-color: #93c5fd;
    background: #eef5ff;
}

.cab-composer-scheduled-card-time {
    font-size: 0.78rem;
    font-weight: 700;
    color: #0f766e;
    padding: 6px 8px 0;
}

.cab-composer-scheduled-card-badge {
    display: inline-flex;
    align-items: center;
    margin: 4px 8px 0;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1;
    background: #e2e8f0;
    color: #334155;
}

.cab-composer-scheduled-card.is-published {
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
    border-color: #94a3b8;
}

.cab-composer-scheduled-card.is-published .cab-composer-scheduled-card-time {
    color: #334155;
}

.cab-composer-scheduled-card-thumb {
    width: calc(100% - 16px);
    height: 72px;
    margin: 4px 8px 0;
    border-radius: 8px;
    overflow: hidden;
    background: #dbe3ee;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cab-composer-scheduled-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cab-composer-scheduled-card-title {
    font-size: 0.83rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 6px 8px 2px;
}

.cab-composer-scheduled-card-excerpt {
    font-size: 0.76rem;
    color: #475569;
    line-height: 1.2;
    padding: 0 8px 4px;
}

.cab-composer-scheduled-card-metrics {
    font-size: 0.73rem;
    color: #0f766e;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0 8px 8px;
}

.cab-post-composer-modal {
    border-radius: 14px;
}

#blogPostComposerModal {
    z-index: 60080;
}

.blog-post-composer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.62);
    z-index: 60070;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.blog-post-composer-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.cab-composer-user-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.cab-composer-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #0d6efd;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
}

.cab-composer-avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.cab-composer-user-meta {
    flex: 1;
}

.cab-composer-user-name {
    font-weight: 600;
    margin-bottom: 4px;
}

.cab-composer-visibility-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid #d5dbe5;
    border-radius: 10px;
    background: #eceff4;
    padding: 0.2rem 0.5rem;
}

.cab-composer-visibility-icon {
    font-size: 0.84rem;
    line-height: 1;
}

.cab-composer-visibility-select {
    border: 0;
    background: transparent;
    color: #111827;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.2;
    padding-right: 1rem;
}

.cab-composer-visibility-select:focus {
    outline: none;
}

.cab-composer-visibility-label {
    font-size: 0.78rem;
    color: #6c757d;
    margin-bottom: 2px;
}

.cab-composer-textarea-wrap {
    position: relative;
    border-radius: 12px;
    padding: 0.45rem;
    transition: background 0.2s ease;
}

.cab-composer-textarea-wrap.has-background {
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cab-composer-textarea {
    min-height: 180px;
    resize: vertical;
    padding-right: 44px;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.cab-composer-textarea-wrap.has-background .cab-composer-textarea {
    min-height: 220px;
    font-size: 1.45rem;
    text-align: center;
    font-weight: 600;
    border-width: 1px;
}

.cab-composer-textarea-wrap.has-background .cab-composer-textarea::placeholder {
    color: rgba(255, 255, 255, 0.88);
}

.cab-composer-emoji-trigger {
    position: absolute;
    right: 8px;
    top: 8px;
}

.cab-composer-emoji-panel {
    /*
     * IMPORTANT:
     * Le popup emoji doit flotter AU-DESSUS de la modale,
     * et ne doit pas être prisonnier de la zone scrollable du formulaire.
     * Donc on le met en position fixed (viewport), puis le JS lui donne
     * une position précise par rapport à la modale.
     */
    position: fixed;
    left: 0;
    top: 0;
    width: min(360px, calc(100vw - 3rem));
    border: 1px solid #d6dde8;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 16px 28px rgba(15, 23, 42, 0.22);
    z-index: 60085;
    padding: 0.6rem;
    display: flex;
    flex-direction: column;
}

.cab-composer-emoji-title {
    font-size: 0.84rem;
    color: #64748b;
    margin-bottom: 0.45rem;
    order: 1;
}

.cab-composer-emoji-categories {
    margin-top: 0;
    border-top: 0;
    border-bottom: 1px solid #e2e8f0;
    padding-top: 0;
    padding-bottom: 0.45rem;
    margin-bottom: 0.45rem;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.25rem;
    order: 2;
}

.cab-composer-emoji-grid {
    max-height: 220px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0.25rem;
    padding-right: 0.2rem;
    order: 3;
}

.cab-composer-emoji-item {
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-size: 1.28rem;
    line-height: 1;
    padding: 0.25rem;
}

.cab-composer-emoji-item:hover,
.cab-composer-emoji-item:focus-visible {
    background: #eef2f7;
}

.cab-composer-emoji-category {
    border: 0;
    border-radius: 999px;
    background: transparent;
    font-size: 1rem;
    line-height: 1;
    padding: 0.35rem 0;
}

.cab-composer-emoji-category:hover,
.cab-composer-emoji-category:focus-visible {
    background: #eef2f7;
}

.cab-composer-emoji-category.is-active {
    color: #0d6efd;
    background: #e8f0ff;
}

.cab-composer-add-row {
    border: 1px solid #dee2e6;
    border-radius: 10px;
    padding: 10px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cab-composer-add-title {
    font-weight: 600;
}

.cab-composer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cab-composer-action-icon {
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 999px;
    background: #ffffff;
    color: #1f2937;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 1.3rem;
    padding: 0;
}

.cab-composer-action-icon:hover,
.cab-composer-action-icon:focus-visible {
    background: #f3f6fb;
    border-color: #b8c4d8;
}

.cab-composer-action-icon.is-more {
    border-color: transparent;
    background: transparent;
}

.cab-composer-action-icon.is-more:hover,
.cab-composer-action-icon.is-more:focus-visible {
    background: #eef2f8;
    border-color: transparent;
}

.cab-composer-background-picker {
    /*
     * Popup flottant superposé:
     * - il n'occupe plus de place dans la modale
     * - il se positionne par JS près du bouton "fond"
     */
    position: fixed;
    left: 0;
    top: 0;
    width: min(420px, calc(100vw - 24px));
    border: 1px solid #d5dbe7;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.18);
    padding: 0.75rem;
    margin-top: 0;
    z-index: 60086;
}

.cab-composer-background-section-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
}

.cab-composer-background-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.4rem;
    margin-top: 0.45rem;
}

.cab-composer-background-swatch {
    border: 1px solid #cfd8e5;
    border-radius: 10px;
    height: 32px;
}

.cab-composer-background-swatch.is-decorative:nth-child(1) {
    background: linear-gradient(135deg,#0ea5e9 0%,#4338ca 100%);
}

.cab-composer-background-swatch.is-decorative:nth-child(2) {
    background: linear-gradient(135deg,#f97316 0%,#ef4444 100%);
}

.cab-composer-background-swatch.is-decorative:nth-child(3) {
    background: linear-gradient(135deg,#10b981 0%,#0f766e 100%);
}

.cab-composer-background-swatch.is-decorative:nth-child(4) {
    background: linear-gradient(135deg,#a855f7 0%,#ec4899 100%);
}

.cab-composer-background-swatch.is-solid:nth-child(1) { background: #0f172a; }
.cab-composer-background-swatch.is-solid:nth-child(2) { background: #1d4ed8; }
.cab-composer-background-swatch.is-solid:nth-child(3) { background: #065f46; }
.cab-composer-background-swatch.is-solid:nth-child(4) { background: #7f1d1d; }
.cab-composer-background-swatch.is-solid:nth-child(5) { background: #581c87; }
.cab-composer-background-swatch.is-solid:nth-child(6) { background: #334155; }

#blogPostComposerModal .modal-footer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.6rem;
}

.cab-plan-submodal {
    position: fixed;
    inset: 0;
    z-index: 60090;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

.cab-leave-submodal {
    position: fixed;
    inset: 0;
    z-index: 60100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

.cab-leave-submodal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.66);
}

.cab-leave-submodal-dialog {
    position: relative;
    z-index: 1;
    width: min(560px, calc(100vw - 24px));
    border: 1px solid #d1d5db;
    border-radius: 14px;
    padding: 16px;
    background: #ffffff;
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.35);
}

.cab-plan-submodal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.66);
}

.cab-plan-submodal-dialog {
    position: relative;
    z-index: 1;
    width: min(420px, calc(100vw - 24px));
    border: 1px solid #d1d5db;
    border-radius: 12px;
    padding: 12px;
    background: #ffffff;
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.35);
}

.cab-plan-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
}

.cab-plan-field {
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 0.5rem;
    background: #f8fafc;
}

.cab-plan-field .form-label {
    font-size: 0.8rem;
    color: #2563eb;
    margin-bottom: 0.2rem;
}

.cab-plan-field .form-control,
.cab-plan-field .form-select {
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
    font-size: 1.35rem;
    line-height: 1.2;
}

#blogComposerPlanTimeSelect {
    max-height: 240px;
}

@media (max-width: 575.98px) {
    .cab-plan-fields {
        grid-template-columns: 1fr;
    }
}

.cab-composer-image-preview img {
    display: block;
    max-height: 220px;
    width: auto;
    max-width: 100%;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    margin-bottom: 8px;
}

/*
 * Petite modale inline pour paramètres watermark/logo.
 * C'est volontairement compact pour rester simple à comprendre.
 */
.cab-watermark-submodal {
    position: fixed;
    inset: 0;
    z-index: 60088;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

.cab-watermark-submodal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.66);
}

.cab-watermark-submodal-dialog {
    position: relative;
    z-index: 1;
    width: min(420px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    padding: 12px;
    background: #ffffff;
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.35);
}

.cab-watermark-mini-head strong {
    font-size: 0.95rem;
}

/*
 * Light mode:
 * - on garde une ombre grise douce autour de la modale.
 * - pas de glow cyan.
 */
#blogPostComposerModal .modal-content {
    box-shadow: 0 18px 42px rgba(100, 116, 139, 0.35);
}

#blogPostComposerModal .modal-dialog {
    margin: 1rem auto;
    max-height: calc(100vh - 2rem);
}

#blogPostComposerModal .modal-content {
    max-height: calc(100vh - 2rem);
    background: #f0f0f0;
}

#blogPostComposerModal .modal-body {
    overflow-y: auto;
}

#blogPostComposerModal textarea,
#blogPostComposerModal input,
#blogPostComposerModal select {
    background: #ffffff;
}

[data-theme="dark"] #blogPostComposerModal .modal-content {
    background: #0f172a;
    color: #f8fafc;
    /*
     * Dark mode:
     * - lueur cyan douce autour de la modale
     * - effet discret mais visible
     */
    box-shadow:
        0 0 0 5px rgba(68, 221, 255, 0.2),
        0 18px 42px rgba(2, 6, 23, 0.65);
}

[data-theme="dark"] #blogPostComposerModal .modal-header,
[data-theme="dark"] #blogPostComposerModal .modal-footer {
    border-color: #334155;
}

[data-theme="dark"] #blogPostComposerModal .cab-composer-visibility-label,
[data-theme="dark"] #blogPostComposerModal .text-muted {
    color: #cbd5e1 !important;
}

[data-theme="dark"] #blogPostComposerModal .cab-composer-visibility-inline {
    background: #1f2937;
    border-color: #334155;
}

[data-theme="dark"] #blogPostComposerModal .cab-composer-visibility-select {
    color: #f8fafc;
}

[data-theme="dark"] #blogPostComposerModal textarea,
[data-theme="dark"] #blogPostComposerModal input,
[data-theme="dark"] #blogPostComposerModal select {
    background: #111827;
    color: #f8fafc;
    border-color: #334155;
}

[data-theme="dark"] #blogPostComposerModal .cab-composer-emoji-trigger {
    background: #0b3a53;
    border-color: #155e75;
    color: #e0f7ff;
}

[data-theme="dark"] #blogPostComposerModal .cab-composer-emoji-panel {
    background: #111827;
    border-color: #334155;
    box-shadow: 0 16px 28px rgba(2, 6, 23, 0.66);
}

[data-theme="dark"] #blogPostComposerModal .cab-composer-emoji-title {
    color: #cbd5e1;
}

[data-theme="dark"] #blogPostComposerModal .cab-composer-emoji-item:hover,
[data-theme="dark"] #blogPostComposerModal .cab-composer-emoji-item:focus-visible {
    background: #1f2937;
}

[data-theme="dark"] #blogPostComposerModal .cab-composer-emoji-categories {
    border-bottom-color: #334155;
}

[data-theme="dark"] #blogPostComposerModal .cab-composer-emoji-category:hover,
[data-theme="dark"] #blogPostComposerModal .cab-composer-emoji-category:focus-visible {
    background: #1f2937;
}

[data-theme="dark"] #blogPostComposerModal .cab-composer-emoji-category.is-active {
    color: #7dd3fc;
    background: #1e3a5f;
}

[data-theme="dark"] #blogPostComposerModal .cab-composer-add-row {
    background: #0f172a;
    border-color: #334155;
}

[data-theme="dark"] #blogPostComposerModal .cab-composer-background-picker {
    background: #111827;
    border-color: #334155;
}

[data-theme="dark"] #blogPostComposerModal .cab-composer-background-section-title {
    color: #cbd5e1;
}

[data-theme="dark"] #blogPostComposerModal .cab-composer-action-icon {
    background: #111827;
    border: 0;
    color: #e5edf9;
}

[data-theme="dark"] #blogPostComposerModal .cab-composer-action-icon:hover,
[data-theme="dark"] #blogPostComposerModal .cab-composer-action-icon:focus-visible {
    background: #1f2937;
    border-color: #475569;
}

[data-theme="dark"] #blogPostComposerModal .cab-composer-action-icon.is-more {
    background: transparent;
    border-color: transparent;
}

[data-theme="dark"] #blogPostComposerModal .cab-composer-action-icon.is-more:hover,
[data-theme="dark"] #blogPostComposerModal .cab-composer-action-icon.is-more:focus-visible {
    background: #1e293b;
    border-color: transparent;
}

[data-theme="dark"] .cab-watermark-submodal-dialog {
    background: #111827;
    border-color: #334155;
    color: #f8fafc;
}

[data-theme="dark"] .cab-plan-submodal-dialog {
    background: #111827;
    border-color: #334155;
    color: #f8fafc;
}

[data-theme="dark"] .cab-leave-submodal-dialog {
    background: #111827;
    border-color: #334155;
    color: #f8fafc;
}

[data-theme="dark"] .cab-plan-field {
    background: #1f2937;
    border-color: #334155;
}

[data-theme="dark"] .cab-plan-field .form-control,
[data-theme="dark"] .cab-plan-field .form-select {
    color: #f8fafc;
}

[data-theme="dark"] .cab-post-composer-compact {
    background: #0f172a;
    border-color: #334155;
}

[data-theme="dark"] .cab-post-composer-compact-avatar {
    background: #1d4ed8;
}

[data-theme="dark"] .cab-post-composer-compact-input {
    background: #1e293b;
    color: #e2e8f0;
}

[data-theme="dark"] .cab-post-composer-compact-input:hover,
[data-theme="dark"] .cab-post-composer-compact-input:focus-visible {
    background: #273449;
}

[data-theme="dark"] .cab-post-composer-compact-photo {
    background: #111827;
    border-color: #334155;
    color: #e2e8f0;
}

[data-theme="dark"] .cab-post-composer-compact-photo:hover,
[data-theme="dark"] .cab-post-composer-compact-photo:focus-visible {
    background: #1f2937;
}

[data-theme="dark"] .cab-post-composer-compact-more {
    background: #111827;
    border-color: #334155;
    color: #e2e8f0;
}

[data-theme="dark"] .cab-post-composer-compact-more:hover,
[data-theme="dark"] .cab-post-composer-compact-more:focus-visible {
    background: #1f2937;
}

[data-theme="dark"] .cab-post-composer-wrap.is-sticky .cab-post-composer-compact {
    box-shadow: 0 12px 30px rgba(2, 6, 23, 0.58);
}

[data-theme="dark"] .cab-composer-quick-actions-dialog {
    background: #111827;
    border-color: #334155;
    color: #f8fafc;
}

[data-theme="dark"] .cab-composer-quick-action-card {
    background: #0f172a;
    border-color: #334155;
    color: #e5edf9;
}

[data-theme="dark"] .cab-composer-quick-action-card:hover,
[data-theme="dark"] .cab-composer-quick-action-card:focus-visible {
    background: #1e293b;
    border-color: #475569;
}

[data-theme="dark"] .cab-composer-quick-action-icon {
    background: #1e3a8a;
}

[data-theme="dark"] .cab-composer-quick-sort-section {
    border-top-color: #334155;
}

[data-theme="dark"] .cab-composer-quick-sort-title {
    color: #9fb1c9;
}

[data-theme="dark"] .cab-composer-quick-sort-button {
    background: #0f172a;
    border-color: #334155;
    color: #e5edf9;
}

[data-theme="dark"] .cab-composer-quick-sort-button:hover,
[data-theme="dark"] .cab-composer-quick-sort-button:focus-visible {
    background: #1e293b;
    border-color: #475569;
}

[data-theme="dark"] .cab-composer-quick-sort-button.is-active-choice {
    background: #13233f;
    border-color: #3b82f6;
}

[data-theme="dark"] .cab-composer-drafts-dialog {
    background: #111827;
    border-color: #334155;
    color: #f8fafc;
}

[data-theme="dark"] .cab-composer-draft-card {
    background: #0f172a;
    border-color: #334155;
    color: #e5edf9;
}

[data-theme="dark"] .cab-composer-draft-card:hover,
[data-theme="dark"] .cab-composer-draft-card:focus-visible {
    background: #1e293b;
    border-color: #475569;
}

[data-theme="dark"] .cab-composer-draft-thumb {
    background: #1f2937;
    color: #94a3b8;
}

[data-theme="dark"] .cab-composer-draft-excerpt,
[data-theme="dark"] .cab-composer-draft-date,
[data-theme="dark"] .cab-composer-drafts-empty {
    color: #cbd5e1;
}

[data-theme="dark"] .cab-composer-drafts-empty {
    background: #0f172a;
    border-color: #334155;
}

[data-theme="dark"] .cab-composer-scheduled-dialog {
    background: #111827;
    border-color: #334155;
    color: #f8fafc;
}

[data-theme="dark"] .cab-composer-scheduled-head,
[data-theme="dark"] .cab-composer-scheduled-toolbar,
[data-theme="dark"] .cab-composer-scheduled-week-header,
[data-theme="dark"] .cab-composer-scheduled-day-column {
    border-color: #334155;
}

[data-theme="dark"] .cab-composer-scheduled-subtitle,
[data-theme="dark"] .cab-composer-scheduled-day-short,
[data-theme="dark"] .cab-composer-scheduled-empty-day {
    color: #94a3b8;
}

[data-theme="dark"] .cab-composer-scheduled-day-number {
    color: #f8fafc;
}

[data-theme="dark"] .cab-composer-scheduled-day-column {
    background-color: #0f172a;
    background-image: linear-gradient(to bottom, rgba(71, 85, 105, 0.40) 1px, transparent 1px);
}

[data-theme="dark"] .cab-composer-scheduled-card {
    background: #1e293b;
    border-color: #475569;
    color: #e2e8f0;
}

[data-theme="dark"] .cab-composer-scheduled-card:hover,
[data-theme="dark"] .cab-composer-scheduled-card:focus-visible {
    background: #273449;
    border-color: #60a5fa;
}

[data-theme="dark"] .cab-composer-scheduled-card-thumb {
    background: #334155;
    color: #cbd5e1;
}

[data-theme="dark"] .cab-composer-scheduled-card-excerpt {
    color: #cbd5e1;
}

[data-theme="dark"] .cab-composer-scheduled-card-metrics {
    color: #5eead4;
}

[data-theme="dark"] .cab-composer-scheduled-card.is-published {
    background: linear-gradient(180deg, #172235 0%, #1b2a3f 100%);
    border-color: #64748b;
}

[data-theme="dark"] .cab-composer-scheduled-card.is-published .cab-composer-scheduled-card-time {
    color: #cbd5e1;
}

[data-theme="dark"] .cab-composer-scheduled-card-badge {
    background: #334155;
    color: #e2e8f0;
}

/*
 * HOTFIX z-index blog modales:
 * On force les couches blog au-dessus du player shell.
 * Correction minimale: uniquement les plans d'affichage.
 */
#blogPostComposerModal {
    z-index: var(--z-blog-modal, 110080) !important;
}

.blog-post-composer-backdrop {
    z-index: var(--z-blog-modal-backdrop, 110070) !important;
}

.cab-composer-quick-actions-submodal {
    z-index: var(--z-blog-submodal, 110090) !important;
}

.cab-composer-drafts-submodal {
    z-index: calc(var(--z-blog-submodal, 110090) + 5) !important;
}

.cab-composer-scheduled-submodal {
    z-index: calc(var(--z-blog-submodal, 110090) + 10) !important;
}

.cab-plan-submodal {
    z-index: calc(var(--z-blog-submodal, 110090) + 20) !important;
}

.cab-leave-submodal {
    z-index: calc(var(--z-blog-submodal, 110090) + 30) !important;
}

.cab-watermark-submodal {
    z-index: calc(var(--z-blog-submodal, 110090) + 25) !important;
}

.cab-composer-emoji-panel {
    z-index: calc(var(--z-blog-submodal, 110090) + 40) !important;
}

.cab-composer-background-picker {
    z-index: calc(var(--z-blog-submodal, 110090) + 41) !important;
}

#blogPostEditModal {
    z-index: var(--z-blog-modal, 110080) !important;
}

.blog-post-edit-fallback-backdrop {
    z-index: var(--z-blog-modal-backdrop, 110070) !important;
}

.cab-composer-quick-action-body { display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.cab-composer-quick-action-meta { font-size:.78rem; color:#64748b; }
.cab-composer-quick-action-card.is-active-choice { border-color:#7aa7f4; background:#edf4ff; }
[data-theme="dark"] .cab-composer-quick-action-meta { color:#93a4bb; }
[data-theme="dark"] .cab-composer-quick-action-card.is-active-choice { background:#13233f; border-color:#3b82f6; }

/* ================================================================
 * Bloc 0B — résilience du composeur
 * ================================================================ */
.cab-composer-resilience-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 1.75rem;
    margin: .1rem 0 .65rem;
}

.cab-composer-autosave-status {
    color: #64748b;
    font-size: .78rem;
    line-height: 1.3;
}

.cab-composer-autosave-status[data-state="saving"] {
    font-weight: 600;
}

.cab-composer-autosave-status[data-state="saved"] {
    color: #166534;
}

.cab-composer-autosave-status[data-state="error"] {
    color: #b91c1c;
    font-weight: 600;
}

.cab-composer-restore-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .75rem;
    padding: .65rem .75rem;
    border: 1px solid #93c5fd;
    border-radius: .75rem;
    background: #eff6ff;
    color: #1e3a8a;
    font-size: .86rem;
}

.cab-composer-image-alt {
    padding: .7rem .75rem;
    border: 1px solid #dbe4ef;
    border-radius: .75rem;
    background: #f8fafc;
}

.cab-composer-image-alt .form-label {
    font-weight: 650;
}

.cab-composer-image-alt-help {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .3rem;
    color: #64748b;
    font-size: .76rem;
}

.cab-composer-preview-dialog {
    width: min(720px, calc(100vw - 2rem));
    max-height: min(88vh, 900px);
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 1rem;
    background: #fff;
    color: #0f172a;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .35);
}

.cab-composer-preview-dialog::backdrop {
    background: rgba(15, 23, 42, .72);
    backdrop-filter: blur(2px);
}

.cab-composer-preview-shell {
    display: flex;
    flex-direction: column;
    max-height: min(88vh, 900px);
}

.cab-composer-preview-header,
.cab-composer-preview-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem 1rem;
    border-color: #e2e8f0;
    background: #fff;
}

.cab-composer-preview-header {
    border-bottom: 1px solid #e2e8f0;
}

.cab-composer-preview-footer {
    justify-content: flex-end;
    border-top: 1px solid #e2e8f0;
}

.cab-composer-preview-card {
    overflow: auto;
    padding: 1rem;
    overscroll-behavior: contain;
}

.cab-composer-preview-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .8rem;
    color: #64748b;
    font-size: .78rem;
}

.cab-composer-preview-meta span {
    padding: .18rem .48rem;
    border-radius: 999px;
    background: #f1f5f9;
}

.cab-composer-preview-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.58;
}

.cab-composer-preview-text:empty {
    display: none;
}

.cab-composer-preview-image {
    display: block;
    width: 100%;
    max-height: 62vh;
    margin-top: .85rem;
    object-fit: contain;
    border-radius: .8rem;
    background: #0f172a;
}

.cab-composer-preview-alt {
    margin-top: .55rem;
    color: #64748b;
    font-size: .78rem;
    font-style: italic;
}

#blogPostComposerModal[data-composer-submitting="1"] .cab-composer-modal-body {
    cursor: progress;
}

#blogPostComposerModal[data-composer-submitting="1"] button:not([data-allow-during-submit]) {
    pointer-events: none;
}

[data-theme="dark"] .cab-composer-autosave-status {
    color: #94a3b8;
}

[data-theme="dark"] .cab-composer-autosave-status[data-state="saved"] {
    color: #86efac;
}

[data-theme="dark"] .cab-composer-autosave-status[data-state="error"] {
    color: #fca5a5;
}

[data-theme="dark"] .cab-composer-restore-notice {
    border-color: #1d4ed8;
    background: #172554;
    color: #dbeafe;
}

[data-theme="dark"] .cab-composer-image-alt {
    border-color: #334155;
    background: #111827;
}

[data-theme="dark"] .cab-composer-image-alt-help,
[data-theme="dark"] .cab-composer-preview-meta,
[data-theme="dark"] .cab-composer-preview-alt {
    color: #94a3b8;
}

[data-theme="dark"] .cab-composer-preview-dialog,
[data-theme="dark"] .cab-composer-preview-header,
[data-theme="dark"] .cab-composer-preview-footer {
    background: #111827;
    color: #e5e7eb;
}

[data-theme="dark"] .cab-composer-preview-header,
[data-theme="dark"] .cab-composer-preview-footer {
    border-color: #334155;
}

[data-theme="dark"] .cab-composer-preview-meta span {
    background: #1e293b;
}

@media (max-width: 640px) {
    .cab-composer-resilience-row,
    .cab-composer-restore-notice,
    .cab-composer-image-alt-help {
        align-items: flex-start;
        flex-direction: column;
    }

    .cab-composer-preview-dialog {
        width: calc(100vw - 1rem);
        max-height: calc(100dvh - 1rem);
        border-radius: .8rem;
    }

    .cab-composer-preview-shell {
        max-height: calc(100dvh - 1rem);
    }

    .cab-composer-preview-card {
        padding: .8rem;
    }
}


.cab-composer-footer-actions {
    display: grid;
    grid-template-columns: minmax(0, 0.22fr) minmax(0, 0.30fr) minmax(0, 0.22fr) minmax(0, 0.26fr);
    gap: 0.75rem;
    width: 100%;
}

.cab-composer-footer-actions .cab-composer-footer-button {
    width: 100%;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.cab-composer-footer-button-icon {
    font-size: 1rem;
    line-height: 1;
}

@media (max-width: 767.98px) {
    .cab-composer-footer-actions {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 479.98px) {
    .cab-composer-footer-actions {
        grid-template-columns: 1fr;
    }
}

.blog-modal-comment-item.is-target-comment {
    outline: 2px solid rgba(13, 110, 253, 0.35);
    border-radius: 14px;
    padding: 0.35rem;
    background: rgba(13, 110, 253, 0.04);
}

.blog-modal-comments-pagination {
    border-top: 1px solid #e5e7eb;
    padding-top: 0.75rem;
}

/* ClubOS 6.9 — quatre actions sur une seule ligne, largeurs adaptées aux libellés */
@media (min-width: 768px) {
    .cab-composer-footer-actions {
        display: grid !important;
        grid-template-columns: 19% 31% 21% 26% !important;
        column-gap: 1% !important;
        row-gap: 0 !important;
        align-items: stretch;
        width: 100%;
    }
    .cab-composer-footer-actions > * {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        grid-column: auto !important;
    }
    .cab-composer-footer-actions .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .42rem;
        white-space: nowrap;
        padding-left: .55rem;
        padding-right: .55rem;
        font-size: clamp(.78rem, .83vw, .96rem);
    }
}
@media (max-width: 767.98px) {
    .cab-composer-footer-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: .5rem !important;
    }
    .cab-composer-footer-actions > * { width: auto !important; min-width: 0 !important; margin: 0 !important; }
}

/* ClubOS 8.14.0-A.5.2 — composeur mobile utilisable en thème nuit et boutons contenus. */
:root[data-theme="dark"] .cab-post-composer-modal .btn-close {
    filter: invert(1) grayscale(1) brightness(2);
    opacity: .94;
}
:root[data-theme="dark"] .cab-post-composer-modal .modal-content,
:root[data-theme="dark"] .cab-post-composer-modal .modal-header,
:root[data-theme="dark"] .cab-post-composer-modal .modal-body,
:root[data-theme="dark"] .cab-post-composer-modal .modal-footer {
    background: #0f1828;
    color: #e7edf7;
    border-color: #30415d;
}
@media (max-width: 479.98px) {
    .cab-composer-footer-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .42rem !important;
        padding: .55rem !important;
    }
    .cab-composer-footer-actions .cab-composer-footer-button {
        min-height: 42px;
        padding: .42rem .35rem;
        white-space: normal;
        line-height: 1.15;
        font-size: .76rem;
    }
    .cab-composer-footer-button-icon { display: none; }
}

/* ========================================================================== */
/* 8.15.9.4.0 — publication en deux étapes / confiance éditoriale            */
/* ========================================================================== */
.cab-composer-visibility-inline--simple {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    width: fit-content;
    padding: .2rem .5rem;
    border: 1px solid var(--bs-border-color, rgba(127,127,127,.25));
    border-radius: 999px;
    background: color-mix(in srgb, var(--bs-body-bg, #fff) 92%, transparent);
}

.cab-composer-visibility-simple-label {
    font-size: .78rem;
    font-weight: 650;
    color: var(--bs-secondary-color, #6c757d);
}

.cab-publication-options-modal {
    z-index: 2160;
}

/* 9.7.4 : la modale post-publication doit réellement devenir le point focal,
   même lorsque le shell mobile neutralise le min-height de modal-dialog-centered. */
.cab-publication-options-modal.show {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

body.cab-publication-options-open > .modal-backdrop.show,
body.cab-publication-options-open .modal-backdrop.show {
    z-index: 2150;
    opacity: 1 !important;
    background: rgba(15, 23, 42, .34) !important;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.cab-publication-options-modal + .modal-backdrop,
.modal-backdrop:has(+ .cab-publication-options-modal) {
    z-index: 2150;
}

.cab-publication-options-dialog {
    width: min(calc(100vw - 2rem), 760px);
    max-width: 760px;
    margin: auto !important;
}

.cab-publication-options-card {
    min-height: 0 !important;
    border: 1px solid color-mix(in srgb, var(--bs-border-color, #dee2e6) 72%, transparent) !important;
    border-radius: 1.35rem !important;
    background: color-mix(in srgb, var(--bs-body-bg, #fff) 98%, #f8fafc 2%);
    box-shadow: 0 1.4rem 3.8rem rgba(15, 23, 42, .22);
    overflow: visible;
}

.cab-publication-options-header {
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
    gap: .8rem;
    padding: 1.05rem 1.1rem .35rem;
}

.cab-publication-options-header > .min-w-0 {
    flex: 1 1 auto;
    min-width: 0;
}

.cab-publication-options-header .btn-close {
    flex: 0 0 auto;
    margin: .05rem 0 0 auto !important;
}

.cab-publication-options-kicker {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .2rem;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .065em;
    text-transform: uppercase;
    color: var(--bs-primary, #0d6efd);
}

.cab-publication-options-kicker > span {
    display: grid;
    place-items: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bs-primary, #0d6efd) 12%, transparent);
}

#blogPostPublicationOptionsTitle {
    margin: 0;
    font-size: 1.28rem;
    font-weight: 760;
    letter-spacing: -.02em;
}

.cab-publication-options-subtitle {
    margin: .18rem 0 0;
    color: var(--bs-secondary-color, #6c757d);
    font-size: .78rem;
    line-height: 1.35;
}

.cab-publication-options-body {
    display: grid;
    gap: .9rem;
    padding: .75rem 1.1rem .85rem;
    overflow: visible;
}

.cab-publication-options-section {
    display: grid;
    gap: .45rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.cab-publication-options-legend {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    font-size: .78rem;
    font-weight: 760;
    color: var(--bs-body-color, #212529);
}

.cab-publication-options-grid {
    display: grid;
    gap: .55rem;
}

.cab-publication-audience-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cab-publication-share-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cab-publication-choice {
    position: relative;
    min-width: 0;
    min-height: 4.65rem;
    border: 1px solid color-mix(in srgb, var(--bs-border-color, #dee2e6) 86%, transparent);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--bs-body-bg, #fff) 97%, #eef2ff 3%);
    transition: border-color .14s ease, transform .14s ease, background .14s ease, box-shadow .14s ease;
}

.cab-publication-choice:hover:not(.is-disabled) {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--bs-primary, #0d6efd) 48%, var(--bs-border-color, #dee2e6));
}

.cab-publication-choice:has(.cab-publication-choice-input:checked) {
    border-color: color-mix(in srgb, var(--bs-primary, #0d6efd) 70%, var(--bs-border-color, #dee2e6));
    background: color-mix(in srgb, var(--bs-primary, #0d6efd) 7%, var(--bs-body-bg, #fff));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bs-primary, #0d6efd) 18%, transparent);
}

.cab-publication-choice.is-disabled {
    opacity: .42;
}

.cab-publication-choice-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.cab-publication-choice-label {
    display: grid;
    place-items: center;
    align-content: center;
    gap: .25rem;
    width: 100%;
    min-height: 4.65rem;
    padding: .5rem .45rem;
    cursor: pointer;
    text-align: center;
}

.cab-publication-choice.is-disabled .cab-publication-choice-label {
    cursor: not-allowed;
}

.cab-publication-choice-icon {
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    font-size: 1.05rem;
    line-height: 1;
}

.cab-publication-choice strong {
    display: block;
    min-width: 0;
    font-size: .79rem;
    font-weight: 760;
    line-height: 1.08;
}

.cab-publication-info {
    position: absolute;
    top: .32rem;
    right: .34rem;
    display: grid;
    place-items: center;
    width: 1.22rem;
    height: 1.22rem;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--bs-secondary-color, #6c757d) 32%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bs-body-bg, #fff) 90%, transparent);
    color: var(--bs-secondary-color, #6c757d);
    font-family: Georgia, serif;
    font-size: .72rem;
    font-style: italic;
    font-weight: 700;
    line-height: 1;
    opacity: .68;
    z-index: 2;
}

.cab-publication-info:hover,
.cab-publication-info:focus-visible {
    opacity: 1;
    color: var(--bs-primary, #0d6efd);
    border-color: color-mix(in srgb, var(--bs-primary, #0d6efd) 44%, transparent);
    outline: none;
}

.cab-publication-discovery {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 3.15rem;
    padding: .55rem .7rem;
    border: 1px solid color-mix(in srgb, var(--bs-border-color, #dee2e6) 72%, transparent);
    border-radius: .9rem;
    background: color-mix(in srgb, var(--bs-secondary-bg, #f3f4f6) 78%, transparent);
}

.cab-publication-discovery.is-disabled {
    opacity: .58;
}

.cab-publication-discovery-main {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.cab-publication-discovery-main .cab-publication-info {
    position: static;
}

.cab-publication-discovery-icon {
    font-size: 1rem;
}

.cab-publication-discovery strong,
.cab-publication-discovery small {
    display: block;
}

.cab-publication-discovery strong {
    font-size: .78rem;
    line-height: 1.15;
}

.cab-publication-discovery small {
    margin-top: .08rem;
    color: var(--bs-secondary-color, #6c757d);
    font-size: .68rem;
    line-height: 1.2;
}

.cab-publication-switch {
    position: relative;
    flex: 0 0 auto;
    width: 2.35rem;
    height: 1.35rem;
    cursor: pointer;
}

.cab-publication-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.cab-publication-switch span {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background .15s ease;
}

.cab-publication-switch span::after {
    content: '';
    position: absolute;
    top: .17rem;
    left: .18rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .22);
    transition: transform .15s ease;
}

.cab-publication-switch input:checked + span {
    background: var(--bs-primary, #0d6efd);
}

.cab-publication-switch input:checked + span::after {
    transform: translateX(1rem);
}

.cab-publication-switch:has(input:disabled) {
    cursor: not-allowed;
}

.cab-publication-share-section {
    margin-top: -.05rem;
}

.cab-publication-options-footnote {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 1.6rem;
    color: var(--bs-secondary-color, #6c757d);
    font-size: .67rem;
    text-align: center;
}

.cab-publication-options-footer {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: .15rem 1.1rem 1rem;
}

.cab-publication-options-footer .btn {
    min-width: 7.2rem;
    border-radius: .72rem;
    font-size: .78rem;
}

@media (max-width: 575.98px) {
    /* Le shell mobile force normalement toutes les modales en plein écran.
       Celle-ci est volontairement une carte compacte et centrée. */
    body.clubos-mobile-active .cab-publication-options-modal .modal-dialog,
    .cab-publication-options-modal .modal-dialog {
        width: min(calc(100vw - 1rem), 620px) !important;
        max-width: 620px !important;
        min-height: 0 !important;
        margin: auto !important;
        align-items: center !important;
    }

    body.clubos-mobile-active .cab-publication-options-modal .modal-content,
    .cab-publication-options-modal .modal-content {
        min-height: 0 !important;
        height: auto !important;
        max-height: min(92dvh, 720px) !important;
        border: 1px solid color-mix(in srgb, var(--bs-border-color, #dee2e6) 72%, transparent) !important;
        border-radius: 1.25rem !important;
    }

    .cab-publication-options-body {
        gap: .7rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: .65rem .75rem .7rem;
    }

    .cab-publication-options-header {
        padding: .8rem .75rem .25rem;
    }

    #blogPostPublicationOptionsTitle {
        font-size: 1.12rem;
    }

    .cab-publication-options-subtitle {
        font-size: .7rem;
    }

    .cab-publication-audience-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .45rem;
    }

    .cab-publication-share-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .38rem;
    }

    .cab-publication-choice,
    .cab-publication-choice-label {
        min-height: 3.9rem;
    }

    .cab-publication-choice-label {
        padding: .38rem .25rem;
    }

    .cab-publication-choice-icon {
        width: 1.5rem;
        height: 1.5rem;
        font-size: .95rem;
    }

    .cab-publication-choice strong {
        font-size: .71rem;
    }

    .cab-publication-info {
        top: .2rem;
        right: .22rem;
        width: 1.08rem;
        height: 1.08rem;
        font-size: .64rem;
    }

    .cab-publication-discovery {
        min-height: 2.85rem;
        padding: .45rem .55rem;
    }

    .cab-publication-discovery small {
        font-size: .62rem;
    }

    .cab-publication-options-footer {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: .05rem .75rem calc(.75rem + env(safe-area-inset-bottom, 0px));
    }

    .cab-publication-options-footer .btn {
        min-width: 0;
        padding-left: .45rem;
        padding-right: .45rem;
        font-size: .72rem;
    }
}

@media (min-width: 576px) and (max-height: 720px) {
    .cab-publication-options-card {
        max-height: calc(100dvh - 1.25rem);
    }
    .cab-publication-options-body {
        overflow-y: auto;
    }
}

/* Club Alex Borg 8.15.9.7.3 — déclaration IA compacte dans le composeur. */
.cab-composer-action-icon.is-ai {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: -.02em;
    border: 1px solid transparent;
}
.cab-composer-action-icon.is-ai.is-active,
.cab-composer-action-icon.is-ai[aria-pressed="true"] {
    color: #0d6efd;
    background: #eaf2ff;
    border-color: #b8d2ff;
}
.cab-composer-ai-panel {
    border: 1px solid #d9e1ec;
    border-radius: .75rem;
    background: #f8fafc;
    padding: .7rem .8rem;
}
.cab-composer-ai-choice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
}
.cab-composer-ai-copy {
    display: grid;
    gap: .1rem;
    min-width: 0;
}
.cab-composer-ai-copy strong { font-size: .88rem; }
.cab-composer-ai-copy small,
.cab-composer-ai-note {
    color: #64748b;
    font-size: .73rem;
    line-height: 1.28;
}
.cab-composer-ai-note {
    margin-top: .45rem;
    padding-top: .45rem;
    border-top: 1px solid #e2e8f0;
}
[data-theme="dark"] .cab-composer-ai-panel {
    background: #182235;
    border-color: #334155;
}
[data-theme="dark"] .cab-composer-ai-copy small,
[data-theme="dark"] .cab-composer-ai-note { color: #a8b6ca; }
[data-theme="dark"] .cab-composer-ai-note { border-top-color: #334155; }


/* Club Alex Borg 8.15.9.7.5 — flou réel et visible derrière Visibilité & partage. */
body.cab-publication-options-open #site-shell-header,
body.cab-publication-options-open #site-shell-player-zone,
body.cab-publication-options-open #site-shell-content > :not(#blogPostPublicationOptionsModal),
body.cab-publication-options-open .clubos-mobile-nav {
    -webkit-filter: blur(3px) !important;
    filter: blur(3px) !important;
    transition: filter .14s ease;
}
body.cab-publication-options-open #blogPostPublicationOptionsModal {
    -webkit-filter: none !important;
    filter: none !important;
}
body.cab-publication-options-open > .modal-backdrop.show,
body.cab-publication-options-open .modal-backdrop.show {
    background: rgba(15, 23, 42, .30) !important;
}

/* ========================================================================== */
/* Club Alex Borg 9.8.0X — composeur mobile en 2 étapes + options plein écran */
/* ========================================================================== */
.cab-composer-mobile-nav-button,
.cab-composer-mobile-header-action,
.cab-composer-mobile-step-two,
.cab-publication-options-context-nav {
    display: none;
}

.cab-composer-visibility-inline--simple {
    appearance: none;
    font: inherit;
    cursor: pointer;
}

.cab-comment-audience-submodal {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-blog-submodal, 110090) + 50);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

#blogPostComposerModal > .cab-comment-audience-submodal.cab-comment-audience-is-top-layer {
    z-index: 2147482000 !important;
    pointer-events: auto !important;
}
#blogPostComposerModal > .cab-comment-audience-submodal.cab-comment-audience-is-top-layer .cab-comment-audience-submodal-backdrop,
#blogPostComposerModal > .cab-comment-audience-submodal.cab-comment-audience-is-top-layer .cab-comment-audience-submodal-dialog {
    pointer-events: auto;
}
.cab-comment-audience-submodal-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.56); }
.cab-comment-audience-submodal-dialog {
    position: relative;
    z-index: 1;
    width: min(520px, calc(100vw - 2rem));
    max-height: min(720px, calc(100dvh - 2rem));
    overflow: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: 1.1rem;
    background: var(--bs-body-bg);
    box-shadow: 0 24px 70px rgba(15,23,42,.28);
}
.cab-comment-audience-submodal-head { display:flex; align-items:center; gap:.65rem; padding:.9rem 1rem; border-bottom:1px solid var(--bs-border-color); }
.cab-comment-audience-back { width:38px; height:38px; border:0; border-radius:999px; background:transparent; color:inherit; font-size:1.8rem; line-height:1; }
.cab-comment-audience-list { display:grid; padding:.45rem; }
.cab-comment-audience-list button { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:.65rem; width:100%; padding:.78rem .7rem; border:0; border-radius:.85rem; background:transparent; color:inherit; text-align:left; }
.cab-comment-audience-list button:hover,.cab-comment-audience-list button:focus-visible { background:var(--bs-tertiary-bg); outline:none; }
.cab-comment-audience-list button > span:first-child { font-size:1.25rem; text-align:center; }
.cab-comment-audience-list button > span:nth-child(2) { display:grid; gap:.08rem; }
.cab-comment-audience-list strong { font-size:.92rem; }
.cab-comment-audience-list small { color:var(--bs-secondary-color); font-size:.75rem; }
.cab-comment-audience-list button > span:last-child { font-size:1.35rem; color:var(--bs-secondary-color); }

@media (max-width: 767.98px) {
    #blogPostComposerModal.show {
        display: flex !important;
        align-items: stretch !important;
        padding: 0 !important;
    }
    #blogPostComposerModal .modal-dialog {
        width: 100vw !important;
        max-width: none !important;
        min-height: var(--cab-composer-visual-height, 100dvh) !important;
        height: var(--cab-composer-visual-height, 100dvh) !important;
        margin: 0 !important;
    }
    #blogPostComposerModal .modal-content {
        width: 100%;
        min-height: var(--cab-composer-visual-height, 100dvh) !important;
        height: var(--cab-composer-visual-height, 100dvh) !important;
        max-height: var(--cab-composer-visual-height, 100dvh) !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: var(--bs-body-bg) !important;
        overflow: hidden;
    }
    #blogPostComposerModal .cab-composer-main-header {
        position: relative;
        z-index: 5;
        display: grid;
        grid-template-columns: minmax(64px,auto) minmax(0,1fr) minmax(76px,auto);
        align-items: center;
        min-height: calc(54px + env(safe-area-inset-top, 0px));
        padding: calc(.45rem + env(safe-area-inset-top, 0px)) .65rem .45rem;
        border-bottom: 1px solid var(--bs-border-color);
        background: var(--bs-body-bg) !important;
    }
    #blogPostComposerModal .cab-composer-main-header .modal-title {
        grid-column: 2;
        justify-self: center;
        font-size: 1.02rem !important;
        font-weight: 760;
        white-space: nowrap;
    }
    #blogPostComposerModal .cab-composer-desktop-close { display: none !important; }
    #blogPostComposerModal .cab-composer-mobile-nav-button {
        display: inline-grid;
        grid-column: 1;
        grid-row: 1;
        place-items: center;
        justify-self: start;
        width: 42px;
        height: 42px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: var(--bs-body-color);
        font-size: 1.9rem;
        line-height: 1;
    }
    #blogPostComposerModal .cab-composer-mobile-header-action {
        display: inline-flex;
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        align-items: center;
        justify-content: center;
        min-width: 72px;
        min-height: 38px;
        border: 0;
        border-radius: .65rem;
        font-size: .86rem;
        font-weight: 760;
    }
    #blogPostComposerModal .cab-composer-mobile-header-action:disabled,
    #blogPostComposerModal .cab-composer-mobile-header-action.is-disabled {
        opacity: 1;
        color: #8b95a5;
        background: #e5e9ef;
    }
    #blogPostComposerModal .modal-body {
        display: flex;
        flex-direction: column;
        min-height: 0;
        flex: 1 1 auto;
        padding: 0 !important;
        overflow: hidden !important;
        background: var(--bs-body-bg) !important;
    }
    #blogPostComposerModal .cab-composer-mobile-step-one {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: .65rem .72rem 0;
    }
    #blogPostComposerModal .cab-composer-resilience-row { display: none !important; }
    #blogPostComposerModal .cab-composer-restore-notice { margin: 0 0 .5rem !important; }
    #blogPostComposerModal .cab-composer-user-row {
        flex: 0 0 auto;
        gap: .65rem;
        margin: 0 0 .45rem !important;
        padding: 0 .05rem;
    }
    #blogPostComposerModal .cab-composer-avatar { width: 44px; height: 44px; }
    #blogPostComposerModal .cab-composer-user-name { margin-bottom: .18rem; font-size: .98rem; }
    #blogPostComposerModal .cab-composer-visibility-inline--simple {
        min-height: 31px;
        padding: .2rem .55rem;
        border-radius: 999px;
        background: var(--bs-tertiary-bg);
    }
    #blogPostComposerModal .cab-composer-textarea-wrap {
        flex: 0 0 auto;
        min-height: 0;
        padding: 0;
        border-radius: 0;
    }
    #blogPostComposerModal .cab-composer-textarea {
        min-height: 112px !important;
        max-height: 42dvh;
        padding: .55rem 2.75rem .55rem .2rem;
        border: 0 !important;
        border-radius: 0 !important;
        resize: none;
        box-shadow: none !important;
        background: transparent !important;
        font-size: 1.12rem;
        line-height: 1.42;
    }
    #blogPostComposerModal .cab-composer-textarea-wrap.has-background {
        min-height: 180px;
        border-radius: .8rem;
        margin-bottom: .4rem;
    }
    #blogPostComposerModal .cab-composer-textarea-wrap.has-background .cab-composer-textarea { min-height: 180px !important; }
    #blogPostComposerModal .cab-composer-emoji-trigger { top: .25rem; right: .15rem; }
    #blogPostComposerModal .cab-composer-add-row {
        position: sticky;
        bottom: 0;
        z-index: 4;
        flex: 0 0 auto;
        min-height: calc(58px + env(safe-area-inset-bottom, 0px));
        margin: auto -.72rem 0 !important;
        padding: .5rem .8rem max(.5rem, env(safe-area-inset-bottom, 0px));
        border: 0;
        border-top: 1px solid var(--bs-border-color);
        border-radius: 0;
        background: color-mix(in srgb, var(--bs-body-bg) 97%, transparent);
    }
    #blogPostComposerModal .cab-composer-add-title { display: none !important; }
    #blogPostComposerModal .cab-composer-actions { width: 100%; justify-content: space-around; gap: .8rem; flex-wrap: nowrap; }
    #blogPostComposerModal .cab-composer-action-icon { width: 44px; height: 44px; font-size: 1.35rem; background: transparent; }
    #blogPostComposerModal .cab-composer-action-icon.is-position,
    #blogPostComposerModal .cab-composer-action-icon.is-ai,
    #blogPostComposerModal .cab-composer-action-icon.is-more { display: none !important; }
    #blogPostComposerModal #blogComposerAiPanel,
    #blogPostComposerModal #blogComposerPositionWrap,
    #blogPostComposerModal #blogComposerMoreInfo { display: none !important; }
    #blogPostComposerModal .cab-composer-footer-actions { display: none !important; }
    #blogPostComposerModal .cab-composer-mobile-step-two {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding: .45rem .55rem calc(.7rem + env(safe-area-inset-bottom, 0px));
        background: var(--bs-body-bg);
    }
    #blogPostComposerModal .cab-composer-mobile-step-two:not(.d-none) { display: block !important; }
    .cab-composer-mobile-settings-list { display: grid; gap: .08rem; }
    .cab-composer-mobile-setting-row {
        display: grid;
        grid-template-columns: 42px minmax(0,1fr) auto;
        align-items: center;
        gap: .65rem;
        width: 100%;
        min-height: 68px;
        padding: .65rem .55rem;
        border: 0;
        border-bottom: 1px solid color-mix(in srgb, var(--bs-border-color) 72%, transparent);
        border-radius: 0;
        background: transparent;
        color: var(--bs-body-color);
        text-align: left;
    }
    .cab-composer-mobile-setting-row > span:nth-child(2) { display:grid; gap:.08rem; min-width:0; }
    .cab-composer-mobile-setting-row strong { font-size: .94rem; font-weight: 720; }
    .cab-composer-mobile-setting-row small { color: var(--bs-secondary-color); font-size: .75rem; line-height: 1.25; }
    .cab-composer-mobile-setting-icon { font-size: 1.35rem; text-align:center; }
    .cab-composer-mobile-setting-chevron { color: var(--bs-secondary-color); font-size:1.55rem; }
    .cab-composer-mobile-setting-switch { cursor:pointer; }
    .cab-composer-mobile-setting-switch .form-switch { padding-left: 2.4em; }

    /* Visibilité & partage : vraie surface plein écran, sans flou du shell. */
    body.cab-publication-options-open #site-shell-header,
    body.cab-publication-options-open #site-shell-player-zone,
    body.cab-publication-options-open #site-shell-content > :not(#blogPostPublicationOptionsModal),
    body.cab-publication-options-open .clubos-mobile-nav {
        -webkit-filter: none !important;
        filter: none !important;
    }
    .cab-publication-options-modal.show {
        position: fixed !important;
        inset: 0 !important;
        display: block !important;
        width: 100vw !important;
        height: 100dvh !important;
        padding: 0 !important;
        background: var(--bs-body-bg) !important;
        overflow: hidden !important;
    }
    body.clubos-mobile-active .cab-publication-options-modal .modal-dialog,
    .cab-publication-options-modal .modal-dialog {
        width: 100vw !important;
        max-width: none !important;
        min-height: 100dvh !important;
        height: 100dvh !important;
        margin: 0 !important;
        align-items: stretch !important;
    }
    body.clubos-mobile-active .cab-publication-options-modal .modal-content,
    .cab-publication-options-modal .modal-content {
        width: 100% !important;
        min-height: 100dvh !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: var(--bs-body-bg) !important;
        overflow: hidden !important;
    }
    .cab-publication-options-header {
        display: grid;
        grid-template-columns: 44px minmax(0,1fr) 0;
        align-items: center;
        min-height: calc(62px + env(safe-area-inset-top,0px));
        padding: calc(.45rem + env(safe-area-inset-top,0px)) .7rem .45rem;
        border-bottom: 1px solid var(--bs-border-color) !important;
    }
    .cab-publication-options-context-nav {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: var(--bs-body-color);
        font-size: 1.85rem;
        line-height: 1;
    }
    .cab-publication-options-header > .min-w-0 { padding-left: .35rem; }
    .cab-publication-options-header .btn-close { display: none !important; }
    .cab-publication-options-kicker { margin: 0 0 .08rem; font-size: .58rem; }
    #blogPostPublicationOptionsTitle { font-size: 1.08rem; }
    .cab-publication-options-subtitle { display: none; }
    .cab-publication-options-body {
        display: flex;
        flex-direction: column;
        gap: .85rem;
        min-height: 0;
        flex: 1 1 auto;
        overflow-y: auto;
        padding: .8rem .65rem;
    }
    .cab-publication-audience-grid { grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: .35rem; }
    .cab-publication-choice,
    .cab-publication-choice-label { min-height: 4.1rem; }
    .cab-publication-choice { border-radius: .8rem; }
    .cab-publication-choice-label { padding: .38rem .16rem; }
    .cab-publication-choice-icon { width: 1.35rem; height: 1.35rem; font-size: .95rem; }
    .cab-publication-choice strong { font-size: .67rem; overflow-wrap:anywhere; }
    .cab-publication-info { display: none !important; }
    .cab-publication-discovery { margin-top: .1rem; }
    .cab-publication-options-footnote { margin-top:auto; padding:.8rem .25rem; }
    .cab-publication-options-footer { padding: .45rem .65rem calc(.65rem + env(safe-area-inset-bottom,0px)); }
    .cab-publication-options-modal[data-options-context="composer"] .cab-publication-options-footer { display: none !important; }
    body.cab-publication-options-open > .modal-backdrop.show,
    body.cab-publication-options-open .modal-backdrop.show { display:none !important; opacity:0 !important; backdrop-filter:none !important; }

    .cab-comment-audience-submodal { padding: 0; background: var(--bs-body-bg); }
    .cab-comment-audience-submodal-backdrop { display:none; }
    .cab-comment-audience-submodal-dialog { width:100vw; max-width:none; min-height:100dvh; height:100dvh; max-height:100dvh; border:0; border-radius:0; box-shadow:none; }
    .cab-comment-audience-submodal-head { min-height:calc(58px + env(safe-area-inset-top,0px)); padding:calc(.4rem + env(safe-area-inset-top,0px)) .65rem .4rem; }
    .cab-comment-audience-submodal-head strong { font-size:1rem; }
    .cab-comment-audience-list { padding:.35rem .5rem; }
}


/* ========================================================================== */
/* Club Alex Borg 9.8.0X R2 — options au-dessus du composeur + switch IA */
/* ========================================================================== */
.cab-publication-options-modal {
    z-index: var(--z-blog-publication-options, 110120) !important;
}
body.cab-publication-options-open > .modal-backdrop.show,
body.cab-publication-options-open .modal-backdrop.show {
    z-index: var(--z-blog-publication-options-backdrop, 110110) !important;
}
#blogPostComposerModal.cab-composer-suspended-by-options {
    pointer-events: none !important;
}

.cab-composer-mobile-ai-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 26px;
    flex: 0 0 42px;
}
.cab-composer-mobile-ai-input {
    position: absolute;
    inset: 0;
    width: 42px;
    height: 26px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}
.cab-composer-mobile-ai-track {
    position: relative;
    display: block;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: #cbd5e1;
    border: 1px solid color-mix(in srgb, #64748b 28%, transparent);
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
    pointer-events: none;
}
.cab-composer-mobile-ai-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .28);
    transition: transform .16s ease;
}
.cab-composer-mobile-ai-input:checked + .cab-composer-mobile-ai-track {
    background: var(--bs-primary, #0d6efd);
    border-color: var(--bs-primary, #0d6efd);
}
.cab-composer-mobile-ai-input:checked + .cab-composer-mobile-ai-track .cab-composer-mobile-ai-knob {
    transform: translateX(18px);
}
.cab-composer-mobile-ai-input:focus-visible + .cab-composer-mobile-ai-track {
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--bs-primary, #0d6efd) 24%, transparent);
}
[data-theme="dark"] .cab-composer-mobile-ai-track {
    background: #475569;
    border-color: #64748b;
}

/* AV.1.1 R1 — media intake: drag/drop + clipboard images. */
.cab-composer-textarea-wrap {
    position: relative;
}
.cab-composer-media-drop-overlay {
    position: absolute;
    inset: 0;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    border: 2px dashed rgba(37, 99, 235, .62);
    border-radius: inherit;
    background: rgba(239, 246, 255, .96);
    pointer-events: none;
}
.cab-composer-media-drop-card {
    display: grid;
    gap: 4px;
    max-width: 420px;
    text-align: center;
    color: #1e3a8a;
}
.cab-composer-media-drop-card strong {
    font-size: 1rem;
}
.cab-composer-media-drop-card span,
.cab-composer-media-drop-card small {
    color: #475569;
}
#blogPostComposerModal.is-media-drop-active .cab-composer-textarea-wrap {
    outline: 3px solid rgba(59, 130, 246, .18);
    outline-offset: 3px;
}
[data-theme="dark"] .cab-composer-media-drop-overlay {
    background: rgba(15, 23, 42, .96);
    border-color: rgba(96, 165, 250, .75);
}
[data-theme="dark"] .cab-composer-media-drop-card {
    color: #bfdbfe;
}
[data-theme="dark"] .cab-composer-media-drop-card span,
[data-theme="dark"] .cab-composer-media-drop-card small {
    color: #cbd5e1;
}



/* ========================================================================== */
/* AV.1.1 R5 — composeur desktop unifié en deux étapes                        */
/* ========================================================================== */
.cab-composer-identity-controls {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
}
.cab-composer-ai-shortcut {
    display: inline-flex;
    align-items: center;
    gap: .34rem;
    min-height: 31px;
    padding: .2rem .58rem;
    border: 1px solid var(--bs-border-color, #d5dbe5);
    border-radius: 999px;
    background: var(--bs-tertiary-bg, #f1f5f9);
    color: var(--bs-secondary-color, #64748b);
    font: inherit;
    font-size: .76rem;
    font-weight: 700;
    cursor: pointer;
}
.cab-composer-ai-shortcut-mark { font-size: .69rem; font-weight: 850; letter-spacing: .02em; }
.cab-composer-ai-shortcut.is-active {
    color: var(--bs-primary, #0d6efd);
    border-color: color-mix(in srgb, var(--bs-primary, #0d6efd) 45%, var(--bs-border-color));
    background: color-mix(in srgb, var(--bs-primary, #0d6efd) 10%, var(--bs-body-bg));
}

@media (min-width: 768px) {
    #blogPostComposerModal .modal-dialog { max-width: 820px; }
    #blogPostComposerModal .cab-post-composer-modal { overflow: hidden; }
    #blogPostComposerModal .cab-composer-main-header { min-height: 58px; padding: .7rem 1rem; }
    #blogPostComposerModal .modal-body { padding: .9rem 1rem .7rem; }
    #blogPostComposerModal .cab-composer-resilience-row { margin-bottom: .45rem; }
    #blogPostComposerModal .cab-composer-user-row { margin-bottom: .65rem !important; }
    #blogPostComposerModal .cab-composer-textarea-wrap { padding: .15rem 0; }
    #blogPostComposerModal .cab-composer-textarea {
        min-height: 190px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: .6rem .35rem;
        font-size: 1.08rem;
        resize: vertical;
        background: transparent;
    }
    #blogPostComposerModal .cab-composer-emoji-trigger { display: none !important; }
    #blogPostComposerModal .cab-composer-add-row {
        margin-top: .7rem !important;
        padding: .58rem .7rem;
        border: 1px solid var(--bs-border-color);
        border-radius: .85rem;
        background: var(--bs-body-bg);
    }
    #blogPostComposerModal .cab-composer-actions { gap: .35rem; }
    #blogPostComposerModal .cab-composer-action-icon.is-position,
    #blogPostComposerModal .cab-composer-action-icon.is-ai { display: none !important; }
    #blogPostComposerModal .cab-composer-action-icon.is-more { display: inline-grid !important; }
    #blogPostComposerModal .cab-composer-action-icon.is-emoji { display: inline-grid !important; }
    #blogPostComposerModal #blogComposerAiPanel,
    #blogPostComposerModal #blogComposerPositionWrap { display: none !important; }

    #blogPostComposerModal .cab-composer-mobile-step-two {
        min-height: 360px;
        padding: .15rem 0 .35rem;
    }
    #blogPostComposerModal .cab-composer-mobile-step-two:not(.d-none) { display: block !important; }
    #blogPostComposerModal .cab-composer-mobile-settings-list {
        display: grid;
        gap: .12rem;
        max-width: 680px;
        margin: 0 auto;
    }
    #blogPostComposerModal .cab-composer-mobile-setting-row {
        display: grid;
        grid-template-columns: 44px minmax(0,1fr) auto;
        align-items: center;
        gap: .7rem;
        width: 100%;
        min-height: 64px;
        padding: .58rem .65rem;
        border: 0;
        border-bottom: 1px solid color-mix(in srgb, var(--bs-border-color) 78%, transparent);
        border-radius: .65rem;
        background: transparent;
        color: var(--bs-body-color);
        text-align: left;
    }
    #blogPostComposerModal .cab-composer-mobile-setting-row:hover,
    #blogPostComposerModal .cab-composer-mobile-setting-row:focus-visible {
        background: var(--bs-tertiary-bg);
        outline: none;
    }
    #blogPostComposerModal .cab-composer-mobile-setting-row > span:nth-child(2) { display: grid; gap: .05rem; min-width: 0; }
    #blogPostComposerModal .cab-composer-mobile-setting-row strong { font-size: .93rem; }
    #blogPostComposerModal .cab-composer-mobile-setting-row small { color: var(--bs-secondary-color); font-size: .76rem; }
    #blogPostComposerModal .cab-composer-mobile-setting-icon { font-size: 1.25rem; text-align: center; }
    #blogPostComposerModal .cab-composer-mobile-setting-chevron { color: var(--bs-secondary-color); font-size: 1.45rem; }
    #blogPostComposerModal .cab-composer-mobile-setting-switch { cursor: pointer; }

    #blogPostComposerModal .cab-composer-footer-actions {
        display: flex !important;
        padding: .7rem 1rem .85rem !important;
        border-top: 1px solid var(--bs-border-color);
        background: var(--bs-body-bg);
    }
    #blogPostComposerModal .cab-composer-footer-actions .is-preview,
    #blogPostComposerModal .cab-composer-footer-actions .is-save,
    #blogPostComposerModal .cab-composer-footer-actions .is-plan { display: none !important; }
    #blogPostComposerModal .cab-composer-footer-actions .is-publish {
        display: inline-flex !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 46px;
        margin: 0 !important;
        font-size: .98rem;
        font-weight: 760;
    }
    #blogPostComposerModal .cab-composer-footer-actions .is-publish .cab-composer-footer-button-icon { display: none !important; }
}

@media (max-width: 767.98px) {
    #blogPostComposerModal .cab-composer-ai-shortcut { display: none !important; }
    #blogPostComposerModal .cab-composer-action-icon.is-emoji { display: none !important; }
}


/* ==========================================================================
 * AV.1.1 R6 FIX1 — retour visible sur l'étape 2 desktop.
 * ========================================================================== */
@media (min-width: 768px) {
    #blogPostComposerModal[data-mobile-step="2"] .cab-composer-mobile-nav-button {
        display: inline-grid !important;
        place-items: center;
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        margin: 0 .35rem 0 0;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: var(--bs-body-color);
        font-size: 1.85rem;
        line-height: 1;
        cursor: pointer;
    }
    #blogPostComposerModal[data-mobile-step="2"] .cab-composer-mobile-nav-button:hover,
    #blogPostComposerModal[data-mobile-step="2"] .cab-composer-mobile-nav-button:focus-visible {
        background: var(--bs-tertiary-bg);
        outline: none;
    }
    #blogPostComposerModal[data-mobile-step="2"] .cab-composer-main-header .modal-title {
        flex: 1 1 auto;
        min-width: 0;
    }
}


/* ==========================================================================
 * AV.1.1 R6 FIX2 — attente Post Intelligence visible et non bloquante.
 * ========================================================================== */
.cab-post-intelligence-loading {
    min-height: 118px;
    display: grid;
    place-items: center;
    align-content: center;
}
.cab-post-intelligence-loading-label { font-weight: 650; }
.cab-post-intelligence-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .38rem;
    min-height: 22px;
    margin-top: .55rem;
}
.cab-post-intelligence-dots > i {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: currentColor;
    opacity: .28;
    animation: cab-post-intelligence-dot 1.05s infinite ease-in-out;
}
.cab-post-intelligence-dots > i:nth-child(2) { animation-delay: .14s; }
.cab-post-intelligence-dots > i:nth-child(3) { animation-delay: .28s; }
@keyframes cab-post-intelligence-dot {
    0%, 60%, 100% { transform: translateY(0) scale(.82); opacity: .28; }
    30% { transform: translateY(-5px) scale(1); opacity: .92; }
}
@media (prefers-reduced-motion: reduce) {
    .cab-post-intelligence-dots > i { animation: none; opacity: .65; }
}


/* R6 FIX3 — Détails publication compact et toujours contenu dans le viewport. */
#blogPostDetailsModal.blog-post-details-modal-compact .modal-dialog,
#blogComposerDraftDetailsModal.blog-post-details-modal-compact .modal-dialog {
    max-height: min(84dvh, 760px);
    margin-top: max(.75rem, calc((100dvh - min(84dvh, 760px)) / 2));
    margin-bottom: max(.75rem, calc((100dvh - min(84dvh, 760px)) / 2));
}
#blogPostDetailsModal.blog-post-details-modal-compact .modal-content,
#blogComposerDraftDetailsModal.blog-post-details-modal-compact .modal-content {
    max-height: min(84dvh, 760px);
    overflow: hidden;
}
#blogPostDetailsModal.blog-post-details-modal-compact .modal-header,
#blogPostDetailsModal.blog-post-details-modal-compact .modal-footer,
#blogComposerDraftDetailsModal.blog-post-details-modal-compact .modal-header,
#blogComposerDraftDetailsModal.blog-post-details-modal-compact .modal-footer {
    padding: .65rem .9rem;
    flex: 0 0 auto;
}
#blogPostDetailsModal.blog-post-details-modal-compact .modal-body,
#blogComposerDraftDetailsModal.blog-post-details-modal-compact .modal-body {
    padding: .7rem .9rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}
#blogPostDetailsModal.blog-post-details-modal-compact .form-label,
#blogComposerDraftDetailsModal.blog-post-details-modal-compact .form-label { margin-bottom: .2rem; }
#blogPostDetailsModal.blog-post-details-modal-compact .form-text,
#blogComposerDraftDetailsModal.blog-post-details-modal-compact .form-text { margin-top: .15rem; line-height: 1.25; }
#blogPostDetailsModal.blog-post-details-modal-compact .row.g-2,
#blogComposerDraftDetailsModal.blog-post-details-modal-compact .row.g-2 { --bs-gutter-y: .55rem; }
#blogPostDetailsModal.blog-post-details-modal-compact .cab-post-intelligence-loading,
#blogComposerDraftDetailsModal.blog-post-details-modal-compact .cab-post-intelligence-loading { min-height: 72px; padding-top: .55rem !important; padding-bottom: .55rem !important; }
@media (max-width: 767.98px) {
    #blogPostDetailsModal.blog-post-details-modal-compact .modal-dialog,
#blogComposerDraftDetailsModal.blog-post-details-modal-compact .modal-dialog { max-height: calc(100dvh - 1rem); margin: .5rem; width: calc(100% - 1rem); }
    #blogPostDetailsModal.blog-post-details-modal-compact .modal-content,
#blogComposerDraftDetailsModal.blog-post-details-modal-compact .modal-content { max-height: calc(100dvh - 1rem); }
}

/* === AV.1.1 R9 — AI consent UI in composer/details === */
.cab-ai-access-dialog{width:min(720px,calc(100vw - 1rem));border:0;border-radius:20px;padding:0;box-shadow:0 24px 80px rgba(15,23,42,.28)}
.cab-ai-access-dialog::backdrop{background:rgba(15,23,42,.48);backdrop-filter:blur(3px)}
.cab-ai-access-explainer{display:grid;gap:.2rem;margin:.2rem 0 .85rem;padding:.8rem .9rem;border-radius:14px;background:#f3f8ff;border:1px solid rgba(10,132,255,.12);color:#5c6674;font-size:.82rem;line-height:1.45}
.cab-ai-access-explainer strong{color:#253141}
.cab-ai-access-list{display:grid;gap:.65rem;max-height:min(50vh,440px);overflow:auto;padding-right:.15rem}
.cab-ai-access-agent{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,.75fr);gap:.8rem;align-items:center;padding:.78rem .85rem;border:1px solid rgba(15,23,42,.09);border-radius:14px;background:#fbfcfe}
.cab-ai-access-agent>span{display:grid;gap:.15rem}.cab-ai-access-agent strong{font-size:.9rem}.cab-ai-access-agent small{font-size:.74rem;color:var(--bs-secondary-color);line-height:1.35}
.cab-ai-access-agent select{border:1px solid #cfd7e3;border-radius:11px;padding:.55rem .65rem;background:#f6f8fb;color:var(--bs-body-color)}
.bpd-ai-consent-card{padding:.85rem;border:1px solid rgba(10,132,255,.18);border-radius:14px;background:rgba(10,132,255,.035)}
.bpd-ai-consent-head{display:flex;justify-content:space-between;gap:.8rem;align-items:flex-start;margin-bottom:.7rem}.bpd-ai-consent-head>div{display:grid;gap:.15rem}.bpd-ai-consent-head small{color:var(--bs-secondary-color);line-height:1.35}
.bpd-ai-info{display:grid;place-items:center;width:22px;height:22px;min-width:22px;border-radius:999px;border:1px solid rgba(10,132,255,.25);background:#fff;color:#0a75dd;font-weight:800;font-size:.72rem}
.bpd-ai-consent-agent{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.8fr);gap:.75rem;align-items:center;padding:.58rem 0;border-top:1px solid rgba(15,23,42,.07)}
.bpd-ai-consent-agent>span{display:grid;gap:.1rem}.bpd-ai-consent-agent small{color:var(--bs-secondary-color);font-size:.72rem}
@media(max-width:680px){.cab-ai-access-agent,.bpd-ai-consent-agent{grid-template-columns:1fr}.cab-ai-access-dialog{width:calc(100vw - .7rem)}}
[data-theme="dark"] .cab-ai-access-explainer,[data-theme="dark"] .cab-ai-access-agent,[data-theme="dark"] .bpd-ai-consent-card{background:#111827;border-color:#334155}[data-theme="dark"] .cab-ai-access-agent select{background:#172033;border-color:#475569;color:#e5e7eb}

/* R73 · le sélecteur de logo est une vraie sous-couche prioritaire du composeur. */
.cab-watermark-submodal {
    z-index: 2147482000 !important;
    isolation: isolate;
}
body.cab-watermark-submodal-open .cab-watermark-submodal:not(.d-none) {
    display: flex !important;
    pointer-events: auto;
}
body.cab-watermark-submodal-open .cab-watermark-submodal-backdrop {
    z-index: 0;
    pointer-events: auto;
}
body.cab-watermark-submodal-open .cab-watermark-submodal-dialog {
    z-index: 1;
    pointer-events: auto;
}


/* R117 R2 — tri serveur du mur, hors du menu « … ». */
.cab-wall-sort-controls{display:inline-flex;align-items:center;gap:.38rem;flex:0 0 auto}
.cab-wall-sort-button{width:40px;height:40px;border:1px solid #c8d2e2;border-radius:999px;background:#fff;color:#64748b;display:inline-flex;align-items:center;justify-content:center;padding:0;transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease}
.cab-wall-sort-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.cab-wall-sort-button:hover,.cab-wall-sort-button:focus-visible{background:#f8fafc;border-color:#94a3b8;color:#0d6efd}
.cab-wall-sort-button.is-active{background:#eaf3ff;border-color:#0d6efd;color:#0d6efd;box-shadow:0 0 0 2px rgba(13,110,253,.08)}
[data-theme="dark"] .cab-wall-sort-button{background:#172033;border-color:#44516a;color:#c8d2e2}
[data-theme="dark"] .cab-wall-sort-button:hover,[data-theme="dark"] .cab-wall-sort-button:focus-visible,[data-theme="dark"] .cab-wall-sort-button.is-active{background:#1d3154;border-color:#68a0ff;color:#9ec2ff}
@media(max-width:767.98px){
    .cab-post-composer-compact{column-gap:.45rem;row-gap:.5rem}
    .cab-wall-sort-controls{width:auto;justify-content:flex-start;gap:.32rem;flex:0 0 auto}
    .cab-wall-sort-button{width:38px;height:38px}
}
@media(max-width:389.98px){
    .cab-post-composer-compact-photo{padding:.5rem .68rem}
    .cab-post-composer-compact-more{width:38px;height:38px}
    .cab-wall-sort-controls{gap:.25rem}
    .cab-wall-sort-button{width:36px;height:36px}
}

/* R118 R1 : proposition facultative d'illustration à l'étape 2. */
.cab-composer-illustration { margin: 0 0 1rem; padding: 1rem; border: 1px solid var(--bs-border-color, #c9cbd0); border-radius: 13px; background: var(--bs-tertiary-bg, #f5f6f8); }
.cab-composer-illustration-title { font-weight: 750; margin-bottom: .35rem; }
.cab-composer-illustration-intro { font-size: .92rem; margin: 0 0 .6rem; }
.cab-composer-illustration-preview { display: block; width: 100%; max-height: 300px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 9px; margin: .55rem 0; }
.cab-composer-illustration-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .65rem; }
.cab-composer-illustration .d-none { display: none !important; }

/* R118 R3 - three selectable previews, with responsive layout. */
.cab-composer-illustration-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;margin-top:.7rem}
.cab-composer-illustration-card{display:grid;gap:.45rem;align-content:start;min-width:0;border:1px solid var(--bs-border-color,#d9e0eb);border-radius:10px;padding:.35rem;background:var(--bs-body-bg,#fff)}
.cab-composer-illustration-card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:7px}
.cab-composer-illustration-card button{width:100%;white-space:normal}
@media(max-width:720px){.cab-composer-illustration-grid{grid-template-columns:1fr}}

/* R118 R3 FIX1 : galerie en préparation et blocage visible, sans contourner le contrôle serveur. */
.cab-composer-illustration-card.is-loading { overflow:hidden; }
.cab-illustration-skeleton { position:relative; aspect-ratio:16 / 9; border-radius:8px; overflow:hidden; display:grid; place-items:center; background:linear-gradient(105deg,#d7dce5 0%,#f2f4f7 37%,#d2d8e1 70%,#e6eaf0 100%); background-size:250% 100%; animation:cab-illustration-shimmer 1.8s ease-in-out infinite; }
.cab-illustration-loading-dots { display:flex; gap:8px; align-items:center; justify-content:center; }
.cab-illustration-loading-dots i { display:block; width:9px; height:9px; border-radius:50%; background:#64748b; animation:cab-illustration-bounce 1s ease-in-out infinite; }
.cab-illustration-loading-dots i:nth-child(2) { animation-delay:.15s; }
.cab-illustration-loading-dots i:nth-child(3) { animation-delay:.3s; }
.cab-illustration-skeleton-label { font-size:.78rem; text-align:center; color:var(--bs-secondary-color,#64748b); }
@keyframes cab-illustration-shimmer { 0% { background-position:100% 0; } 100% { background-position:-100% 0; } }
@keyframes cab-illustration-bounce { 0%,60%,100% { transform:translateY(0); opacity:.55; } 30% { transform:translateY(-8px); opacity:1; } }
@media(prefers-reduced-motion:reduce) { .cab-illustration-skeleton,.cab-illustration-loading-dots i { animation:none !important; } }
#blogPostComposerModal .cab-composer-footer-actions { flex-wrap:wrap; }
#blogComposerVisualBlockHint { flex:1 0 100%; order:-1; padding:.35rem .55rem; font-size:.82rem; line-height:1.3; color:var(--bs-danger-text-emphasis,#842029); background:var(--bs-danger-bg-subtle,#f8d7da); border-radius:6px; }
#blogPostComposerModal .cab-composer-visual-blocked { opacity:.50 !important; background:#8b95a5 !important; border-color:#8b95a5 !important; box-shadow:none !important; cursor:not-allowed !important; }
#blogPostComposerModal .cab-composer-visual-blocked-stage .cab-composer-footer-actions:has(#blogComposerPublishButton:disabled) { cursor:not-allowed; }
#blogPostComposerModal .cab-composer-footer-actions #blogComposerPublishButton:disabled { cursor:not-allowed !important; }
/* Publication options is portalled to body, above composer, its custom backdrop and other shell overlays. */
body.cab-publication-options-open > #blogPostPublicationOptionsModal.cab-publication-options-modal.show { z-index:2147483000 !important; }
body.cab-publication-options-open > .modal-backdrop.show { z-index:2147482900 !important; }
body.cab-publication-options-open #blogPostComposerModal.cab-composer-suspended-by-options { z-index:110080 !important; pointer-events:none !important; }


/* R118 R3 FIX2 — galerie compacte, prompts bilingues et sortie du composeur. */
.cab-illustration-title-mobile,.cab-illustration-intro-mobile{display:none}
.cab-illustration-ai-tag{font-size:.65rem;border:1px solid #bcd7fb;background:#eaf4ff;color:#1957a4;border-radius:99px;padding:.1rem .37rem;vertical-align:middle;white-space:nowrap}
.cab-composer-illustration .cab-illustration-status{line-height:1.38;margin:.3rem 0 .25rem}
.cab-composer-illustration-grid{position:relative}
.cab-illustration-image-wrap{position:relative;min-width:0;overflow:hidden;border-radius:7px}
.cab-illustration-image-wrap img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.cab-illustration-prompt-hover{position:absolute;inset:0;z-index:2;padding:.55rem;background:rgba(12,26,48,.94);color:#fff;font-size:.76rem;line-height:1.4;opacity:0;visibility:hidden;overflow-y:auto;transition:opacity .15s ease;pointer-events:none}
@media(hover:hover) and (min-width:721px){.cab-composer-illustration-card:hover .cab-illustration-prompt-hover,.cab-composer-illustration-card:focus-within .cab-illustration-prompt-hover{opacity:1;visibility:visible}}
.cab-illustration-prompt-details{font-size:.76rem;color:var(--bs-body-color,#253045);min-width:0}
.cab-illustration-prompt-details summary{cursor:pointer;color:var(--bs-primary,#0d6efd);font-weight:650;font-size:.74rem;padding:.12rem .2rem;outline-offset:3px}
.cab-illustration-prompt-details[open]{padding:.2rem .35rem;border-radius:7px;background:var(--bs-tertiary-bg,#f3f6fa)}
.cab-illustration-prompt-language{overflow-wrap:anywhere;line-height:1.4;margin:.5rem 0 .2rem}
.cab-illustration-carousel-controls{display:none;justify-content:center;align-items:center;gap:.9rem;margin:.35rem 0 .15rem;font-size:.8rem;font-weight:700;color:var(--bs-secondary-color,#64748b)}
.cab-illustration-carousel-arrow{display:grid;place-items:center;border:1px solid var(--bs-border-color,#c9d6e7);background:var(--bs-body-bg,#fff);color:var(--bs-body-color,#334155);border-radius:99px;min-width:34px;min-height:30px;font-size:1.4rem;line-height:1;cursor:pointer}
.cab-illustration-carousel-arrow:focus-visible{outline:2px solid #0d6efd;outline-offset:2px}
#blogPostComposerModal .cab-composer-footer-actions > #blogComposerVisualBlockHint{grid-column:1 / -1 !important;margin:0 0 .55rem !important;padding:.55rem .75rem;border:1px solid #cbd8ea;border-radius:9px;background:var(--bs-tertiary-bg,#f1f5f9);color:var(--bs-body-color,#334155);line-height:1.38}
#blogComposerVisualBlockHint::before{content:'ℹ ';color:var(--bs-primary,#0d6efd);font-weight:bold}
/* Higher than an options-modal Bootstrap backdrop (2147482900), without touching unrelated surfaces. */
body.cab-composer-leave-open > #blogComposerLeaveModal.cab-leave-submodal:not(.d-none){position:fixed!important;inset:0!important;display:flex!important;z-index:2147483400!important;isolation:isolate;pointer-events:auto!important}
body.cab-composer-leave-open > #blogComposerLeaveModal .cab-leave-submodal-backdrop{position:absolute;inset:0;z-index:0;pointer-events:auto}
body.cab-composer-leave-open > #blogComposerLeaveModal .cab-leave-submodal-dialog{position:relative;z-index:1;pointer-events:auto;max-height:calc(100dvh - 1.4rem);overflow-y:auto}
body.cab-composer-leave-open > #blogComposerLeaveModal .cab-leave-submodal-dialog button{cursor:pointer}
[data-theme="dark"] .cab-illustration-ai-tag{background:#183357;color:#acd0ff;border-color:#355e89}
@media(max-width:720px){
    #blogPostComposerModal .cab-composer-illustration{padding:.65rem .68rem;margin-bottom:.6rem}
    .cab-illustration-title-desktop,.cab-illustration-intro-desktop{display:none}
    .cab-illustration-title-mobile,.cab-illustration-intro-mobile{display:inline}
    .cab-composer-illustration-intro{font-size:.8rem;line-height:1.33;margin:0 0 .3rem}
    .cab-composer-illustration .cab-illustration-status{font-size:.75rem;line-height:1.25;margin:.17rem 0}
    .cab-composer-illustration-grid{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,82%);grid-template-columns:none!important;gap:.55rem;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:.1rem;overscroll-behavior-x:contain;padding:.2rem .13rem .3rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
    .cab-composer-illustration-grid::-webkit-scrollbar{display:none}
    .cab-composer-illustration-card{scroll-snap-align:start;scroll-snap-stop:always;padding:.25rem;gap:.28rem}
    .cab-composer-illustration-card img{border-radius:6px}
    .cab-composer-illustration-card .cab-illustration-prompt-hover{display:none!important}
    .cab-composer-illustration-card .cab-illustration-select{min-height:35px;padding:.29rem .4rem;font-size:.79rem}
    .cab-illustration-prompt-details summary{font-size:.7rem}
    .cab-illustration-carousel-controls:not(.d-none){display:flex}
    .cab-illustration-caption{font-size:.66rem;line-height:1.2;margin:.2rem 0}
    .cab-composer-illustration-actions{display:flex;gap:.32rem;align-items:stretch;margin-top:.35rem}
    .cab-composer-illustration-actions .btn{font-size:.76rem;padding:.33rem .42rem;line-height:1.2;min-height:36px;flex:1 1 auto;white-space:normal}
    #blogPostComposerModal .cab-composer-footer-actions > #blogComposerVisualBlockHint{font-size:.73rem;margin-bottom:.55rem!important;padding:.4rem .5rem}
}
@media(max-width:370px){.cab-composer-illustration-grid{grid-auto-columns:minmax(0,88%)}.cab-composer-illustration-actions{flex-direction:column}}
@media(prefers-reduced-motion:reduce){.cab-illustration-prompt-hover{transition:none}}

@media(max-width:520px){
    body.cab-composer-leave-open > #blogComposerLeaveModal .cab-leave-submodal-dialog .d-flex.justify-content-end{flex-wrap:wrap}
    body.cab-composer-leave-open > #blogComposerLeaveModal .cab-leave-submodal-dialog .d-flex.justify-content-end .btn{flex:1 1 100%}
}

/* R118 R3 FIX3 — Vrai carrousel mobile, priorite au visuel et deux actions cote a cote.
   Selecteurs ID : empeche l'ancienne regle grid 3 colonnes de rapetisser les cartes. */
#blogPostComposerModal .cab-composer-illustration-actions{display:flex;flex-wrap:nowrap;gap:.5rem;align-items:stretch}
#blogPostComposerModal .cab-composer-illustration-actions > .btn{flex:1 1 0;min-width:0;white-space:normal;display:flex;justify-content:center;align-items:center;line-height:1.25;min-height:38px}
#blogPostComposerModal .cab-composer-illustration-actions > .btn.d-none{display:none!important}
#blogPostComposerModal .cab-composer-illustration-actions > .btn:disabled{cursor:not-allowed;opacity:.55}
@media(max-width:720px){
  #blogPostComposerModal .cab-composer-illustration-grid{
    display:flex!important;flex-flow:row nowrap!important;
    grid-template-columns:none!important;grid-auto-flow:unset!important;
    gap:.6rem;overflow-x:auto;overflow-y:hidden;
    width:100%;max-width:100%;min-width:0;box-sizing:border-box;
    scroll-snap-type:x mandatory;scroll-padding-left:.1rem;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
    padding:.18rem .1rem .35rem;scrollbar-width:none;
  }
  #blogPostComposerModal .cab-composer-illustration-grid::-webkit-scrollbar{display:none}
  #blogPostComposerModal .cab-composer-illustration-grid > .cab-composer-illustration-card{
    flex:0 0 calc(100% - 38px)!important;
    width:calc(100% - 38px)!important;max-width:calc(100% - 38px)!important;
    min-width:0!important;box-sizing:border-box;scroll-snap-align:start;
    scroll-snap-stop:always;align-self:flex-start;
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;
  }
  #blogPostComposerModal .cab-composer-illustration-grid > .cab-composer-illustration-card img{aspect-ratio:16/9;width:100%;height:auto;min-height:0;object-fit:cover}
  #blogPostComposerModal .cab-composer-illustration-card .cab-illustration-select{width:100%;min-height:37px;font-size:.84rem;font-weight:650}
  #blogPostComposerModal .cab-illustration-carousel-controls:not(.d-none){display:flex!important}
  #blogPostComposerModal .cab-composer-illustration-actions{flex-direction:row!important;flex-wrap:nowrap!important;gap:.42rem}
  #blogPostComposerModal .cab-composer-illustration-actions > .btn{font-size:.78rem;padding:.38rem .26rem;min-height:39px}
  #blogPostComposerModal .cab-illustration-prompt-details summary{font-size:.73rem}
}
@media(max-width:350px){
  #blogPostComposerModal .cab-composer-illustration-grid > .cab-composer-illustration-card{flex-basis:calc(100% - 24px)!important;width:calc(100% - 24px)!important;max-width:calc(100% - 24px)!important}
  #blogPostComposerModal .cab-composer-illustration-actions > .btn{font-size:.74rem}
}

/* R118 R3 FIX4: reversible choice. No hover prompt overlay; full prompts stay behind <details>. */
#blogPostComposerModal .cab-illustration-prompt-hover{display:none!important}
#blogPostComposerModal .cab-illustration-image-wrap{cursor:pointer;outline-offset:3px;transition:box-shadow .18s ease}
#blogPostComposerModal .cab-illustration-image-wrap img{transition:transform .2s ease}
@media(hover:hover){#blogPostComposerModal .cab-illustration-image-wrap:hover img{transform:scale(1.055)}#blogPostComposerModal .cab-illustration-image-wrap:hover{box-shadow:0 6px 18px rgba(15,23,42,.19)}}
#blogPostComposerModal .cab-illustration-image-wrap:focus-visible{outline:2px solid var(--bs-primary,#0d6efd)}
#blogPostComposerModal .cab-composer-illustration-card{transition:opacity .18s ease,border-color .18s ease,box-shadow .18s ease}
#blogPostComposerModal .cab-composer-illustration-card.is-selected{border:2px solid var(--bs-primary,#0d6efd);box-shadow:0 0 0 2px rgba(13,110,253,.16);opacity:1}
#blogPostComposerModal .cab-composer-illustration-card.is-dimmed{opacity:.38}
#blogPostComposerModal .cab-composer-illustration-card.is-dimmed:hover,#blogPostComposerModal .cab-composer-illustration-card.is-dimmed:focus-within{opacity:.72}
#blogPostComposerModal .cab-composer-illustration-card.is-selected .cab-illustration-select{background:var(--bs-primary,#0d6efd);border-color:var(--bs-primary,#0d6efd)}
@media(prefers-reduced-motion:reduce){#blogPostComposerModal .cab-illustration-image-wrap img,#blogPostComposerModal .cab-composer-illustration-card{transition:none}}

#blogPostComposerModal .cab-illustration-alt-preview{padding:.35rem .52rem;font-size:.76rem;color:var(--bs-secondary-color,#526174);background:var(--bs-tertiary-bg,#eef3f8);border-radius:7px;line-height:1.35;overflow-wrap:anywhere;margin:.15rem 0 .4rem}
@media(max-width:720px){#blogPostComposerModal .cab-illustration-alt-preview{font-size:.72rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}}

/* R118 R3 FIX5: after selection, prioritize the visual rather than secondary controls. */
#blogPostComposerModal .cab-composer-illustration.cab-illustration-has-selection .cab-composer-illustration-title,
#blogPostComposerModal .cab-composer-illustration.cab-illustration-has-selection .cab-composer-illustration-intro,
#blogPostComposerModal .cab-composer-illustration.cab-illustration-has-selection .cab-illustration-status,
#blogPostComposerModal .cab-composer-illustration.cab-illustration-has-selection .cab-illustration-carousel-controls,
#blogPostComposerModal .cab-composer-illustration.cab-illustration-has-selection .cab-composer-illustration-actions,
#blogPostComposerModal .cab-composer-illustration.cab-illustration-has-selection .cab-illustration-caption,
#blogPostComposerModal .cab-composer-illustration.cab-illustration-has-selection .cab-illustration-alt-preview {display:none!important}
#blogPostComposerModal .cab-composer-illustration .cab-composer-illustration-actions .btn {min-width:0}
@media(max-width:720px){#blogPostComposerModal .cab-composer-illustration .cab-composer-illustration-actions .btn{font-size:.74rem!important;white-space:normal!important}}
@media(prefers-reduced-motion:no-preference){#blogPostComposerModal .cab-composer-illustration .cab-composer-illustration-actions,#blogPostComposerModal .cab-composer-illustration .cab-illustration-carousel-controls{transition:opacity .18s ease}}



/* R118 R3 FIX12 — mobile: sticky natif en flux, sans saut relative -> fixed. */
@media (max-width: 767.98px) {
    .cab-post-composer-wrap,
    .cab-post-composer-wrap.is-sticky {
        position: sticky !important;
        top: calc(var(--clubos-mobile-safe-top, 0px) + var(--clubos-mobile-header-height, 56px) - 1px) !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: none !important;
        margin-bottom: 1rem !important;
        padding: 0 !important;
        pointer-events: auto !important;
        z-index: var(--z-blog-composer-sticky, 900);
    }
    .cab-post-composer-wrap.is-sticky .cab-post-composer-compact {
        box-shadow: 0 8px 22px rgba(15, 23, 42, .13);
    }
    .cab-post-composer-sticky-placeholder,
    .cab-post-composer-sticky-placeholder.is-active {
        display: none !important;
        height: 0 !important;
    }
}


/* R118 R3 FIX12 FIX6 — composer mobile: zone d'écriture plein espace + icônes bornées. */
.cab-composer-action-icon > .cab-composer-action-icon-asset {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    object-fit: contain !important;
    pointer-events: none;
}
.cab-composer-action-icon > .cab-composer-action-icon-asset--png {
    width: 26px !important;
    height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
}
@media (max-width: 767.98px) {
    #blogPostComposerModal .cab-composer-mobile-step-one:not(.d-none) {
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
    }
    #blogPostComposerModal .cab-composer-textarea-wrap {
        display: flex !important;
        flex: 1 1 0 !important;
        min-height: 140px !important;
        align-items: stretch !important;
        padding: 0 !important;
    }
    #blogPostComposerModal textarea#blogComposerContent.cab-composer-textarea {
        flex: 1 1 auto !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        resize: none !important;
    }
    #blogPostComposerModal .cab-composer-textarea-wrap.has-background {
        min-height: 180px !important;
    }
    #blogPostComposerModal .cab-composer-textarea-wrap.has-background textarea#blogComposerContent.cab-composer-textarea {
        min-height: 0 !important;
    }
    #blogPostComposerModal .cab-composer-add-row {
        flex: 0 0 auto !important;
        margin-top: 0 !important;
    }
    #blogPostComposerModal .cab-composer-action-icon > .cab-composer-action-icon-asset {
        width: 28px !important;
        height: 28px !important;
        max-width: 28px !important;
        max-height: 28px !important;
    }
    #blogPostComposerModal .cab-composer-action-icon > .cab-composer-action-icon-asset--png {
        width: 30px !important;
        height: 30px !important;
        max-width: 30px !important;
        max-height: 30px !important;
    }
}


/* R118 R3 FIX12 FIX7 — l'étape 1 du composeur ne doit jamais rester visible à l'étape 2. */
@media (max-width: 767.98px) {
    #blogPostComposerModal .cab-composer-mobile-step-one.d-none {
        display: none !important;
    }
}


/* R119.2 — aide avant publication */
.cab-composer-visibility-advice{margin:14px 0 8px;padding:16px;border:1px solid #f3d38b;border-radius:16px;background:#fffaf0;box-shadow:0 8px 24px rgba(146,92,20,.07)}
.cab-composer-visibility-advice-head{display:flex;align-items:flex-start;gap:11px}.cab-composer-visibility-advice-icon{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:#ffedbd}.cab-composer-visibility-advice-head strong{display:block;color:#4b3515}.cab-composer-visibility-advice-head p{margin:3px 0 0;color:#725b37;font-size:.92rem;line-height:1.4}.cab-composer-visibility-advice-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:13px}.cab-composer-advice-choice{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:104px;padding:14px 13px;border:1px solid #dce4ee;border-radius:14px;background:#fff;color:#172033;text-align:left;cursor:pointer}.cab-composer-advice-choice:hover,.cab-composer-advice-choice:focus-visible{border-color:#7aa7ff;box-shadow:0 0 0 3px rgba(37,99,235,.12);outline:0}.cab-composer-advice-choice.is-recommended{border-color:#8bb4ff;background:#f2f7ff}.cab-composer-advice-choice strong{font-size:.95rem}.cab-composer-advice-choice small{color:#64748b;line-height:1.35}.cab-composer-advice-badge{align-self:flex-start;margin-bottom:2px;padding:2px 7px;border-radius:999px;background:#dbeafe;color:#1d4ed8;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em}.cab-composer-visibility-advice.is-confirmation{animation:cabAdvicePulse .45s ease-out}@keyframes cabAdvicePulse{0%{box-shadow:0 0 0 0 rgba(245,158,11,.34)}100%{box-shadow:0 0 0 10px rgba(245,158,11,0)}}
@media(max-width:767.98px){.cab-composer-visibility-advice{margin:10px 0;padding:12px;border-radius:14px}.cab-composer-visibility-advice-actions{grid-template-columns:1fr;gap:7px}.cab-composer-advice-choice{min-height:0;padding:11px 12px}.cab-composer-advice-choice small{font-size:.82rem}}

/* ===== SOURCE: blog-wall-view-settings.css ===== */
/*
 * Vue du mur V1 (mode simple uniquement).
 *
 * Pourquoi un fichier dédié:
 * - On garde ce sous-système isolé.
 * - On évite de gonfler les fichiers CSS déjà lourds.
 */

.cab-post-composer-compact-wall-view {
    border: 1px solid #c8d2e2;
    border-radius: 999px;
    background: #ffffff;
    color: #1f2937;
    padding: 0.5rem 0.85rem;
    font-size: 0.92rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
}

.cab-post-composer-compact-wall-view:hover,
.cab-post-composer-compact-wall-view:focus-visible {
    background: #f8fafc;
}

.cab-post-composer-compact-wall-view.is-active {
    border-color: #7aa7ea;
    background: #eef5ff;
}

#blogWallHistoryCloseButton {
    border-color: #f5c2c7;
    background: #fff5f6;
    color: #9f1239;
}

#blogWallHistoryCloseButton:hover,
#blogWallHistoryCloseButton:focus-visible {
    background: #ffe8ec;
    border-color: #f0a9b5;
}

.cab-wall-view-active-badge {
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #2563eb;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}


/* R117 R2 FIX1 — Vue du mur déplacée dans le menu Outils du mur. */
#blogWallViewOpenButton.cab-composer-quick-action-card.is-active {
    border-color: #7aa7ea;
    background: #eef5ff;
}
[data-theme="dark"] #blogWallViewOpenButton.cab-composer-quick-action-card.is-active {
    border-color: #3b82f6;
    background: #13233f;
}
.cab-wall-view-summary {
    width: min(1180px, 100%);
    margin: -0.35rem auto 0.85rem;
    border: 1px solid #d6deea;
    border-radius: 12px;
    background: #f8fbff;
    padding: 0.55rem 2.45rem 0.55rem 0.7rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.45rem;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
    transform-origin: top;
    transition: max-height 320ms ease, opacity 260ms ease, transform 320ms ease, margin 320ms ease, padding 320ms ease, border-width 320ms ease;
}

.cab-wall-view-summary.is-closing {
    max-height: 0;
    opacity: 0;
    transform: translateY(-8px);
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top-width: 0;
    border-bottom-width: 0;
}

.cab-wall-view-summary-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    width: 100%;
    min-width: 0;
}

.cab-wall-view-summary-headline {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding-right: 0.25rem;
}

.cab-wall-view-summary-title {
    color: #0f172a;
    font-size: 0.9rem;
}

.cab-wall-view-summary-style {
    color: #334155;
    font-size: 0.9rem;
}

.cab-wall-view-summary-reset {
    border: 0;
    background: transparent;
    color: #2563eb;
    font-size: 0.74rem;
    line-height: 1.15;
    border-radius: 999px;
    padding: 0.1rem 0.42rem;
    margin-left: 0.2rem;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cab-wall-view-summary-reset:hover,
.cab-wall-view-summary-reset:focus-visible {
    background: rgba(37, 99, 235, 0.09);
    color: #1d4ed8;
    text-decoration: none;
}

.cab-wall-view-summary-chips {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.cab-wall-view-summary-chip {
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    font-size: 0.75rem;
    line-height: 1;
    padding: 0.26rem 0.48rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    transition: opacity 160ms ease, background-color 160ms ease, border-color 160ms ease, transform 120ms ease;
}

.cab-wall-view-summary-chip:hover,
.cab-wall-view-summary-chip:focus-visible {
    border-color: #94a3b8;
    background: #f8fafc;
}

.cab-wall-view-summary-chip:active {
    transform: translateY(1px);
}

.cab-wall-view-summary-chip.is-inactive {
    opacity: 0.4;
}

.cab-wall-view-summary-chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    flex: 0 0 auto;
}

.cab-wall-view-summary-close {
    width: 24px;
    height: 24px;
    border: 1px solid #d4dce8;
    border-radius: 999px;
    background: #ffffff;
    color: #475569;
    font-size: 0.9rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: absolute;
    top: 6px;
    right: 7px;
    z-index: 2;
}

.cab-wall-view-summary-close:hover,
.cab-wall-view-summary-close:focus-visible {
    background: #f1f5f9;
    color: #0f172a;
}

.cab-wall-view-empty-state {
    width: min(860px, 100%);
    margin: 0.2rem auto 0;
    border: 1px solid #d6deea;
    border-radius: 12px;
    background: #f8fbff;
    padding: 0.9rem;
}

.cab-wall-view-empty-title {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    color: #0f172a;
}

.cab-wall-view-empty-text {
    margin: 0 0 0.6rem;
    color: #475569;
    font-size: 0.92rem;
}

.cab-wall-view-empty-actions {
    display: inline-flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}

/*
 * Anti-flash au chargement:
 * - le mur reste masqué tant que le filtre initial n'est pas appliqué.
 * - JS retire cette classe dès que l'état final est prêt.
 */
.cab-wall-view-cards.is-pending-wall-filter,
.cab-wall-view-empty-state.is-pending-wall-filter {
    visibility: hidden;
}

.cab-wall-view-settings-submodal {
    position: fixed;
    inset: 0;
    z-index: 180092;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

.cab-wall-view-settings-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.52);
}

.cab-wall-view-settings-dialog {
    position: relative;
    z-index: 1;
    width: min(760px, calc(100vw - 24px));
    height: min(82vh, 820px);
    border: 1px solid #d1d5db;
    border-radius: 14px;
    background: #f0f0f0;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.28);
    padding: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cab-wall-view-settings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 10px;
}

.cab-wall-view-mode-tabs {
    flex: 0 0 auto;
}

.cab-wall-view-settings-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 2px;
    margin-top: 10px;
}

.cab-wall-view-mode-panel {
    min-height: 100%;
}

.cab-wall-view-section {
    border: 1px solid #d6deea;
    border-radius: 12px;
    background: #f8fbff;
    padding: 10px;
    margin-bottom: 10px;
}

.cab-wall-view-warning {
    margin-bottom: 10px;
    font-size: 0.92rem;
}

.cab-wall-view-section-title {
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
}

.cab-wall-view-mode-panel[data-wall-view-panel="simple"] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.cab-wall-view-simple-style-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.cab-wall-view-simple-style-row .cab-wall-view-section-title {
    margin-bottom: 0;
}

.cab-wall-view-style-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 1px solid #d6deea;
    border-radius: 999px;
    padding: 0.2rem;
    background: #ffffff;
}

.cab-wall-view-style-tab {
    border: 0;
    background: transparent;
    color: #334155;
    border-radius: 999px;
    font-size: 0.82rem;
    line-height: 1.2;
    padding: 0.32rem 0.64rem;
    white-space: nowrap;
}

.cab-wall-view-style-tab:hover,
.cab-wall-view-style-tab:focus-visible {
    background: #eff6ff;
    color: #1e40af;
}

.cab-wall-view-style-tab.is-active {
    background: #2563eb;
    color: #ffffff;
}

.cab-wall-view-style-help {
    margin-top: 0.55rem;
    border: 1px solid #dbe4f0;
    border-radius: 10px;
    background: #ffffff;
    padding: 0.45rem 0.6rem;
    color: #475569;
    font-size: 0.78rem;
    line-height: 1.28;
    display: grid;
    gap: 0.26rem;
}

.cab-wall-view-category-help {
    margin-bottom: 0.45rem;
    color: #64748b;
    font-size: 0.78rem;
}

.cab-wall-view-section-categories {
    flex: 1 1 auto;
    min-height: 200px;
    display: flex;
    flex-direction: column;
}

.cab-wall-view-category-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 2px;
}

.cab-wall-view-category-row {
    border: 1px solid #d5dfed;
    border-radius: 10px;
    background: #ffffff;
    min-height: 42px;
    padding: 0.45rem 0.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    transition: background-color 150ms ease, border-color 150ms ease;
}

.cab-wall-view-category-row.is-selected {
    border-color: #8edff2;
    background: #eafaff;
}

.cab-wall-view-category-left {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.cab-wall-view-category-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    flex: 0 0 auto;
}

.cab-wall-view-category-name {
    color: #0f172a;
    font-size: 0.92rem;
    line-height: 1.3;
}

.cab-wall-view-category-toggle {
    width: 18px;
    height: 18px;
}

.cab-wall-view-category-row.is-locked-by-all {
    opacity: 0.62;
    background: #eef2f7;
    cursor: pointer;
}

.cab-wall-view-category-row.is-locked-by-all .cab-wall-view-category-toggle {
    cursor: not-allowed;
    pointer-events: none;
}

.cab-wall-view-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.cab-wall-view-remember {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #334155;
}

.cab-wall-view-empty {
    border: 1px dashed #c4cfde;
    border-radius: 10px;
    background: #ffffff;
    color: #64748b;
    padding: 0.7rem;
    font-size: 0.92rem;
}

[data-theme="dark"] .cab-post-composer-compact-wall-view {
    border-color: #314055;
    background: #111827;
    color: #e5e7eb;
}

[data-theme="dark"] .cab-post-composer-compact-wall-view:hover,
[data-theme="dark"] .cab-post-composer-compact-wall-view:focus-visible {
    background: #1e293b;
}

[data-theme="dark"] .cab-post-composer-compact-wall-view.is-active {
    border-color: #2563eb;
    background: #0f1f43;
}

[data-theme="dark"] #blogWallHistoryCloseButton {
    border-color: #7f1d1d;
    background: #3b101a;
    color: #fecdd3;
}

[data-theme="dark"] #blogWallHistoryCloseButton:hover,
[data-theme="dark"] #blogWallHistoryCloseButton:focus-visible {
    border-color: #9f1239;
    background: #4a1522;
}

[data-theme="dark"] .cab-wall-view-settings-dialog {
    border-color: #374151;
    background: #0f172a;
    box-shadow: 0 16px 40px rgba(2, 6, 23, 0.64);
}

[data-theme="dark"] .cab-wall-view-section {
    border-color: #334155;
    background: #111827;
}

[data-theme="dark"] .cab-wall-view-section-title,
[data-theme="dark"] .cab-wall-view-category-name,
[data-theme="dark"] .cab-wall-view-remember {
    color: #e2e8f0;
}

[data-theme="dark"] .cab-wall-view-style-switch {
    border-color: #334155;
    background: #0f172a;
}

[data-theme="dark"] .cab-wall-view-style-tab {
    color: #cbd5e1;
}

[data-theme="dark"] .cab-wall-view-style-tab:hover,
[data-theme="dark"] .cab-wall-view-style-tab:focus-visible {
    background: #1e3a8a;
    color: #dbeafe;
}

[data-theme="dark"] .cab-wall-view-style-tab.is-active {
    background: #1d4ed8;
    color: #ffffff;
}

[data-theme="dark"] .cab-wall-view-style-help {
    border-color: #334155;
    background: #0f172a;
    color: #cbd5e1;
}

[data-theme="dark"] .cab-wall-view-category-help {
    color: #94a3b8;
}

[data-theme="dark"] .cab-wall-view-category-row {
    border-color: #334155;
    background: #1f2937;
}

[data-theme="dark"] .cab-wall-view-category-row.is-selected {
    border-color: #2a7f98;
    background: #142c36;
}

[data-theme="dark"] .cab-wall-view-category-row.is-locked-by-all {
    background: #17212f;
    opacity: 0.72;
}

[data-theme="dark"] .cab-wall-view-empty {
    border-color: #334155;
    background: #111827;
    color: #94a3b8;
}

[data-theme="dark"] .cab-wall-view-summary {
    border-color: #334155;
    background: #111827;
}

[data-theme="dark"] .cab-wall-view-summary-title,
[data-theme="dark"] .cab-wall-view-summary-style {
    color: #e2e8f0;
}

[data-theme="dark"] .cab-wall-view-summary-reset {
    color: #7fb7ff;
}

[data-theme="dark"] .cab-wall-view-summary-reset:hover,
[data-theme="dark"] .cab-wall-view-summary-reset:focus-visible {
    background: rgba(127, 183, 255, 0.18);
    color: #b9d8ff;
}

[data-theme="dark"] .cab-wall-view-summary-chip {
    border-color: #334155;
    background: #1f2937;
    color: #e2e8f0;
}

[data-theme="dark"] .cab-wall-view-summary-chip:hover,
[data-theme="dark"] .cab-wall-view-summary-chip:focus-visible {
    border-color: #475569;
    background: #243244;
}

[data-theme="dark"] .cab-wall-view-summary-close {
    border-color: #334155;
    background: #111827;
    color: #cbd5e1;
}

[data-theme="dark"] .cab-wall-view-summary-close:hover,
[data-theme="dark"] .cab-wall-view-summary-close:focus-visible {
    background: #1f2937;
    color: #e2e8f0;
}

[data-theme="dark"] .cab-wall-view-empty-state {
    border-color: #334155;
    background: #111827;
}

[data-theme="dark"] .cab-wall-view-empty-title {
    color: #e2e8f0;
}

[data-theme="dark"] .cab-wall-view-empty-text {
    color: #cbd5e1;
}

@media (max-width: 575.98px) {
    .cab-post-composer-compact-wall-view {
        order: 3;
    }

    .cab-wall-view-settings-dialog {
        width: calc(100vw - 16px);
        height: calc(100vh - 24px);
    }
}

/* ===== SOURCE: blog-wall-view-modes.css ===== */
/* V2 Vue du mur: modes assisté/expert et cartes de suggestion. */

.cab-wall-view-settings-subtitle {
    margin-top: 0.2rem;
    color: #64748b;
    font-size: 0.9rem;
}

.cab-wall-view-mode-tabs {
    display: inline-flex;
    width: 100%;
    gap: 0.45rem;
    margin-bottom: 12px;
    padding: 0.3rem;
    border: 1px solid #d6deea;
    border-radius: 999px;
    background: #f8fbff;
}

.cab-wall-view-mode-tab {
    flex: 1 1 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #475569;
    padding: 0.55rem 0.8rem;
    font-weight: 700;
    font-size: 0.92rem;
}

.cab-wall-view-mode-tab.is-active {
    background: #2563eb;
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
}

.cab-wall-view-assist-intro,
.cab-wall-view-expert-intro {
    border: 1px solid #d6deea;
    border-radius: 14px;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
    padding: 1rem;
    margin-bottom: 12px;
}

.cab-wall-view-assist-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.3rem 0.65rem;
}

.cab-wall-view-assist-badge.is-expert {
    background: #ede9fe;
    color: #6d28d9;
}

.cab-wall-view-assist-title {
    margin: 0.65rem 0 0.35rem;
    color: #0f172a;
    font-size: 1.08rem;
    font-weight: 800;
}

.cab-wall-view-assist-text {
    margin: 0;
    color: #475569;
    font-size: 0.92rem;
    line-height: 1.55;
}

.cab-wall-view-assist-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.cab-wall-view-assist-card {
    margin-bottom: 12px;
}

.cab-wall-view-assist-empty {
    color: #64748b;
    font-size: 0.9rem;
}

.cab-wall-view-assist-insights,
.cab-wall-view-assist-suggestions {
    display: grid;
    gap: 10px;
}

.cab-wall-view-assist-insight,
.cab-wall-view-assist-suggestion {
    border: 1px solid #d6deea;
    border-radius: 12px;
    background: #ffffff;
    padding: 0.8rem 0.9rem;
}

.cab-wall-view-assist-insight.is-success,
.cab-wall-view-assist-suggestion.is-success {
    border-color: #86efac;
    background: #f0fdf4;
}

.cab-wall-view-assist-insight.is-warning,
.cab-wall-view-assist-suggestion.is-warning {
    border-color: #fde68a;
    background: #fffbeb;
}

.cab-wall-view-assist-insight.is-info,
.cab-wall-view-assist-suggestion.is-info {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.cab-wall-view-assist-suggestion-title {
    color: #0f172a;
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.cab-wall-view-assist-suggestion-text,
.cab-wall-view-assist-insight {
    color: #475569;
    font-size: 0.9rem;
    line-height: 1.5;
}

.cab-wall-view-assist-suggestion-actions {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin-top: 0.65rem;
}

.cab-wall-view-assist-footer {
    margin-top: 12px;
}

.cab-wall-view-expert-card {
    margin-bottom: 12px;
}

.cab-wall-view-expert-list {
    display: grid;
    gap: 8px;
}

.cab-wall-view-expert-row {
    border: 1px solid #d5dfed;
    border-radius: 10px;
    background: #ffffff;
    min-height: 42px;
    padding: 0.5rem 0.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.cab-wall-view-expert-left {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.cab-wall-view-expert-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    flex: 0 0 auto;
}

.cab-wall-view-expert-name {
    color: #0f172a;
    font-size: 0.9rem;
    line-height: 1.25;
}

.cab-wall-view-expert-levels {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.cab-wall-view-expert-level {
    border: 1px solid #d5dfed;
    border-radius: 999px;
    background: #ffffff;
    color: #475569;
    font-size: 0.75rem;
    line-height: 1.2;
    font-weight: 700;
    padding: 0.24rem 0.5rem;
}

.cab-wall-view-expert-level:hover,
.cab-wall-view-expert-level:focus-visible {
    border-color: #94a3b8;
}

.cab-wall-view-expert-level.is-active {
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.18);
}

.cab-wall-view-expert-level.is-priority.is-active {
    border-color: #1d4ed8;
    background: #2563eb;
}

.cab-wall-view-expert-level.is-normal.is-active {
    border-color: #0f766e;
    background: #0f766e;
}

.cab-wall-view-expert-level.is-rare.is-active {
    border-color: #92400e;
    background: #b45309;
}

.cab-wall-view-expert-level.is-hidden.is-active {
    border-color: #7f1d1d;
    background: #b91c1c;
}

.cab-wall-view-expert-footer {
    margin-top: 12px;
}

[data-theme="dark"] .cab-wall-view-settings-subtitle {
    color: #94a3b8;
}

[data-theme="dark"] .cab-wall-view-mode-tabs {
    border-color: #334155;
    background: #111827;
}

[data-theme="dark"] .cab-wall-view-mode-tab {
    color: #cbd5e1;
}

[data-theme="dark"] .cab-wall-view-mode-tab.is-active {
    background: #2563eb;
    color: #ffffff;
}

[data-theme="dark"] .cab-wall-view-assist-intro,
[data-theme="dark"] .cab-wall-view-expert-intro {
    border-color: #334155;
    background: linear-gradient(180deg, #111827 0%, #0f172a 100%);
}

[data-theme="dark"] .cab-wall-view-assist-title,
[data-theme="dark"] .cab-wall-view-assist-suggestion-title {
    color: #e2e8f0;
}

[data-theme="dark"] .cab-wall-view-assist-text,
[data-theme="dark"] .cab-wall-view-assist-insight,
[data-theme="dark"] .cab-wall-view-assist-suggestion-text,
[data-theme="dark"] .cab-wall-view-expert-list {
    color: #cbd5e1;
}

[data-theme="dark"] .cab-wall-view-expert-row {
    border-color: #334155;
    background: #1f2937;
}

[data-theme="dark"] .cab-wall-view-expert-name {
    color: #e2e8f0;
}

[data-theme="dark"] .cab-wall-view-expert-level {
    border-color: #334155;
    background: #0f172a;
    color: #cbd5e1;
}

[data-theme="dark"] .cab-wall-view-expert-level:hover,
[data-theme="dark"] .cab-wall-view-expert-level:focus-visible {
    border-color: #475569;
}

[data-theme="dark"] .cab-wall-view-expert-level.is-priority.is-active {
    border-color: #2563eb;
    background: #1d4ed8;
}

[data-theme="dark"] .cab-wall-view-expert-level.is-normal.is-active {
    border-color: #0f766e;
    background: #0f766e;
}

[data-theme="dark"] .cab-wall-view-expert-level.is-rare.is-active {
    border-color: #b45309;
    background: #92400e;
}

[data-theme="dark"] .cab-wall-view-expert-level.is-hidden.is-active {
    border-color: #b91c1c;
    background: #7f1d1d;
}

[data-theme="dark"] .cab-wall-view-assist-insight,
[data-theme="dark"] .cab-wall-view-assist-suggestion {
    border-color: #334155;
    background: #1f2937;
}

[data-theme="dark"] .cab-wall-view-assist-insight.is-success,
[data-theme="dark"] .cab-wall-view-assist-suggestion.is-success {
    border-color: #166534;
    background: rgba(20, 83, 45, 0.45);
}

[data-theme="dark"] .cab-wall-view-assist-insight.is-warning,
[data-theme="dark"] .cab-wall-view-assist-suggestion.is-warning {
    border-color: #92400e;
    background: rgba(120, 53, 15, 0.4);
}

[data-theme="dark"] .cab-wall-view-assist-insight.is-info,
[data-theme="dark"] .cab-wall-view-assist-suggestion.is-info {
    border-color: #1d4ed8;
    background: rgba(30, 64, 175, 0.32);
}

@media (max-width: 767.98px) {
    .cab-wall-view-assist-grid {
        grid-template-columns: 1fr;
    }

    .cab-wall-view-mode-tabs {
        flex-wrap: wrap;
        border-radius: 18px;
    }

    .cab-wall-view-mode-tab {
        flex: 1 1 calc(33.333% - 0.3rem);
    }

    .cab-wall-view-expert-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .cab-wall-view-expert-levels {
        width: 100%;
        justify-content: flex-start;
    }
}

.cab-wall-view-assist-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.cab-wall-view-assist-status {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.28rem 0.65rem;
    font-size: 0.76rem;
    font-weight: 700;
    border: 1px solid #d6deea;
    background: #ffffff;
    color: #475569;
}

.cab-wall-view-assist-status.is-weak {
    border-color: #cbd5e1;
    background: #ffffff;
    color: #475569;
}

.cab-wall-view-assist-status.is-medium {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.cab-wall-view-assist-status.is-strong {
    border-color: #86efac;
    background: #f0fdf4;
    color: #166534;
}

.cab-wall-view-assist-meta {
    margin-top: 0.7rem;
    color: #64748b;
    font-size: 0.84rem;
}

.cab-wall-view-summary-chip.is-static {
    cursor: default;
}

.cab-wall-view-summary-chip.is-static:hover,
.cab-wall-view-summary-chip.is-static:focus-visible {
    border-color: #cbd5e1;
    background: #ffffff;
}

.cab-wall-view-summary-chip-caption {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.12rem 0.35rem;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.67rem;
    font-weight: 600;
}

[data-theme="dark"] .cab-wall-view-assist-status {
    border-color: #334155;
    background: #111827;
    color: #cbd5e1;
}

[data-theme="dark"] .cab-wall-view-assist-status.is-medium {
    border-color: #1d4ed8;
    background: rgba(30, 64, 175, 0.32);
    color: #dbeafe;
}

[data-theme="dark"] .cab-wall-view-assist-status.is-strong {
    border-color: #166534;
    background: rgba(20, 83, 45, 0.45);
    color: #dcfce7;
}

[data-theme="dark"] .cab-wall-view-assist-meta {
    color: #94a3b8;
}

[data-theme="dark"] .cab-wall-view-summary-chip-caption {
    background: #1f2937;
    color: #cbd5e1;
}

.cab-wall-view-assist-debug-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #d5dde8;
    border-radius: 0.7rem;
    background: #ffffff;
}

.cab-wall-view-assist-debug-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
    font-size: 0.76rem;
    line-height: 1.25;
}

.cab-wall-view-assist-debug-table th,
.cab-wall-view-assist-debug-table td {
    border-bottom: 1px solid #e2e8f0;
    padding: 0.38rem 0.46rem;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
}

.cab-wall-view-assist-debug-table th:first-child,
.cab-wall-view-assist-debug-table td:first-child {
    text-align: left;
    position: sticky;
    left: 0;
    background: inherit;
}

.cab-wall-view-assist-debug-table thead th {
    background: #f8fafc;
    color: #334155;
    font-weight: 700;
}

.cab-wall-view-assist-debug-row.is-selected td {
    background: #f0f9ff;
}

.cab-wall-view-assist-debug-level {
    display: inline-flex;
    margin-left: 0.35rem;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    font-size: 0.65rem;
    background: #eef2ff;
    color: #3730a3;
}

.cab-wall-view-assist-debug-expert {
    display: inline-flex;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    font-size: 0.65rem;
    margin-left: 0.2rem;
    background: #e2e8f0;
    color: #334155;
}

.cab-wall-view-assist-debug-expert.is-priority {
    background: #dbeafe;
    color: #1d4ed8;
}

.cab-wall-view-assist-debug-expert.is-rare {
    background: #fef3c7;
    color: #92400e;
}

.cab-wall-view-assist-debug-expert.is-hidden {
    background: #fee2e2;
    color: #991b1b;
}

[data-theme="dark"] .cab-wall-view-assist-debug-table-wrap {
    border-color: #334155;
    background: #0f172a;
}

[data-theme="dark"] .cab-wall-view-assist-debug-table thead th {
    background: #111827;
    color: #cbd5e1;
}

[data-theme="dark"] .cab-wall-view-assist-debug-table th,
[data-theme="dark"] .cab-wall-view-assist-debug-table td {
    border-bottom-color: #243244;
    color: #cbd5e1;
}

[data-theme="dark"] .cab-wall-view-assist-debug-row.is-selected td {
    background: rgba(56, 189, 248, 0.15);
}

[data-theme="dark"] .cab-wall-view-assist-debug-level {
    background: rgba(79, 70, 229, 0.35);
    color: #c7d2fe;
}

[data-theme="dark"] .cab-wall-view-assist-debug-expert {
    background: #334155;
    color: #e2e8f0;
}

[data-theme="dark"] .cab-wall-view-assist-debug-expert.is-priority {
    background: rgba(37, 99, 235, 0.4);
    color: #dbeafe;
}

[data-theme="dark"] .cab-wall-view-assist-debug-expert.is-rare {
    background: rgba(146, 64, 14, 0.38);
    color: #fde68a;
}

[data-theme="dark"] .cab-wall-view-assist-debug-expert.is-hidden {
    background: rgba(153, 27, 27, 0.4);
    color: #fee2e2;
}

.cab-wall-view-assist-debug-level.is-fort {
    background: #dcfce7;
    color: #166534;
}

.cab-wall-view-assist-debug-level.is-visible {
    background: #e0f2fe;
    color: #0f766e;
}

.cab-wall-view-assist-debug-level.is-faible,
.cab-wall-view-assist-debug-level.is-reduit {
    background: #fef3c7;
    color: #92400e;
}

.cab-wall-view-assist-debug-level.is-masque,
.cab-wall-view-assist-debug-level.is-a_revoir {
    background: #eef2ff;
    color: #3730a3;
}

[data-theme="dark"] .cab-wall-view-assist-debug-level.is-fort {
    background: rgba(22, 101, 52, 0.35);
    color: #dcfce7;
}

[data-theme="dark"] .cab-wall-view-assist-debug-level.is-visible {
    background: rgba(15, 118, 110, 0.35);
    color: #ccfbf1;
}

[data-theme="dark"] .cab-wall-view-assist-debug-level.is-faible,
[data-theme="dark"] .cab-wall-view-assist-debug-level.is-reduit {
    background: rgba(146, 64, 14, 0.35);
    color: #fde68a;
}

[data-theme="dark"] .cab-wall-view-assist-debug-level.is-masque,
[data-theme="dark"] .cab-wall-view-assist-debug-level.is-a_revoir {
    background: rgba(79, 70, 229, 0.35);
    color: #c7d2fe;
}

.cab-wall-view-assist-debug-toggle { width:100%; display:flex; align-items:center; justify-content:space-between; gap:.75rem; background:transparent; border:0; padding:0; color:inherit; }
.cab-wall-view-assist-debug-chevron { font-size: .95rem; color:#64748b; transition: transform .18s ease; }
.cab-wall-view-assist-debug-toggle.is-expanded .cab-wall-view-assist-debug-chevron { transform: rotate(180deg); }
.cab-wall-view-assist-debug-wrap { margin-top: .75rem; }
.cab-wall-view-assist-debug-table { font-size:.82rem; }
.cab-wall-view-assist-debug-table th, .cab-wall-view-assist-debug-table td { padding: .26rem .34rem; white-space: nowrap; }
.cab-wall-view-assist-debug-table th:first-child, .cab-wall-view-assist-debug-table td:first-child { min-width: 130px; max-width: 130px; }
.cab-wall-view-assist-debug-table th:nth-child(4), .cab-wall-view-assist-debug-table td:nth-child(4) { min-width: 44px; width: 44px; }
.cab-wall-view-assist-debug-table th:nth-child(5), .cab-wall-view-assist-debug-table td:nth-child(5) { min-width: 44px; width: 44px; }
.cab-wall-view-assist-debug-table th:nth-child(6), .cab-wall-view-assist-debug-table td:nth-child(6) { min-width: 56px; width: 56px; }

/* ===== SOURCE: clubos-post-card-polish.css ===== */
/* ClubOS shared publication cards — FIX5 polished component.
 * One source, compiled into Blog + Profile bundles; never injected late. */
:root {
  --club-post-card-bg:linear-gradient(180deg,rgba(255,255,255,.995) 0%,rgba(252,254,255,.99) 58%,rgba(246,250,255,.98) 100%);
  --club-post-card-border:rgba(61,101,145,.20);
  --club-post-card-border-hover:rgba(36,119,229,.34);
  --club-post-card-shadow:0 5px 16px rgba(28,63,103,.075),0 1px 3px rgba(28,63,103,.045);
  --club-post-card-shadow-hover:0 10px 26px rgba(28,63,103,.12),0 2px 5px rgba(28,63,103,.06);
  --club-post-card-radius:17px;
}
:root[data-theme="dark"] {
  --club-post-card-bg:linear-gradient(180deg,rgba(22,34,52,.99) 0%,rgba(18,29,47,.99) 62%,rgba(15,25,41,.99) 100%);
  --club-post-card-border:rgba(139,170,210,.24);
  --club-post-card-border-hover:rgba(79,151,255,.48);
  --club-post-card-shadow:0 6px 18px rgba(0,0,0,.23),0 1px 2px rgba(0,0,0,.18);
  --club-post-card-shadow-hover:0 12px 30px rgba(0,0,0,.34),0 2px 6px rgba(0,0,0,.24);
}

.js-blog-post-card-col { min-width:0; }
.js-blog-post-card-col > .blog-post-card,
.blog-post-card[data-post-display-card="1"] {
  position:relative;
  background:var(--club-post-card-bg) !important;
  border:1px solid var(--club-post-card-border) !important;
  border-radius:var(--club-post-card-radius) !important;
  box-shadow:var(--club-post-card-shadow) !important;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease,background .18s ease;
  isolation:isolate;
}
.js-blog-post-card-col > .blog-post-card:hover,
.blog-post-card[data-post-display-card="1"]:hover {
  border-color:var(--club-post-card-border-hover) !important;
  box-shadow:var(--club-post-card-shadow-hover) !important;
  transform:translateY(-1px);
}
.blog-post-card .blog-post-card-body {
  border-radius:calc(var(--club-post-card-radius) - 1px);
  background:transparent;
  padding:12px 12px 10px !important;
}
.blog-post-card .blog-post-title {
  font-weight:760;
  line-height:1.14;
  letter-spacing:-.012em;
}
.blog-post-card .blog-post-title > a { color:#0969df; }
.blog-post-card .blog-post-meta { opacity:.86; }
.blog-post-card :is(.blog-post-image-wrap,.blog-post-gallery,.cab-post-embed-card,.cab-reshare-original,.post-music-attachment-card) {
  border-radius:12px;
}
.blog-post-card .blog-post-image-wrap,
.blog-post-card .blog-post-gallery { overflow:hidden; }
.blog-post-card .blog-wall-social-summary {
  padding-top:9px;
  border-top:1px solid rgba(91,119,151,.13);
}
.blog-post-card .blog-wall-social-actions {
  margin-left:-3px;
  margin-right:-3px;
  padding:8px 3px 1px;
  border-top:1px solid rgba(91,119,151,.13);
}
.blog-post-card .blog-post-toggle { font-weight:700; }
:root[data-theme="dark"] .blog-post-card .blog-post-title > a { color:#78b8ff; }
:root[data-theme="dark"] .blog-post-card :is(.blog-wall-social-summary,.blog-wall-social-actions) { border-top-color:rgba(151,178,211,.16); }

@media (prefers-reduced-motion:reduce) {
  .js-blog-post-card-col > .blog-post-card,
  .blog-post-card[data-post-display-card="1"] { transition:none; }
  .js-blog-post-card-col > .blog-post-card:hover,
  .blog-post-card[data-post-display-card="1"]:hover { transform:none; }
}


/* MOB17: single horizontal scrollport for seven agenda columns, mobile only. */
.cab-composer-scheduled-calendar-scroller { display: contents; }
@media (max-width:649.98px) {
    .cab-composer-scheduled-dialog { grid-template-rows:auto auto minmax(0,1fr) !important; height:min(80dvh,740px) !important; }
    .cab-composer-scheduled-calendar-scroller {
        display:block !important; min-width:0; min-height:0; overflow:auto !important;
        scrollbar-width:thin; scrollbar-color:#93b8dd #e8f1fb; overscroll-behavior-x:contain;
        -webkit-overflow-scrolling:touch;
    }
    .cab-composer-scheduled-week-header,
    .cab-composer-scheduled-grid {
        width:910px !important; min-width:910px !important;
        grid-template-columns:repeat(7,minmax(130px,1fr)) !important;
        box-sizing:border-box;
    }
    .cab-composer-scheduled-week-header { position:sticky; top:0; z-index:2; background:var(--bs-body-bg,#fff); }
    .cab-composer-scheduled-grid { overflow:visible !important; min-height:420px; }
    .cab-composer-scheduled-day-column { min-width:0; }
    .cab-composer-scheduled-empty-day { font-size:.78rem; line-height:1.4; overflow-wrap:break-word; }
    .cab-composer-scheduled-calendar-scroller::-webkit-scrollbar { height:9px; width:7px; }
    .cab-composer-scheduled-calendar-scroller::-webkit-scrollbar-thumb { background:#90b6dc; border-radius:9px; }
}

/* MOB17 — consultation history thumbnail, clock overlay at lower right. */
@media (max-width:649.98px) {
  .cab-composer-draft-thumb.cab-history-photo-thumb {position:relative;overflow:visible!important;flex-shrink:0;isolation:isolate;}
  .cab-composer-draft-thumb.cab-history-photo-thumb img {display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;}
  .cab-history-photo-thumb .cab-history-clock {position:absolute;right:-7px;bottom:-7px;display:grid;place-items:center;z-index:1;width:27px;height:27px;border-radius:50%;border:2px solid #fff;background:#e9f3ff;font-size:15px;box-shadow:0 3px 8px #12264236;}
  .cab-history-photo-thumb:not(:has(img)) .cab-history-clock{right:50%;bottom:50%;transform:translate(50%,50%);border:0;box-shadow:none;background:transparent;}
}

@media (max-width:649.98px) {
    body > #blogWallViewSettingsModal:not(.d-none) { position:fixed!important;inset:0!important;z-index:2147483100!important;isolation:isolate!important; }
    body > #blogWallViewSettingsModal .cab-wall-view-settings-backdrop { pointer-events:auto!important; }
}


/* MOB25/BLOG-R1 — composeur proportionne a sa COLONNE, pas a l'ecran.
   Les rails desktop peuvent ne laisser que 300px au composeur dans un viewport de 900px. */
.cab-post-composer-wrap { container-type: inline-size; min-width:0; max-width:100%; }
.cab-post-composer-wrap .cab-post-composer-compact { box-sizing:border-box; min-width:0; max-width:100%; }
@container (max-width: 690px) {
  .cab-post-composer-compact {
    display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start;
    gap:6px 7px; padding:7px; border-radius:16px;
  }
  .cab-post-composer-compact-avatar { width:38px; height:38px; flex:0 0 38px; }
  .cab-post-composer-compact-input {
    flex:1 1 calc(100% - 49px); width:auto; min-width:0; min-height:38px;
    padding:8px 12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .cab-post-composer-compact-photo { height:36px; min-width:0; padding:6px 10px; flex:0 0 auto; }
  .cab-post-composer-compact-more { width:36px; height:36px; flex:0 0 36px; }
  .cab-post-composer-compact-wall-view { max-width:100%; }
  .cab-post-composer-compact .cab-wall-sort-controls {
    display:inline-flex; gap:4px; margin-left:auto; flex:0 0 auto;
    min-width:0; align-items:center; justify-content:flex-end;
  }
  .cab-post-composer-compact .cab-wall-sort-button { width:34px; height:34px; flex:0 0 34px; }
  .cab-post-composer-compact .cab-wall-sort-button svg { width:17px; height:17px; }
}
@container (max-width: 330px) {
  .cab-post-composer-compact-photo > span:last-child { display:none; }
  .cab-post-composer-compact-photo { width:36px; justify-content:center; padding:5px; }
  .cab-post-composer-compact .cab-wall-sort-button { width:32px; height:32px; flex-basis:32px; }
}


/* MOB25/BLOG-R1 — tailles stables des images du FIL apres ouverture/fermeture.
   Ne cible ni la modale de lecture ni la galerie detaillee; aucune image n'est recadree pour la carte mono-image. */
#site-shell-content[data-shell-page="blog"] .blog-post-card {min-width:0; max-width:100%;}
#site-shell-content[data-shell-page="blog"] .blog-post-card .blog-post-gallery,
#site-shell-content[data-shell-page="blog"] .blog-post-card .blog-post-image-wrap {
  box-sizing:border-box; width:100%; max-width:100%; min-width:0;
  overflow:hidden; max-height:min(440px, 62svh) !important;
}
#site-shell-content[data-shell-page="blog"] .blog-post-card .blog-post-gallery {
  aspect-ratio:16 / 10 !important; height:auto !important; min-height:0 !important;
}
#site-shell-content[data-shell-page="blog"] .blog-post-card .blog-post-gallery-item {
  min-width:0; min-height:0; max-width:100%; max-height:100%; overflow:hidden;
}
#site-shell-content[data-shell-page="blog"] .blog-post-card .blog-post-gallery.is-single-media .blog-post-image,
#site-shell-content[data-shell-page="blog"] .blog-post-card .blog-post-gallery-count-1 .blog-post-image {
  width:100% !important; height:100% !important;
  max-width:100% !important; max-height:100% !important;
  object-fit:contain !important; object-position:center center;
}
#site-shell-content[data-shell-page="blog"] .blog-post-card .blog-post-image-wrap > .blog-post-image,
#site-shell-content[data-shell-page="blog"] .blog-post-card .blog-post-image-wrap .blog-post-image {
  max-width:100% !important; max-height:100% !important;
}
@media (max-width: 575.98px) {
  #site-shell-content[data-shell-page="blog"] .blog-post-card .blog-post-gallery {
    aspect-ratio:16 / 11 !important;
    max-height:min(390px, 55svh) !important;
  }
}

/* MOB25 UX2 — Blog intermédiaire : la largeur de la colonne doit évoluer de
   façon continue. Le tier historique 380px jusqu'à 1373px cassait le composeur. */
@media (min-width:968px) and (max-width:1373.98px) {
  :root{
    --club-desktop-center-width:clamp(380px,calc(100vw - 612px),762px);
    --club-desktop-center-gap:clamp(0px,calc((100vw - 968px) / 12),12px);
  }
}
/* Une seule colonne tant que les cartes ne peuvent pas réellement respirer. */
@media (min-width:1260px) and (max-width:1373.98px){
 body.club-r1194-desktop-shell #blogWallCardsContainer:not(.club-grid-visible-1){grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
body.club-r1194-desktop-shell #site-shell-content[data-shell-page="blog"] .club-discovery-center,
body.club-r1194-desktop-shell #site-shell-content[data-shell-page="blog"] #blogWallCardsContainer,
body.club-r1194-desktop-shell #site-shell-content[data-shell-page="blog"] .club-desktop-mix-host,
body.club-r1194-desktop-shell #site-shell-content[data-shell-page="blog"] .club-desktop-mix-section--carousel,
body.club-r1194-desktop-shell #site-shell-content[data-shell-page="blog"] .club-horizontal-carousel,
body.club-r1194-desktop-shell #site-shell-content[data-shell-page="blog"] .js-blog-post-card-col,
body.club-r1194-desktop-shell #site-shell-content[data-shell-page="blog"] .blog-post-card{
  box-sizing:border-box!important;min-width:0!important;max-width:100%!important;
}
body.club-r1194-desktop-shell #site-shell-content[data-shell-page="blog"] .club-horizontal-carousel{
  overflow-x:auto!important;overflow-y:hidden;overscroll-behavior-inline:contain;
}
/* Composer: deux rangées systématiques si sa largeur réelle est insuffisante.
   Grille à 7 colonnes: (avatar + saisie), puis (photo + plus + trois tris).
   Ne jamais superposer les tris et le champ à une largeur de 380px. */
.cab-post-composer-wrap{container-type:inline-size;min-width:0;width:100%;max-width:100%}
.cab-post-composer-wrap .cab-post-composer-compact{box-sizing:border-box;max-width:100%;min-width:0}
@container (max-width:690px){
 .cab-post-composer-wrap .cab-post-composer-compact{
   display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;
   gap:6px!important;align-items:center!important;padding:8px!important;
   border-radius:16px!important;width:100%!important;max-width:100%!important;
 }
 .cab-post-composer-compact>.cab-post-composer-compact-avatar{
   grid-column:1;grid-row:1;width:38px!important;height:38px!important;max-width:100%;justify-self:center;
 }
 .cab-post-composer-compact>.cab-post-composer-compact-input{
   grid-column:2 / -1;grid-row:1;width:100%!important;min-width:0!important;
   min-height:39px!important;max-height:46px;overflow:hidden;white-space:nowrap;
   text-overflow:ellipsis;text-align:left;
 }
 .cab-post-composer-compact>.cab-post-composer-compact-photo{
   grid-column:1 / 3;grid-row:2;min-width:0!important;justify-content:center;
   max-width:100%;height:36px!important;padding:4px!important;
 }
 .cab-post-composer-compact>.cab-post-composer-compact-more{
   grid-column:3;grid-row:2;width:35px!important;height:35px!important;justify-self:center;
 }
 .cab-post-composer-compact>.cab-post-composer-compact-wall-view:not(.d-none){grid-row:3;grid-column:1 / -1;justify-self:start}
 .cab-post-composer-compact>.cab-wall-sort-controls{
   grid-column:4 / -1;grid-row:2;margin:0!important;width:100%;min-width:0!important;
   display:flex;justify-content:flex-end!important;gap:3px!important;
 }
 .cab-post-composer-compact .cab-wall-sort-button{width:34px!important;height:34px!important;flex:0 0 34px!important}
}
@container (max-width:350px){
 .cab-post-composer-compact>.cab-post-composer-compact-photo>span:last-child{display:none}
 .cab-post-composer-compact .cab-wall-sort-button{width:31px!important;height:31px!important;flex-basis:31px!important}
}
/* Un post rendu dans le fil ne doit pas emprunter la hauteur de la modale détail
   après retour SPA/fermeture. Conserver l'image complète en contain. */
#site-shell-content[data-shell-page="blog"] #blogWallCardsContainer>.js-blog-post-card-col,
#site-shell-content[data-shell-page="blog"] #blogWallCardsContainer .blog-post-card{
 width:100%;min-width:0;max-width:100%;overflow:hidden;
}
#site-shell-content[data-shell-page="blog"] #blogWallCardsContainer .blog-post-gallery,
#site-shell-content[data-shell-page="blog"] #blogWallCardsContainer .blog-post-image-wrap{
 box-sizing:border-box!important;max-width:100%!important;width:100%!important;
 min-height:0!important;max-height:min(420px,56svh)!important;
 overflow:hidden!important;
}
#site-shell-content[data-shell-page="blog"] #blogWallCardsContainer .blog-post-gallery.is-single-media,
#site-shell-content[data-shell-page="blog"] #blogWallCardsContainer .blog-post-gallery-count-1{
 aspect-ratio:16/10!important;height:auto!important;
}
#site-shell-content[data-shell-page="blog"] #blogWallCardsContainer .blog-post-gallery .blog-post-gallery-item{
 min-height:0!important;max-height:100%!important;overflow:hidden!important;
}
#site-shell-content[data-shell-page="blog"] #blogWallCardsContainer .blog-post-image{
 display:block;max-width:100%!important;max-height:100%!important;
 object-fit:contain!important;transform:none!important;
}