/* ============================================================
   BASE — Reset, variables, typographie
   Vivasoft · vivasoft.fr
   ============================================================ */

:root {
  /* Palette UI — thème crème chaud */
  --white:   #FDF8F2;
  --off:     #F5EDE0;
  --off2:    #EDE3D4;
  --ink:     #1A1108;
  --ink2:    #3D3528;
  --ink3:    #7A6F5E;
  --border:  #DDD1C0;
  --violet:  #4A25A3;
  --vlight:  #EAE3F8;
  --terra:   #d55227;   /* = --rouge logo */
  --tlight:  #FBF0EB;
  --green:   #73ad57;   /* = --vert logo */

  /* Palette charte Vivasoft (logo) — couleurs canoniques */
  --bleu:    #3AABDE;   /* nuage, V — bleu ciel logo */
  --rouge:   #E55C2D;   /* i, a, o — orange-rouge logo */
  --jaune:   #F5A823;   /* v, f, t — jaune-doré logo */
  --vert:    #4BAE47;   /* S — vert logo */
  --gris:    #6f6f6e;

  /* Typographie */
  --font-title: 'DM Serif Display', Georgia, serif;
  --font-body:  'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;

  /* Espacement */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  40px;
  --space-xl:  64px;
  --space-2xl: 100px;

  /* Rayons */
  --r:    8px;
  --r-lg: 16px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; font: inherit; background: none; border: none; }
address { font-style: normal; }

/* ---- Base ---- */
body {
  font-family: var(--font-body);
  background: var(--white);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ---- Typographie ---- */
h1, h2, h3, h4 {
  font-family: var(--font-title);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

/* ---- Layout ---- */
main { padding-top: 64px; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.section { padding: 100px 40px; max-width: 1280px; margin: 0 auto; }
.section-full { padding: 100px 0; }

/* ---- Scroll Reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ---- Grilles utilitaires ---- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

@media (max-width: 1024px) {
  .container, .section { padding-left: 20px; padding-right: 20px; }
}