/* ═══════════════════════════════════════
   RENECT — variables.css
   Style : BTP moderne · local · fiable
   Palette : Vert pro · Anthracite · Gris chantier
   ═══════════════════════════════════════ */
/* ═══════════════════════════════════════
   IMPORTANT — PALETTE DE COULEURS

   Historiquement, RENECT utilisait une palette
   dorée. Afin d'éviter de modifier plusieurs
   centaines de références CSS dans le projet,
   les noms de variables ont été conservés.

   Ainsi :
   --gold       = couleur principale RENECT
   --gold2      = variante foncée (hover)
   --gold-light = variante claire
   --gold-line  = bordures et accents

   Ces variables représentent désormais la
   palette verte officielle de RENECT.

   Ne pas renommer ces variables sans effectuer
   une refonte complète des fichiers CSS du projet.
═══════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* ── Couleurs principales ── */
  --gold:        #2F6B4F;       /* vert pro — conserve le nom pour compatibilité */
  --gold2:       #24533D;       /* vert foncé hover */
  --gold-light:  #EAF3EE;       /* vert très léger */
  --gold-line:   rgba(47,107,79,0.18);

  --dark:        #1F2933;       /* anthracite professionnel */
  --charcoal:    #111827;
  --navy:        #1F2933;
  --navy2:       #17212B;
  --navy3:       #0F172A;

  /* ── Backgrounds ── */
  --bg:          #F7F8F6;
  --bg2:         #EEF1ED;
  --bg3:         #E1E6DF;

  /* ── UI ── */
  --border:      rgba(47,107,79,0.14);
  --border2:     rgba(31,41,51,0.10);
  --text:        #1F2933;
  --muted:       #667085;
  --muted2:      #98A2B3;
  --success:     #16A34A;
  --error:       #DC2626;
  --white:       #FFFFFF;

  /* ── Tokens ── */
  --radius:      12px;
  --radius-sm:   9px;
  --radius-lg:   18px;
  --shadow-sm:   0 2px 10px rgba(31,41,51,0.05);
  --shadow-md:   0 8px 28px rgba(31,41,51,0.08);
  --shadow-lg:   0 18px 52px rgba(31,41,51,0.11);
  --transition:  all 0.22s cubic-bezier(.4,0,.2,1);
  --nav-h:       70px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a   { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

/* ── Utilitaires ── */
.container { max-width: 1120px; margin: 0 auto; padding: 0 44px; }
.section   { padding: 92px 0; }

.eyebrow {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
  display: block;
}

.section-h2 {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(1.9rem, 3.2vw, 2.8rem);
  font-weight: 850;
  line-height: 1.08;
  letter-spacing: -0.045em;
  color: var(--dark);
  margin-bottom: 14px;
}
.section-h2 em { font-style: normal; color: var(--gold); }

.section-p {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.78;
  max-width: 560px;
}

/* ── Animations ── */
@keyframes slideUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn  { from { opacity:0; } to { opacity:1; } }
@keyframes pulse   { 0%,100%{ opacity:1; } 50%{ opacity:0.4; } }
@keyframes spin    { to { transform:rotate(360deg); } }

.reveal { opacity:0; transform:translateY(18px); transition: opacity .58s ease, transform .58s ease; }
.reveal.in { opacity:1; transform:translateY(0); }

/* ── Responsive ── */
@media (max-width:1024px) { .section { padding:72px 0; } .container { padding:0 24px; } }
@media (max-width:600px)  { .section { padding:56px 0; } .container { padding:0 16px; } }