/* ZoneH24 — forum de test : carte d'un message, modèle « Exemple 1 » de Gérald (24 oct 2026, exemples/DESCRIPTIONS.md).
   De haut en bas : en-tête (avatar carré arrondi · pseudo + « Publié il y a … » en bleu · « ··· »), texte, « Traduire »,
   trait, puis vrais boutons « J'aime 1 · 👎 0 · ↺ 0 » au contour et « Réponses 14 » en bouton plein.
   Style plat : coins, bordure et ombre douces, sans néon ni dégradé. Le gras reste de la couleur du texte (il était
   signalé presque invisible en clair). Couleurs du modèle en clair et en sombre ; les autres thèmes prennent leurs couleurs ;
   si le membre choisit une couleur principale (🎨), les bleus de la carte la suivent.
   Cartes concernées : article.post-card.pc2 (fil et profil). :not(#ph-z):not(#ph-y) passe devant les anciennes règles. */

html {
    --pc-card: #ffffff; --pc-line: #e4e7ee; --pc-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 3px 10px rgba(16, 24, 40, .05);
    --pc-text: #1a1f2b; --pc-mute: #7a8294; --pc-date: #2f6fd6; --pc-av: #2d4a78;
    --pc-more-bg: #eef0f5; --pc-more-bd: #dfe3ea; --pc-more-fg: #3b4456;
    --pc-tr-bg: #e9f0fb; --pc-tr-bd: #c7d8f3; --pc-tr-fg: #2f6fd6;
    --pc-btn-bg: #ffffff; --pc-btn-bd: #d9dde6; --pc-btn-fg: #1a1f2b; --pc-btn-hov: #f4f6fa;
    --pc-main: #2a63c9; --pc-main-fg: #ffffff;
    --pc-menu-bg: #ffffff; --pc-menu-shadow: 0 10px 28px rgba(16, 24, 40, .16);
    --pc-like: #e0245e; --pc-repost: #16a34a;
}
html[data-theme="voice-sombre"] {
    --pc-card: #132238; --pc-line: #1f3049; --pc-shadow: none;
    --pc-text: #ffffff; --pc-mute: #8a94a6; --pc-date: #6aa0f0; --pc-av: #2d4a78;
    --pc-more-bg: #26364f; --pc-more-bd: #2a3a52; --pc-more-fg: #dce4f0;
    --pc-tr-bg: #1f3a66; --pc-tr-bd: #2d5190; --pc-tr-fg: #9cc0f5;
    --pc-btn-bg: #1a2a40; --pc-btn-bd: #2a3a52; --pc-btn-fg: #ffffff; --pc-btn-hov: #213450;
    --pc-main: #2a63c9; --pc-main-fg: #ffffff;
    --pc-menu-bg: #1a2a40; --pc-menu-shadow: 0 10px 28px rgba(0, 0, 0, .45);
    --pc-like: #ff5c8a; --pc-repost: #3ddc84;
}
/* Autres thèmes sombres (Nuit, Graphite, Noir) : leurs propres couleurs */
html:is([data-theme="nuit"], [data-theme="graphite"], [data-theme="noir"]) {
    --pc-card: var(--t-card); --pc-line: var(--t-border); --pc-shadow: none;
    --pc-text: var(--t-text); --pc-mute: var(--t-text2); --pc-date: var(--t-link); --pc-av: var(--t-avatar);
    --pc-more-bg: var(--t-strip); --pc-more-bd: var(--t-border); --pc-more-fg: var(--t-text);
    --pc-tr-bg: var(--t-btn2-bg); --pc-tr-bd: var(--t-btn2-border); --pc-tr-fg: var(--t-btn2-text);
    --pc-btn-bg: var(--t-strip); --pc-btn-bd: var(--t-border); --pc-btn-fg: var(--t-text); --pc-btn-hov: var(--t-nav-active);
    --pc-main: var(--t-accent); --pc-main-fg: var(--t-accent-text);
    --pc-menu-bg: var(--t-card); --pc-menu-shadow: 0 10px 28px rgba(0, 0, 0, .45);
    --pc-like: #ff5c8a; --pc-repost: #3ddc84;
}
/* Couleur principale choisie dans 🎨 (bleu, violet, orange) : elle remplace les bleus du modèle */
html[data-accent] {
    --pc-date: var(--t-link); --pc-tr-bg: var(--t-btn2-bg); --pc-tr-bd: var(--t-btn2-border); --pc-tr-fg: var(--t-btn2-text);
    --pc-main: var(--t-accent); --pc-main-fg: var(--t-accent-text);
}

