@media (max-width: 700px) {
  .decorative-clouds.fade-out {
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
  }
  .decorative-clouds {
    transition: opacity 0.5s;
  }
}
/* ===== CSS Variables ===== */
:root {
  --max-w: 1420px;
  --r-xl: 30px;
  --r-md: 20px;
  --pad: 3em;
  --gap-lg: 1em;
  --brand: #23272f;
  --brand-contrast: #fff;
  --accent-75: #c7f5fabf;
  --white-75: rgba(255, 255, 255, 0.75);
  --shadow-sm: 0 2px 8px rgba(30, 30, 30, 0.07);
  --shadow-md: 0 4px 16px rgba(30, 30, 30, 0.13);
  --transition-base: 0.3s ease;
  --transition-smooth: 0.2s cubic-bezier(0.77, 0, 0.18, 1);
}

/* ===== Base Reset ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  background: url('/images/bgmountains.jpg') center/cover no-repeat fixed;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0 4vw; /* Marges latérales responsive */
}

/* ===== Decorative Clouds ===== */
.decorative-clouds {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: 1000;
  overflow: hidden;
}

.cloud {
  position: absolute;
  max-width: 2000px;
  height: auto;
  opacity: 0.7;
  will-change: transform, opacity;
  transition: opacity 0.7s ease;
}

.cloud-left {
  top: 20%;
  left: -30%;
  animation: floatLeft 10s ease-in-out infinite;
  transform-origin: center;
}

.cloud-right {
  top: 30%;
  right: -30%;
  animation: floatRight 10s ease-in-out infinite reverse;
  transform-origin: center;
}

@keyframes floatLeft {
  0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); }
  25% { transform: translateY(-15px) translateX(10px) rotate(1deg); }
  50% { transform: translateY(-8px) translateX(-5px) rotate(-0.5deg); }
  75% { transform: translateY(-20px) translateX(8px) rotate(0.8deg); }
}

@keyframes floatRight {
  0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); }
  25% { transform: translateY(-12px) translateX(-8px) rotate(-1deg); }
  50% { transform: translateY(-18px) translateX(6px) rotate(0.7deg); }
  75% { transform: translateY(-5px) translateX(-10px) rotate(-0.3deg); }
}

/* ===== Containers ===== */
.container-header,
.container-services,
.container-projets,
.container-travail,
.container-contact {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--pad);
}

.container-header {
  background: none;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  margin: 8vw auto 0;
  position: relative;
  overflow: hidden;
  min-height: 55vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.container-header::before,
.container-contact::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background: url('/images/noise.png') repeat;
}

.container-header::before { 
  border-radius: var(--r-xl) var(--r-xl) 0 0; 
}

.container-contact::before { 
  border-radius: 0 0 var(--r-xl) var(--r-xl); 
  opacity: 1; 
}

.container-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, var(--accent-75) 0%, var(--white-75) 100%);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  transition: filter var(--transition-smooth);
}

.container-header > *,
.container-contact > * { 
  position: relative; 
  z-index: 2; 
}

.container-services,
.container-travail { 
  background: #fff; 
}

.container-projets {
  background: rgba(0, 0, 0, 0.6);
}

.container-contact {
  background: linear-gradient(180deg, var(--white-75) 0%, var(--accent-75) 100%);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  margin: 0 auto 4vw;
  position: relative;
  overflow: hidden;
}

.container-contact::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, var(--white-75) 0%, var(--accent-75) 100%);
  transition: filter var(--transition-smooth);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}

/* ===== Header Content ===== */
.header-content {
  align-self: flex-end;
  margin-bottom: 1em;
  width: 100%;
  max-width: var(--max-w);
}

.header-content h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.2;
  margin: 3em 0 0.5em;
  font-weight: 700;
}

.header-content p {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  margin-bottom: 2em;
  max-width: 80ch;
}

.header-content a { 
  width: fit-content; 
  margin: 0; 
}

/* ===== Header Layout ===== */
.container-header {
  position: relative;
}

