/*
 * Final-v28 surfaces ownership module.
 * Writer scope: page canvas, section rhythm, borders, radii and surface alternation only.
 */

:root {
  --surface-canvas: #fffefa;
  --surface-base: #fffefa;
  --surface-elevated: #ffffff;
  --surface-soft: #f7f6f3;
  --site-frame-inset: 32px;
  --site-frame-margin: 16px;
  --site-frame-radius: 15px;
  --site-frame-shadow: 0 18px 52px rgba(23, 43, 78, 0.08);
  --surface-space-section: 60px;
  --surface-space-compact: 48px;
}

html body:has(#app > .site) {
  background-color: var(--surface-canvas);
}

#app > .site {
  width: min(1420px, calc(100% - var(--site-frame-inset)));
  min-height: 0;
  margin: var(--site-frame-margin) auto;
  overflow: clip;
  border: 1px solid var(--surface-line);
  border-radius: var(--site-frame-radius);
  background-color: var(--surface-base);
  box-shadow: var(--site-frame-shadow);
}

#app > .site > .topbar,
#app > .site > main {
  background-color: var(--surface-base);
}

#app > .site > .topbar > .nav {
  border-bottom-color: var(--surface-line);
  background-color: var(--surface-elevated);
}

#app > .site > main > :where(section, article, div) {
  background-color: var(--surface-base);
}

#app > .site > main > :where(section, article, div) + :where(section, article, div) {
  border-top: 1px solid var(--surface-line);
}

/* Bandes structurelles : un seul ivoire chaud sur toutes les familles de
   pages. Les cartes et champs conservent leur surface élevée pour le relief. */
#app > .site.page-about .about-hero,
#app > .site:is(
  .page-legal,
  .page-privacy,
  .page-cookies,
  .page-terms,
  .page-accessibility
) :is(.legal-hero-v28, .legal-content-v28) {
  background-color: var(--surface-base);
}

#app > .site.page-home > main > .section:not(.compact),
#app > .site:is(
  .page-sante,
  .page-logement,
  .page-automobile,
  .page-aides,
  .page-permis,
  .page-prevoyance
) > main > .section {
  padding-block: var(--surface-space-section);
}

#app > .site.page-home > main > .section.compact,
#app > .site.page-arrivee-en-suisse > main > .arrival-content-section {
  padding-block: var(--surface-space-compact);
}

#app > .site.page-home > main > div > .profile-band {
  padding-block: 56px;
  background-color: var(--surface-base);
}

#app > .site.page-preparer-votre-arrivee > main > .pva-themes {
  padding-block: 56px;
}

#app > .site.page-preparer-votre-arrivee > main > :where(.pva-guide) {
  padding-bottom: 56px;
}

#app > .site.page-avant-le-depart > main > .before-departure-content {
  padding-bottom: 64px;
}

#app > .site.page-guide > main > .guide-summary-section {
  padding-block: var(--surface-space-section);
}

#app > .site.page-guide > main > .guide-final-cta-section {
  padding-bottom: var(--surface-space-section);
}

#app > .site.page-about > main > .about-method {
  padding-block: var(--surface-space-section);
}

#app > .site.page-about > main > .about-audiences {
  padding-bottom: var(--surface-space-section);
}

#app > .site.page-outils-pratiques > main > :where(.tools-library-section, .tools-guide-section),
#app > .site.page-glossaire > main > .glossary-section {
  padding-bottom: 56px;
}

#app > .site:is(
  .page-legal,
  .page-privacy,
  .page-cookies,
  .page-terms,
  .page-accessibility
) > main > .legal-content-v28 {
  padding-block: var(--surface-space-section);
}

#app > .site > .unified-footer {
  border-top-color: var(--surface-line);
  background-color: var(--surface-elevated);
}

@media (max-width: 1050px) {
  :root {
    --site-frame-inset: 24px;
    --site-frame-margin: 12px;
    --surface-space-section: 48px;
    --surface-space-compact: 42px;
  }

  #app > .site.page-home > main > div > .profile-band {
    padding-block: 46px;
  }

  #app > .site.page-preparer-votre-arrivee > main > .pva-themes {
    padding-block: 48px;
  }

  #app > .site.page-preparer-votre-arrivee > main > :where(.pva-guide) {
    padding-bottom: 48px;
  }

  #app > .site.page-avant-le-depart > main > .before-departure-content {
    padding-bottom: 48px;
  }

  #app > .site.page-outils-pratiques > main > :where(.tools-library-section, .tools-guide-section),
  #app > .site.page-glossaire > main > .glossary-section {
    padding-bottom: 48px;
  }
}

@media (max-width: 620px) {
  :root {
    --site-frame-inset: 16px;
    --site-frame-margin: 8px;
    --site-frame-radius: 12px;
    --surface-space-section: 36px;
    --surface-space-compact: 32px;
  }

  #app > .site.page-home > main > .section.compact {
    padding-block: 28px;
  }

  #app > .site.page-aides {
    width: calc(100% - var(--site-frame-inset));
    margin: var(--site-frame-margin) auto;
  }

  #app > .site.page-home > main > div > .profile-band {
    padding-block: 36px;
  }

  #app > .site.page-preparer-votre-arrivee > main > .pva-themes {
    padding-block: 40px;
  }

  #app > .site.page-preparer-votre-arrivee > main > :where(.pva-guide),
  #app > .site.page-avant-le-depart > main > .before-departure-content,
  #app > .site.page-outils-pratiques > main > :where(.tools-library-section, .tools-guide-section),
  #app > .site.page-glossaire > main > .glossary-section {
    padding-bottom: 40px;
  }
}