/* Couche site : rend fluides les maquettes dessinées en 1440 px. */

:root { --pad: 120px; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--surface-000);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: clip;
}

.page > section,
.page > div { flex-shrink: 0; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 12px 20px;
  background: var(--surface-inverse);
  color: var(--ink-inverse);
  border-radius: 0 0 var(--radius-md) 0;
  text-decoration: none;
}
.skip:focus { left: 0; }

/* ---------- tablette ---------- */

@media (max-width: 1180px) {
  :root { --pad: 64px; }
  .llx-navbar-links { display: none; }
  .llx-flow-q { font-size: 36px; line-height: 42px; }
}

@media (max-width: 980px) {
  [style*="display: grid"],
  .ct-grid, .ab-hero, .pf-hero, .cols, .pf-modes, .ct-steps {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 40px !important;
  }
  [style*="position: sticky; top: 128px"] { position: static !important; }
  .ab-hero { gap: 48px !important; }
  .ab-portrait { max-width: 430px; }
  .pf-kpi { text-align: left; }
  .llx-wg-row { grid-template-columns: 40px minmax(0, 1fr) 24px; row-gap: 6px; }
  .llx-wg-kind, .llx-wg-meta { grid-column: 2; font-size: 13px; }
  .llx-wg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .llx-wg-col[data-col="1"],
  .llx-wg-col[data-col="2"],
  .llx-wg-col[data-col="3"] { padding-top: 0; }
  .llx-menu-row a { font-size: 44px; line-height: 54px; }
}

/* ---------- téléphone ---------- */

@media (max-width: 720px) {
  :root { --pad: 20px; }

  /* le hero de l'accueil se cale sur son contenu */
  .page > section[style*="min-height: 760px"] { min-height: 78vh !important; }
  .page > section[style*="min-height: 760px"] > div[style*="min-height: 760px"] {
    min-height: 78vh !important;
    padding-top: 96px !important;
    padding-bottom: 56px !important;
  }
  .page > section[style*="min-height: 760px"] h1 {
    font-size: 48px !important;
    line-height: 50px !important;
  }

  .llx-title-hero, .ab-name, .ct-title { font-size: 40px !important; line-height: 42px !important; }
  .llx-title-xl { font-size: 34px !important; line-height: 38px !important; }
  .llx-title-lg { font-size: 28px !important; line-height: 34px !important; }
  .llx-flow-q { font-size: 28px; line-height: 34px; }
  .llx-flow { padding: 24px 20px; min-height: 0; }

  .llx-navbar-role { display: none; }
  .llx-navbar-end .llx-btn-primary,
  .llx-navbar-end .llx-btn-secondary { display: none; }
  .llx-menu-row a { font-size: 34px; line-height: 44px; }
  .llx-menu-foot { flex-direction: column; align-items: flex-start; gap: 20px; }

  .llx-wg-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .llx-wg-title { font-size: 24px; line-height: 30px; }
  .llx-wg-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .llx-wg-views { padding-bottom: 12px; }

  .llx-footer-top { grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; }
  .llx-flow-days { gap: 8px; }
  .llx-flow-day { min-width: 68px; padding: 10px 8px 12px; }
  .llx-marq-cell { height: 200px; }
  .ab-portrait { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}