/* ========================================================= ViralMap — pages légales (s'appuie sur styles.css) ========================================================= */ .legal-nav { position: sticky; top: 0; z-index: 50; background: rgba(7,7,10,.8); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); } .legal-nav__inner { max-width: 960px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 16px; } .legal-back { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); } .legal-back:hover { color: var(--text); } .lang { position: relative; display: flex; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.05); box-shadow: 0 0 0 1px var(--line) inset; } .lang button { position: relative; z-index: 1; height: 34px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--muted); transition: color .25s; } html:not([lang="en"]) .lang [data-set-lang="fr"], html[lang="en"] .lang [data-set-lang="en"] { color: #fff; background: var(--red); box-shadow: 0 6px 18px -8px rgba(255,45,61,.9); } .legal { position: relative; max-width: 960px; margin: 0 auto; padding: 72px 24px 96px; } .legal::before { content: ""; position: absolute; left: 50%; top: -120px; width: 900px; height: 420px; transform: translateX(-50%); z-index: -1; background: radial-gradient(50% 50% at 50% 50%, rgba(255,45,61,.22), transparent 70%); filter: blur(20px); pointer-events: none; } .legal__head { margin-bottom: 40px; } .legal__head h1 { font-size: clamp(38px, 6vw, 64px); letter-spacing: -0.045em; } .legal__meta { margin-top: 14px; color: var(--muted); font-size: 14.5px; } .legal__body { display: grid; gap: 14px; } .legal__section { scroll-margin-top: 90px; padding: 26px 28px; border-radius: 20px; background: linear-gradient(180deg, var(--card-2), var(--card)); box-shadow: 0 0 0 1px var(--line) inset; } .legal__section h2 { display: flex; align-items: center; gap: 12px; font-size: 21px; letter-spacing: -0.02em; margin-bottom: 14px; } .legal__section h2 span { font: 500 12px var(--mono); color: var(--red); letter-spacing: .08em; } .legal__section p, .legal__section li { color: #cfcfd8; font-size: 15.5px; line-height: 1.65; } .legal__section p + p, .legal__section p + ul, .legal__section ul + p { margin-top: 10px; } .legal__section ul { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 4px; } .legal__section li::marker { color: var(--red); } .legal__section b { color: var(--text); font-weight: 600; } .legal__section a { color: #ff8a93; text-decoration: underline; text-underline-offset: 3px; } .legal__card { display: grid; gap: 2px; padding: 16px 18px; margin-top: 4px; border-radius: 14px; background: rgba(255,255,255,.03); box-shadow: 0 0 0 1px var(--line) inset; } .legal__card p { margin: 0 !important; } /* Langue affichée : pilotée par (voir legal.js). Pendant la détection par pays, on masque le contenu. */ html:not([lang="en"]) [data-lang-block="en"], html[lang="en"] [data-lang-block="fr"] { display: none !important; } html[data-lang-pending] .legal, html[data-lang-pending] .footer, html[data-lang-pending] .legal-back { visibility: hidden; } @media (max-width: 640px) { .legal { padding: 48px 16px 72px; } .legal-nav__inner { padding: 12px 16px; gap: 10px; } .legal-back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* flèche seule à l'écran, texte gardé pour les lecteurs d'écran */ .legal__section { padding: 20px 18px; } .lang button { padding: 0 11px; } } .legal ~ .footer { padding-top: 0; } .legal-foot { display: grid; gap: 10px; justify-items: center; text-align: center; margin-top: 0; border-top: 0; padding-top: 28px; } .legal-foot a { color: var(--muted); transition: color .2s; } .legal-foot a:hover { color: var(--text); }