:root{
      --bg:#0b1220;--card:#0f172a;--muted:#94a3b8;--text:#e2e8f0;--brand:#22d3ee;--brand-2:#38bdf8;--accent:#34d399;--warning:#f59e0b;--shadow:0 10px 30px rgba(2,8,23,.35);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  background: linear-gradient(180deg, #334770 0%, #334770 100%);
  color: var(--text);
 
}
    a{color:inherit;text-decoration:none}
    .container{max-width:1200px;margin:0 auto;padding:0 20px}
    .container.bar {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 20px; /* assure un espace horizontal */
}
    /* Header */
   
    header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  display: block;
  z-index: 50;
  background: rgba(10,15,26,.7);
  border-bottom: 1px solid rgba(148,163,184,.15);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
 .bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 20px;
  gap: 12px;
     }
    .brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.4px}
    .brand img{width:40px;height:40px;border-radius:12px;box-shadow:var(--shadow)}
    nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0}
    nav a{color:var(--text);opacity:.9;font-weight:600}
    nav a:hover{opacity:1;color:var(--brand )}
    .cta{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(90deg,var(--brand),var(--brand-2));padding:10px 16px;border-radius:12px;color:#001018;font-weight:800;box-shadow:var(--shadow)}
    .tel{display:none}
    .burger{display:none;border:1px solid rgba(148,163,184,.25);padding:8px 10px;border-radius:10px}
    /* Hero */
    .hero::before{content:"²";position:absolute;inset:0;background:url('https://images.unsplash.com/photo-1590650153855-d9e8082367cf?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;opacity:.18}
    .hero-inner{position:relative;display:flex;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center;}
    .badge{display:inline-flex;align-items:center;gap:10px;padding:6px 12px;border:1px solid rgba(148,163,184,.25);border-radius:999px;color:var(--muted);font-weight:700}
    h1{font-size:46px;line-height:1.05;margin:14px 0 10px}
    .lead{font-size:18px;color:var(--muted);max-width:56ch}
   
    .card h3{margin:6px 0 8px;font-size:18px}
    .card p{margin:0;color:var(--muted);font-size:14px}
    .hero-form{background:linear-gradient(180deg,rgba(34,211,238,.08),rgba(56,189,248,.08));border:1px solid rgba(34,211,238,.35);border-radius:18px;padding:20px}
    .hero-form h3{margin:0 0 14px}
    .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .row .full{grid-column:1/-1}
    input, select, textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(148,163,184,.25);background:#0b1324;color:var(--text)}
    button{cursor:pointer;border:0;background:linear-gradient(90deg,var(--brand),var(--brand-2));padding:12px 16px;border-radius:12px;color:#001018;font-weight:800}
    .muted{color:var(--muted);font-size:13px}
    .hero-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

 .card {
   position: relative;
   height: 450px; /* réduit pour mobile/tablette */
   background-size: cover;
   background-position: center;
   border-radius: 12px;
   overflow: hidden;
   cursor: pointer;
   transition: transform 0.4s ease, box-shadow 0.4s ease;
 }
 /* sur petits écrans, autoriser hauteur auto et empilement */

/* Contenu caché par défaut */

/* Hover : zoom + contenu visible */
/* === HERO LAYOUT === */
.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr; /* gauche = texte + cartes / droite = logo */
  align-items: center;
  gap: 60px;
  padding: 80px 0;
}

.hero-left {
  display: flex;
  flex-direction: column;
  gap: 25px;
  text-align: center;
  align-items: center;
}

.hero-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.hero-right {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-logo {
  width: 100%;
  max-width: 420px;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.4));
  animation: float 2s ease-in-out infinite;
}

/* Effet flottant doux pour le logo */
@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
  100% { transform: translateY(0); }
}

/* Adaptation responsive */




    /* Logos */
  .logos-carousel {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.logos-track {
  display: flex;
  gap: 40px; /* espace entre logos */
  animation: scroll 20s linear infinite;
}

.logos-track img {
  height: 60px;
  width: auto;
  object-fit: contain;
}

/* Animation */
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* défilement vers la gauche */
}
/* Sections */
    section{padding:70px 0;border-top:1px solid rgba(148,163,184,.08)}
    .section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:26px}
    .eyebrow{font-weight:800;letter-spacing:.12em;color:var(--brand)}
    h2{font-size:34px;margin:6px 0 10px}
    
    .service img{width:100%;height:170px;object-fit:cover}
    .service .body{padding:16px}
    /* Process */
    .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
    .step{padding:18px;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));border:1px solid rgba(148,163,184,.18)}
    .step .n{display:inline-flex;width:36px;height:36px;border-radius:999px;align-items:center;justify-content:center;font-weight:800;background:rgba(34,211,238,.12);border:1px solid rgba(34,211,238,.35);margin-bottom:10px}
    /* Testimonials */
    .testis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px; text-align: center;align-items: center; }
    .quote{padding:18px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));border:1px solid rgba(148,163,184,.18)}
    .quote p{margin:0 0 10px}
    /* CTA band */
    .band{display:flex;gap:20px;align-items:center;justify-content:space-between;background:linear-gradient(90deg,rgba(34,211,238,.08),rgba(56,189,248,.08));border:1px solid rgba(56,189,248,.35);padding:22px;border-radius:18px}
    /* Footer */
    footer{padding:50px 0;background:#0a0f1a;border-top:1px solid rgba(148,163,184,.12)}
    .foot{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:18px}
    .foot h4{margin:0 0 8px}
    .foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
    .copyright{margin-top:22px;color:var(--muted);font-size:13px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
    /* Responsive */
    
 main, footer, .container {
  position: relative;

}
/* === SECTION AVANT / APRÈS === */
.before-after {
  position: relative;
  padding: 100px 0;
  background: linear-gradient(180deg, #0b1324 0%, #111c33 100%);
  color: #fff;
  overflow: hidden;
}

.before-after .section-head h2 {
  color: #fff;
}

.ba-wrapper {
  position: relative;
  max-width: 900px;
  margin: 60px auto;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 25px rgba(0,0,0,0.4);
}

.ba-image {
  position: relative;
  width: 100%;
  height: 500px;
  cursor: grab;
}

.ba-image .ba-img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: clip-path 0.3s ease;
}

/* Masque la partie droite de l'image "avant" */
.ba-image .before {
  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
  filter: brightness(0.9) contrast(1.05);
}

/* L'image "après" recouvre tout */
.ba-image .after {
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
  filter: brightness(1.1) contrast(1.15);
}

/* Curseur central */
.ba-slider {
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 100%;
  background: #00b4d8;
  box-shadow: 0 0 15px rgba(0,180,216,0.7);
  transform: translateX(-50%);
  cursor: ew-resize;
  transition: background 0.3s;
}

.ba-slider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #00b4d8;
  box-shadow: 0 0 10px rgba(0,180,216,0.5);
  border: 3px solid #fff;
}

/* Effet hover */
.ba-image:hover .ba-slider {
  background: #48cae4;
}
/*avant aprés */
/* === SECTION AVANT / APRÈS === */
.before-after-side {
  background: #0b1324;
  padding: 100px 20px;
  position: relative;
  overflow: hidden;
}

/* --- Structure du titre cohérente avec le reste du site --- */
.before-after-side .section-head {
  text-align: center;
  margin-bottom: 60px;
}

.before-after-side .eyebrow {
  text-transform: uppercase;
  font-size: 0.9rem;
  font-weight: 600;
  color: #1a73e8; /* bleu du thème */
  margin-bottom: 10px;
  letter-spacing: 1px;
}

.before-after-side h2 {
  font-size: 2.3rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 15px;
}

.before-after-side .section-description {
  color: #d0d6e2;
  font-size: 1.05rem;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
}

/* --- Conteneur des images --- */
.before-after-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%;
  max-width: 950px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}

