/* ============================================================
   BASE — reset minimal, typo par défaut, rythme inter-sections
   DesignBrain LP · maquette Figma 5369:18860 (1440px desktop-only)
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  /* clip au niveau viewport (et pas sur .page : un ancêtre en overflow
     clip neutralise le header sticky dans Chromium) */
  overflow-x: clip;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  font-weight: var(--text-body--font-weight);
  color: var(--color-ink);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

/* Wrapper de page : contexte de positionnement du décor global
   (voir sections/00-decor.html) et garde-fou contre les bleeds. */
.page {
  position: relative;
  overflow-x: clip; /* contient les bleeds (wordmark footer 1730px, halos) */
}

.page > section,
.page > footer {
  position: relative;
  z-index: 1; /* contenu au-dessus du décor (z-index:0) */
}
/* (le header n'est plus dans cette règle : il est sticky — voir 01-hero.css) */

/* Header sticky (retour 13/08) : les ancres ne doivent pas passer dessous.
   Le bloc de prise de RDV (#contact) est dans <footer>, hors de <main> : il
   est ajouté explicitement, sinon les CTA le collent sous le header. */
main [id],
section[id],
footer [id] {
  scroll-margin-top: 96px;
}

/* ------------------------------------------------------------
   Rythme vertical inter-sections — écarts MESURÉS sur la
   maquette (delta y entre fin de node et node suivant) pour les
   sections qui ne portent pas leur propre padding externe.
   Les autres (01, 03, 04, 05, 09, 10, 12, 13) gèrent leur
   espacement en interne.
   ------------------------------------------------------------ */
.pourquoi        { margin-top: 96px;  } /* retour 13/08 : respiration après la bande logos */
.preoccupations  { margin-top: 91px;  } /* divider s1 (2112) → 2203 */
.difference      { margin-top: 63px;  } /* 3026 → 3089 */
.interieur       { margin-top: 105px; } /* 4902 → 5007 */
.comment         { margin-top: 94px;  } /* divider s3 (5667) → 5761 */
.demo            { margin-top: 108px; } /* 6496 → 6604 */
.methode         { margin-top: 91px;  } /* v2 : fin demo (7753) → 7844 */
.offre           { margin-top: 79px;  } /* v2 : fin methode (8615) → 8694 */
.case-studies    { margin-top: 89px;  } /* v2 : fin offre (9806) → 9895 */
.conviction      { margin-top: 0;     } /* bande accolée au bas de Case Studies */
.faq             { margin-top: 100px; } /* v2 : fin conviction (11464) → zone eyebrow+FAQ */
.site-footer     { margin-top: 110px; } /* v2 : fin FAQ (12154) → bloc sombre (12264) */

/* Séparateurs 1px EN FLUX (remplacent les .page-separator absolus,
   qui dérivaient dès que les hauteurs réelles s'écartaient de la
   maquette). Écarts mesurés maquette. */
.page-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 0;
}

.page-divider--content {
  max-width: var(--container-max);
  margin-inline: auto;
}

.page-divider--s1 { margin-top: 75px; } /* fin pourquoi (2037) → 2112 */
.page-divider--s3 { margin-top: 84px; } /* fin interieur (5583) → 5667 */

@media (max-width: 768px) {
  .preoccupations { margin-top: 48px; }
  .difference     { margin-top: 48px; }
  .interieur      { margin-top: 64px; }
  .comment        { margin-top: 56px; }
  .demo           { margin-top: 64px; }
  .methode        { margin-top: 64px; }
  .offre          { margin-top: 56px; }
  .case-studies   { margin-top: 56px; }
  .faq            { margin-top: 64px; }
  .site-footer    { margin-top: 64px; }
  .page-divider--s1, .page-divider--s3 { margin-top: 48px; }
}

/* Lien d'évitement (a11y) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--color-ink);
  color: var(--color-white);
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  left: 16px;
  top: 16px;
}