/* ---------------------------
   RESPONSIVE ENHANCEMENTS (non-breaking)
   Paste after your existing CSS
----------------------------*/

/* 1) Make all content blocks breathe on small screens */
.container {
  padding-left: 16px;
  padding-right: 16px;
}

/* 2) Truly fluid images everywhere */
img, video {
  max-width: 100%;
  height: auto;
}

/* 3) Fluid typography for better readability across devices */
:root{
  --step--1: clamp(0.85rem, 0.80rem + 0.2vw, 0.95rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.4vw, 1.15rem);
  --step-1:  clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem);
  --step-2:  clamp(1.6rem,  1.3rem + 1.2vw, 2.2rem);
  --step-3:  clamp(2.2rem,  1.6rem + 2.0vw, 3.0rem);
}
body { font-size: var(--step-0); }
.section-title h2 { font-size: var(--step-2); }
.hero h1 { font-size: var(--step-3); }
.hero p, .service-card p, .contact-info p { font-size: var(--step-0); }

/* 4) Improve hero spacing on small screens */
@media (max-width: 480px) {
  .hero { padding: 0 14px; }
  .hero p { margin-bottom: 24px; }
}

/* 5) Ensure service cards look consistent on very narrow phones */
@media (max-width: 380px) {
  .services-grid { gap: 18px; }
  .service-card { padding: 20px; }
  .service-card i { font-size: 2rem; }
}

/* 6) Contact form usability on mobile */
@media (max-width: 600px) {
  form { padding: 24px; }
  form input, form textarea, form select { font-size: var(--step-0); }
  form button { padding: 14px; font-size: var(--step-0); }
}

/* 7) Keep long French words from overflowing on small screens */
h1, h2, h3, p, a, button {
  overflow-wrap: anywhere;
}

/* 8) Make header stick but not cover content when jumping to anchors */
:target::before {
  content: "";
  display: block;
  height: 90px;      /* header height + a bit */
  margin-top: -90px; /* pull content down */
  visibility: hidden;
}

/* 9) Make the logo area scale better on small viewports */
.logo img { height: clamp(40px, 6vw, 60px); }
.logo-text strong { font-size: clamp(1rem, 2.8vw, 1.4rem); }
.logo-text span { font-size: clamp(0.7rem, 2.2vw, 0.85rem); }

/* 10) Ensure hero background covers nicely on very tall/short screens */
.hero {
  min-height: 80vh;
  background-size: cover;
  background-position: center;
}