.image-box {
  flex: 1;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s ease, filter 0.4s ease;
  height: 340px;
}

.image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

/* --- Etiquette AVANT / APRÈS --- */
.image-box .overlay {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: rgba(11, 19, 36, 0.75);
  padding: 10px 20px;
  border-radius: 6px;
  transition: background 0.3s ease, color 0.3s ease;
}

.image-box .overlay span {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: color 0.3s ease;
}

/* --- Hover --- */
.image-box:hover {
  transform: scale(1.03);
  z-index: 2;
}

.image-box:hover img {
  transform: scale(1.1);
  filter: brightness(1.05);
}

.image-box:hover .overlay {
  background: rgba(26, 115, 232, 0.9);
}

.image-box:hover .overlay span {
  color: #ffffff;
}

/* --- Responsive --- */


/* BROSSE MAGIQUE */ 



/* EFFET CARD FLIPP */




.truck-gallery .section-head {
  text-align: center;
  margin-bottom: 60px;
}



.truck-gallery .eyebrow {
  color: #007bff;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.9rem;
  margin-bottom: 8px;
  letter-spacing: 1px;
}

/* Grille responsive 4x2 */
.truck-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}




/* --- Card Flip --- */
.truck-card {
  perspective: 1000px;
}

.card-inner {
  position: relative;
  width: 100%;
  padding-top: 70%; /* ratio 4:3 */
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.4, 0.2, 0.2, 1);
  cursor: pointer;
}

