/* ==========================================================================
   FERCOL — feuille de style principale
   Palette : rouge #E21613 · rouge clair #E9504E · noir #262126 · blanc
   Titres  : Futura — Texte : Helvetica Neue

   Système d'échelle : la composition d'origine (Wix) est dessinée sur une
   grille de 1280px. L'unité --u vaut 1px à 1280 de viewport et grandit
   jusqu'à 1.125px à 1440+, donc tout le site s'élargit proportionnellement.
   ========================================================================== */

:root {
  --red: #e21613;
  --red-light: #e9504e;
  --red-dark: #b51210;
  --dark: #262126;
  --white: #ffffff;
  --font-heading: "Futura", "Futura-Medium", "Century Gothic", "Jost", sans-serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --u: clamp(0.86px, calc(min(100vw, 1440px) / 1280), 1.125px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: calc(16 * var(--u));
  color: var(--dark);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { text-decoration: none; color: inherit; }

/* Grille centrale (1280 unités, soit jusqu'à 1440px réels) */
.page-grid {
  max-width: calc(1280 * var(--u));
  margin: 0 auto;
  position: relative;
}

.container {
  max-width: calc(1280 * var(--u));
  margin: 0 auto;
  padding: 0 calc(65 * var(--u));
}

/* ==========================================================================
   Animations d'entrée (équivalent Wix motion-floatIn : 1.2s, une seule fois)
   ========================================================================== */

html.js [data-reveal] { opacity: 0; }

html.js [data-reveal].in { animation: floatIn 1.2s linear both; }

html.js [data-reveal="up"].in    { animation-name: floatInUp; }
html.js [data-reveal="down"].in  { animation-name: floatInDown; }
html.js [data-reveal="left"].in  { animation-name: floatInLeft; }
html.js [data-reveal="right"].in { animation-name: floatInRight; }
html.js [data-reveal="fade"].in  { animation-name: floatIn; }

@keyframes floatIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes floatInUp {
  from { opacity: 0; transform: translateY(60px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes floatInDown {
  from { opacity: 0; transform: translateY(-60px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes floatInLeft {
  from { opacity: 0; transform: translateX(-60px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes floatInRight {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; }
  html.js [data-reveal].in { animation: none; }
  .parallax-img { transform: none !important; }
}

/* ==========================================================================
   Parallaxe (équivalent Wix : image quasi fixe, fenêtre clippée)
   ========================================================================== */

.parallax {
  position: relative;
  overflow: hidden;
}

.parallax .parallax-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  will-change: transform;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  background: var(--white);
  height: calc(100 * var(--u));
  position: relative;
  z-index: 10;
}

.site-header .container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo img { height: calc(58 * var(--u)); width: auto; display: block; }

.main-nav ul {
  list-style: none;
  display: flex;
  gap: calc(34 * var(--u));
}

.main-nav a {
  font-size: calc(16 * var(--u));
  color: var(--dark);
  transition: color 0.2s ease;
}

.main-nav a:hover,
.main-nav a.active { color: var(--red); }

/* Burger (mobile) */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
}

.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--dark);
  margin: 6px 0;
}

/* ==========================================================================
   Boutons
   ========================================================================== */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: calc(16 * var(--u));
  line-height: calc(38 * var(--u));
  padding: 0 calc(9 * var(--u));
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.btn-hero {
  background: var(--red-light);
  color: var(--white);
  border: 1px solid var(--white);
}

.btn-hero:hover { background: var(--white); color: var(--red); }

.btn-outline-red {
  background: var(--white);
  color: var(--red-light);
  border: 1px solid var(--red-light);
}

.btn-outline-red:hover { background: var(--red-light); color: var(--white); }

.btn-white {
  background: transparent;
  color: var(--white);
  border: 1px solid var(--white);
}

.btn-white:hover { background: var(--white); color: var(--red); }

/* ==========================================================================
   Accueil — hero (composition Wix : coordonnées d'origine × --u)
   ========================================================================== */

.hero {
  background: var(--red);
  color: var(--white);
}

.hero-inner { height: calc(950 * var(--u)); }

.hero h1 {
  position: absolute;
  left: calc(59 * var(--u));
  top: calc(164 * var(--u));
  width: calc(525 * var(--u));
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: calc(66 * var(--u));
  line-height: 1.1;
}

.hero-divider {
  position: absolute;
  left: calc(590 * var(--u));
  top: calc(176 * var(--u));
  width: 1px;
  height: calc(122 * var(--u));
  background: var(--dark);
}

.hero-text {
  position: absolute;
  left: calc(624 * var(--u));
  top: calc(179 * var(--u));
  width: calc(361 * var(--u));
  font-size: calc(19 * var(--u));
  line-height: 1.4;
}

.hero-btn {
  position: absolute;
  left: calc(624 * var(--u));
  top: calc(516 * var(--u));
}

/* ==========================================================================
   Accueil — parallaxe 1 : grande image (chevauche le hero de 355u)
   ========================================================================== */

.strip1-wrap {
  position: relative;
  margin-top: calc(-355 * var(--u));
  z-index: 1;
}

.strip1 {
  margin: 0 calc(65 * var(--u));
  height: calc(564 * var(--u));
}

/* ==========================================================================
   Accueil — partie basse (origine = bas de la grande image)
   ========================================================================== */

.home-lower { height: calc(1948 * var(--u)); }

.eng-title {
  position: absolute;
  left: calc(75 * var(--u));
  top: calc(37 * var(--u));
  width: calc(440 * var(--u));
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: calc(28 * var(--u));
  line-height: 1.62;
  color: var(--red);
}

.eng-img {
  position: absolute;
  left: calc(731 * var(--u));
  top: calc(-81 * var(--u));
  width: calc(484 * var(--u));
  height: calc(655 * var(--u));
  object-fit: cover;
  z-index: 2;
}

.strip2 {
  position: absolute;
  left: calc(65 * var(--u));
  top: calc(400 * var(--u));
  width: calc(357 * var(--u));
  height: calc(661 * var(--u));
}

.col-img2 {
  position: absolute;
  left: calc(364 * var(--u));
  top: calc(1151 * var(--u));
  width: calc(320 * var(--u));
  height: calc(420 * var(--u));
  object-fit: cover;
}

.sv-title {
  position: absolute;
  left: calc(777 * var(--u));
  top: calc(846 * var(--u));
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: calc(40 * var(--u));
  color: var(--red);
}

.sv-intro {
  position: absolute;
  left: calc(777 * var(--u));
  top: calc(912 * var(--u));
  width: calc(400 * var(--u));
  font-size: calc(19 * var(--u));
  line-height: 1.55;
  color: var(--red);
}

.sv-item {
  position: absolute;
  left: calc(777 * var(--u));
  width: calc(400 * var(--u));
  display: grid;
  grid-template-columns: calc(104 * var(--u)) calc(62 * var(--u)) 1fr;
}

.sv-item.i1 { top: calc(1044 * var(--u)); }
.sv-item.i2 { top: calc(1325 * var(--u)); }
.sv-item.i3 { top: calc(1634 * var(--u)); }

.sv-item .num {
  grid-column: 1;
  font-family: var(--font-heading);
  font-size: calc(66 * var(--u));
  line-height: 1.1;
  color: var(--red);
}

.sv-item .vline {
  grid-column: 2;
  width: 1px;
  height: calc(105 * var(--u));
  border-left: 1px solid var(--red);
}

.sv-item .sv-body { grid-column: 3; }

.sv-item h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: calc(20 * var(--u));
  line-height: 1.35;
  color: var(--red);
}

.sv-item h3 a { transition: opacity 0.2s ease; }

.sv-item h3 a:hover { opacity: 0.7; text-decoration: underline; }

.sv-item p {
  font-size: calc(16 * var(--u));
  line-height: 1.6;
  color: var(--red);
  margin-top: calc(14 * var(--u));
}

.sv-btn {
  position: absolute;
  left: calc(943 * var(--u));
  top: calc(1897 * var(--u));
}

/* ==========================================================================
   Page Services (solutions)
   ========================================================================== */

.page-red {
  background: var(--red);
  color: var(--white);
}

.solutions-hero { padding: calc(59 * var(--u)) 0 0; }

.solutions-hero h1 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: calc(80 * var(--u));
  line-height: 1.1;
  margin-bottom: calc(37 * var(--u));
  margin-left: calc(15 * var(--u));
}

.solutions-hero p {
  font-size: calc(16 * var(--u));
  line-height: 1.7;
  max-width: calc(600 * var(--u));
  margin-left: calc(15 * var(--u));
}

.solutions-grid { padding: calc(145 * var(--u)) 0 0; }

.solutions-grid .container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: calc(46 * var(--u));
  padding-left: calc(77 * var(--u));
}

.solution-card .card-head {
  display: flex;
  align-items: flex-start;
  gap: calc(31 * var(--u));
}

.solution-card .num {
  font-family: var(--font-heading);
  font-size: calc(48 * var(--u));
  line-height: 1.2;
  color: var(--white);
}

.solution-card h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: calc(20 * var(--u));
  color: var(--dark);
  padding-top: calc(14 * var(--u));
  padding-bottom: calc(16 * var(--u));
  position: relative;
}

.solution-card h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(84 * var(--u));
  height: 1px;
  background: var(--dark);
}

.solution-card h3 a:hover { text-decoration: underline; }

.solution-card p {
  font-size: calc(16 * var(--u));
  line-height: 1.6;
  color: var(--white);
  margin-top: calc(26 * var(--u));
  max-width: calc(184 * var(--u));
}

.solution-card .card-link {
  display: inline-block;
  margin-top: calc(18 * var(--u));
  font-size: calc(14 * var(--u));
  color: var(--white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  padding-bottom: 2px;
  transition: opacity 0.2s ease;
}

.solution-card .card-link:hover { opacity: 0.75; }

.solutions-divider {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  margin: calc(150 * var(--u)) auto calc(140 * var(--u));
  max-width: calc(1150 * var(--u));
}

/* ==========================================================================
   Pages service (couverture, ramonage, zinguerie, velux)
   ========================================================================== */

.service-hero {
  background: var(--red);
  color: var(--white);
  padding: calc(90 * var(--u)) 0 calc(100 * var(--u));
}

.service-hero .breadcrumb {
  font-size: calc(14 * var(--u));
  margin-bottom: calc(40 * var(--u));
  opacity: 0.85;
}

.service-hero .breadcrumb a:hover { text-decoration: underline; }

.service-hero h1 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: calc(64 * var(--u));
  line-height: 1.15;
  max-width: calc(700 * var(--u));
  margin-bottom: calc(35 * var(--u));
}

.service-hero .service-intro {
  font-size: calc(19 * var(--u));
  line-height: 1.55;
  max-width: calc(620 * var(--u));
}

.service-body { padding: calc(100 * var(--u)) 0; }

.service-body .container {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: calc(90 * var(--u));
  align-items: start;
}

.service-content h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: calc(32 * var(--u));
  color: var(--red);
  margin: calc(45 * var(--u)) 0 calc(20 * var(--u));
}

