/* Pages de conseils publiques (/conseils) : mêmes couleurs que l'écran d'arrivée, lisibles sans l'application. */
:root { color-scheme: light; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #2a2140; background: #f7f4fb; }
* { box-sizing: border-box; }
body { margin: 0; line-height: 1.6; }
a { color: #5b3f8f; text-underline-offset: .2em; }
a:focus-visible { outline: 3px solid #ffd166; outline-offset: 3px; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: linear-gradient(175deg, #241a33, #3b2a55); }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; text-decoration: none; }
.brand img { border-radius: 8px; }
.top-cta { background: #ffd166; color: #30243d; font-weight: 700; padding: 8px 16px; border-radius: 999px; text-decoration: none; white-space: nowrap; }
main { max-width: 760px; margin: 0 auto; padding: 24px 16px 40px; }
.crumbs { font-size: .9rem; color: #6d6380; }
h1 { font-size: clamp(1.7rem, 5.5vw, 2.5rem); line-height: 1.15; letter-spacing: -.02em; margin: 16px 0 12px; }
h2 { font-size: 1.25rem; line-height: 1.3; margin: 0 0 12px; }
h3 { font-size: 1rem; margin: 0 0 6px; color: #5b3f8f; }
.lede { font-size: 1.12rem; color: #4a4060; }
section { margin: 20px 0; padding: 20px; background: #fff; border: 1px solid #e6def1; border-radius: 20px; }
.age + .age { margin-top: 16px; padding-top: 16px; border-top: 1px solid #efe9f6; }
.age p { margin: 4px 0; }
.say { background: #f1ecf7; padding: 8px 12px; border-radius: 12px; }
.now .do { background: #fff6d6; padding: 8px 12px; border-radius: 12px; }
.cta { background: linear-gradient(175deg, #3b2a55, #5b4380); color: #fff; border: 0; }
.cta .button { display: inline-block; margin: 8px 0; background: #ffd166; color: #30243d; font-weight: 700; padding: 12px 22px; border-radius: 999px; text-decoration: none; }
.cta .small { font-size: .9rem; opacity: .85; margin: 4px 0 0; }
.help { background: #fff6d6; border-color: #f3df9f; }
.list { list-style: none; padding: 0; margin: 0; }
.list li + li { margin-top: 12px; }
.list a { display: block; padding: 16px; background: #fff; border: 1px solid #e6def1; border-radius: 16px; text-decoration: none; color: inherit; }
.list span { display: block; margin-top: 4px; color: #6d6380; font-size: .95rem; }
.others li + li { margin-top: 6px; }
footer { max-width: 760px; margin: 0 auto; padding: 0 16px 40px; font-size: .9rem; color: #6d6380; }
@media (max-width: 420px) { section { padding: 16px; } .top-cta { padding: 8px 12px; font-size: .9rem; } }