/* Animation du flip */
.truck-card:hover .card-inner {
  transform: rotateY(180deg);
}

/* --- Faces avant et arrière --- */
.card-front,
.card-back {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  backface-visibility: hidden;
  box-shadow: 0 8px 18px rgba(0,0,0,0.1);
  transition: opacity 0.4s ease, transform 0.8s ease;
}

/* Face avant */
.card-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s ease;
}

/* Transparence sur hover */
.truck-card:hover .card-front img {
  opacity: 0.4;
  filter: blur(1px);
}
  /* Conteneur fixé en fond (ne gêne pas les interactions) */
  .soap-bubbles{
    position: fixed;
    inset: 0;
    z-index: 0;            /* fond : veille à ce que ton contenu ait z-index > 0 (header a 50 déjà) */
    pointer-events: none;  /* laisse cliquer au travers */
    overflow: hidden;
  }


/* Face arrière */
.card-back {
  background: rgba(11, 19, 36, 0.9); /* + transparence */
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotateY(180deg);
  backdrop-filter: blur(4px);
}

.card-back h3 {
  font-size: 1.4rem;
  text-align: center;
  padding: 20px;
  color: #fff;
  letter-spacing: 0.5px;
}
/*EFFET CARD 2.0*/ 
.expand-gallery {
  background: #f6f9fc;
  padding: 100px 0;
  position: relative;
  overflow: hidden;
  z-index: 2;
}

.expand-gallery .section-head {
  text-align: center;
  margin-bottom: 60px;
}

.expand-gallery h2 {
  color: #0b1324;
  font-size: 2.4rem;
}

.expand-gallery .eyebrow {
  color: #007bff;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.9rem;
  margin-bottom: 8px;
  letter-spacing: 1px;
}

/* --- Container principal --- */
.expand-grid {
   display: flex;
   justify-content: center;
   align-items: stretch;
   gap: 20px;
   width: 100%;
   height: 500px;
   flex-wrap: nowrap;
 }



/* Remplacement : grille de prestations et cartes (responsive stable) */
.grid-3{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch; /* force les cartes à avoir la même hauteur */
  justify-content: center;
  width: 100%;
  margin:  auto;
  padding: 0;
}

/* Service / carte */
.service{
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));
  border:1px solid rgba(148,163,184,.18);
  border-radius:20px;
  overflow:hidden;
  width:100%;
  min-height: 260px; /* évite écrasement vertical */
}

/* Image de service : couvrir la largeur et garder ratio */
.service img{
  width:100%;
  height:180px;
  object-fit:cover;
  display:block;
}

/* Corps du service prend l'espace restant */
.service .body{
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
}
.custom{
  display:flex;align-items:center;justify-content:space-between;
  
}
#contact .card {
  background: linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));
  border:1px solid rgba(148,163,184,.18);
  border-radius:20px;
  overflow:hidden;
  width:100%;
  padding-top: 200px;
 /* évite écrasement vertical */
}x
/* Titres et texte adaptés */
.service h3{ margin:0 0 6px; font-size:1.1rem; }
.service p{ margin:0; color:var(--muted); font-size:0.95rem; line-height:1.4; }

/* Points de rupture conservateurs */


@media (max-width: 640px) {
  .grid-3 { grid-template-columns: 3fr; width: 100%;}
  .service { min-height: auto; }
  .service img { height:100px; } /* image un peu plus haute pour lisibilité */
  .service .body { padding:14px; }
  .hero-cards, .truck-grid { gap:5px; }
    .hero-inner { grid-template-columns: 1fr; padding: 48px 0; gap: 5px; }
  .row { grid-template-columns: 1fr; }
  .hero-cards { grid-template-columns: repeat(2, 1fr); gap: 5px; }
  .logos-track img { height: 48px; }
   .grid-3 img { height: 48px; }
      .cta {
    display: none !important;
    visibility: hidden;
  }
    .tel, .cta { 
    display: none !important; 
  }
 #contact .card-2{
    display: none !important;
  }
}
/* ...existing code... */