.service-content h2:first-child { margin-top: 0; }

.service-content p,
.service-content li {
  font-size: calc(17 * var(--u));
  line-height: 1.7;
  color: var(--red);
  margin-bottom: calc(16 * var(--u));
}

.service-content ul { padding-left: calc(22 * var(--u)); }

.service-content li { margin-bottom: calc(10 * var(--u)); }

.service-aside { position: sticky; top: calc(40 * var(--u)); }

.service-aside img {
  width: 100%;
  height: calc(520 * var(--u));
  object-fit: cover;
}

.service-aside .aside-card {
  background: var(--red);
  color: var(--white);
  padding: calc(35 * var(--u)) calc(30 * var(--u));
}

.service-aside .aside-card h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: calc(24 * var(--u));
  margin-bottom: calc(12 * var(--u));
}

.service-aside .aside-card p {
  font-size: calc(15 * var(--u));
  line-height: 1.6;
  margin-bottom: calc(22 * var(--u));
}

/* Bande CTA */
.cta-strip {
  background: var(--red);
  color: var(--white);
  padding: calc(70 * var(--u)) 0;
}

.cta-strip .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(40 * var(--u));
  flex-wrap: wrap;
}

.cta-strip h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: calc(34 * var(--u));
  max-width: calc(640 * var(--u));
}