/* Conteneur unifié logo + navigation */
.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0; /* Pas de padding horizontal pour alignement */
  /* PAS de background au début - transparent */
  margin: 0 auto; /* Centré comme les autres conteneurs */
  max-width: var(--max-w); /* Aligné sur la même grille */
  width: calc(100%); /* Même largeur que les autres conteneurs */
  transition: opacity var(--transition-base), 
              background-color var(--transition-base), 
              box-shadow var(--transition-base), 
              border-radius var(--transition-base), 
              padding var(--transition-base), 
              transform var(--transition-base);
}

/* Logo dans le conteneur */
.brand-logo-container {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 48px; /* Hauteur fixe pour alignement avec nav */
}

.brand-logo-container a {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}

/* Styles spécifiques pour le lien logo - annule TOUS les styles de liens */
.logo-link {
  display: block !important;
  background: none !important;
  color: inherit !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: none !important;
  border: none !important;
  cursor: pointer !important;
}

.logo-link:hover,
.logo-link:focus,
.logo-link:active {
  background: none !important;
  color: inherit !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: none !important;
  border: none !important;
  transform: none !important;
}

.brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  text-decoration: none;
  height: 100%;
  /* PAS de background pour le logo */
}

.brand-logo img {
  height: 32px;
  width: auto;
  display: block;
}

.brand-logo:hover,
.brand-logo:focus,
.brand-logo-container a:hover,
.brand-logo-container a:focus { 
  transform: none;
  background: none !important; /* Force aucun background */
  background-color: transparent !important; /* Force transparent */
  box-shadow: none !important; /* Force aucune ombre */
  color: inherit; /* Garde la couleur normale */
}

/* ===== Navigation ===== */
nav { 
  display: flex;
  align-items: center;
  gap: 20px;
}

.hamburger {
  display: none;
  cursor: pointer;
  padding: 8px;
  position: relative;
  background: none;
  border: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; /* Empêche la compression */
}

.hamburger-icon {
  width: 24px;
  height: 24px;
  opacity: 1;
  transition: opacity var(--transition-base);
}

.hamburger .exit-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.hamburger.active .hamburger-icon { opacity: 0; }
.hamburger.active .exit-icon { opacity: 1; }

nav ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
  gap: 15px; /* 15px entre chaque lien */
  height: 48px; /* Même hauteur que le logo container */
}

nav ul li { 
  margin: 0; 
}

nav a {
  color: #000;
  text-align: center;
  font: 400 16px/1 'Inter', sans-serif;
  text-decoration: none;
  display: inline-block;
  padding: 8px 12px;
  position: relative;
  transition: color var(--transition-base), transform var(--transition-base);
}

nav a:hover { 
  color: var(--brand); 
  transform: translateY(-4px); 
}

/* Exclut le logo des effets de hover de navigation */
nav a.brand-logo:hover { 
  color: inherit; /* Garde la couleur normale */
  transform: none; /* Pas d'effet translateY */
  background: none; /* Assure qu'il n'y a pas de background */
}

nav a.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  height: 2px;
  background: #000;
  border-radius: 2px;
}

/* ===== Sticky Navigation ===== */
.nav-container.sticky {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  margin: 0;
  width: calc(100% - 10vw);
  max-width: calc(var(--max-w) - 60px);
  opacity: 0;
  /* Background seulement quand sticky */
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 50px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  padding: 10px 20px; /* Padding seulement quand sticky */
}

.nav-container.sticky.show { 
  opacity: 1; 
}

.nav-container.sticky.hide {
  opacity: 0;
  background-color: transparent;
  backdrop-filter: none;
  box-shadow: none;
  border-radius: 0;
  padding: 10px 0; /* Retour au padding normal */
}

.nav-placeholder { 
  display: none; 
  height: 60px; 
}

.nav-placeholder.active { 
  display: block; 
}

nav a.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  height: 2px;
  background: #000;
  border-radius: 2px;
}

/* ===== Buttons & Links ===== */
a:not(nav a) {
  display: inline-block;
  background: var(--brand);
  color: var(--brand-contrast) !important;
  border-radius: 999px;
  padding: 0.7em 2em;
  font-weight: 600;
  font-size: 1.08em;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: background var(--transition-smooth), 
              color var(--transition-smooth), 
              box-shadow var(--transition-smooth);
  border: none;
  cursor: pointer;
}