/* Truck / grid cards : éviter écrasement */


/* Petit ajustement général pour iPhone non désirant text-overflow */
* { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
/* ...existing code... */

/* --- Carte --- */
.expand-card {
  flex: 1;
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  position: relative;
  transition: flex 0.45s ease, transform 0.25s ease, min-height 0.25s ease;
  cursor: pointer;
  overflow: hidden;
    min-height: 220px;

}

/* --- Effet au survol --- */
.expand-card:hover {
  flex: 3;
  transform: scale(1.02);
}

/* --- Réduction des autres cartes --- */
.expand-grid:hover .expand-card:not(:hover) {
  flex: 0.8;
  filter: brightness(0.7) blur(1px);
}

/* --- Overlay (texte) --- */
.card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 30px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.expand-card:hover .card-overlay {
  opacity: 1;
  transform: translateY(0);
}

/* --- Titres et textes --- */
.card-overlay h3 {
  font-size: 1.6rem;
  margin-bottom: 8px;
  color: #fff;
}

.card-overlay p {
  font-size: 0.95rem;
  line-height: 1.4;
  color: #e2e8f0;
}

/* --- Responsive --- */
/* ...existing code... */

/* --- Breakpoints consolidés (remplacer toutes les @media existantes par celles-ci) */

/* Tablettes / petits écrans larges */
@media (max-width: 1000px) {
  .hero-inner { grid-template-columns: 1fr; padding: 48px 0; gap: 5px; }
  .row { grid-template-columns: 1fr; }
  .hero-cards { grid-template-columns: repeat(2, 1fr); gap: 5px; }
  .logos-track img { height: 48px; }
    .grid-3 { grid-template-columns: repeat(3, 1fr); gap:5px; }
  .service img { height:170px; }
   .cta {
    display: none !important;
    visibility: hidden;
  }
    .tel, .cta { 
    display: none !important; 
  }
   #contact .card-2{
    display: none !important;
  }
}

/* Mobile principal (iPhone ~ portrait) */
@media (max-width: 430px) {
  section { max-width:580px; justify-content: space-evenly; }
  /* header / barre */
  header { --header-h: 64px; height: var(--header-h); }
  .bar { padding: 0 12px; gap: 5px; }
  nav ul { flex-wrap: nowrap; }
    .cta {
    display: none !important;
    visibility: hidden;
  }
    .tel, .cta { 
    display: none !important; 
  }
   #contact .card-2{
    display: none !important;
  }

  /* hero / cards */
  .hero-inner { padding: 28px 0; gap: 5px; text-align: center; }
  .hero-logo { max-width: 260px; margin: 16px auto 0; }
  .hero-cards { grid-template-columns: 1fr 1fr; gap: 5px; }
  .card { height: auto; 
  }

  /* before/after : garder côte-à-côte + scroll horizontal fluide */
  .ba-image { height: 340px; }
  .before-after-container {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 5px;
    padding: 0 5px;
    width: 100%;
  }
  .testis { grid-template-columns: repeat(1, 3fr); gap: 5px;  }
  .image-box { flex: 0 0 300px; height: 200px; min-width: 260px; }

  /* info / karcher : empilement */
  .info-content { flex-direction: column; text-align: center; gap: 24px; }
  .info-image img { max-width: 260px; }

  /* expand gallery -> colonne */
  .expand-grid {
    flex-wrap: wrap;
    height: auto;
    gap: 12px;
    align-items: flex-start;
    justify-content: center;
  }

  /* cartes : disposition en 2 colonnes adaptatives */
  .expand-card {
    flex: 1 1 calc(50% - 12px);
    min-width: 140px;
    min-height: 140px;
    transition: transform 0.25s ease, min-height 0.25s ease, flex 0.35s ease;
    padding: 10px;
    border-radius: 12px;
  }

  /* comportement au clic (classe .active ajoutée par main.js) :
     la carte active s'étend sur toute la largeur */
  .expand-card.active {
    flex: 1 1 100%;
    min-height: 240px;
    transform: scale(1.02);
    z-index: 5;
  }

  /* overlay : visible et en flux sur mobile (pas d'absolute couvrant) */
  .card-overlay {
    position: relative;
    inset: auto;
    padding: 12px;
    opacity: 1;
    transform: none;
    background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.15));
    border-radius: 8px;
  }
   footer {height: auto; max-width: 100%;}


  #contact .container { width: 100%;} /* A verifier */