/* ==========================================================================
   Page Contact
   ========================================================================== */

.contact-hero {
  background: var(--red);
  color: var(--white);
  padding: calc(135 * var(--u)) 0 calc(320 * var(--u));
}

.contact-hero h1 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: calc(80 * var(--u));
  line-height: 1.4;
  margin-left: calc(10 * var(--u));
}

.contact-card-wrap {
  max-width: calc(1280 * var(--u));
  margin: 0 auto;
  padding: 0 calc(64 * var(--u));
}

.contact-card {
  background: var(--red);
  color: var(--white);
  border-radius: 10px;
  max-width: calc(982 * var(--u));
  margin-top: calc(-320 * var(--u));
  position: relative;
  padding: calc(55 * var(--u)) calc(46 * var(--u));
}

.contact-card .intro {
  font-size: calc(20 * var(--u));
  line-height: 1.6;
  max-width: calc(620 * var(--u));
  margin-bottom: calc(60 * var(--u));
}

.contact-form .form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(55 * var(--u)) calc(43 * var(--u));
  margin-bottom: calc(45 * var(--u));
}

.field label {
  display: block;
  font-size: calc(16 * var(--u));
  margin-bottom: calc(14 * var(--u));
}

.field input,
.field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--white);
  color: var(--white);
  font-family: var(--font-body);
  font-size: calc(16 * var(--u));
  padding: 6px 2px;
  outline: none;
  border-radius: 0;
}