a:not(nav a):hover {
  background: url('./images/cta-bg.jpg') center/cover no-repeat !important;
  color: #000 !important;
  box-shadow: var(--shadow-md);
}

/* ===== Services Grid ===== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2em;
}

.service-card {
  position: relative;
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
              box-shadow var(--transition-base);
  text-decoration: none;
  aspect-ratio: 1 / 1;
  background-color: #fff;
  cursor: default;
  box-shadow: var(--shadow-sm);
}

.service-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.service-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  color: #1a1a1a;
  font-weight: 600;
  font-size: 0.9em;
  text-align: center;
  padding: 1em;
  z-index: 3;
  transition: background var(--transition-base);
}

.service-card:hover .service-label { 
  background: #fff; 
}

/* ===== Layout Sections ===== */
.services-flex,
.contact-flex {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-lg);
 
}

.services-title,
.contact-title { 
  flex-shrink: 0; 
}

.services-title h2,
.travail-content h2,
.contact-title h2 { 
  margin: 0 1em 0 0; 
  font-size: 2rem; 
}

.services-desc,
.contact-desc { 
  flex: 1; 
}

.services-desc p,
.contact-desc p { 
  margin: 0 0 1em 0; 
  font-size: 1.1rem; 
}

/* ===== Travail Section ===== */
.travail-grid {
  display: flex;
  gap: var(--gap-lg);
  align-items: flex-start;
}

.travail-image { 
  flex: 0 0 auto; 
  width: 320px; 
  margin-right: 2em; 
}

.travail-image img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  object-fit: cover;
  box-shadow: 0 2px 12px rgba(30, 30, 30, 0.1);
  display: block;
}

.travail-content { 
  flex: 1; 
  padding-top: 10px; 
}

/* ===== Carousel Projects ===== */
.carousel-projets {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2em;
  align-items: flex-start;
  background: none;
  min-height: auto;
  max-width: var(--max-w);
  margin: 0 auto;
}

.carousel-left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1.5em;
  height: 100%;
}

.carousel-left h2 { 
  font-size: 2.1em; 
  margin: 0 0 0.5em; 
  color: #fff; 
}

.carousel-left p { 
  margin: 0 0 0.5em; 
  font-size: 1.08em; 
  color: #fff; 
}

.carousel-cta { 
  margin-top: 0.5em; 
  background: #fff !important; 
  color: #000 !important; 
}

.carousel-cta:hover {
  background: #f0f0f0 !important;
  color: #000 !important;
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.2);
}

.carousel-right {
  width: 100%;
  margin-left: auto;
}

.carousel-images-container {
  position: relative;
  width: 100%;
  height: auto;
  transition: transform 1s ease-in-out;
}

/* Image fantôme pour définir la hauteur du conteneur */
.carousel-images-container::before {
  content: '';
  display: block;
  width: 100%;
  padding-bottom: 56.25%; /* Ratio 16:9 par défaut, ajustable selon tes images */
}

.carousel-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  border-radius: 12px;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.carousel-image.active { 
  opacity: 1;
}

/* ===== Typography ===== */
h1, h2, h3 { 
  font-weight: 700; 
  line-height: 1.2; 
}

p { 
  line-height: 1.6; 
  color: #333; 
}

ul { 
  list-style-position: inside; 
  margin: 1em 0; 
}

li { 
  margin: 0.5em 0; 
}

/* ===== Footer ===== */
footer {
  text-align: center;
  color: #ffffff;
  
}

footer p {
color: #ffffff;
}

/* ===== Responsive Design ===== */
@media (max-width: 1500px) {
  nav.sticky {
    width: calc(100% - 8vw);
    max-width: calc(var(--max-w) - 60px);
  }
}

@media (max-width: 1200px) {
  .cloud {
    max-width: 800px;
  }
  
  .cloud-left {
    top: 15%;
    left: -60%;
  }
  
  .cloud-right {
    top: 35%;
    right: -60%;
  }
}

