/* ZoneH24 — forum de test : blocs des côtés, modèle « Exemple 2 » de Gérald (24 oct 2026, exemples/DESCRIPTIONS.md).
   Même ensemble que la carte des messages (postcard.css) : fond blanc bleuté en clair, bleu nuit en sombre, bleu vif pour ce qui se clique,
   style plat « carte flottante » (grands arrondis, ombre douce, ni néon ni dégradé).
   - tous les blocs des colonnes de côté : en-tête = icône dans un carré arrondi + titre gras + trait de séparation ;
   - bloc « Discussions » : lignes en petites cartes (#hashtag · temps · ›), survol qui éclaire, discussion ouverte surlignée,
     point bleu des nouveaux messages, 8 lignes puis « Voir tout › », noms longs coupés par « … », lignes de 46 px au moins sur téléphone ;
   - « Liens utiles » : mêmes lignes en cartes.
   L'icône vient du premier emoji du titre (assets/widgets.js). :not(#ph-z):not(#ph-y) passe devant les anciennes règles des thèmes. */

html {
    --wd-bg: #f8faff; --wd-edge: transparent; --wd-shadow: 0 8px 28px rgba(25, 45, 90, .09), 0 1px 3px rgba(25, 45, 90, .05);
    --wd-ico-bg: #e3eaf8; --wd-ico-fg: #1b2a4a; --wd-title: #0f1a33; --wd-sep: #d9e1ee;
    --wd-row-bg: #fdfeff; --wd-row-bd: #dde4ef; --wd-row-sh: 0 1px 0 rgba(25, 45, 90, .07);
    --wd-row-hov: #eef4ff; --wd-row-hov-bd: #9db9ee; --wd-on-bg: #e4eeff;
    --wd-link: #1a66e0; --wd-dot: #1a66e0; --wd-pill-bg: #e2e8f2; --wd-pill-fg: #4a5a75; --wd-chev: #3a4660; --wd-mute: #5d6b86;
}
html[data-theme="voice-sombre"] {
    --wd-bg: #111c2e; --wd-edge: transparent; --wd-shadow: 0 8px 28px rgba(0, 0, 0, .38);
    --wd-ico-bg: #23314a; --wd-ico-fg: #ffffff; --wd-title: #ffffff; --wd-sep: #26344c;
    --wd-row-bg: #18253a; --wd-row-bd: #2a3953; --wd-row-sh: none;
    --wd-row-hov: #1e2f4b; --wd-row-hov-bd: #3d6fc4; --wd-on-bg: #1c3358;
    --wd-link: #3a84f3; --wd-dot: #4d94ff; --wd-pill-bg: #2a3850; --wd-pill-fg: #e6ebf3; --wd-chev: #ffffff; --wd-mute: #9fb0c8;
}
/* Autres thèmes sombres (Nuit, Graphite, Noir) : leurs propres couleurs */
html:is([data-theme="nuit"], [data-theme="graphite"], [data-theme="noir"]) {
    --wd-bg: var(--t-side); --wd-shadow: 0 8px 28px rgba(0, 0, 0, .38);
    --wd-ico-bg: var(--t-strip); --wd-ico-fg: var(--t-text); --wd-title: var(--t-text); --wd-sep: var(--t-border);
    --wd-row-bg: var(--t-strip); --wd-row-bd: var(--t-border); --wd-row-sh: none;
    --wd-row-hov: var(--t-nav-active); --wd-row-hov-bd: var(--t-link); --wd-on-bg: var(--t-btn2-bg);
    --wd-link: var(--t-link); --wd-dot: var(--t-link); --wd-pill-bg: var(--t-nav-active); --wd-pill-fg: var(--t-text); --wd-chev: var(--t-text); --wd-mute: var(--t-text2);
}
html[data-theme="clair"] { --wd-link: var(--t-link); --wd-dot: var(--t-link); }
/* Couleur principale choisie dans 🎨 (bleu, violet, orange) : elle remplace le bleu */
html[data-accent] { --wd-link: var(--t-link); --wd-dot: var(--t-link); --wd-row-hov-bd: color-mix(in srgb, var(--t-link) 55%, var(--wd-row-bd)); }