.field textarea { min-height: calc(106 * var(--u)); resize: vertical; }

.field input:focus,
.field textarea:focus { border-bottom-width: 2px; }

.field-full { margin-bottom: calc(30 * var(--u)); }

.contact-form .btn-submit {
  display: block;
  width: 100%;
  background: var(--dark);
  color: var(--red-light);
  border: 1px solid var(--dark);
  border-radius: 7px;
  font-family: var(--font-body);
  font-size: calc(16 * var(--u));
  line-height: calc(40 * var(--u));
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.contact-form .btn-submit:hover { opacity: 0.85; }

.form-status { margin-top: 16px; font-size: 14px; }

/* Contactez-nous */

.contact-infos { padding: calc(115 * var(--u)) 0 calc(130 * var(--u)); color: var(--red); }

.contact-infos h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: calc(34 * var(--u));
  margin-bottom: calc(18 * var(--u));
  margin-left: calc(10 * var(--u));
}

.contact-infos .lead {
  font-size: calc(16 * var(--u));
  line-height: 1.6;
  max-width: calc(420 * var(--u));
  margin-bottom: calc(65 * var(--u));
  margin-left: calc(10 * var(--u));
}

.infos-grid {
  display: grid;
  grid-template-columns: repeat(2, calc(286 * var(--u)));
  gap: calc(60 * var(--u)) 0;
  margin-left: calc(10 * var(--u));
}

.infos-grid h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: calc(20 * var(--u));
  margin-bottom: calc(16 * var(--u));
}

.infos-grid p { font-size: calc(16 * var(--u)); line-height: 1.6; }

.infos-grid a:hover { text-decoration: underline; }

/* ==========================================================================
   Page mentions légales
   ========================================================================== */

.legal-hero {
  background: var(--red);
  color: var(--white);
  padding: calc(80 * var(--u)) 0 calc(90 * var(--u));
}

.legal-hero h1 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: calc(56 * var(--u));
  line-height: 1.2;
}

.legal-body { padding: calc(80 * var(--u)) 0 calc(100 * var(--u)); }

.legal-body .container { max-width: calc(950 * var(--u)); }