@media (max-width: 1100px) {
  body {
    padding: 0 3vw; /* Marges plus petites sur tablette */
  }

  .container-header,
  .container-services,
  .container-projets,
  .container-travail,
  .container-contact {
    padding: var(--pad);
    margin: 0 auto;
  }

  .container-header { 
    margin: 8vw auto 0; 
    min-height: 60vh; 
  }
  
  .container-contact { 
    margin: 0 auto 2vw; 
  }

  .services-flex { 
    gap: 3em; 
  }
  
  .services-grid { 
    grid-template-columns: repeat(2, 1fr); 
    gap: 1.5em; 
  }

  .carousel-projets {
    grid-template-columns: 1fr 1.5fr; 
    gap: 2em; 
    min-height: auto; 
  }
  
  .carousel-right { 
    height: auto; 
  }
}

@media (max-width: 900px) {
  body {
    padding: 0 2.5vw; /* Marges encore plus petites sur mobile large */
  }

  .cloud {
    max-width: 800px;
  }
  
  .cloud-left {
    top: 15%;
    left: -60%;
  }
  
  .cloud-right {
    top: 25%;
    right: -60%;
  }

  .services-flex,
  .contact-flex { 
    flex-direction: column; 
    gap: 1.5em; 
  }

  .contact-flex { 
    display: flex; 
  }

  .travail-grid { 
    flex-direction: column; 
    gap: 2em; 
  }
  
  .travail-image { 
    width: 100%; 
    max-width: 420px; 
  }

  .services-grid { 
    grid-template-columns: repeat(2, 1fr); 
    gap: 1.5em; 
    margin-top: 1em; 
  }

  .carousel-projets {
    grid-template-columns: 1fr; 
    gap: 2em; 
    min-height: auto; 
  }
  
  .carousel-right { 
    height: auto; 
    justify-content: flex-start;
    overflow: visible;
  }
}

