/* 4.5. Articles et Posts (Listes et éléments individuels) */
.posts-wrapper {
opacity: 1;
display: flex;
flex-direction: column;
gap: 30px;
}
.post-item {
position: relative;
isolation: isolate;
padding: 25px;
background: transparent;
scroll-margin-top: calc(var(--header-height) + var(--pagination-bar-height) + var(--mobile-menu-extra) + 10px);
}
.post-item::before,
.post-item::after {
content: '';
position: absolute;
z-index: -1;
clip-path: polygon(
var(--cut-md) 0, 100% 0, 100% calc(100% - var(--cut-md)),
calc(100% - var(--cut-md)) 100%, 0 100%, 0 var(--cut-md)
);
}
.post-item::before {
inset: 0;
background: var(--color-accent);
transition: filter 0.6s ease;
}
.post-item::after {
inset: 2px;
background: linear-gradient(rgba(119, 92, 49, 0.1), rgba(119, 92, 49, 0.1)),
var(--color-background);
}
.post-layout {
display: flex;
gap: 25px;
}
.post-thumbnail {
flex: 0 0 300px;
display: flex;
flex-direction: column;
gap: 15px;
}
.post-thumbnail img {
width: 100%;
height: auto;
border-radius: 5px;
}
.post-content-wrapper {
flex: 1;
}
.post-title {
margin: 0 0 15px 0;
}
.post-title a {
color: var(--color-text);
text-decoration: underline;
text-decoration-color: rgba(119, 92, 49, 0.3);
text-underline-offset: 4px;
font-size: 1.5rem;
font-weight: bold;
transition: color 0.3s ease, text-decoration-color 0.3s ease;
}
.post-title a:hover {
color: var(--color-accent-light);
text-decoration-color: var(--color-accent);
}
.post-title a .fa-external-link-alt {
font-size: 0.6em;
margin-left: 8px;
vertical-align: middle;
opacity: 0.5;
transition: opacity 0.3s ease;
}
.post-title a:hover .fa-external-link-alt {
opacity: 1;
}
.post-meta {
font-size: 0.875rem;
color: var(--color-accent);
margin-bottom: 15px;
display: flex;
gap: 20px;
}
.post-date,
.post-author {
color: #ffffff;
display: flex;
align-items: center;
}
.post-date:before {
content: "📅";
margin-right: 5px;
}
.post-author:before {
content: "✍️";
margin-right: 5px;
}
.posts-wrapper .read-more-btn {
min-width: 13rem;
text-align: center;
}
.posts-wrapper .post-excerpt {
color: var(--color-text-secondary);
line-height: 1.6;
margin-bottom: 15px;
overflow: hidden;
max-height: 7.5rem;
opacity: 1;
transform: translateY(0);
transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
margin-bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.posts-wrapper .post-content {
color: var(--color-text-secondary);
line-height: 1.6;
overflow: hidden;
max-height: 0;
opacity: 0;
transform: translateY(15px);
transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.05s,
opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.1s,
transform 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
}
.posts-wrapper .post-item.article-deployed .post-excerpt {
max-height: 0;
opacity: 0;
transform: translateY(-15px);
margin-bottom: 0;
}
.posts-wrapper .post-item.article-deployed .post-content-wrapper {
display: flex;
flex-direction: column;
}
.posts-wrapper .post-item.article-deployed .post-content {
max-height: 99999px;
opacity: 1;
transform: translateY(0);
overflow: visible;
margin-top: -285px;
-webkit-mask-image: linear-gradient(to bottom, transparent var(--content-fade-start, 0px), black var(--content-fade-end, 0px));
mask-image: linear-gradient(to bottom, transparent var(--content-fade-start, 0px), black var(--content-fade-end, 0px));
}
.posts-wrapper .post-item.article-deployed {
animation: deploy-halo 0.8s ease-out;
padding-bottom: 25px;
}
.posts-wrapper .post-item.article-deployed::before {
filter: brightness(2);
}
.posts-wrapper .post-item.article-retracting {
animation: retract-halo 0.6s ease-in-out;
}
.posts-wrapper .post-item.article-deployed .post-header {
position: sticky;
top: calc(var(--header-height) + var(--pagination-bar-height) + var(--mobile-menu-extra));
z-index: 2;
margin: -25px -25px 300px;
padding: 25px 25px 15px;
}
.posts-wrapper .post-item.article-deployed .post-header-fade {
display: none;
}
.posts-wrapper .post-item.article-deployed .post-header.is-stuck {
background: linear-gradient(135deg, var(--color-background) 50%, transparent 50%)
no-repeat 0 0 / var(--cut-md) var(--cut-md);
}
.posts-wrapper .post-item.article-deployed .post-header::before,
.posts-wrapper .post-item.article-deployed .post-header::after {
content: '';
position: absolute;
z-index: -1;
clip-path: polygon(
var(--cut-md) 0, 100% 0, 100% 100%,
0 100%, 0 var(--cut-md)
);
}
.posts-wrapper .post-item.article-deployed .post-header::before {
inset: 0 0 2px 0;
background: var(--color-accent);
animation: header-border-brighten 0.6s ease forwards;
}
.posts-wrapper .post-item.article-deployed .post-header::after {
inset: 2px 2px 0 2px;
background: linear-gradient(rgba(119, 92, 49, 0.1), rgba(119, 92, 49, 0.1)), var(--color-background);
}
/* ===== Page Résultats de recherche ===== */
/* La page de résultats n'a pas de barre de pagination : updatePaginationBarHeight() force
--pagination-bar-height à 0px, ce qui suffit pour que top: calc(--header-height + 0px)
soit correct. Aucun override CSS supplémentaire n'est nécessaire sur .post-header — les
pseudo-éléments chamfrés et le comportement is-stuck restent identiques à la page Articles. */
/* Section labels "Articles" / "Discussions" — style cohérent avec .ls-label du live search */
.search-section {
margin-bottom: 30px;
}
.search-section-label {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--color-accent);
margin: 0 0 20px 0;
padding-bottom: 8px;
border-bottom: 1px solid rgba(119, 92, 49, 0.25);
}
/* Séparateur horizontal dégradé entre Articles et Discussions */
.search-section-divider {
border: none;
height: 1px;
background: linear-gradient(to right, transparent, var(--color-accent), transparent);
margin: 10px 0 30px;
opacity: 0.6;
}
/* Wrapper discussions — isolation: isolate crée un contexte d'empilement local pour que les
z-index: -1 des ::before/::after des cards restent à l'intérieur et ne s'échappent pas
vers .content-container (overflow-x: clip) qui les rendrait invisibles. */
.search-threads-wrapper {
display: flex;
flex-direction: column;
gap: 20px;
isolation: isolate;
}
/* Card discussion — même clip-path et bordures que .post-item, version allégée */
.search-thread-item {
position: relative;
isolation: isolate;
padding: 20px 22px;
display: flex;
flex-direction: column;
gap: 8px;
}
.search-thread-item::before,
.search-thread-item::after {
content: '';
position: absolute;
z-index: -1;
clip-path: polygon(
var(--cut-md) 0, 100% 0, 100% calc(100% - var(--cut-md)),
calc(100% - var(--cut-md)) 100%, 0 100%, 0 var(--cut-md)
);
}
.search-thread-item::before {
inset: 0;
background: var(--color-accent);
}
.search-thread-item::after {
inset: 2px;
background: linear-gradient(rgba(119, 92, 49, 0.08), rgba(119, 92, 49, 0.08)),
var(--color-background);
}
html.light-mode .search-thread-item::before {
background: #1A5276;
}
html.light-mode .search-thread-item::after {
background: #FDFBF5;
}
/* Titre du sujet forum */
.search-thread-title {
margin: 0;
font-size: 1.15rem;
font-weight: 700;
line-height: 1.3;
}
.search-thread-title a {
color: var(--color-text);
text-decoration: underline;
text-decoration-color: rgba(119, 92, 49, 0.3);
text-underline-offset: 4px;
transition: color 0.3s ease, text-decoration-color 0.3s ease;
}
.search-thread-title a:hover {
color: var(--color-accent-light);
text-decoration-color: var(--color-accent);
}
.search-thread-title a .fa-external-link-alt {
font-size: 0.55em;
margin-left: 6px;
vertical-align: middle;
opacity: 0.4;
transition: opacity 0.3s ease;
display: inline-block; /* coupe l'héritage de text-decoration du parent */
}
.search-thread-title a:hover .fa-external-link-alt {
opacity: 1;
}
html.light-mode .search-thread-title a {
color: var(--color-text);
text-decoration-color: rgba(26, 82, 118, 0.3);
}
html.light-mode .search-thread-title a:hover {
color: #2980b9;
text-decoration-color: #1A5276;
}
/* Extrait de la discussion / réponse */
.search-thread-excerpt {
color: var(--color-text-secondary);
font-size: 0.9rem;
line-height: 1.55;
}
/* Badge "X réponse(s) contiennent ce terme" — même style que .post-date / .post-author */
.search-thread-match-info {
font-size: 0.875rem;
color: var(--color-text-secondary);
display: flex;
align-items: center;
gap: 6px;
}
.search-thread-match-info::before {
font-family: "Font Awesome 6 Free";
font-weight: 900;
content: "\f4ad"; /* fa-comment-dots */
color: var(--color-accent);
font-size: 0.85em;
}
/* Bloc réponse enrichi (sous les sujets Passe 1 qui ont des réponses matchantes) */
.search-thread-reply-block {
margin-top: 8px;
padding: 10px 14px 10px 16px;
border-left: 2px solid var(--color-accent);
background: rgba(119, 92, 49, 0.05);
border-radius: 0 4px 4px 0;
display: flex;
flex-direction: column;
gap: 6px;
}
html.light-mode .search-thread-reply-block {
background: rgba(26, 82, 118, 0.05);
border-left-color: #1A5276;
}
/* Extrait de la meilleure réponse (dans le bloc enrichi) */
.search-thread-reply-excerpt {
color: var(--color-text-secondary);
font-size: 0.85rem;
line-height: 1.5;
font-style: italic;
}
/* Badge score de vote (↑12) affiché quand score > 0 */
.search-thread-vote-badge {
display: inline-flex;
align-items: center;
font-size: 0.78rem;
font-weight: 700;
color: var(--color-accent);
gap: 2px;
margin-left: 6px;
letter-spacing: 0.02em;
}
html.light-mode .search-thread-vote-badge {
color: #1A5276;
}
/* Variante du lien pour "Voir la meilleure réponse" (dans le bloc enrichi) */
.search-thread-link--reply {
font-size: 0.8rem;
opacity: 0.9;
}
/* Lien "Voir la discussion" / "Voir la réponse" */
.search-thread-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.85rem;
font-weight: 600;
color: var(--color-accent);
text-decoration: none;
margin-top: 4px;
transition: color 0.3s ease, gap 0.2s ease;
}
.search-thread-link:hover {
color: var(--color-accent-light);
gap: 10px;
}
html.light-mode .search-thread-link {
color: #1A5276;
}
html.light-mode .search-thread-link:hover {
color: #2980b9;
}
/* Sur les cards via-reply, le badge ::after est en dehors du mais dans le même
contexte inline — le soulignage du déborderait jusqu'au badge.
On passe le