/* ── le bloc ── */
:is(.sidebar-left, .sidebar, .profile-sidebar-left, .profile-sidebar-right, .feed-sidebar-left, .feed-sidebar-right, .page-sidebar) :is(.widget, .ph-mod-side):not(#ph-z):not(#ph-y) {
    background: var(--wd-bg) !important; border: 1px solid var(--wd-edge) !important; border-radius: 20px !important;
    box-shadow: var(--wd-shadow) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
:is(.sidebar-left, .sidebar, .profile-sidebar-left, .profile-sidebar-right, .feed-sidebar-left, .feed-sidebar-right, .page-sidebar) .widget:not(.side-me-wrap):not(#ph-z):not(#ph-y) { padding: 18px 16px !important; }

/* ── l'en-tête : icône dans un carré arrondi + titre gras + trait ── */
:is(.sidebar-left, .sidebar, .profile-sidebar-left, .profile-sidebar-right, .feed-sidebar-left, .feed-sidebar-right, .page-sidebar) .widget-title:not(#ph-z):not(#ph-y) {
    display: flex; align-items: center; gap: 12px; margin: 0 0 14px !important; padding: 0 0 14px !important;
    font-size: 17px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2;
    color: var(--wd-title) !important; -webkit-text-fill-color: var(--wd-title) !important; border-bottom: 1px solid var(--wd-sep) !important;
}
.widget-title .wt-ico {
    flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
    background: var(--wd-ico-bg); color: var(--wd-ico-fg); -webkit-text-fill-color: currentColor;
    font-size: 18px; line-height: 1; font-weight: 400; font-style: normal;
}
.widget-title .wt-ico svg { width: 20px; height: 20px; display: block; }
.widget-title .wt-txt { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; }   /* un titre long passe sur 2 lignes avant d'être coupé */

/* ── lignes en petites cartes : « Discussions » et « Liens utiles » ── */
.ht-widget .ht-list, .widget-ext-links .ext-links-grid { display: flex; flex-direction: column; gap: 9px; }
.ht-widget .ht-item, .widget-ext-links .ext-link-card {
    position: relative; display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 6px 12px 6px 14px; margin: 0;
    background: var(--wd-row-bg); border: 1px solid var(--wd-row-bd); border-radius: 13px; box-shadow: var(--wd-row-sh);
    text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.ht-widget .ht-item:hover, .ht-widget .ht-item:focus-visible, .widget-ext-links .ext-link-card:hover, .widget-ext-links .ext-link-card:focus-visible {
    background: var(--wd-row-hov); border-color: var(--wd-row-hov-bd); outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wd-link) 16%, transparent);
}
.ht-widget .ht-item.on { background: var(--wd-on-bg); border-color: var(--wd-link); box-shadow: inset 4px 0 0 var(--wd-link); }
.ht-widget .ht-item:last-child { border-bottom: 1px solid var(--wd-row-bd); }
.ht-widget .ht-item.on:last-child { border-bottom-color: var(--wd-link); }
.ht-widget .ht-tag { flex: 0 1 auto; min-width: 0; color: var(--wd-link) !important; -webkit-text-fill-color: var(--wd-link) !important;
                     font-size: 15.5px; font-weight: 600; letter-spacing: -.005em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ht-widget .ht-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--wd-dot);
                     box-shadow: 0 0 0 3px color-mix(in srgb, var(--wd-dot) 22%, transparent); }
.ht-widget .ht-meta { margin-left: auto; flex: none; min-width: 44px; height: 26px; padding: 0 8px; display: grid; place-items: center; box-sizing: border-box;
                      border-radius: 8px; background: var(--wd-pill-bg); color: var(--wd-pill-fg); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.ht-widget .ht-go { flex: none; width: 10px; color: var(--wd-chev); font-size: 21px; line-height: 1; font-weight: 300; text-align: center; }
.ht-widget .ht-extra { display: none; }
.ht-widget.ht-open .ht-extra { display: flex; }
.ht-widget .ht-more {
    display: flex; align-items: center; justify-content: center; width: 100%; min-height: 42px; margin: 10px 0 0; padding: 0 12px; cursor: pointer;
    border: 1px solid var(--wd-row-bd); border-radius: 13px; background: transparent; color: var(--wd-link); font-size: 14px; font-weight: 600;
}
.ht-widget .ht-more:hover, .ht-widget .ht-more:focus-visible { background: var(--wd-row-hov); border-color: var(--wd-row-hov-bd); outline: none; }
.ht-widget .ht-empty { color: var(--wd-mute); }

.widget-ext-links .ext-link-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                                    color: var(--wd-link); font-size: 14px; font-weight: 600; }
.widget-ext-links .ext-link-arrow { flex: none; color: var(--wd-chev); }
.widget-ext-links .ext-link-card:hover .ext-link-label { color: var(--wd-link); }

/* téléphone : lignes de 46 px au moins, faciles à toucher */
@media (max-width: 700px) {
    .ht-widget .ht-item, .widget-ext-links .ext-link-card, .ht-widget .ht-more { min-height: 46px; }
    .ht-widget .ht-tag { font-size: 16px; }
}

/* ── Une discussion au centre, à la place du fil (24 oct 2026, Gérald) : l'en-tête, puis les messages (cartes du fil) ──
   Le fil reste dans la page, seulement caché : « Retour au fil » le remet tel qu'il était. */
