/* Reset minimal + base typo */
*,*::before,*::after{ box-sizing: border-box; }
html, body{ overflow-x: hidden; max-width: 100vw; }
body{
  margin: 0;
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video, iframe, svg{ max-width: 100%; }
img{ display: block; height: auto; }
figure{ margin: 0; } /* reset UA — sinon 40px lateraux qui debordent */

h1,h2,h3,h4{
  font-family: var(--ff-display);
  font-weight: 500;
  line-height: 1.1;
  color: var(--text);
  margin: 0 0 0.4em;
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(2.4rem, 5.6vw, 4.2rem); }
h2{ font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
h3{ font-size: clamp(1.25rem, 2vw, 1.55rem); }

p{ margin: 0 0 1em; }
a{ color: var(--accent); text-decoration: none; transition: opacity .2s; }
a:hover{ opacity: 0.78; }

blockquote{ margin: 0; padding: 0; font-style: normal; }
ul, ol{ padding-left: 1.2em; margin: 0 0 1em; }

button{
  font-family: inherit;
  font-size: 1rem;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

input, select, textarea{
  font-family: inherit;
  font-size: 1rem;
  min-width: 0; /* anti-overflow grille avec select */
  width: 100%;
}

:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

[hidden]{ display: none !important; } /* force, anti-bug modal/lightbox */

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 768px){
  .container{ padding: 0 20px; }
}

section{
  padding: 80px 0;
}
@media (max-width: 768px){
  section{ padding: 48px 0; }
}

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-ui);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.74rem;
  color: var(--accent);
  margin-bottom: 14px;
  font-weight: 500;
}
.eyebrow::before{
  content: "";
  width: 28px; height: 1px;
  background: var(--accent);
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html{ scroll-behavior: auto; }
}