) - Keep `.blog-ui` for the archive/listing page wrapper */ :where(.blog-ui, .ws-post) ._container{ max-width:var(--container); margin:0 auto; } :where(.blog-ui, .ws-post) p{ color:var(--c-muted); line-height:1.85; } :where(.blog-ui, .ws-post) :where(a,button,input,select,textarea,[tabindex]):focus-visible{ outline:none; box-shadow:var(--ring-active); } /* ============================================================ 1) BREADCRUMB (listing + single) ============================================================ */ .blog-ui .breadcrumb, .ws-post .breadcrumb{ padding:1.15rem 1.5rem 0; --bc-accent: var(--accent); --bc-accent-hover: var(--accent-700); } .blog-ui .breadcrumb__inner, .ws-post .breadcrumb__inner{ max-width:var(--container); margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; font-size:.92rem; line-height:1.2; } .blog-ui .breadcrumb__back, .ws-post .breadcrumb__back{ width:40px;height:40px;border-radius:999px; display:inline-flex;align-items:center;justify-content:center; background:linear-gradient(135deg,var(--bc-accent),var(--bc-accent-hover)); box-shadow:0 14px 30px var(--c-shadow-55), 0 0 18px color-mix(in srgb, var(--accent) 25%, transparent); text-decoration:none; transition:transform var(--t), box-shadow var(--t), filter var(--t); } .blog-ui .breadcrumb__back svg, .ws-post .breadcrumb__back svg{ width:20px;height:20px; fill:var(--c-ink-inverse); } .theme-light.blog-ui .breadcrumb__back svg, .theme-light .blog-ui .breadcrumb__back svg, .theme-light .ws-post .breadcrumb__back svg, .theme-light.ws-post .breadcrumb__back svg{ fill:var(--c-surface); } .blog-ui .breadcrumb__back:hover, .ws-post .breadcrumb__back:hover{ transform:translateY(-2px) scale(1.03); box-shadow:0 20px 44px var(--c-shadow-65), 0 0 22px color-mix(in srgb, var(--accent) 28%, transparent); filter:saturate(1.2); } .blog-ui .breadcrumb__link, .ws-post .breadcrumb__link{ color:var(--c-breadcrumb-link); text-decoration:none; font-weight:800; } .blog-ui .breadcrumb__link:hover, .ws-post .breadcrumb__link:hover{ color:var(--bc-accent); } .blog-ui .breadcrumb__sep, .ws-post .breadcrumb__sep{ color:var(--c-breadcrumb-sep); font-weight:900; } .blog-ui .breadcrumb__current, .ws-post .breadcrumb__current{ color:var(--c-ink); font-weight:950; } /* ============================================================ 2) BACKGROUND CONTINU + SPOTLIGHT (✅ scoped to wrappers, NOT body) ============================================================ */ /* Archive wrapper */ .blog-ui{ position:relative; overflow:visible; isolation:isolate; } /* Single wrapper (your

) */ .ws-post{ position:relative; overflow:visible; isolation:isolate; } /* Spotlight layer */ :where(.blog-ui, .ws-post)::after{ content:""; position:absolute; inset:0; z-index:0; /* ✅ behind your content */ pointer-events:none; background: radial-gradient( var(--spot-size) var(--spot-size) at var(--mx) var(--my), color-mix(in srgb, var(--accent) 22%, transparent), transparent 62% ), radial-gradient( calc(var(--spot-size) * 1.2) calc(var(--spot-size) * 1.2) at var(--mx) var(--my), color-mix(in srgb, var(--c-accent) 12%, transparent), transparent 70% ); opacity:var(--spot-opacity); transition:opacity 180ms ease; filter:saturate(1.2); } /* Keep only wrapper content above spotlight (✅ no body z-index hacks) */ :where(.blog-ui, .ws-post) > *{ position:relative; z-index:1; } @media (hover:hover) and (pointer:fine){ :where(.blog-ui, .ws-post):hover{ --spot-opacity:.95; } } /* ============================================================ 2) ANIM HELPERS (ring conic + mouse glow) – commun ============================================================ */ /* Applique ring + glow + tilt à un “item” (card/nav/whatever) */ :where(.blog-ui, .ws-post) .ws-neon-item{ position:relative; isolation:isolate; overflow:hidden; border-radius:var(--r-xl); border:1px solid var(--c-overlay-14); background:linear-gradient(180deg, var(--c-panel-1), var(--c-panel-2)); box-shadow:var(--sh-1); transform:translateZ(0); contain:content; will-change:transform; transition:transform var(--t), box-shadow var(--t), border-color var(--t), filter var(--t); --mx:50%; --my:50%; } :where(.blog-ui, .ws-post) .ws-neon-item::before, :where(.blog-ui, .ws-post) .ws-neon-item::after{ pointer-events:none; } :where(.blog-ui, .ws-post) .ws-neon-item::before{ content:""; position:absolute; inset:-2px; border-radius:inherit; padding:2px; background: conic-gradient( from var(--n-angle), transparent, color-mix(in srgb, var(--accent) 80%, transparent), color-mix(in srgb, var(--c-accent) 65%, transparent), color-mix(in srgb, var(--accent-700) 70%, transparent), color-mix(in srgb, var(--accent) 80%, transparent), transparent ); -webkit-mask:linear-gradient(var(--c-mask) 0 0) content-box, linear-gradient(var(--c-mask) 0 0); -webkit-mask-composite:xor; mask:linear-gradient(var(--c-mask) 0 0) content-box, linear-gradient(var(--c-mask) 0 0); mask-composite:exclude; opacity:.45; animation:neonSpin 2.8s linear infinite; filter:drop-shadow(0 0 14px color-mix(in srgb, var(--accent) 25%, transparent)); } :where(.blog-ui, .ws-post) .ws-neon-item::after{ content:""; position:absolute; inset:-1px; border-radius:inherit; opacity:0; transition:opacity .25s ease; background: radial-gradient( 420px circle at var(--mx) var(--my), color-mix(in srgb, var(--accent) 35%, transparent), transparent 55% ); mix-blend-mode:screen; z-index:0; } :where(.blog-ui, .ws-post) .ws-neon-item > *{ position:relative; z-index:2; } @media (hover:hover) and (pointer:fine){ :where(.blog-ui, .ws-post) .ws-neon-item:hover{ box-shadow:var(--sh-3), 0 0 26px color-mix(in srgb, var(--accent) 22%, transparent); border-color:color-mix(in srgb, var(--accent) 55%, var(--c-overlay-18)); filter:saturate(1.18) contrast(1.04); transform: translateY(-10px) scale(1.02) rotateX(calc((50% - var(--my)) * 0.06)) rotateY(calc((var(--mx) - 50%) * 0.06)); } :where(.blog-ui, .ws-post) .ws-neon-item:hover::before{ opacity:.85; } :where(.blog-ui, .ws-post) .ws-neon-item:hover::after{ opacity:.9; } } /* ============================================================ 3) COMPONENT: TAGS (pill) – commun ============================================================ */ :where(.blog-ui, .ws-post) .blog-tag{ display:inline-flex; align-items:center; padding:.22rem .62rem; border-radius:999px; font-size:.70rem; font-weight:950; letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--c-overlay-12); background:var(--c-overlay-06); color:var(--c-ink-82); } :where(.blog-ui, .ws-post) .blog-tag--cat{ background:color-mix(in srgb, var(--c-accent) 20%, var(--c-panel-1)); border-color:color-mix(in srgb, var(--c-accent) 45%, transparent); color:var(--c-accent-ink); } :where(.blog-ui, .ws-post) .blog-tag--date{ background:color-mix(in srgb, var(--accent) 12%, var(--c-panel-1)); border-color:color-mix(in srgb, var(--accent) 30%, var(--c-overlay-14)); color:var(--accent-text); } /* ============================================================ 4) BLOG LISTING (.blog-ui) ============================================================ */ /* HERO */ .blog-ui .blog-archive__hero{ padding:1.8rem 1.5rem 1.4rem; } .blog-ui .blog-archive__title{ margin:0 0 .6rem; font-size:clamp(2.05rem,2.0vw + 1.15rem,3.05rem); font-weight:950; letter-spacing:-.05em; line-height:1.06; color:var(--c-ink); } .blog-ui .blog-archive__intro{ margin:0; max-width:76rem; font-size:1.05rem; color:var(--c-muted); } /* FILTERS (chips only) */ .blog-ui .blog-filters{ padding:1.1rem 1.5rem 1.35rem; position:relative; } .blog-ui .blog-filters__top{ display:flex; justify-content:flex-start; align-items:center; gap:1rem; flex-wrap:wrap; } .blog-ui .blog-filters__chips{ display:flex; flex-wrap:wrap; gap:.55rem; } .blog-ui .ws-chip{ color:var(--c-ink); } .blog-ui .ws-chip.is-active{ color:var(--chip-active-text); } @media (hover:hover) and (pointer:fine){ :where(.blog-ui) .ws-chip:hover{ transform:translateY(-2px) scale(1.01); box-shadow:var(--sh-2), 0 0 18px color-mix(in srgb, var(--accent) 35%, transparent); border-color:color-mix(in srgb, var(--accent) 55%, var(--c-overlay-18)); background:color-mix(in srgb, var(--accent) 14%, var(--c-panel-1)); filter:saturate(1.15); } :where(.blog-ui) .ws-chip:hover{ color:var(--c-ink); } :where(.blog-ui) .ws-chip.is-active:hover{ color:var(--chip-active-text); } } /* RESULTS */ .blog-ui .blog-results{ padding:1.2rem 1.5rem 3rem; position:relative; } .blog-ui .blog-results::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(to right, transparent, var(--c-overlay-22), transparent); opacity:.9; } :where(.blog-ui, .ws-post) .blog-results__grid{ margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1.35rem; } /* ============================================================ 5) COMPONENT: BLOG CARD (commune listing + related single) - IMPORTANT: on déduplique: .blog-card = .ws-neon-item ============================================================ */ /* “bridge” : si ton HTML n’a pas ws-neon-item, on le “map” */ :where(.blog-ui, .ws-post) .blog-card{ /* copie exacte de ws-neon-item sans exiger une classe extra */ position:relative; isolation:isolate; overflow:hidden; border-radius:1.75rem; border:1px solid var(--c-overlay-14); background:linear-gradient(180deg, var(--c-panel-1), var(--c-panel-2)); box-shadow:var(--sh-1); transform:translateZ(0); contain:content; will-change:transform; transition:transform var(--t), box-shadow var(--t), border-color var(--t), filter var(--t); height:100%; --mx:50%; --my:50%; } :where(.blog-ui, .ws-post) .blog-card::before{ content:""; position:absolute; inset:-2px; border-radius:inherit; padding:2px; background: conic-gradient( from var(--n-angle), transparent, color-mix(in srgb, var(--accent) 80%, transparent), color-mix(in srgb, var(--c-accent) 65%, transparent), color-mix(in srgb, var(--accent-700) 70%, transparent), color-mix(in srgb, var(--accent) 80%, transparent), transparent ); -webkit-mask:linear-gradient(var(--c-mask) 0 0) content-box, linear-gradient(var(--c-mask) 0 0); -webkit-mask-composite:xor; mask:linear-gradient(var(--c-mask) 0 0) content-box, linear-gradient(var(--c-mask) 0 0); mask-composite:exclude; opacity:.45; pointer-events:none; animation:neonSpin 2.8s linear infinite; filter:drop-shadow(0 0 14px color-mix(in srgb, var(--accent) 25%, transparent)); } :where(.blog-ui, .ws-post) .blog-card::after{ content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .25s ease; background: radial-gradient( 420px circle at var(--mx) var(--my), color-mix(in srgb, var(--accent) 35%, transparent), transparent 55% ); mix-blend-mode:screen; z-index:0; } :where(.blog-ui, .ws-post) .blog-card > *{ position:relative; z-index:2; } :where(.blog-ui, .ws-post) .blog-card__link{ display:flex; flex-direction:column; min-height:100%; height:100%; text-decoration:none; color:inherit; } /* Thumb */ :where(.blog-ui, .ws-post) .blog-card__thumb{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--c-overlay-05); border-bottom:1px solid var(--c-overlay-12); } :where(.blog-ui, .ws-post) .blog-card__thumb img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.001); transition:transform var(--t), filter var(--t); filter:saturate(1.02) contrast(1.02); } :where(.blog-ui, .ws-post) .blog-card__thumb::after{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 18% 22%, var(--c-overlay-12), transparent 55%), linear-gradient(to bottom, var(--c-shadow-05), var(--c-shadow-30)); opacity:.9; pointer-events:none; } :where(.blog-ui, .ws-post) .blog-card__thumb--placeholder{ aspect-ratio:16/9; display:grid; place-items:center; font-weight:950; color:var(--c-ink-75); letter-spacing:.1em; text-transform:uppercase; background: radial-gradient(circle at 20% 15%, color-mix(in srgb, var(--accent) 18%, var(--c-panel-1)), var(--c-panel-1) 55%), radial-gradient(circle at 80% 35%, color-mix(in srgb, var(--c-accent) 10%, transparent), transparent 55%); } /* Body: flex pour aligner CTA */ :where(.blog-ui, .ws-post) .blog-card__body{ padding:1.05rem 1.2rem 1.15rem; display:flex; flex-direction:column; gap:.6rem; flex:1 1 auto; min-height:0; } :where(.blog-ui, .ws-post) .blog-card__tags{ display:flex; flex-wrap:wrap; gap:.4rem; } :where(.blog-ui, .ws-post) .blog-card__title{ margin:0; font-size:1.08rem; font-weight:950; line-height:1.25; letter-spacing:-.03em; color:var(--c-ink); } :where(.blog-ui, .ws-post) .blog-card__excerpt{ margin:0; color:var(--c-muted); line-height:1.65; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; } /* CTA */ :where(.blog-ui, .ws-post) .blog-card__more{ display:inline-flex; align-items:center; gap:.55rem; padding:.62rem 1rem; border-radius:999px; font-weight:950; font-size:.86rem; letter-spacing:.06em; text-transform:uppercase; color:var(--c-surface); background:linear-gradient(135deg,var(--accent),var(--accent-700)); border:1px solid transparent; box-shadow:0 18px 56px color-mix(in srgb, var(--accent) 22%, transparent); transition:transform var(--t), box-shadow var(--t), filter var(--t); position:relative; overflow:hidden; align-self:flex-start; margin-top:auto; } :where(.blog-ui, .ws-post) .blog-card__more::after{ content:"→"; font-size:1.05rem; opacity:.95; transform:translateY(-.5px); transition:transform var(--t); } @media (hover:hover) and (pointer:fine){ :where(.blog-ui, .ws-post) .blog-card:hover{ box-shadow:var(--sh-3), 0 0 26px color-mix(in srgb, var(--accent) 22%, transparent); border-color:color-mix(in srgb, var(--accent) 55%, var(--c-overlay-18)); filter:saturate(1.18) contrast(1.04); transform: translateY(-10px) scale(1.02) rotateX(calc((50% - var(--my)) * 0.06)) rotateY(calc((var(--mx) - 50%) * 0.06)); } :where(.blog-ui, .ws-post) .blog-card:hover::before{ opacity:.85; } :where(.blog-ui, .ws-post) .blog-card:hover::after{ opacity:.9; } :where(.blog-ui, .ws-post) .blog-card:hover .blog-card__thumb img{ transform:scale(1.06); filter:saturate(1.12) contrast(1.06); } :where(.blog-ui, .ws-post) .blog-card:hover .blog-card__more{ transform:translateY(-2px) scale(1.03); box-shadow:0 30px 95px color-mix(in srgb, var(--accent) 34%, transparent), 0 0 22px color-mix(in srgb, var(--accent) 28%, transparent); filter:saturate(1.2) contrast(1.04); } :where(.blog-ui, .ws-post) .blog-card:hover .blog-card__more::after{ transform:translate(2px,-.5px); } } /* ============================================================ 6) PAGINATION (listing) ============================================================ */ .blog-ui .blog-results__pagination{ margin:2rem auto 0; } .blog-ui .blog-results__pagination .page-numbers{ display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 .85rem; margin:.2rem .2rem 0 0; border-radius:999px; text-decoration:none; font-weight:950; border:1px solid var(--c-overlay-14); background:var(--c-panel-1); box-shadow:var(--sh-1); color:var(--c-ink); transition:transform var(--t), box-shadow var(--t), border-color var(--t), filter var(--t); } .blog-ui .blog-results__pagination .page-numbers:hover{ transform:translateY(-2px); box-shadow:var(--sh-2), 0 0 18px color-mix(in srgb, var(--accent) 35%, transparent); border-color:color-mix(in srgb, var(--accent) 45%, var(--c-overlay-18)); filter:saturate(1.15); } .blog-ui .blog-results__pagination .page-numbers.current{ background:linear-gradient(135deg,var(--accent),var(--accent-700)); color:var(--c-ink-inverse); border-color:transparent; box-shadow:0 18px 56px color-mix(in srgb, var(--accent) 22%, transparent); } .theme-light.blog-ui .blog-results__pagination .page-numbers.current, .theme-light .blog-ui .blog-results__pagination .page-numbers.current{ color:var(--c-surface); } /* Empty + loading */ .blog-ui .blog-results__empty{ padding:2.1rem 2.2rem; } .blog-ui .blog-results__empty .btn{ display:inline-flex; align-items:center; justify-content:center; padding:1rem 1.35rem; border-radius:999px; font-weight:950; text-decoration:none; background:linear-gradient(135deg,var(--accent),var(--accent-700)); color:var(--c-ink-inverse); box-shadow:0 18px 56px color-mix(in srgb, var(--accent) 22%, transparent); } .blog-results__grid.is-loading{ opacity:.35; filter:blur(2px); pointer-events:none; }