/* ============================================================
   VELVETTOUCH — Reset & Base  ·  Satoshi + Inter
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;1,300&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@700,900&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  background: var(--noir);
  color: var(--blanc);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
button { cursor: pointer; border: none; background: none; }

/* ── Titres : Satoshi Bold ── */
h1, h2, h3, h4 {
  font-family: 'Satoshi', system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.1;
  color: var(--blanc);
  letter-spacing: -0.025em;
}
h1 { font-size: clamp(3rem, 7vw, 7rem); }
h2 { font-size: clamp(2.2rem, 4.5vw, 4rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); }
h4 { font-size: 1.1rem; }

h1 em, h2 em, h3 em { font-style: normal; color: var(--cream); }

/* ── Corps : Inter ── */
p {
  font-family: 'Inter', sans-serif;
  font-size: 1rem; font-weight: 300;
  color: rgba(255,255,255,0.65);
  line-height: 1.75;
}
strong { font-weight: 600; color: var(--blanc); }

/* ── Layout utils ── */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-lg); }
.section   { padding: var(--space-2xl) var(--space-xl); }

.section-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: var(--space-md);
  display: flex; align-items: center; gap: 0.6rem;
}
.section-label::before { content: '—'; }

.section-sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem; font-weight: 300;
  color: rgba(255,255,255,0.5);
  line-height: 1.75; max-width: 480px;
}

/* ── Reveal ── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.reveal.visible { opacity: 1; transform: none; }

/* ── Section bg fixes for light-bg areas ── */
.pricing h2, .pricing h3 { color: var(--noir) !important; }
.pricing p, .pricing .section-sub { color: #555 !important; }
.pricing .section-label { color: var(--noir) !important; opacity: 0.5; }
.pricing .feature-item  { color: #555 !important; }
.temoignages h2  { color: var(--noir) !important; }
.temoignages .section-sub { color: #666 !important; }
.temo-name  { color: var(--noir) !important; font-weight: 600; }
.temo-role  { color: #777 !important; }
.temo-text  { color: #444 !important; }
.dual-section h2  { color: var(--noir) !important; }
.enterprise h2    { color: var(--blanc) !important; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .section { padding: 4rem 1.5rem; }
  .container { padding: 0 1.2rem; }
}