.legal-body h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: calc(30 * var(--u));
  color: var(--red);
  margin: calc(55 * var(--u)) 0 calc(18 * var(--u));
  scroll-margin-top: 40px;
}

.legal-body h2:first-child { margin-top: 0; }

.legal-body p, .legal-body li {
  font-size: calc(16 * var(--u));
  line-height: 1.7;
  color: var(--dark);
  margin-bottom: calc(14 * var(--u));
}

.legal-body ul { padding-left: calc(22 * var(--u)); }

.legal-body a { color: var(--red); }

.legal-body a:hover { text-decoration: underline; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--red);
  color: var(--white);
  padding: calc(55 * var(--u)) 0 calc(30 * var(--u));
  position: relative;
  z-index: 2;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  align-items: start;
  gap: calc(40 * var(--u));
}

.footer-logo img { height: calc(62 * var(--u)); width: auto; }

.footer-logo::after {
  content: "";
  display: block;
  width: calc(282 * var(--u));
  max-width: 100%;
  height: 1px;
  background: var(--red-dark);
  margin-top: calc(28 * var(--u));
}

.footer-contact p { font-size: calc(16 * var(--u)); line-height: 1.6; }

.footer-contact a:hover { text-decoration: underline; }

.footer-services h4 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: calc(16 * var(--u));
  margin-bottom: calc(14 * var(--u));
}

.footer-services ul { list-style: none; }

.footer-services li { margin-bottom: calc(10 * var(--u)); }

.footer-services a { font-size: calc(14 * var(--u)); }

.footer-services a:hover { text-decoration: underline; }

.footer-legal { justify-self: end; }

.footer-legal ul { list-style: none; }

.footer-legal li { margin-bottom: calc(14 * var(--u)); }

.footer-legal a { font-size: calc(12 * var(--u)); }

.footer-legal a:hover { text-decoration: underline; }