/*taille des cards*/




  .card-overlay {
    padding: 10px;
  }

  .card-overlay h3 {
    font-size: 0.9rem;
  }

  .card-overlay p {
    font-size: 0.75rem;
  }

  /* Ajustement header/footer */
  header .container.bar {
  display: flex;

  }

  footer .foot {
    grid-template-columns: 2fr;
    text-align: center;
    gap: 20px;
  }
#contact .container .grid-3 {
    grid-template-columns: 1fr;
    gap: 5px;

}
}
/* Centrer et espacer les éléments de la section Contact */
#contact .grid-3 {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 auto;
}

#contact .grid-3 .card {
  flex: 1 1 420px;      /* s'adapte mais garde une largeur lisible */
  max-width: 520px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: inherit;  /* conserve l'apparence existante */
}

/* Forcer les éléments de formulaire à occuper toute la largeur de la carte */
#contact .grid-3 .card .hero-form,
#contact .grid-3 .card form,
#contact .grid-3 .card .row,
#contact .grid-3 .card input,
#contact .grid-3 .card select,
#contact .grid-3 .card textarea {
  width: 100%;
}

/* Centrer le CTA dans la carte contact */
#contact .grid-3 .card .cta {
  margin-top: 8px;
  align-self: center;
}

/* Responsive : empilement + espacements réduits */
@media (max-width: 640px) {
  #contact .grid-3 {
    flex-direction: column;
    gap: 10px;
    padding: 0 12px;
  }
  #contact .grid-3 .card {
    flex: 1 1 100%;
    max-width: 100%;
    min-width: 0;
    padding: 16px;
  }
     .cta {
    display: none !important;
    visibility: hidden;
  }
    .tel, .cta { 
    display: none !important; 
  }
    footer .foot {
    grid-template-columns: 2fr;
    text-align: center;
    gap: 20px;
  }
    .testis { grid-template-columns: repeat(2, 1fr); gap: 5px;  }



}
/* ...existing code...
{ changed code }
// ...existing code...
```// filepath: c:\Users\zmdu1\Documents\site\NPL\style.css
// ...existing code...
/* Centrer et espacer les éléments de la section Contact */
#contact .grid-3 {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 auto;
}

#contact .grid-3 .card {
  flex: 1 1 420px;      /* s'adapte mais garde une largeur lisible */
  max-width: 520px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  text-align: center;
  background: inherit;  /* conserve l'apparence existante */
}

/* Forcer les éléments de formulaire à occuper toute la largeur de la carte */
#contact .grid-3 .card .hero-form,
#contact .grid-3 .card form,
#contact .grid-3 .card .row,
#contact .grid-3 .card input,
#contact .grid-3 .card select,
#contact .grid-3 .card textarea {
  width: 100%;
}

/* Centrer le CTA dans la carte contact */
#contact .grid-3 .card .cta {
  margin-top: 8px;
  align-self: center;
}

/* Responsive : empilement + espacements réduits */
@media (max-width: 640px) {
  #contact .grid-3 {
    flex-direction: column;
    gap: 5px;
 
  }
  #contact .grid-3 .card {
    flex: 1 1 100%;
    max-width: 100%;
    min-width: 0;
    padding: 16px;
  }
     .cta {
    display: none !important;
    visibility: hidden;
  }
    .tel, .cta { 
    display: none !important; 
  }

}
#contact .section-head {
  justify-content: space-between;}
/* ...existing code...
{ changed code }
// ...existing code...
/* Navigation compacte / bouton burger visible */
@media (max-width: 860px) {
  nav ul { display: none; }
  .burger { display: inline-flex; }
  .tel { display: inline-flex; }
  .brand span { font-size: 15px; }
   .cta {
    display: none !important;
    visibility: hidden;
  }
    .tel, .cta { 
    display: none !important; 
  }

}

/* Petits smartphones */
@media (max-width: 600px) {
  .truck-grid { grid-template-columns: 1fr; gap: 5px; }
  .truck-card .card-front img { height: 220px; object-fit: cover; }
  .hero-cards { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr; gap: 5px; }
    .cta {
    display: none !important;
    visibility: hidden;
  }
    .tel, .cta { 
    display: none !important; 
  }

}

