@layer reset, tokens, base, layout, components, pages, utilities;
@layer components{.feed{position: relative;padding: var(--section-y) var(--pad-x);background: var(--dark-bg);color: var(--dark-fg);--line: var(--dark-line)}.feed-inner{display: grid;gap: var(--s-7)}.feed-head{display: flex;flex-wrap: wrap;align-items: end;justify-content: space-between;gap: var(--s-5)}.feed-head h2{max-width: 16ch}.feed-head > a{display: inline-flex;align-items: center;gap: 0.6rem;min-height: 3rem;padding: 0 1.4rem;border: 1.5px solid var(--dark-line);border-radius: var(--r-pill);text-decoration: none;font-weight: 600;font-size: var(--t-sm);transition: border-color var(--t-fast), background var(--t-fast)}.feed-head > a:hover{border-color: var(--dark-fg)}.feed-grid{display: grid;gap: var(--s-4);grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr))}.feed-card{position: relative;display: flex;flex-direction: column;overflow: hidden;border-radius: var(--r-lg);background: var(--encre-2);border: 1px solid var(--dark-line);transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out)}.feed-card:hover{border-color: rgba(247, 247, 245, 0.32);box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8)}.feed-card:has(a:focus-visible){outline: 3px solid #8AB4FF;outline-offset: 4px}.feed-card-media{aspect-ratio: 16 / 9;overflow: hidden;background: var(--tone, var(--encre-3))}.feed-card-media img, .feed-card-media svg{width: 100%;height: 100%;object-fit: cover}.feed-card-body{display: flex;flex-direction: column;gap: var(--s-3);flex: 1;padding: var(--s-5)}.feed-meta{display: flex;flex-wrap: wrap;align-items: center;gap: var(--s-2) var(--s-3);font-size: var(--t-xs);color: var(--dark-muted)}.feed-date{font-size: var(--t-xs);color: var(--dark-muted);font-variant-numeric: tabular-nums}.feed-tag{display: inline-flex;align-items: center;gap: 0.45rem;font-size: var(--t-xs);font-weight: 600;color: var(--dark-fg)}.feed-tag::before{content: "";width: 0.55rem;height: 0.55rem;border-radius: 50%;background: var(--tone-glow, var(--rose-lumiere))}.feed-title{font-family: var(--font-display);font-size: 1.3rem;font-weight: 500;line-height: 1.25;letter-spacing: -0.015em;text-wrap: balance}.feed-title a{text-decoration: none}.feed-title a::after{content: "";position: absolute;inset: 0;border-radius: inherit}.feed-title a:focus-visible{outline: none}.feed-arrow{display: grid;place-items: center;width: 2.5rem;height: 2.5rem;margin-top: auto;border-radius: 50%;border: 1.5px solid var(--dark-line);transition: background-color var(--dur-1) linear, color var(--dur-1) linear, border-color var(--dur-1) linear}.feed-arrow svg{width: 1rem;height: 1rem}.feed-card:hover .feed-arrow{background: var(--dark-fg);color: var(--dark-bg);border-color: var(--dark-fg)}.feed-tile{display: none;border-radius: var(--r-lg);overflow: hidden;min-height: 14rem}.feed-tile img{width: 100%;height: 100%;object-fit: cover}@media (min-width: 900px){.feed-tile{display: block}}}
@layer pages{.pub-cover{position: relative;overflow: hidden;display: flex;align-items: flex-end;background: var(--tone);color: #fff;aspect-ratio: 16 / 9;padding: var(--s-5)}.pub-cover::after{content: "";position: absolute;inset: 0;background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.45))}.pub-cover.tone-encre{background: #2A3038}.feed-card-media.pub-cover{aspect-ratio: 16 / 9}.pub-lang{display: inline-grid;place-items: center;min-width: 2rem;height: 1.35rem;padding: 0 0.4rem;border-radius: 4px;border: 1px solid currentColor;font-size: var(--t-xs);font-weight: 700;letter-spacing: 0.06em;opacity: 0.85}.pub-avatar{flex-shrink: 0;display: inline-grid;place-items: center;width: 1.9rem;height: 1.9rem;border-radius: 50%;background: var(--tone);color: #fff;font-size: var(--t-xs);font-weight: 700;letter-spacing: 0.02em}.pub-avatar.tone-encre{background: #2A3038}.pub-avatar.tone-magenta{background: var(--magenta-texte)}.pub-feature .pub-lang{color: var(--dark-fg)}.pub-feature-media.pub-cover{aspect-ratio: 16 / 10;padding: clamp(1.5rem, 1rem + 2vw, 3rem)}.feed-author{font-size: var(--t-sm);color: var(--dark-muted)}.feed-meta .pub-lang{color: var(--dark-fg)}.feed-intro{margin-top: var(--s-4);color: var(--dark-muted);max-width: 52ch}.feed-dek{display: none;color: var(--dark-muted);line-height: 1.55;max-width: 56ch}.article-related .feed-grid{grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr))}}
@layer pages{.pub-cover.has-img{padding: 0;background: var(--encre-3)}.pub-cover.has-img::after{display: none}.pub-cover.has-img picture, .pub-cover.has-img img{display: block;width: 100%;height: 100%}.pub-cover.has-img img{object-fit: cover}.pub-avatar.has-photo{padding: 0;overflow: hidden;background: var(--sable)}.pub-avatar.has-photo img{width: 100%;height: 100%;object-fit: cover;border-radius: 50%}a.sdg{text-decoration: none;transition: border-color var(--dur-1) linear, box-shadow var(--dur-2) var(--ease-out)}a.sdg:hover{border-color: var(--line-strong);box-shadow: var(--shadow-1)}a.sdg:focus-visible{outline: 3px solid var(--focus);outline-offset: 2px}.sdg-list{list-style: none;display: flex;flex-wrap: wrap;gap: var(--s-2)}.sdg{display: inline-flex;align-items: center;gap: 0.55rem;padding: 0.25rem 0.8rem 0.25rem 0.25rem;border: 1px solid var(--line);border-radius: var(--r-pill);font-size: var(--t-xs);font-weight: 600;color: var(--fg);background: var(--bg)}.sdg-num{display: inline-grid;place-items: center;min-width: 1.75rem;height: 1.75rem;border-radius: 50%;font-family: var(--font-display);font-size: 0.8125rem;font-weight: 700}.sdg-1 .sdg-num{background: #E5243B;color: #FFFFFF}.sdg-2 .sdg-num{background: #DDA63A;color: #0B0F13}.sdg-3 .sdg-num{background: #4C9F38;color: #0B0F13}.sdg-4 .sdg-num{background: #C5192D;color: #FFFFFF}.sdg-5 .sdg-num{background: #FF3A21;color: #0B0F13}.sdg-6 .sdg-num{background: #26BDE2;color: #0B0F13}.sdg-7 .sdg-num{background: #FCC30B;color: #0B0F13}.sdg-8 .sdg-num{background: #A21942;color: #FFFFFF}.sdg-9 .sdg-num{background: #FD6925;color: #0B0F13}.sdg-10 .sdg-num{background: #DD1367;color: #FFFFFF}.sdg-11 .sdg-num{background: #FD9D24;color: #0B0F13}.sdg-12 .sdg-num{background: #BF8B2E;color: #0B0F13}.sdg-13 .sdg-num{background: #3F7E44;color: #FFFFFF}.sdg-14 .sdg-num{background: #0A97D9;color: #0B0F13}.sdg-15 .sdg-num{background: #56C02B;color: #0B0F13}.sdg-16 .sdg-num{background: #00689D;color: #FFFFFF}.sdg-17 .sdg-num{background: #19486A;color: #FFFFFF}}
@layer pages{.ctb-mosaic .pub-avatar{width: 4.25rem;height: 4.25rem;font-size: 1rem;box-shadow: 0 0 0 4px var(--bg), var(--shadow-1)}.ctb-mosaic .pub-avatar:nth-child(5n+2), .ctb-mosaic .pub-avatar:nth-child(5n+4){translate: 0 2.55rem}.ctb-mosaic .pub-avatar:nth-child(3n){opacity: 0.88}.ctb-sdg-chips label .sdg-icon{width: 100%;height: 100%;display: block}.ctb-sdgs{list-style: none;display: flex;flex-wrap: nowrap;gap: 0.3rem;min-height: 1.9rem;overflow: hidden}.ctb-sdgs .sdg{padding: 0;border: 0;background: none}.ctb-sdgs .sdg-icon{width: 1.9rem;height: 1.9rem;border-radius: 5px;display: block}.sdg-more{display: grid;place-items: center;min-width: 1.9rem;height: 1.9rem;padding: 0 0.35rem;border-radius: 5px;background: var(--bg-alt);font-size: var(--t-xs);font-weight: 700;color: var(--fg-muted)}}
@layer pages{.sdg-icon{display: block;flex-shrink: 0;border-radius: 6px}.sdg-list .sdg{padding: 0.3rem 0.9rem 0.3rem 0.3rem;gap: 0.65rem;border-radius: var(--r-md)}.sdg-list .sdg-icon{width: 2.5rem;height: 2.5rem}.sdg-mini{gap: 0.5rem}.sdg-mini .sdg-icon{width: 3rem;height: 3rem;border-radius: 8px;transition: box-shadow var(--dur-2) var(--ease-out)}.sdg-mini .sdg:hover .sdg-icon{box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--line-strong)}}
@layer pages{.feed-grid, .page-lab .feed-grid, .article-related .feed-grid{grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr))}}
@layer pages{.feed-card{box-shadow: none}@media (hover: hover){.feed-card:hover{border-color: rgba(247, 247, 245, 0.24);box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8)}}}
@layer pages{.profile-avatar.pub-avatar{width: clamp(7rem, 5rem + 8vw, 11rem);height: clamp(7rem, 5rem + 8vw, 11rem);font-size: clamp(2rem, 1.5rem + 2vw, 3rem);box-shadow: 0 0 0 6px var(--bg), 0 0 0 8px color-mix(in srgb, var(--tone) 55%, transparent), var(--shadow-1)}.profile-other .pub-avatar{width: 3rem;height: 3rem;font-size: 0.9rem}}
@layer pages{.profile-pubs--liste .feed-head h2{font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);letter-spacing: -0.04em;line-height: 1}}