/* Pages juridiques (CGU, confidentialité) : pleine largeur, sommaire collant, articles numérotés qui se révèlent au défilement. */
.legal-prog { position: fixed; top: 0; left: 0; z-index: 3000; height: 3px; width: 0; background: var(--primary-color, #4c8dff); pointer-events: none; }

body.legal-page .page-content.layout-toc { max-width: none; width: 100%; box-sizing: border-box; margin: 0; padding-left: clamp(1rem, 4vw, 3.5rem); padding-right: clamp(1rem, 4vw, 3.5rem); display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
body.legal-page .legal-main { max-width: none; width: 100%; min-width: 0; }

/* En-tête */
body.legal-page .page-header { margin: 0 0 2rem; padding: clamp(1.4rem, 3vw, 2.4rem); text-align: left; border-radius: 30px; background: var(--background-secondary); box-shadow: inset 0 0 0 1px var(--border-color); position: relative; overflow: hidden; }
body.legal-page .page-header::before { content: ''; position: absolute; inset: -40% -10% auto auto; width: 60%; height: 150%; background: radial-gradient(closest-side, rgba(76, 141, 255, .22), transparent); pointer-events: none; }
body.legal-page .page-title { position: relative; margin: 0 0 .6rem; font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 900; letter-spacing: -.03em; line-height: 1.05; text-align: left; }
body.legal-page .page-subtitle { position: relative; margin: 0 0 1.2rem; color: var(--text-secondary); text-align: left; }
.legal-switch { position: relative; display: inline-flex; gap: .2rem; padding: .3rem; border-radius: 999px; background: var(--background-primary); box-shadow: inset 0 0 0 1px var(--border-color); }
.legal-switch a { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1.1rem; border-radius: 999px; color: var(--text-secondary); font-weight: 600; font-size: .9rem; text-decoration: none; transition: color .25s, background .3s; }
.legal-switch a:hover { color: var(--text-primary); }
.legal-switch a.on { background: var(--primary-color); color: #fff; box-shadow: 0 6px 18px -6px rgba(76, 141, 255, .7); }
.legal-switch .material-symbols-outlined { font-size: 1.1rem; }

/* Sommaire */
body.legal-page .legal-toc { counter-reset: toc; top: calc(var(--nav-height, 64px) + 1.2rem); padding: 1rem; border-radius: 26px; background: var(--background-secondary); border: 0; box-shadow: inset 0 0 0 1px var(--border-color); max-height: calc(100vh - var(--nav-height, 64px) - 3rem); overflow-y: auto; }
body.legal-page .legal-toc-title { padding: .2rem .7rem .7rem; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary); }
body.legal-page .legal-toc a { counter-increment: toc; display: flex; align-items: center; gap: .7rem; margin: 0; padding: .6rem .7rem; border: 0; border-radius: 16px; color: var(--text-secondary); font-size: .88rem; font-weight: 600; transition: background .25s, color .25s, transform .35s cubic-bezier(.16, 1, .3, 1); }
body.legal-page .legal-toc a::before { content: counter(toc); flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; background: var(--background-primary); font-size: .76rem; font-weight: 800; transition: background .25s, color .25s; }
body.legal-page .legal-toc a:hover { color: var(--text-primary); transform: translateX(3px); }
body.legal-page .legal-toc a.active { background: rgba(76, 141, 255, .14); color: var(--text-primary); }
body.legal-page .legal-toc a.active::before { background: var(--primary-color); color: #fff; }

/* Articles */
body.legal-page .legal-main { counter-reset: art; }
body.legal-page .legal-article { counter-increment: art; position: relative; margin: 0 0 1rem; padding: clamp(1.2rem, 2.5vw, 1.8rem) clamp(1.2rem, 2.5vw, 2rem) clamp(1.2rem, 2.5vw, 1.8rem) clamp(3.6rem, 6vw, 5rem); border: 0; border-radius: 26px; background: var(--background-secondary); box-shadow: inset 0 0 0 1px var(--border-color); scroll-margin-top: calc(var(--nav-height, 64px) + 1.2rem); }
body.legal-page .legal-article::before { content: counter(art); position: absolute; left: clamp(.9rem, 2vw, 1.4rem); top: clamp(1.2rem, 2.5vw, 1.7rem); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; background: rgba(76, 141, 255, .16); color: #8fc1ff; font-weight: 800; }
body.legal-page .legal-article h3 { margin: 0 0 .6rem; font-size: 1.2rem; font-weight: 800; letter-spacing: -.015em; }
body.legal-page .legal-article p, body.legal-page .legal-article li { color: var(--text-secondary); line-height: 1.75; }
body.legal-page .legal-article ul { margin: .6rem 0 0; padding-left: 1.2rem; }

/* Révélation douce : seulement si le script a tourné, sinon tout reste visible */
html.legal-js body.legal-page .legal-article { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .7s cubic-bezier(.16, 1, .3, 1); }
html.legal-js body.legal-page .legal-article.vu { opacity: 1; transform: none; }

@media (max-width: 900px) {
    body.legal-page .page-content.layout-toc { grid-template-columns: minmax(0, 1fr); }
    body.legal-page .legal-toc { position: static; max-height: none; display: flex; gap: .3rem; overflow-x: auto; padding: .5rem; border-radius: 22px; }
    body.legal-page .legal-toc-title { display: none; }
    body.legal-page .legal-toc a { flex: none; white-space: nowrap; }
    body.legal-page .legal-article { padding-left: clamp(3.4rem, 14vw, 4rem); }
}
@media (prefers-reduced-motion: reduce) { html.legal-js body.legal-page .legal-article { opacity: 1; transform: none; transition: none; } }
body.legal-page .page-title { display: block; }