/* ── la carte ── */
.post-card.pc2:not(#ph-z):not(#ph-y) {
    background: var(--pc-card) !important; border: 1px solid var(--pc-line) !important; border-radius: 12px !important;
    box-shadow: var(--pc-shadow) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    color: var(--pc-text);
}
.post-card.pc2:not(#ph-z):not(#ph-y) > .post-body-wrap { padding: 20px !important; }

/* en-tête */
.post-card.pc2:not(#ph-z):not(#ph-y) .post-header { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 14px !important; }
.post-card.pc2:not(#ph-z):not(#ph-y) .post-header :is(.avatar-init, .post-avatar) {
    zoom: 1 !important; width: 46px !important; height: 46px !important; border-radius: 8px !important; flex: none;
    font-size: 20px !important; font-weight: 700 !important; color: #fff !important;
}
.post-card.pc2:not(#ph-z):not(#ph-y) .post-header .avatar-init { background: var(--pc-av) !important; }
.post-card.pc2:not(#ph-z):not(#ph-y) :is(.post-meta-wrap, .post-meta) {
    flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding-top: 3px;
}
.post-card.pc2:not(#ph-z):not(#ph-y) .post-author {
    font-size: 15px !important; font-weight: 600 !important; line-height: 1.3;
    color: var(--pc-text) !important; -webkit-text-fill-color: var(--pc-text) !important;
}
.post-card.pc2:not(#ph-z):not(#ph-y) .pc-date { font-size: 12.5px; line-height: 1.3; color: var(--pc-date); }
.post-card.pc2:not(#ph-z):not(#ph-y) .post-cat { align-self: flex-start; margin-top: 6px; }

/* « ··· » et son menu */
.post-card.pc2 .pc-more { position: relative; flex: none; margin-left: auto; }
.post-card.pc2 .post-cat + .pc-more { margin-left: 8px; }
.post-card.pc2:not(#ph-z):not(#ph-y) .pc-more-btn {
    width: 34px; height: 30px; padding: 0 0 4px; display: grid; place-items: center; cursor: pointer;
    border-radius: 8px; background: var(--pc-more-bg) !important; border: 1px solid var(--pc-more-bd) !important;
    color: var(--pc-more-fg) !important; font: 600 16px/1 system-ui, sans-serif; letter-spacing: 1px;
}
.post-card.pc2:not(#ph-z):not(#ph-y) .pc-more-btn:hover,
.post-card.pc2:not(#ph-z):not(#ph-y) .pc-more-btn[aria-expanded="true"] { filter: brightness(.96); }
.post-card.pc2 .pc-menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 190px; padding: 6px;
    background: var(--pc-menu-bg); border: 1px solid var(--pc-line); border-radius: 10px; box-shadow: var(--pc-menu-shadow);
}
.post-card.pc2 .pc-menu[hidden] { display: none; }
.post-card.pc2:not(#ph-z):not(#ph-y) .pc-menu button {
    display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; margin: 0; cursor: pointer; text-align: left;
    border: 0 !important; border-radius: 7px; background: transparent !important; color: var(--pc-text) !important;
    font-size: 14px; font-weight: 500; white-space: nowrap;
}
.post-card.pc2:not(#ph-z):not(#ph-y) .pc-menu button:hover { background: var(--pc-btn-hov) !important; }
.post-card.pc2:not(#ph-z):not(#ph-y) .pc-menu button.pc-danger { color: #d93a3a !important; }
html[data-theme="voice-sombre"] .post-card.pc2:not(#ph-z):not(#ph-y) .pc-menu button.pc-danger { color: #ff7a7a !important; }

/* texte : couleur du texte partout, gras compris ; le barré en gris */
.post-card.pc2:not(#ph-z):not(#ph-y) .post-content { color: var(--pc-text) !important; margin: 0 !important; }
.post-card.pc2:not(#ph-z):not(#ph-y) .post-content :is(strong, b, em, i, u) { color: inherit !important; -webkit-text-fill-color: currentColor !important; }
.post-card.pc2:not(#ph-z):not(#ph-y) .post-content :is(strong, b) { font-weight: 600; }
.post-card.pc2:not(#ph-z):not(#ph-y) .post-content s { color: var(--pc-mute) !important; -webkit-text-fill-color: var(--pc-mute) !important; }

/* « Traduire » : bouton bleu pâle, au-dessus du trait */
.post-card.pc2:not(#ph-z):not(#ph-y) .tr-bar { margin: 14px 0 0 !important; gap: 10px; font-size: 12.5px; }
.post-card.pc2:not(#ph-z):not(#ph-y) .tr-btn {
    display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px !important; cursor: pointer;
    border-radius: 8px; background: var(--pc-tr-bg) !important; border: 1px solid var(--pc-tr-bd) !important;
    color: var(--pc-tr-fg) !important; font-size: 13px !important; font-weight: 600 !important; text-decoration: none !important;
}
.post-card.pc2:not(#ph-z):not(#ph-y) .tr-btn:hover:not(:disabled) { filter: brightness(.97); }
.post-card.pc2:not(#ph-z):not(#ph-y) .tr-note { color: var(--pc-mute); }

/* image, vidéo, sondage du message : même respiration */
.post-card.pc2:not(#ph-z):not(#ph-y) :is(.post-image, .video-embed, .ppl) { margin-top: 14px; }

/* trait + boutons */
.post-card.pc2:not(#ph-z):not(#ph-y) .post-stats {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px !important;
    margin: 16px 0 0; padding: 16px 0 0 !important; border-top: 1px solid var(--pc-line) !important;
}
.post-card.pc2:not(#ph-z):not(#ph-y) .post-stats .stat-btn {
    display: inline-flex; align-items: center; gap: 7px !important; height: 40px; min-height: 40px; padding: 0 14px !important;
    border-radius: 8px !important; background: var(--pc-btn-bg) !important; border: 1px solid var(--pc-btn-bd) !important;
    color: var(--pc-btn-fg) !important; -webkit-text-fill-color: currentColor !important;
    font-size: 13px !important; font-weight: 600 !important; line-height: 1; white-space: nowrap; transition: none !important;
}
.post-card.pc2:not(#ph-z):not(#ph-y) .post-stats .stat-btn span { font-size: 13px !important; font-weight: 600 !important; }
.post-card.pc2:not(#ph-z):not(#ph-y) .post-stats .stat-btn .pc-ico { font-size: 15px !important; font-weight: 400 !important; line-height: 1; }
.post-card.pc2:not(#ph-z):not(#ph-y) .post-stats button.stat-btn:hover { background: var(--pc-btn-hov) !important; }
.post-card.pc2 .post-stats .like-btn .pc-ico::before { content: '♡'; }
.post-card.pc2 .post-stats .like-btn.liked .pc-ico::before { content: '♥'; }
.post-card.pc2:not(#ph-z):not(#ph-y) .post-stats .like-btn.liked { color: var(--pc-like) !important; border-color: color-mix(in srgb, var(--pc-like) 45%, var(--pc-btn-bd)) !important; }
.post-card.pc2:not(#ph-z):not(#ph-y) .post-stats .repost-btn.reposted { color: var(--pc-repost) !important; border-color: color-mix(in srgb, var(--pc-repost) 45%, var(--pc-btn-bd)) !important; }
/* « Réponses » : le seul bouton plein */
.post-card.pc2:not(#ph-z):not(#ph-y) .post-stats .stat-btn.pc-main { background: var(--pc-main) !important; border-color: var(--pc-main) !important; color: var(--pc-main-fg) !important; }
.post-card.pc2:not(#ph-z):not(#ph-y) .post-stats button.stat-btn.pc-main:hover { background: color-mix(in srgb, var(--pc-main) 88%, #000) !important; }
.post-card.pc2 .post-when { display: none !important; }

/* « Réponses » : bouton plein bleu seulement s'il y a des réponses ; à 0 il est au contour, comme les autres (24 oct 2026) */
.post-card.pc2:not(#ph-z):not(#ph-y) .post-stats .stat-btn.pc-main.pc-zero { background: var(--pc-btn-bg) !important; border-color: var(--pc-main) !important; color: var(--pc-main) !important; }
.post-card.pc2:not(#ph-z):not(#ph-y) .post-stats button.stat-btn.pc-main.pc-zero:hover { background: var(--pc-btn-hov) !important; }

/* long pseudo : coupé par « … », sans pousser le « ··· » */
.post-card.pc2:not(#ph-z):not(#ph-y) :is(.post-meta-wrap, .post-meta) > .post-author { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-card.pc2:not(#ph-z):not(#ph-y) .pc-date { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* gras lisible en clair aussi dans les réponses et la page d'un message (le gras gardait parfois un gris pâle) */
.rp-b :is(strong, b), .post-main-content :is(strong, b) { color: inherit !important; -webkit-text-fill-color: currentColor !important; font-weight: 600; }

/* téléphone : cartes un peu plus serrées ; sous 360 px les réactions passent en icône + chiffre (plus de mots) */
@media (max-width: 600px) {
    .post-card.pc2:not(#ph-z):not(#ph-y) > .post-body-wrap { padding: 16px !important; }
    .post-card.pc2:not(#ph-z):not(#ph-y) .post-header :is(.avatar-init, .post-avatar) { width: 42px !important; height: 42px !important; font-size: 18px !important; }
    .post-card.pc2:not(#ph-z):not(#ph-y) .post-stats { gap: 6px !important; }
    .post-card.pc2:not(#ph-z):not(#ph-y) .post-stats .stat-btn { height: 38px; min-height: 38px; padding: 0 10px !important; gap: 6px !important; }
}
@media (max-width: 399px) { .post-card.pc2 .post-stats .like-btn .pc-lbl { display: none; } }
@media (max-width: 359px) {
    .post-card.pc2 .post-stats .pc-lbl { display: none; }
    .post-card.pc2:not(#ph-z):not(#ph-y) .post-stats { gap: 6px !important; }
    .post-card.pc2:not(#ph-z):not(#ph-y) .post-stats .stat-btn { padding: 0 10px !important; gap: 5px !important; }
}

/* petit téléphone : l'étiquette de catégorie passe sous le pseudo, pour que le pseudo et la date ne soient pas coupés */
@media (max-width: 440px) {
    .post-card.pc2:not(#ph-z):not(#ph-y) .post-header { flex-wrap: wrap; row-gap: 0; }
    .post-card.pc2 .post-header::after { content: ''; order: 8; flex: 0 0 100%; height: 0; }
    .post-card.pc2:not(#ph-z):not(#ph-y) .post-header .post-cat { order: 9; margin: 8px 0 0 54px; }
}