.article-hero{position:relative;background:var(--bg-secondary);padding:calc(var(--nav-height) + 56px) 0 48px}.article-hero::after{content:"";position:absolute;inset:auto 0 0;height:2px;background:var(--gradient-brand)}.article-hero .container{max-width:820px}.article-back{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-sm);font-weight:500;color:var(--text-secondary);text-decoration:none;margin-bottom:28px;transition:color .2s var(--transition)}.article-back:hover{color:var(--primary)}.article-kicker{display:flex;align-items:center;gap:10px;margin:0 0 16px;font-size:var(--text-xs);font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-secondary)}.article-kicker-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;border-radius:var(--radius-sm);background:var(--gradient-brand);color:var(--white);box-shadow:var(--shadow-sm)}.article-hero--tresorerie-finances .article-kicker-icon{background:linear-gradient(135deg, var(--primary), var(--brand-dark))}.article-hero--pedagogie-suivi .article-kicker-icon{background:linear-gradient(135deg, var(--secondary), var(--secondary-dark))}.article-hero--familles-communication .article-kicker-icon{background:var(--gradient-brand)}.article-hero--organisation-vie-scolaire .article-kicker-icon{background:linear-gradient(135deg, var(--brand-dark), var(--secondary-dark))}.article-hero h1{font-size:clamp(1.75rem,1.2rem + 2.2vw,2.7rem);line-height:1.15;letter-spacing:-0.025em;margin-bottom:16px}.article-lead{font-size:var(--text-lg);line-height:1.6;color:var(--text-secondary);margin-bottom:24px}.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:var(--text-sm);color:var(--text-secondary);margin:0}.article-meta-sep{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6}.article-body{max-width:70ch;margin:56px auto 0;font-size:var(--text-base);line-height:1.8;color:var(--text-primary)}.article-body p{margin:0 0 1.3em}.article-body h2{font-size:clamp(1.3rem,1.1rem + .8vw,1.6rem);line-height:1.3;letter-spacing:-0.015em;margin:2.1em 0 .7em}.article-body h3{font-size:1.15rem;line-height:1.35;margin:1.8em 0 .6em}.article-body ul,.article-body ol{margin:0 0 1.3em;padding-left:1.5em}.article-body li{margin-bottom:.5em}.article-body li::marker{color:var(--primary)}.article-body blockquote{margin:1.6em 0;padding:4px 0 4px 20px;border-left:3px solid var(--primary);color:var(--text-secondary)}.article-body blockquote p:last-child{margin-bottom:0}.article-body strong{font-weight:600}.article-end{max-width:70ch;margin:48px auto 0;display:grid;gap:28px;background:none;border-top:0;padding:0}.article-end::before{content:none}.article-tags{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding-top:28px;border-top:1px solid var(--hairline)}.article-tags-label{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary)}.article-tags-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}.article-tag{background:var(--white);border:1px solid var(--hairline-strong);color:var(--text-secondary);font-size:var(--text-xs);font-weight:500;padding:4px 12px;border-radius:var(--radius-pill);white-space:nowrap}.article-continue{position:relative;overflow:hidden;background:var(--white);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:26px 28px;box-shadow:var(--shadow-sm)}.article-continue::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--gradient-brand)}.article-continue-title{font-size:var(--text-base);font-weight:600;color:var(--text-primary);margin:0 0 6px}.article-continue-text{font-size:var(--text-sm);line-height:1.6;color:var(--text-secondary);margin:0 0 20px}.article-continue-links{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}.article-return{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-sm);font-weight:500;color:var(--text-secondary);text-decoration:none;transition:color .2s var(--transition)}.article-return:hover{color:var(--primary)}.article-page .newsletter-section{margin-top:72px}@media(max-width: 768px){.article-hero{padding-top:calc(var(--nav-height) + 32px);padding-bottom:36px}.article-body{margin-top:40px}.article-continue{padding:22px 20px}}@media(pointer: coarse){.article-back,.article-return{min-height:44px}}@media(prefers-reduced-motion: reduce){.article-back,.article-return{transition:none}}