/* 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);filter:blur(0px);transition:max-height 0.28s cubic-bezier(0.4,0,1,1),opacity 0.22s cubic-bezier(0.4,0,1,1),transform 0.28s cubic-bezier(0.4,0,1,1),filter 0.22s ease,margin-bottom 0.28s cubic-bezier(0.4,0,1,1)}.posts-wrapper .post-content{color:var(--color-text-secondary);line-height:1.6;overflow:hidden;height:0;opacity:0;transform:translateY(10px);transition:opacity 0.38s cubic-bezier(0.4,0,0.2,1) 0.08s,transform 0.5s cubic-bezier(0.16,1,0.3,1) 0.04s}.posts-wrapper .post-item.article-deployed .post-excerpt{max-height:0;opacity:0;transform:translateY(-8px);filter:blur(3px);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{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 1s ease-out;padding-bottom:25px;z-index:6}.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 <a>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 <a>mais dans le même contexte inline — le soulignage du <a>déborderait jusqu'au badge. On passe le <h3>en flex et le <a>en width:fit-content pour limiter le soulignage exactement au texte du lien,tout en conservant le même style que les autres cards. */ .search-thread-item--via-reply .search-thread-title{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px}.search-thread-item--via-reply .search-thread-title a{width:fit-content;flex-shrink:0}/* Badge discret "Via une réponse" — flex item aligné après le <a>grâce au gap du parent */ .search-thread-item--via-reply .search-thread-title::after{content:'via une réponse';display:inline-flex;align-items:center;align-self:center;flex-shrink:0;font-size:0.65rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--color-accent);opacity:0.7;padding:2px 6px;border:1px solid rgba(119,92,49,0.35);border-radius:3px}html.light-mode .search-thread-item--via-reply .search-thread-title::after{color:#1A5276;border-color:rgba(26,82,118,0.35)}/* Single Post Styles */ .single-post-wrapper{max-width:var(--max-width);width:100%;margin:0 auto;padding:20px;padding-top:var(--pagination-bar-height);padding-bottom:0}.post-item.single-post .post-content,/* Assure que le contenu est visible sur single post */ .single-post .post-content{/* Style plus générique pour le contenu d'un article unique */ color:var(--color-text-secondary);line-height:1.6;max-height:none;opacity:1;transform:translateY(0);overflow:visible;margin-top:20px}.post-item.single-post .post-excerpt,.single-post .post-excerpt{display:none}.single-post .post-meta-details{margin-top:30px}.single-post-navigation{/* Barre Précédent/Suivant pour article unique */ position:fixed;top:calc(var(--header-height) + var(--mobile-menu-extra));left:50%;transform:translateX(-50%);max-width:var(--max-width);width:100%;margin:0 auto;z-index:990;display:flex;justify-content:space-between;align-items:center;padding:15px 20px 10px;background:var(--color-background)}.single-post-navigation::before{content:'';position:absolute;bottom:0;left:10%;right:10%;height:1px;background:linear-gradient(to right,transparent,var(--color-accent),transparent);opacity:0.6;pointer-events:none}.single-post-navigation::after{content:'';position:absolute;top:100%;left:0;right:0;height:50px;pointer-events:none;background:linear-gradient(to bottom,var(--color-background) 0%,var(--color-background) 2px,transparent 100%)}/* État disabled pour la navigation single-post */ .single-post-navigation a[disabled],.single-post-navigation button[disabled]{opacity:0.5;cursor:not-allowed}.single-post-navigation a[disabled]:hover,.single-post-navigation button[disabled]:hover{transform:none;background-color:transparent}.single-post-navigation a[disabled]::before,.single-post-navigation button[disabled]::before{opacity:0.08 !important}