/* Barre du bas : copyright + crédit Andmore */
.footer-bottom {
  margin-top: calc(50 * var(--u));
  padding-top: calc(24 * var(--u));
  border-top: 1px solid var(--red-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-bottom .copyright { font-size: calc(14 * var(--u)); }

.footer-bottom .credit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: calc(13 * var(--u));
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

.footer-bottom .credit:hover { opacity: 1; }

.footer-bottom .credit img { height: calc(15 * var(--u)); width: auto; display: block; }

/* ==========================================================================
   Responsive — en dessous de 1100px, le layout absolu passe en flux empilé
   ========================================================================== */

@media (max-width: 1099px) {
  body { font-size: 16px; }

  .container { padding: 0 32px; }

  .site-header { height: 90px; }

  .logo img { height: 52px; }

  .main-nav a { font-size: 16px; }

  .btn { font-size: 16px; line-height: 38px; padding: 0 12px; }

  /* Hero en flux */
  .hero-inner { height: auto; padding: 70px 32px 90px; }

  .hero h1 {
    position: static;
    width: auto;
    max-width: 560px;
    font-size: 46px;
    margin-bottom: 40px;
  }

  .hero-divider { display: none; }

  .hero-text { position: static; width: auto; max-width: 520px; font-size: 18px; margin-bottom: 36px; }

  .hero-btn { position: static; display: inline-block; }

  .strip1-wrap { margin-top: 0; }

  .strip1 { margin: 0 32px; height: 380px; }

  .parallax .parallax-img {
    position: absolute;
    height: 100%;
    transform: none !important;
  }

  /* Partie basse en flux */
  .home-lower { height: auto; padding: 60px 32px 80px; }

  .eng-title { position: static; width: auto; max-width: 560px; font-size: 24px; margin: 0 0 40px; }

  .eng-img { position: static; width: 100%; max-width: 484px; height: auto; margin: 0 0 60px; }

  .strip2 { position: relative; left: auto; top: auto; width: 70%; max-width: 357px; height: 500px; margin-bottom: 40px; }

  .col-img2 { position: static; width: 55%; max-width: 320px; height: auto; margin: -140px 0 60px auto; }

  .sv-title { position: static; font-size: 34px; margin-bottom: 24px; }

  .sv-intro { position: static; width: auto; max-width: 520px; font-size: 18px; margin-bottom: 50px; }

  .sv-item { position: static; width: auto; max-width: 520px; grid-template-columns: 90px 40px 1fr; margin-bottom: 50px; }

  .sv-item .num { font-size: 54px; }

  .sv-item h3 { font-size: 20px; }

  .sv-item p { font-size: 16px; }

  .sv-btn { position: static; display: inline-block; margin-top: 10px; }

  /* Services */
  .solutions-hero { padding-top: 50px; }

  .solutions-hero h1 { font-size: 56px; margin-left: 0; }

  .solutions-hero p { font-size: 16px; margin-left: 0; max-width: 600px; }

  .solutions-grid { padding-top: 90px; }

  .solutions-grid .container { grid-template-columns: repeat(3, 1fr); gap: 50px 35px; padding-left: 32px; }

  .solution-card .num { font-size: 44px; }

  .solution-card h3 { font-size: 19px; }

  .solution-card p { font-size: 15px; max-width: none; }

  .solutions-divider { margin: 90px 32px; }

  /* Pages service */
  .service-hero h1 { font-size: 44px; }

  .service-hero .service-intro { font-size: 17px; }

  .service-body .container { grid-template-columns: 1fr; gap: 50px; }

  .service-aside { position: static; }

  .service-aside img { height: 380px; }

  .service-content h2 { font-size: 26px; }

  .service-content p, .service-content li { font-size: 16px; }

  .cta-strip h2 { font-size: 26px; }

  /* Contact */
  .contact-hero { padding: 80px 0 260px; }

  .contact-hero h1 { font-size: 56px; margin-left: 0; }

  .contact-card-wrap { padding: 0 32px; }

  .contact-card { margin-top: -260px; padding: 45px 34px; }

  .contact-card .intro { font-size: 18px; }

  .field label, .field input, .field textarea { font-size: 16px; }

  .contact-infos h2 { font-size: 30px; margin-left: 0; }

  .contact-infos .lead { font-size: 16px; margin-left: 0; }

  .infos-grid { grid-template-columns: repeat(2, 286px); margin-left: 0; }

  .infos-grid h3 { font-size: 19px; }

  .infos-grid p { font-size: 16px; }

  /* Mentions légales */
  .legal-hero h1 { font-size: 40px; }

  .legal-body h2 { font-size: 25px; }

  .legal-body p, .legal-body li { font-size: 16px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 45px; }

  .footer-legal { justify-self: start; }

  .footer-logo img { height: 56px; }

  .footer-contact p, .footer-services a, .footer-legal a { font-size: 14px; }

  .footer-legal a { font-size: 12px; }

  .footer-bottom .copyright, .footer-bottom .credit { font-size: 13px; }

  .footer-bottom .credit img { height: 14px; }
}

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

  .nav-toggle { display: block; }

  .main-nav {
    display: none;
    position: absolute;
    top: 90px;
    left: 0;
    right: 0;
    background: var(--white);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
    z-index: 20;
  }

  .main-nav.open { display: block; }

  .main-nav ul { flex-direction: column; gap: 0; padding: 10px 0; }

  .main-nav li { text-align: center; }

  .main-nav a { display: block; padding: 14px 0; font-size: 18px; }

  .hero-inner { padding: 60px 24px 80px; }

  .hero h1 { font-size: 38px; }

  .strip1 { margin: 0 24px; height: 300px; }

  .home-lower { padding: 50px 24px 70px; }

  .sv-item { grid-template-columns: 70px 30px 1fr; }

  .sv-item .num { font-size: 48px; }

  .solutions-grid .container { grid-template-columns: 1fr 1fr; }

  .service-hero h1 { font-size: 36px; }

  .contact-hero { padding: 70px 0 240px; }

  .contact-card { margin-top: -240px; padding: 40px 28px; }

  .contact-form .form-grid { grid-template-columns: 1fr; gap: 40px; }

  .infos-grid { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr; gap: 40px; }

  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .solutions-grid .container { grid-template-columns: 1fr; }
}