main.ht-mode > :not(#ht-view) { display: none !important; }
#ht-view { scroll-margin-top: 84px; }
#ht-view .htv-head {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 14px; padding: 14px 16px;
    background: var(--wd-bg); border-radius: 20px; box-shadow: var(--wd-shadow);
}
#ht-view .htv-title { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; }
#ht-view .htv-title .wt-ico { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--wd-ico-bg); color: var(--wd-ico-fg); }
#ht-view .htv-title .wt-ico svg { width: 20px; height: 20px; display: block; }
#ht-view .htv-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--wd-link); font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
#ht-view .htv-count { flex: none; height: 26px; padding: 0 10px; display: inline-grid; place-items: center; border-radius: 8px; background: var(--wd-pill-bg); color: var(--wd-pill-fg); font-size: 12.5px; font-weight: 600; }
#ht-view .htv-back {
    flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 12px;
    border: 1px solid var(--wd-row-bd); background: var(--wd-row-bg); color: var(--wd-link) !important; -webkit-text-fill-color: var(--wd-link) !important; font-size: 14px; font-weight: 600; text-decoration: none;
}
#ht-view .htv-back:hover, #ht-view .htv-back:focus-visible { background: var(--wd-row-hov); border-color: var(--wd-row-hov-bd); outline: none; }
#ht-view .htv-empty {
    margin: 0 0 14px; padding: 28px 18px; text-align: center; color: var(--wd-mute); font-size: 14.5px;
    background: var(--wd-bg); border-radius: 20px; box-shadow: var(--wd-shadow);
}
@media (max-width: 700px) { #ht-view .htv-back { min-height: 44px; } #ht-view .htv-head { padding: 12px; } }
/* ── Blocs d'essai des côtés (24 oct 2026, includes/side_blocks.php) : repère « n°X » pour le tri, lignes en cartes, statistiques, astuce ── */
.sb-n {
    margin-left: auto; flex: none; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .02em; line-height: 1.5;
    background: color-mix(in srgb, var(--wd-link) 14%, transparent); color: var(--wd-link); -webkit-text-fill-color: var(--wd-link); cursor: help;
}
.sb-wrap { position: relative; }
.sb-wrap > .sb-n { position: absolute; z-index: 3; top: -9px; right: 18px; margin: 0; box-shadow: 0 0 0 3px var(--t-bg, var(--bg-deep, #fff)); }   /* posé sur le bord du module, sans cacher son cadenas « Privé » */
.sb-list { display: flex; flex-direction: column; gap: 8px; }
.sb-row {
    position: relative; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 12px 6px 10px; box-sizing: border-box;
    background: var(--wd-row-bg); border: 1px solid var(--wd-row-bd); border-radius: 13px; box-shadow: var(--wd-row-sh);
    text-decoration: none; color: var(--wd-title); transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.sb-row:hover, .sb-row:focus-visible { background: var(--wd-row-hov); border-color: var(--wd-row-hov-bd); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--wd-link) 16%, transparent); }
.sb-av { flex: none; width: 32px; height: 32px; border-radius: 9px; object-fit: cover; display: grid; place-items: center; color: #fff; font-size: 14px; font-weight: 600; }
.sb-ico { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--wd-ico-bg); font-size: 16px; line-height: 1; }
.sb-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sb-t1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--wd-title); font-size: 14px; font-weight: 600; line-height: 1.3; }
.sb-t1 b { font-weight: 700; }
.sb-t2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--wd-mute); font-size: 12.5px; line-height: 1.3; }
.sb-meta { flex: none; padding: 2px 8px; border-radius: 8px; background: var(--wd-pill-bg); color: var(--wd-pill-fg); font-size: 12px; font-weight: 600; white-space: nowrap; }
.sb-chev { flex: none; color: var(--wd-chev); font-size: 21px; line-height: 1; font-weight: 300; }
.sb-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--wd-dot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wd-dot) 22%, transparent); }
.sb-more { display: flex; align-items: center; justify-content: center; min-height: 40px; margin-top: 10px; border-radius: 13px; border: 1px solid var(--wd-row-bd);
           color: var(--wd-link) !important; font-size: 14px; font-weight: 600; text-decoration: none; }
.sb-more:hover, .sb-more:focus-visible { background: var(--wd-row-hov); border-color: var(--wd-row-hov-bd); outline: none; }
.sb-empty, .sb-foot { margin: 2px 0 0; color: var(--wd-mute); font-size: 13px; line-height: 1.5; }
.sb-foot { margin-top: 10px; text-align: center; font-size: 12.5px; }
.sb-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sb-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 10px 12px; border-radius: 13px; background: var(--wd-row-bg); border: 1px solid var(--wd-row-bd); box-shadow: var(--wd-row-sh); min-width: 0; }
.sb-stat b { color: var(--wd-link); font-size: 24px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.sb-stat span { color: var(--wd-title); font-size: 13px; font-weight: 600; line-height: 1.3; }
.sb-stat small { color: var(--wd-mute); font-size: 11.5px; }
.sb-tip { margin: 0; padding: 12px 14px; border-radius: 13px; background: var(--wd-on-bg); border: 1px solid var(--wd-row-bd); color: var(--wd-title); font-size: 14.5px; line-height: 1.55; }
@media (max-width: 700px) { .sb-row { min-height: 48px; } }

/* Gras un cran plus léger (24 oct 2026, Gérald : « un peu trop épais ») — Segoe UI : 700 = Bold, 600 = Semibold (800 et 900 = Black, bien plus lourd) */
html body :is(.post-cat, .ph-trend-title, .side-me-name, .phx-gohome, .pub-main-title, .theme-menu-title, .phc-sec) { font-weight: 600; }