@media (max-width: 700px) {
  body {
    padding: 0 2vw; /* Marges minimales sur mobile */
  }

  /* ===== Layout Containers ===== */
  .container-header,
  .container-services,
  .container-projets,
  .container-travail,
  .container-contact {
    padding: 2em;
    margin: 0 auto;
  }

  .container-header { 
    margin: 8vw auto 0; 
    min-height: 50vh; 
  }
  
  .container-contact { 
    margin: 0 auto 4vw; 
  }

  .services-flex { 
    gap: 1em; 
  }

  /* ===== Navigation Mobile - Même logique que Desktop ===== */
  .nav-container {
    /* Position relative pour que le menu mobile (nav ul) s'aligne toujours sous la nav */
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 0em; /* Même padding horizontal que les conteneurs mobiles */
    /* Transparent par défaut, comme sur desktop */
    background-color: transparent;
    backdrop-filter: none;
    border-radius: 0;
    box-shadow: none;
    /* Aligné sur la grille comme les autres conteneurs */
    margin: 0 auto;
    max-width: var(--max-w);
    width: 100%; /* Pleine largeur, padding géré par le padding interne */
  }

  .nav-container.sticky {
    /* Mode sticky avec background, comme sur desktop */
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    width: calc(100% - 4em);
    max-width: calc(var(--max-w) - 40px);
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 100px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 0px 10px; /* Même padding vertical que normal */
    opacity: 1;
  }

  /* Logo inchangé */
  .brand-logo-container {
    flex-shrink: 0;
  }

  /* Navigation : hamburger visible, menu caché */
  /* ===== NAVIGATION MOBILE - VERSION FINALE ===== */
  
  /* 1. Navigation container - même logique que desktop */
  .nav-container {
    position: static; /* Normale dans le flow */
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    max-width: var(--max-w);
    width: 100%;
    /* Transparent par défaut */
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }

  /* 2. Mode sticky - même logique que desktop */
  .nav-container.sticky {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    width: calc(100% - 3em);
    max-width: calc(var(--max-w) - 40px);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 100px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 5px 25px;
  }

  /* 3. Logo - reste identique */
  .brand-logo-container {
    flex-shrink: 0;
  }

  /* 4. Navigation - container pour hamburger et menu */
  nav {
     /* Parent pour le menu déroulant */
    display: flex;
    align-items: center;
  }

  /* 5. Hamburger visible sur mobile */
  .hamburger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
  }

  /* 6. MENU DÉROULANT - RESET complet des règles desktop */
  nav ul {
    /* Override des règles desktop */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    height: auto !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 10px !important;

  /* Positionnement mobile - SOUS la nav, sans masquer le logo ni le bouton */
  position: absolute;
  top: 100%; /* juste sous la nav */
  left: 0;
  right: 0;

  margin: 0;
  max-width: none;
    
    /* Style mobile */
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    overflow: hidden;
  z-index: 1000;
  /* S'assure que la nav, le logo et le bouton restent au-dessus du menu mobile */
  .nav-container, .brand-logo-container, .hamburger {
    position: relative;
    z-index: 2000;
  }
    
    /* État fermé par défaut */
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
    pointer-events: none;
    transition: all 0.2s ease;
  }

  /* 7. Menu ouvert */
  nav ul.open {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto;
  }

  /* 8. Liens du menu - OVERRIDE complet des styles desktop */
  nav ul li {
    margin: 0 !important;
    width: 100%;
  }

  nav ul li a {
    /* Reset des styles desktop */
    display: block !important;
    padding: 18px 25px !important;
    text-align: center !important;
    text-decoration: none;
    color: #333 !important;
    font-weight: 400;
    height: auto !important;
    width: 100%;
    
    /* Style mobile - SANS bordures */
    border-bottom: none; /* Pas de lignes grises */
    transition: background-color 0.2s ease;
    justify-content: center !important;
  }

  /* Premier et dernier liens */
  nav ul li:first-child a {
    border-radius: 15px 15px 0 0;
  }

  nav ul li:last-child a {
    border-bottom: none;
    border-radius: 0 0 15px 15px;
  }

  /* Hover des liens */
  nav ul li a:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
    transform: none !important;
  }

  /* Exception pour le logo sur mobile aussi */
  .brand-logo:hover {
    background: none !important;
    background-color: transparent !important;
    transform: none !important;
  }

  /* ===== Responsive Grids ===== */
  .services-grid { 
    grid-template-columns: repeat(2, 1fr); 
    gap: 1em; 
  }

  .carousel-projets {
    grid-template-columns: 1fr; 
    min-height: auto; 
  }
  
  .carousel-right { 
    height: auto; 
    display: flex; 
    flex-direction: column; 
    gap: 0; 
  }
  
  .carousel-left h2 { 
    font-size: 1.8em; 
  }
  
  .carousel-left p { 
    font-size: 1em; 
  }
}

@media (max-width: 600px) {
  .cloud {
    max-width: 600px;
    opacity: 0;
  }
  
  .cloud-left {
    left: -95%;
  }
  
  .cloud-right {
    right: -95%;
  }
}

@media (min-width: 2000px) {
  .cloud {
    max-width: 1600px;
  }
  
  .cloud-left {
    top: 15%;
    left: 0%;
  }
  
  .cloud-right {
    top: 35%;
    right: 0%;
  }
}

/* ===== Accessibility & Performance ===== */
@media (hover: none) {
  nav a:hover { 
    transform: none; 
  }
  
  .service-card:hover { 
    transform: none; 
  }
}

@media (prefers-reduced-motion: reduce) {
  * { 
    animation-duration: 0.01ms !important; 
    animation-iteration-count: 1 !important; 
    transition-duration: 0.01ms !important; 
    scroll-behavior: auto !important; 
  }
  
  .cloud { 
    animation: none !important; 
  }
}

/* ===== Dynamic Filter Support ===== */
.container-header::after {
  filter: var(--header-filter, hue-rotate(0deg));
  transition: filter 0.6s cubic-bezier(0.77, 0, 0.18, 1);
}

.container-contact::after {
  filter: var(--contact-filter, hue-rotate(0deg));
  transition: filter 0.6s cubic-bezier(0.77, 0, 0.18, 1);
}