/* Page d'accueil Cauta — s'appuie sur cauta-base.css (tokens + composants .ca-) */

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: var(--paper); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); z-index: 10; }
.skip:focus { left: var(--space-4); }

.wrap { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-12); }

/* En-tête */
.top { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); min-height: 80px; }
.brand { display: block; line-height: 0; }
.brand img { height: 44px; width: auto; }
.nav { display: flex; align-items: center; gap: var(--space-6); }
.nav a { font: 600 15px/1.3 var(--font-body); color: var(--ink-muted); text-decoration: none; padding: var(--space-2) 0; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--ink); border-bottom-color: var(--accent); }

/* Hero */
.hero { padding: var(--space-16) 0 var(--space-16); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-16); align-items: center; }
.hero h1 { font-size: 52px; line-height: 1.08; font-weight: 700; letter-spacing: -0.025em; max-width: 14ch; }
.lead { margin-top: var(--space-6); font-size: 19px; line-height: 1.55; color: var(--ink-muted); max-width: 36ch; }
.cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.legal { margin-top: var(--space-6); font: 400 13px/1.5 var(--font-body); color: var(--ink-muted); max-width: 52ch; }

/* Bloc « Votre dossier » (cadre de contrôle actif) */
.dossier.ca-frame { padding: var(--space-6); }
.dossier .ca-doclist { border-top: 1px solid var(--line); }
.dossier .ca-doc-title { font-size: 15px; }
.exemple { margin-top: var(--space-3); font: 400 12px/1.45 var(--font-body); color: var(--ink-muted); }

/* Sections */
.section { padding: var(--space-16) 0; border-top: 1px solid var(--line); }
.section.alt { background: var(--chalk); border-top-color: transparent; }
.eyebrow { font: 600 12px/1.4 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--space-3); }
.section h2 { font-size: 32px; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; max-width: 24ch; }
.intro { margin-top: var(--space-4); color: var(--ink-muted); font-size: 17px; max-width: var(--measure); }

.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-12); }
.cols .ca-card { display: flex; flex-direction: column; gap: var(--space-3); }
.cols .ca-card p { color: var(--ink-muted); }
.num { font: 500 13px/1.4 var(--font-mono); color: var(--ink-muted); }
.alt .ca-card { background: var(--surface); }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); align-items: start; }
.split .prose p + p { margin-top: var(--space-4); }
.prose p { max-width: var(--measure); }
.prose .ca-muted { font-size: 17px; }

.steps { margin: var(--space-8) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.steps strong { font: 600 17px/1.35 var(--font-display); display: block; margin-bottom: 2px; }
.steps span { color: var(--ink-muted); }

/* Réponse sourcée */
.copilote { display: flex; flex-direction: column; gap: var(--space-3); }
.copilote .q { color: var(--ink-muted); font-weight: 600; }

/* Statuts */
.statuts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }

/* Bandeau final */
.final { padding: var(--space-16) 0; background: var(--ink); color: var(--paper); }
:root[data-theme="dark"] .final { background: var(--chalk); color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .final { background: var(--chalk); color: var(--ink); } }
.final h2 { color: inherit; font-size: 32px; line-height: 1.15; max-width: 22ch; }
.final p { margin-top: var(--space-4); max-width: var(--measure); opacity: .85; }
.final .cta .ca-btn-secondary { color: inherit; border-color: currentColor; }
.final .cta .ca-btn-secondary:hover { background: transparent; border-color: var(--accent); }

/* Pied de page */
.foot { padding: var(--space-8) 0 var(--space-12); font: 400 13px/1.55 var(--font-body); color: var(--ink-muted); }
.foot .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6); align-items: end; }
.foot img { height: 32px; width: auto; display: block; margin-bottom: var(--space-3); }
.foot .nom { color: var(--ink); font-weight: 600; }

@media (max-width: 960px) {
  .wrap { padding: 0 var(--space-6); }
  .hero { padding: var(--space-12) 0; }
  .hero .wrap, .split { grid-template-columns: 1fr; gap: var(--space-12); }
  .hero h1 { font-size: 40px; }
  .cols { grid-template-columns: 1fr; }
  .nav { gap: var(--space-4); }
}
@media (max-width: 560px) {
  .wrap { padding: 0 var(--space-4); }
  .top .wrap { min-height: 64px; }
  .brand img { height: 36px; }
  .nav a:nth-child(n+3) { display: none; }
  .hero h1 { font-size: 34px; }
  .lead { font-size: 17px; }
  .section h2, .final h2 { font-size: 26px; }
  .section, .final { padding: var(--space-12) 0; }
  .cta .ca-btn { width: 100%; }
  .foot .wrap { grid-template-columns: 1fr; }
  .ca-doc { grid-template-columns: 20px minmax(0, 1fr); }
  .ca-doc .ca-status { grid-column: 2; justify-self: start; }
}