/* Styles pour les pages lisibles sans JavaScript : le contenu statique de
   l'accueil (.nojs-home, remplacé au montage de React, voir index.html) et
   les pages à vraie URL (.static-page : guides, confidentialité, mentions
   légales). Classes préfixées pour ne jamais entrer en collision avec les
   classes Tailwind de l'app (index.css, chargé par React, prend le dessus
   dès que le JS tourne). Variables et couleurs alignées sur src/index.css. */

:root {
  color-scheme: light dark;
  --sp-navy: #16324f;
  --sp-on-navy: #f7f9fb;
  --sp-on-navy-muted: #c7d3de;
  --sp-teal: #2f5c5b;
  --sp-paper: #f2f4f7;
  --sp-surface: #ffffff;
  --sp-border: #dce2ea;
  --sp-text: #16202c;
  --sp-text-soft: #57657a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sp-navy: #102338;
    --sp-on-navy: #ecf0f4;
    --sp-on-navy-muted: #b8c6d4;
    --sp-teal: #8fd0ce;
    --sp-paper: #0e1824;
    --sp-surface: #173044;
    --sp-border: #2c4a63;
    --sp-text: #ecf0f4;
    --sp-text-soft: #c5d0db;
  }
}

:root[data-theme='dark'] {
  --sp-navy: #102338;
  --sp-on-navy: #ecf0f4;
  --sp-on-navy-muted: #b8c6d4;
  --sp-teal: #8fd0ce;
  --sp-paper: #0e1824;
  --sp-surface: #173044;
  --sp-border: #2c4a63;
  --sp-text: #ecf0f4;
  --sp-text-soft: #c5d0db;
}

:root[data-theme='light'] {
  --sp-navy: #16324f;
  --sp-on-navy: #f7f9fb;
  --sp-on-navy-muted: #c7d3de;
  --sp-teal: #2f5c5b;
  --sp-paper: #f2f4f7;
  --sp-surface: #ffffff;
  --sp-border: #dce2ea;
  --sp-text: #16202c;
  --sp-text-soft: #57657a;
}

.nojs-home,
.static-page {
  font-family:
    'Hanken Grotesk Variable',
    ui-sans-serif,
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    sans-serif;
  color: var(--sp-text);
  background: var(--sp-paper);
}

.static-page {
  min-height: 100dvh;
}

.nojs-home__hero,
.sp-header {
  background: var(--sp-navy);
  color: var(--sp-on-navy);
  padding: max(1.25rem, env(safe-area-inset-top)) 1.25rem 1.5rem;
}

.sp-header {
  padding-bottom: 1.25rem;
}

.nojs-home__brand,
.sp-brand {
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: inherit;
}

.sp-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--sp-on-navy-muted);
  text-decoration: none;
}
.sp-back:hover {
  color: var(--sp-on-navy);
}

.nojs-home__title,
.sp-header h1 {
  margin: 0.6rem 0 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(1.75rem, 6vw, 2.5rem);
}

.nojs-home__lede {
  margin: 0.75rem 0 0;
  max-width: 40ch;
  color: var(--sp-on-navy-muted);
  font-size: 1rem;
}

.nojs-home__promises {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.nojs-home__promises li {
  font-weight: 600;
  font-size: 0.95rem;
}
.nojs-home__promises li span {
  display: block;
  font-weight: 400;
  color: var(--sp-on-navy-muted);
  font-size: 0.85rem;
}

.nojs-home__body,
.sp-main {
  max-width: 42rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}

.sp-main {
  padding-top: 2rem;
  width: 100%;
  box-sizing: border-box;
}

.nojs-home__body h2,
.sp-main h2 {
  font-size: 1.1rem;
  font-weight: 800;
  margin: 1.75rem 0 0.5rem;
  color: var(--sp-navy);
}
:root[data-theme='dark'] .nojs-home__body h2,
:root[data-theme='dark'] .sp-main h2 {
  color: var(--sp-on-navy);
}
@media (prefers-color-scheme: dark) {
  .nojs-home__body h2,
  .sp-main h2 {
    color: var(--sp-on-navy);
  }
}
:root[data-theme='light'] .nojs-home__body h2,
:root[data-theme='light'] .sp-main h2 {
  color: var(--sp-navy);
}

.sp-main p,
.sp-main li {
  line-height: 1.6;
  font-size: 0.95rem;
}
.sp-main p {
  margin: 0.6rem 0;
}
.sp-main ul,
.sp-main ol {
  padding-left: 1.25rem;
  margin: 0.6rem 0;
}
.sp-main li + li {
  margin-top: 0.35rem;
}
.sp-main a {
  color: var(--sp-teal);
  font-weight: 600;
}
.sp-main strong {
  font-weight: 700;
}
.sp-muted {
  color: var(--sp-text-soft);
  font-size: 0.85rem;
}

.sp-rule {
  border: 1px solid var(--sp-border);
  background: var(--sp-surface);
  border-radius: 16px;
  padding: 1rem 1.1rem;
  margin: 1rem 0;
}
.sp-rule p {
  margin: 0.3rem 0;
}
.sp-rule cite {
  display: inline-block;
  margin-top: 0.4rem;
  font-style: normal;
  font-size: 0.8rem;
}

details.sp-faq,
details.nojs-home__faq {
  border-top: 1px solid var(--sp-border);
  padding: 0.75rem 0;
}
details.sp-faq summary,
details.nojs-home__faq summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.95rem;
}
details.sp-faq p,
details.nojs-home__faq p {
  margin: 0.5rem 0 0;
  color: var(--sp-text-soft);
  font-size: 0.9rem;
  line-height: 1.55;
}

.sp-footer,
.nojs-home__footer {
  border-top: 1px solid var(--sp-border);
  margin-top: 2rem;
  padding-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
}
.sp-footer a,
.nojs-home__footer a {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--sp-text-soft);
  text-decoration: none;
}
.sp-footer a:hover,
.nojs-home__footer a:hover {
  color: var(--sp-teal);
  text-decoration: underline;
}

.sp-legal {
  margin-top: 0.6rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--sp-text-soft);
}
.sp-legal a {
  color: var(--sp-text-soft);
  font-weight: 600;
  text-decoration: underline;
}
.sp-legal a:hover {
  color: var(--sp-teal);
}

.sp-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: 14px;
  background: var(--sp-navy);
  color: var(--sp-on-navy);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}