/* Très petits écrans (iPhone portrait étroit / anciens) */
@media (max-width: 380px) {
  .brand span { font-size: 14px; }
  .brand img { width: 34px; height: 34px; }
    .cta {
    display: none !important;
    visibility: hidden;
  }
     .tel, .cta { 
    display: none !important; 
  }
   #contact .card-2{
    display: none !important;
  }
  h1 { font-size: 28px; line-height: 1.1; }
  .lead { font-size: 15px; }
  .container { padding-left: 12px; padding-right: 12px; }
  .hero-inner { padding: 15px 0; gap: 5px; }
  .image-box { flex: 0 0 160px; height: 180px; }
      .expand-card { flex: 1 1 100%; min-height: 120px; }
    .expand-card.active { min-height: 200px; }
}

/* Raccourci pour mobiles très étroits (optionnel) */
@media (max-width: 360px) {
  .before-after-side h2 { font-size: 1.5rem; }
  .card { height: auto; }
  .expand-card { height: 100px; }
     .grid-3 img { height: 48px; }
        .cta {
    display: none !important;
    visibility: hidden;
  }
     .tel, .cta { 
    display: none !important; 
  }
  
     
}
@media (max-width: 567px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;}
    .steps {
      grid-template-columns: repeat(2, 2fr);
    
  }

  .service img {
    height: 140px;
  }

  .service .body {
    padding: 10px;
  }

  .service h3 {
    font-size: 1rem;
  }

  .service p {
    font-size: 0.85rem;
  }

  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .section-head h2 {
    font-size: 1.4rem;
  }

  .section-head .cta {
    width: 100%;
    text-align: center;
  }
 .cta {
    display: none !important;
    visibility: hidden;
  }
     .tel, .cta { 
    display: none !important; 
  }
  #contact .card-2{
    display: none !important;
  }
}
/* ...existing code... */
/* Effet karcher */
/* Container général (conserve ton style global) */
.info-section {
 
  padding: 100px 0;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Structure */
.info-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- ETAT INITIAL (hors écran) --- */
.info-text,
.info-image {
  transition: transform 0.9s cubic-bezier(.22,.9,.31,1), opacity 0.9s cubic-bezier(.22,.9,.31,1);
  opacity: 0;
  will-change: transform, opacity;
}

/* texte : part du haut-gauche */
.info-text {
  transform: translate(-80px, -60px) scale(0.98);
}

/* image : part du bas-droite */
.info-image {
  transform: translate(80px, 60px) scale(0.98);
  text-align: right;
}

/* l'image elle-même (zoom hover) */
.info-image img {

  max-width: 100%;
  border-radius: 18px;

  transition: transform 0.45s cubic-bezier(.22,.9,.31,1), filter 0.45s ease;
  display: block;
}

/* hover : zoom image */
.info-image:hover img {
  transform: scale(1.06);
}

/* --- ETAT VISIBLE (ARRIVEE) --- */
.info-section.in-view .info-text,
.info-section.in-view .info-image {
  opacity: 1;
  transform: translate(0,0) scale(1);
}

/* --- SORTIE : si on quitte vers le bas, faire partir vers bas/droite --- */
.info-section.out-down .info-text {
  opacity: 0;
  transform: translate(-120px, 100px) scale(0.96);
}
.info-section.out-down .info-image {
  opacity: 0;
  transform: translate(140px, 140px) scale(0.96);
}

/* --- SORTIE : si on quitte par le haut, faire partir vers haut/gauche --- */
.info-section.out-up .info-text {
  opacity: 0;
  transform: translate(-140px, -140px) scale(0.96);
}
.info-section.out-up .info-image {
  opacity: 0;
  transform: translate(120px, -120px) scale(0.96);
}

/*EFFET BULLE*/
/* --- SECTIONS DE REPÈRE --- */
#start-bubbles,
#end-bubbles {
  height: 1px;
  background: transparent;
}

/* --- ZONE À BULLES --- */
#bubbles-area {
  position: relative;
  overflow: hidden;
 
}

.bubbles-background {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Style des bulles */
.bubble {
  position: absolute;
  top: -10vh;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(173, 216, 230, 0.25) 35%,
    rgba(173, 216, 230, 0.06) 70%,
    rgba(255, 255, 255, 0.02) 100%
  );
  box-shadow: inset -8px -6px 18px rgba(255, 255, 255, 0.35);
  animation: bubble-fall linear forwards;
  will-change: transform, opacity;
  opacity: 0.9;
}

/* Animation de descente */
@keyframes bubble-fall {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(120vh) scale(1.1);
    opacity: 0;
  }
}

/* --- CONTENU INTERNE --- */
#bubbles-area .content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.sub-section {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(6px);
  padding: 60px;
  border-radius: 16px;
  margin: 60px 0;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}