@charset "UTF-8";

/* ============================== */
/* VARIABLES & POLICES */
/* ============================== */
@supports (-webkit-touch-callout: none) {
  .hero {
      height: -webkit-fill-available;
  }
}

:root {
  --font-primary: "Footlight MT Light", "Playfair Display", Arial, sans-serif;
  --color-gold: #b49c5c;
  --color-background: #333;
  --color-text: #e8cc80;
  --color-accent: #ffd700;
  --color-dark: #333;
}
:root {
  --header-height: 90px;
}

body {
  padding-top: var(--header-height);
}


.laclasse-de-ta-div {
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
}
html, body {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}


/* Animation pour changer le fond d'écran - Compatible iOS */
@keyframes fadeBackground {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animation fluide et compatible */
@keyframes animateBg {
  0% {
    transform: rotate(0deg) scale(1);
  }
  100% {
    transform: rotate(360deg) scale(1.2);
  }
}



body {
  margin: 0;
  padding: 0;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: #e8cc80; /* Applique la couleur à tout le texte */
  font-family: "Footlight MT Light", Arial, sans-serif!important;
  display: flex;
  flex-direction: column;
  font-family: "Footlight MT Light", "Playfair Display", Arial, sans-serif !important;
  height: auto !important;
  overflow: visible;
  position: relative;
  align-items: center;
  will-change: auto;
  flex-direction: column;
  min-height: 100vh; /* S'assure que le body prend toute la hauteur de la fenêtre */
  background: none !important;
  animation: none !important;
  background: #333  !important;
  
}





body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
 
}


.fas, .far, .fal, .fab {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}



/* ==============================
   GESTION DES COOKIES
   ============================== */
.cookie-popup {
  position: absolute;
  bottom: 30px;
  left: 50%;
  right: auto;
  top: auto;
  transform: translateX(-50%);
  background: #1c1710;
  border: 1px solid rgba(212, 175, 55, 0.5);
  color: #fff;
  padding: 14px 16px;
  border-radius: 10px;
  display: none;
  text-align: center;
  z-index: 50;
  width: min(320px, calc(100vw - 32px));
  max-width: 320px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7), 0 0 12px rgba(212, 175, 55, 0.15);
  animation: none !important;
}

.cookie-popup.is-visible {
  display: block;
}

.cookie-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cookie-content h2 {
  display: none;
}

.cookie-text {
  font-size: 12.5px;
  line-height: 1.35;
  margin: 0 auto 10px;
  text-align: center;
  color: #e0d5c0;
}

.cookie-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.cookie-buttons button {
  padding: 6px 12px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  font-weight: bold;
  font-size: 0.95rem;
}

#accept-cookies,
#reject-cookies {
  background: transparent;
  color: #e8cc80;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(180deg, #8c7a3c 0%, #b49c5c 20%, #f5e6a3 40%, #e8cc80 50%, #f5e6a3 60%, #b49c5c 80%, #8c7a3c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  border: 2px solid transparent;
  border-image: linear-gradient(180deg, #8c7a3c 0%, #b49c5c 20%, #f5e6a3 40%, #e8cc80 50%, #f5e6a3 60%, #b49c5c 80%, #8c7a3c 100%) 1;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}

#accept-cookies:hover,
#reject-cookies:hover {
  background-image: linear-gradient(180deg, #d4af37 0%, #f5e6a3 30%, #fff8dc 50%, #f5e6a3 70%, #d4af37 100%);
  -webkit-background-clip: text;
  background-clip: text;
  transform: scale(1.05);
  box-shadow: 0 4px 14px rgba(255, 215, 0, 0.5);
}

.cookie-more-link {
  display: inline-block;
  margin-left: 4px;
  color: #e8cc80;
  font-size: 12px;
  line-height: 1.35;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 0.78;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.cookie-more-link:hover,
.cookie-more-link:focus-visible {
  color: #f5e6a3;
  opacity: 1;
}

 

/* ==============================
   SECTION DES CONTAINER
   ============================== */


.container {
  height: 100vh;
  overflow-y: scroll;
  width: 80%; /* Ajuste selon tes besoins */
  max-width: 1200px; /* Pour éviter que ça s'étale trop */
  margin: 0 auto; /* Centre horizontalement */
  display: flex;
  flex-direction: column; /* Organise en colonne */
  align-items: center; /* Centre les éléments */
}


 h1, h2, h3 {
  font-weight: 500; /* Texte en gras */
}


h1 {
  font-family: "Footlight MT Light", "Playfair Display", Arial, sans-serif !important;
}


p {
  font-weight: 400; /* Texte normal */
}

a {
  color: inherit; /* Hérite de la couleur du texte du parent */
  text-decoration: none; /* Supprime le soulignement par défaut */
  transition: color 0.3s ease;
}

a:hover {
  text-decoration: underline; /* Optionnel : effet au survol */

}


/* Réinitialisation des listes (supprime les petits points) */
ul {
  list-style: none; /* Supprime les puces */
  margin: 0;
  padding: 0;
}
ul:not(.browser-default) {
  padding-left: 0;
  list-style-type: none;
}




/* ==============================
   SECTIONS
   ============================== */

   @supports (-webkit-touch-callout: none) {
    section {
   
      height: 100vh !important;
      min-height: 100%;
    }

  }
  

   section {
    position: relative!important;
    padding: 0px;
    text-align: center;
    margin: 0px 0; /* Ajoute un espacement entre les sections */
    z-index: 1 !important;
    background-image: none !important;
    box-sizing: border-box; /* Inclure padding et bordure dans la taille */
    overflow: visible; /* Changé de clip à visible pour éviter écran noir mobile */
    background-color: #333; /* Remplace par la couleur de ton choix */
    animation: none !important;
    transition: none !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
    font-family: "Footlight MT Light", "Playfair Display", Arial, sans-serif !important;
    min-height: auto; /* Hauteur auto - le hero gère son propre 100vh */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%; /* Pour qu'elles s'adaptent au conteneur */

  }

  /* Exception pour le hero - garder overflow hidden */
  section.kmg-hero.full {
    overflow: hidden;
  }
  
  section p {
    /*margin: 0;*/
    padding: 0;
    font-family: "Footlight MT Light", "Playfair Display", Arial, sans-serif !important;

  }
  
  section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    font-family: "Footlight MT Light", "Playfair Display", Arial, sans-serif !important;

  }

.section {
  opacity: 0; /* Par défaut, invisible */
  transform: translateY(20px); /* Décalage vers le bas */
  transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Animation */
}

.section.visible {
  opacity: 1; /* Rendu visible */
  transform: translateY(0); /* Position normale */

}

.section h1 {
  font-size: 2.5rem; /* Taille du titre */
  margin-bottom: 30px; /* Espacement sous le titre */
  color: #b49c5c; /* Couleur dorée */
  font-family: "Footlight MT Light", "Playfair Display", Arial, sans-serif !important;
}

.section p {
  font-size: 1.2rem; /* Taille du texte */
  line-height: 1.8; /* Hauteur de ligne pour lisibilité */
  margin-bottom: 20px;
}

/* Ajout d'un effet de survol pour les liens dans les sections */
.section a {
  color: #e8cc80; /* Couleur des liens */
  text-decoration: none; /* Supprime le soulignement */
  transition: color 0.3s ease;
}

.section a:hover {
  color: #ffd700; /* Doré plus vif au survol */
}


/* ==============================
   SECTION HERO
   ============================== */



.hero {
  display: flex;
  flex-direction: column; /* Aligne le contenu en colonne */
  justify-content: center; /* Centre verticalement */
  align-items: center; /* Centre horizontalement */
  min-height: 100vh; /* La hauteur prend tout l'écran */
  text-align: center; /* Centre le texte */
  background: rgba(0, 0, 0, 0.979); /* Superposition sombre sur le fond */
  color: #e8cc80; /* Couleur du texte */
  padding-top: 450px; /* Espacement en haut */
  animation: slideIn 2s ease-in-out forwards; /* Ajoute l'animation */
  font-family: "Footlight MT Light", "Playfair Display", Arial, sans-serif !important;
  position: relative;
  overflow: hidden;
  position: relative !important;
  z-index: 1 !important;
  height: 100vh;
  max-width: 100% !important;
  max-height: 100vh !important;
  width: 100%;
  background-image: url("../images/backgroundbody/image1.webp");
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}
/* Image de fond 1 (fixe) */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/backgroundbody/image1.webp");
  background-size: cover;
  background-position: center;
  background-attachment: scroll; /* Compatible iOS */
  filter: brightness(0.60); /* Assombrit directement l'image (70% de noir = 30% de lumière) */
  z-index: 0;
}

/* Image de fond 2 (animée) - Compatible iOS */
.hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/backgroundbody/image2.webp");
  background-size: cover;
  background-position: center;
  background-attachment: scroll; /* Compatible iOS */
  filter: brightness(0.50); /* Assombrit directement l'image 2 (même intensité) */
  animation: fadeBackground 10s infinite alternate;
  z-index: 1;
}

/* Overlay désactivé - Les filtres brightness s'appliquent directement sur les images */
.hero .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent; /* Désactivé car filter: brightness() s'applique déjà */
  z-index: 2;
}

.hero h1 {
  font-size: 3em; /* Taille de police pour le titre */
  margin-bottom: 0px; /* Espacement sous le titre */
  animation: slideIn 2s ease-in-out forwards; /* Ajoute l'animation */
  padding-top: 90px;
  font-family: "Footlight MT Light", "Playfair Display", Arial, sans-serif !important;
  font-weight: bold;
  position: relative;
  z-index: 10; /* Au-dessus de .overlay (z-index: 2) */
}

.hero p {
  font-size: 2em; /* Taille de police pour le texte */
  line-height: 1.8; /* Hauteur de ligne pour une meilleure lisibilité */
  max-width: 800px; /* Largeur maximale pour limiter le texte */
  font-family: "Footlight MT Light", "Playfair Display", Arial, sans-serif !important;
  animation: slideIn 3s ease-in-out forwards; /* Ajoute l'animation */
  font-family: "Footlight MT Light", Arial, sans-serif;
  font-weight: 500;
  position: relative;
  z-index: 10; /* Au-dessus de .overlay (z-index: 2) */
}

/* --- Mobile fix --- */
@media screen and (max-width: 768px) {
  .hero::before {
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
  }

}


/* ==============================
   SECTION SERVICES
   ============================== */
   #services, #realisations, #contact {
    min-height: auto !important;
    height: auto !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative !important;
    z-index:3 !important;
    display: block !important;
    opacity: 3 !important;
    visibility: visible !important;
    position: relative !important;
}
#services-title a {
  display: inline-block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  z-index: 10;
  position: relative;
}

#services-title a:hover {
  color: inherit !important;         /* même couleur au survol */
  text-decoration: underline;        /* seulement un soulignement */
  text-decoration: underline;
}





#services {
  display: flex !important;
  flex-wrap: wrap !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 40px;
  text-align: center;
  padding: 50px 20px;
  background-color: #333;
  box-sizing: border-box;
  font-family: "Footlight MT Light", "Playfair Display", Arial, sans-serif !important;
}

/* Titre de la section */

#services, #realisations, #contact {
    position: relative;
    z-index: 3; /* S'assure que ces sections sont au-dessus de .hero */
}
#services h1 {
  font-size: 2.5rem;
  margin-bottom: 30px;
  color: #e8cc80;
  font-family: "Footlight MT Light", "Playfair Display", Arial, sans-serif !important;
  padding-top: 100px!important;
  padding: 10px;
  width: 100%;
  flex-basis: 100%;
}

/* Style des blocs de service */
.service {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  background-color: #333;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.25);
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.15);
  text-align: center;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
  font-family: "Footlight MT Light", Arial, sans-serif!important;
}


.service:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.3);
}

/* Titre cliquable */
.service a h2 {
  font-size: 1.1em;
  margin: 5px 0 2px;
  color: #e8cc80;
  text-decoration: none;
  font-family: "Footlight MT Light", "Playfair Display", Arial, sans-serif !important;
  text-decoration: none !important;
  width: 100%;
}


.service a h3:hover {
  text-decoration: none !important; /* Souligne au survol */
}

/* Image dans le bloc */
.service img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  padding: 10px;
  max-height: 50%;
  margin: auto;
  display: block;
}

/* Texte descriptif */
.service p {
  padding: 10px;
  font-size: 1em;
  color: #e8cc80;
  line-height: 1.6;
  font-family: "Footlight MT Light", "Playfair Display", Arial, sans-serif !important;
}


/* ==============================
   SECTION REALISATIONS
   ============================== */

/* Réalisations */
.realisations {
  
  padding-bottom: 0; /* Supprime le padding inutile */
  padding-top: 100px; /* Supprime le padding interne */
}

#realisations {
  display: flex;
  flex-direction: column; /* Aligne les éléments en colonne */
  justify-content: center; /* Centre verticalement */
  align-items: center; /* Centre horizontalement */
  min-height: auto;
  text-align: center; /* Centre le texte à l'intérieur */
  margin: 0; /* Supprime les marges externes */
  padding: 20px; /* Ajoute un peu d'espace intérieur */
  box-shadow: 0 4px 10px rgba(255, 215, 0, 0.3);
  z-index: 3 !important;
  position: relative !important;
  /* Dégradé effet miroir doré */
  background: linear-gradient(
    180deg,
    #1a1a1a 0%,
    #2a2a2a 10%,
    #3d3528 25%,
    #b49c5c 45%,
    #e8cc80 50%,
    #b49c5c 55%,
    #3d3528 75%,
    #2a2a2a 90%,
    #1a1a1a 100%
  );
}


#realisations h1  {
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: #e8cc80;
  padding-top: 150px!important;
  padding: 20px; /* Ajoute de l'espace interne */
  font-family: "Footlight MT Light", "Playfair Display", Arial, sans-serif !important;
  Margin-top: -10px;
}



.projet-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #e8cc80;
  text-align: center;
  font-family: "Footlight MT Light", Arial, sans-serif!important;
}


/* Titre cliquable */
.realisations h2 {
  display: none !important;
  font-size: 1.5em !important;
  margin: 10px 0;
  color: #e8cc80; /* Couleur du texte */
  text-decoration: none;
  font-family: "Footlight MT Light", Arial, sans-serif!important;
}

.realisations .gallery {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding-top: 200px;
}

.realisations .gallery img {
  width: 300px;
  height: auto;
  border-radius: 5px;
  box-shadow: 0 4px 10px rgba(255, 215, 0, 0.3);
}

.realisations, #contact {
  background-image: none;
  background-color: #333; /* Remplacez par la couleur souhaitée */
}

/* Conteneur des cartes réalisations - Dégradé effet miroir doré */
.realisation-container {
  background: linear-gradient(
    180deg,
    #1a1a1a 0%,
    #2a2a2a 10%,
    #3d3528 25%,
    #b49c5c 45%,
    #e8cc80 50%,
    #b49c5c 55%,
    #3d3528 75%,
    #2a2a2a 90%,
    #1a1a1a 100%
  );
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
}

/* Conteneur global de la galerie */
.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  box-shadow: 0 4px 10px rgba(255, 215, 0, 0.3);
}

/* Style pour chaque carte */
.card {
  width: 300px;
  height: 400px;
  perspective: 1000px; /* Perspective pour l'effet 3D */
  /* Dégradé effet miroir doré */
  background: linear-gradient(
    180deg,
    #1a1a1a 0%,
    #2a2a2a 10%,
    #3d3528 25%,
    #b49c5c 45%,
    #e8cc80 50%,
    #b49c5c 55%,
    #3d3528 75%,
    #2a2a2a 90%,
    #1a1a1a 100%
  ) !important;
  border-radius: 10px;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateY(0);
  transition: transform 0.6s ease;
  cursor: pointer;
  /* Dégradé effet miroir doré pour l'intérieur de la carte */
  background: linear-gradient(
    180deg,
    #1a1a1a 0%,
    #2a2a2a 10%,
    #3d3528 25%,
    #b49c5c 45%,
    #e8cc80 50%,
    #b49c5c 55%,
    #3d3528 75%,
    #2a2a2a 90%,
    #1a1a1a 100%
  );
  border-radius: 10px;
}

.card:hover .card-inner {
  transform: rotateY(180deg); /* Effet de retournement */
}

/* Face avant */
.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(255, 215, 0, 0.3);
}

.card-front {
  /* Dégradé effet miroir doré pour le fond des cartes */
  background: linear-gradient(
    180deg,
    #1a1a1a 0%,
    #2a2a2a 10%,
    #3d3528 25%,
    #b49c5c 45%,
    #e8cc80 50%,
    #b49c5c 55%,
    #3d3528 75%,
    #2a2a2a 90%,
    #1a1a1a 100%
  );
}

.card-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Dégradé pour quand l'image ne charge pas */
  background: linear-gradient(
    180deg,
    #1a1a1a 0%,
    #2a2a2a 10%,
    #3d3528 25%,
    #b49c5c 45%,
    #e8cc80 50%,
    #b49c5c 55%,
    #3d3528 75%,
    #2a2a2a 90%,
    #1a1a1a 100%
  ) !important;
}

/* Face arrière */
.card-back {
  background-color: #333;
  color: #e8cc80;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  transform: rotateY(180deg); /* Rotation arrière */
}

.card-back h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.card-back p {
  font-size: 1rem;
  margin-bottom: 15px;
  
}
.card-back  a .btn :hover {
 text-align: center !important;
 color: #333 !important; 
}

.btn {
  display: flex; /* Permet de gérer l'alignement avec Flexbox */
  justify-content: center; /* Centre horizontalement le contenu */
  align-items: center; /* Centre verticalement le contenu */
  text-align: center; /* Assure que le texte est bien centré */
}


.card-back .btn {
  background-color: #555;
  color: #e8cc80;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-weight: bold;
  transition: background-color 0.3s ease;
  text-align: center;
  
}

.card-back .btn:hover {
  background-color: #e8cc80;
  color: #333; /* Noir pour le texte au survol */
}

/* ==============================
   SECTION CONTACT
   ============================== */

#contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 10px 20px;
  background-color: #333;
  color: #e8cc80;
  box-sizing: border-box;
}

#contact h1 {
  font-size: 2.5rem;
  color: #e8cc80;
  text-align: center;
  cursor: pointer;
  font-family: "Footlight MT Light", "Playfair Display", Arial, sans-serif !important;
}

#contact > a {
  text-decoration: none;
  color: inherit;
  display: inline-block;
  margin-top: 50px;
}

#contact .custom-popup { pointer-events: auto; }
#contact .custom-popup .popup-content { pointer-events: auto; }

/* Layout contact : formulaire + colonne droite */
.contact-row {
  display: flex;
  flex-direction: row;
  gap: 30px;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .contact-row {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
}

/* ---- Formulaire redesigné ---- */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: #3a3a3a;
  padding: 25px;
  border-radius: 12px;
  color: #e8cc80;
  flex: 1;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 15px rgba(212, 175, 55, 0.1);
}

.contact-form h5 {
  font-size: 1.5rem;
  color: #e8cc80;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(180deg, #8c7a3c 0%, #b49c5c 20%, #f5e6a3 40%, #e8cc80 50%, #f5e6a3 60%, #b49c5c 80%, #8c7a3c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-align: center;
  margin-bottom: 8px;
  font-weight: bold;
}

form {
  position: relative;
  z-index: 10;
  border-radius: 15px !important;
}

form, form * {
  pointer-events: auto;
}

/* ---- Input groups avec icones ---- */
.input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.input-group .input-icon {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  color: #e8cc80;
  font-size: 15px;
  width: 18px;
  text-align: center;
  z-index: 2;
  pointer-events: none;
  background-image: linear-gradient(180deg, #8c7a3c 0%, #b49c5c 20%, #f5e6a3 40%, #e8cc80 50%, #f5e6a3 60%, #b49c5c 80%, #8c7a3c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.textarea-group .input-icon {
  top: 16px;
  transform: none;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 12px 12px 34px !important;
  border: none !important;
  border-left: 3px solid #b49c5c !important;
  border-radius: 8px !important;
  font-size: 16px;
  background-color: #444 !important;
  color: #e8cc80 !important;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(232, 204, 128, 0.5) !important;
  font-style: italic;
  opacity: 1 !important;
}

.contact-form input:focus,
.contact-form textarea:focus {
  color: #e8cc80 !important;
  border-color: #e8cc80 !important;
  border-left: 3px solid #f5e6a3 !important;
  outline: none !important;
  box-shadow: 0 0 15px rgba(232, 204, 128, 0.4), inset 0 0 5px rgba(232, 204, 128, 0.1) !important;
  background-color: #4a4a4a !important;
}

.contact-form label {
  display: none !important;
}

.contact-form textarea {
  resize: none;
  height: 150px !important;
  min-height: 130px !important;
}

/* ---- Bouton Envoyer (même style que #open-popupavis) ---- */
.contact-form .btn-submit {
  background: transparent;
  color: #e8cc80;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(180deg, #8c7a3c 0%, #b49c5c 20%, #f5e6a3 40%, #e8cc80 50%, #f5e6a3 60%, #b49c5c 80%, #8c7a3c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  border: 2px solid transparent;
  border-image: linear-gradient(180deg, #8c7a3c 0%, #b49c5c 20%, #f5e6a3 40%, #e8cc80 50%, #f5e6a3 60%, #b49c5c 80%, #8c7a3c 100%) 1;
  border-radius: 10px;
  font-weight: 700;
  padding: 12px 28px;
  font-size: 14px;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 4px 8px rgba(255, 223, 107, 0.5);
  margin-top: 5px;
  align-self: center;
  width: auto;
}

.contact-form .btn-submit:hover {
  background-image: linear-gradient(180deg, #d4af37 0%, #f5e6a3 30%, #fff8dc 50%, #f5e6a3 70%, #d4af37 100%);
  -webkit-background-clip: text;
  background-clip: text;
  transform: scale(1.05);
  box-shadow: 0 6px 14px rgba(255, 215, 0, 0.5);
}

.contact-form .btn-submit:active {
  transform: scale(0.97);
}

/* ---- Colonne droite : map + devis ---- */
.contact-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
}

/* ---- Section Map ---- */
#map-section {
  background-color: #333;
  padding: 40px 20px 30px;
  text-align: center;
}

#map-section h1 {
  font-size: 2.5rem;
  font-family: "Footlight MT Light", "Playfair Display", Arial, sans-serif !important;
  margin-bottom: 25px;
}

.map-container {
  max-width: 1100px;
  margin: 0 auto;
}

.map-container iframe {
  width: 100%;
  height: 350px;
  border: 2px solid rgba(212, 175, 55, 0.3);
  border-radius: 10px;
  display: block;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 15px rgba(212, 175, 55, 0.1);
}

/* ==============================
   POP UP FORMULAIRE DE CONTACT
   ============================== */
/* Popup Contact */
/* Forcer l'affichage de la pop-up contact */
.custom-popup {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.55);
 justify-content: center;
  z-index: 2200; /* au-dessus du reste, y compris avis */
}

/* Si une règle ailleurs écrase display, on force */
.custom-popup.show,
.custom-popup[aria-hidden="false"] {
  display: flex !important;
}

/* Petit effet + garantie de visibilité du contenu */
.custom-popup .popup-content {
  background:#333; color:#e8cc80;
  padding:22px 24px; border-radius:16px;
  box-shadow:0 10px 28px rgba(0,0,0,.45), 0 0 0 1px rgba(232,204,128,.2);
  max-width:520px; width:min(90vw,520px);
  text-align:center;
  opacity: 1; transform: scale(1);
}

.popup-close{
  margin-top:10px;
  background: transparent;
  color: #e8cc80;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(180deg, #8c7a3c 0%, #b49c5c 20%, #f5e6a3 40%, #e8cc80 50%, #f5e6a3 60%, #b49c5c 80%, #8c7a3c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  border: 2px solid transparent;
  border-image: linear-gradient(180deg, #8c7a3c 0%, #b49c5c 20%, #f5e6a3 40%, #e8cc80 50%, #f5e6a3 60%, #b49c5c 80%, #8c7a3c 100%) 1;
  border-radius:10px;
  padding:10px 16px; font-weight:700; cursor:pointer;
  box-shadow:0 6px 16px rgba(255,223,107,.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.popup-close:hover{
  background-image: linear-gradient(180deg, #d4af37 0%, #f5e6a3 30%, #fff8dc 50%, #f5e6a3 70%, #d4af37 100%);
  -webkit-background-clip: text;
  background-clip: text;
  transform: scale(1.05);
  box-shadow: 0 6px 14px rgba(255, 215, 0, 0.5);
}


/* Effet d’apparition */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -60%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}
.btn-contact {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100px; /* Ajuste la taille sans impacter la navbar */
  height: 60px;
  margin-left: 100px; /* Pousse le bouton complètement à droite */
  margin-top: 10px; /* Ajuste la hauteur pour aligner avec la navbar */
  border-radius: 30px;
  transition: all 0.3s ease-in-out;
  animation: pulse 1.5s infinite ease-in-out !important;
  right: 100px; /* Aligné à droite */
  transform: translateY(-50%);

}
.btn-contact { transition: transform .25s ease, box-shadow .25s ease; }

/* Effet d’ombre au survol */
.btn-contact:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3);
}

.btn-contact img {
  width: 300%;
  height: auto;
  display: block;
}

.btn-contact span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #f0eab7; /* Couleur or */
  font-size: 16px;
  font: weight 300px;
  text-align: center;
  white-space: nowrap; /* Empêche le retour à la ligne */
}

/* ============
   DEVIS (compact)
   ============*/

.devicontent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #3a3a3a;
  padding: 25px;
  border-radius: 12px;
  box-sizing: border-box;
  flex: 1;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 15px rgba(212, 175, 55, 0.1);
}

.devicontent h5 {
  font-size: 1.5rem;
  color: #e8cc80;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(180deg, #8c7a3c 0%, #b49c5c 20%, #f5e6a3 40%, #e8cc80 50%, #f5e6a3 60%, #b49c5c 80%, #8c7a3c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-align: center;
  margin-bottom: 10px;
  font-weight: bold;
}

.devicontent-image {
  flex: 1;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
}

.devicontent-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.devicontent-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
  text-align: center;
}

#btn-devis {
  background: transparent;
  color: #e8cc80;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(180deg, #8c7a3c 0%, #b49c5c 20%, #f5e6a3 40%, #e8cc80 50%, #f5e6a3 60%, #b49c5c 80%, #8c7a3c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  border: 2px solid transparent;
  border-image: linear-gradient(180deg, #8c7a3c 0%, #b49c5c 20%, #f5e6a3 40%, #e8cc80 50%, #f5e6a3 60%, #b49c5c 80%, #8c7a3c 100%) 1;
  border-radius: 10px;
  font-weight: 700;
  padding: 12px 28px;
  font-size: 14px;
  text-transform: uppercase;
  cursor: pointer;
  z-index: 10;
  pointer-events: auto;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 4px 8px rgba(255, 223, 107, 0.5);
}

#btn-devis:hover {
  background-image: linear-gradient(180deg, #d4af37 0%, #f5e6a3 30%, #fff8dc 50%, #f5e6a3 70%, #d4af37 100%);
  -webkit-background-clip: text;
  background-clip: text;
  transform: scale(1.05);
  box-shadow: 0 6px 14px rgba(255, 215, 0, 0.5);
}

#btn-devis:active {
  transform: scale(0.97);
}

/* ==============================
   HEADER & NAVBAR
   ============================== */

  header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px 60px;
  background-color: transparent;
  position: fixed;
  width: 100%;
  z-index: 1000;
  top: 0;
  left: 0;
  transition: top 0.4s ease-in-out; /* Transition fluide */
}

#telephone-defilant {
  display: none;
  position: fixed;
  top: 100px; /* Ajuste selon ton design */
  left: 50%;
  transform: translateX(-50%);
  color: #e8cc80; /* Texte doré (couleur originale) */
  padding: 10px 10px;
  border-radius: 10px;
  font-size: 2.2rem; /* Augmenté de 1.8rem à 2.2rem */
  font-weight: 900; /* Très gras (maximum) */
  margin-top: -20px; /* Ajustez la valeur selon vos besoins */
  white-space: nowrap; /* Empêche le texte de passer à la ligne */
  overflow: hidden; /* Coupe le texte qui dépasse (à éviter si le numéro est trop long) */
  text-align: center; /* Centre le texte */
  max-width: 100%; /* S'assure que ça ne dépasse pas */

}

  

.shake {
  display: inline-block;
  color: #e8cc80; /* Couleur blanche */
  animation: shake-animation 0.5s infinite alternate;
}

@keyframes shake-animation {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg); }
  50% { transform: rotate(10deg); }
  75% { transform: rotate(-10deg); }
  100% { transform: rotate(10deg); }
}



  
  nav {
  background-color: transparent !important; /* ou la couleur de ton choix */
}


/* Style pour les liens de la nav-bar */
header nav ul {
  list-style: none; /* Supprime les puces */
  display: flex;
  gap: 20px; /* Espacement entre les liens */
  margin: 0;
  padding: 0;
}

header nav ul li a {
  text-decoration: none;
  color: white;
  font-weight: bold;
  font-size: 1.2rem;
  transition: color 0.3s ease;
}

header nav ul li a:hover {
  color: #e8cc80; /* Ajoute une couleur dorée au survol */
}

/* Style pour le logo */
/* Logo */
.logo {
  position: absolute; /* Permet au logo de flotter */
  top: 200px; /* Ajuste la position verticale */
  left: 50%; /* Centre horizontalement */
  transform: translateX(-50%); /* Centre parfaitement */
  z-index: 10; /* Passe au-dessus de la nav-bar et des autres éléments */
  transition: opacity 0.5s ease, visibility 0.5s ease; /* Animation de disparition */
  opacity: 1;
}

.logo img {
  height: 400px; /* Ajuste la taille du logo */
  width: auto; /* Garde les proportions */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Animation douce */
  animation: fadeInDown 0.8s ease-in-out;
}

.logo img:hover {
  transform: scale(1.1); /* Agrandit légèrement au survol */
  opacity: 0.9; /* Ajoute un effet de transparence au survol */
}

.logo.hidden {
  opacity: 0; /* Le logo devient invisible */
  display: none; /* Retire complètement le logo de l'affichage */
  /*transition: opacity 0.5s ease; /* Animation de disparition */
  visibility: hidden;
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

@media (min-width: 1024px) {
  .logo {
    position: absolute !important;
    left: 50% !important;
    top: 44vh !important;
    transform: translate(-50%, -20%) !important;
    z-index: 20 !important;
  }

  .logo img {
    height: clamp(260px, 24vw, 340px) !important;
    width: auto !important;
    animation: none !important;
  }
}
@media (min-width: 1024px) and (max-height: 750px) {
  .logo {
    top: 18vh !important;
    transform: translate(-50%, -20%) !important;
  }

  .logo img {
    height: 280px !important;
  }
}
@media (min-width: 1500px) {
  .logo {
    top: 50% !important;
    transform: translate(-50%, -20%) !important;
  }

  .logo img {
    height: 340px !important;
  }
}
@media (min-width: 1367px) and (max-width: 1438px) and (max-height: 704px) {
  .logo {
    top: 14vh !important;
    transform: translate(-50%, -30%) !important;
  }

  .logo img {
    height: 260px !important;
  }
}
 /* Styles généraux pour le menu */
 .navbar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 80px!important;
  position: fixed;
  top: 0;
  width: 100%;
  height: auto;
  background-color: transparent;
  z-index: 10;
  background: transparent; /* Navbar complètement transparente */
  border: none; /* Supprime toute bordure */
  box-shadow: none; /* Supprime toute ombre */

}
/* Masquer la navbar */
 .navbar.hidden {
  transform: translateY(-100%);
  opacity: 0;
}

.navbar ul {
  gap: 30px!important;
  text-align: center;
  display: absolute;
  flex-wrap: wrap;

}

.navbar ul li {
  position: relative;
  flex-direction: column;
  margin: 0; /* Réinitialise les marges si elles existent */
  margin-right: 15px; /* Ajuste l'espace entre les liens */
}


/* Lien principal */
.navbar ul li a {
  color: #e8cc80;
  text-decoration: none;
  padding: 5px 5px;
  font-size: 1.5rem;
  transition: color 0.3s;
}

.navbar ul li a:hover {
  color: #e8cc80; /* Couleur dorée au survol */
}

/* Navbar transparente */
.navbar-transparent {
  background-color: transparent;
}

/* ==============================
   DROPDOWN MENU NAVBAR
   ============================== */


/* Dropdown pour la navbar */
.dropdown {
  position: relative;
}

.dropdown-menu {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
  background-color: #444;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 4px 10px rgba(255, 215, 0, 0.3);
  z-index: 100;
  margin-top: -10px; /* Ajustez selon vos besoins */
}

/* Affichage au survol */
.dropdown:hover .dropdown-menu {
  display: block; /* Affiche le sous-menu */
}

.dropdown-menu a {
  display: block;
  color: #b49c5c;
  padding: 8px 15px;
  text-decoration: none;
  text-align: center; /* Centre le texte */
  font-family: "Footlight MT Light", Arial, sans-serif;}

.dropdown-menu a:hover {
  background-color: #b49c5c; /* Fond doré au survol */
  color: #333;
}




/* ==============================
   SOUS-MENUS
   ============================== */
   

  /* Par défaut, les sous-menus sont masqués */
  .navbar ul .submenu {
  display: none;
  position: absolute;
  background: rgba(20, 20, 20, 0.4);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  list-style: none;
  border-radius: 10px;
  border: 1px solid rgba(232, 204, 128, 0.2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 100;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 5px;
  min-width: 200px;
  white-space: nowrap;
  }

  /* Réduction des espaces entre les éléments des sous-menus */
  .navbar ul .submenu li {
  margin: 0; /* Supprime les marges */
  padding: 0; /* Supprime les paddings */
  width: 100%; /* Assure une largeur égale pour tous les éléments */
  text-align: center; /* Centre le texte */
  display: flex; /* Active flexbox pour centrer */
  justify-content: center; /* Centre les liens horizontalement */
  }

  /* Style des liens dans les sous-menus */
  .navbar ul .submenu li a {
  color: #e8cc80;
  padding: 2px 5px;  /* ✅ CORRECT */
  text-decoration: none;
  display: block;
  font-size: 1rem;
  text-align: center; /* Centre le texte */
  line-height:1; /* Réduit la hauteur de ligne au minimum */
  }

  /* Effet au survol des liens */
  .navbar ul .submenu li a:hover {
  background: rgba(232, 204, 128, 0.15);
  color: #fff;
  border-radius: 6px;
  }


   /* Affichage des sous-menus au survol */
   .has-submenu:hover .submenu {
    display: block;
  }



/* ==============================
   MENU BURGER - MOBILE
   ============================== */
   /* Menu burger pour mobile */
  .burger-menu {
   display: none;
   background: none;
   border: none;
   font-size: 24px;
   color: #b49c5c;
   position: absolute;
   top: 20px;
   right: 20px;
   cursor: pointer;
   z-index: 15;
  }
  

  .burger-menu:hover {
  color: #ffd700; /* Couleur au survol */
  }

  .navbar ul.active {
  display: flex !important; /* On force l'affichage */
  flex-direction: column;
  position: absolute;
  top: 60px;
  left: 0;
  background-color: #333;
  padding: 20px;
  gap: 10px;
  border: none; /* Supprime la bordure */
  }






/* ==============================
   FOOTER
   ============================== */

   footer {
    background-color: #333 !important;
    color: #e8cc80;
    text-align: center;
    padding: 5px 20px;
    margin: 0 auto;
    position: relative;
    width: 100%;
    margin-top: 0 !important;
    border: none !important;
}

.footer-content {
    max-width: 1800px; /* Ajuste le contenu interne */
    margin: 0 auto;
    width: 100%;
    max-width: none; /* Supprime toute limitation */
    background-color: #333;
    padding-left: 20px;

}



.footer-logo img {
    max-width:120px;
    display: block;
    margin: 0 auto 2px;


}

.footer-title-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 5px 0;
}

.footer-title {
  font-size: 30px;
  font-weight: bold;
  color: #e8cc80;
  text-align: center;
  white-space: nowrap; /* Empêche le retour à la ligne */
  font-family: "Footlight MT Light", Arial, sans-serif;
}




.footer-title-container::before,
.footer-title-container::after {
  content: "";
  flex: 5;
  height: 2px;
  background: linear-gradient(90deg, #8c7a3c, #f5e6a3, #e8cc80, #f5e6a3, #8c7a3c);
  margin: 0 30px;
}



.footer-social {
    margin:  0;
}

.footer-social a img {
    width: 35px;
    height: 35px;
    transition: transform 0.3s;
    margin: 0 15px;
}

.footer-social a img:hover {
    transform: scale(1.1);
}

.footer-nav ul {
    list-style: none;
    padding: 0;
    border: none !important;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.footer-nav {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.footer-nav ul li {
    margin: 0 20px;
}


.footer-nav ul li a {
    color: #e8cc80;
    text-decoration: none;
    font-weight: 300;
}

.footer-nav ul li a:hover {
    text-decoration: underline;
}

.footer-legal  {
    margin-top: 10px;
    font-size: 14px;
    color: #bbb !important;
    text-align: center;
}

.footer-legal a {
  color: #e8cc80;  /* Doré */
  text-decoration: none;
  font-weight: bold;
}

.footer-legal a:hover {
  text-decoration: underline;
  color: #bbb !important;
}
.footer-admin-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 8px;
  border-radius: 50%;
  color: #e8cc80 !important;
  opacity: 0.35;
  text-decoration: none !important;
  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.footer-admin-link:hover,
.footer-admin-link:focus-visible {
  opacity: 0.95;
  transform: translateY(-1px);
  box-shadow: 0 0 0 2px rgba(232, 204, 128, 0.22);
}

.footer-admin-link i {
  font-size: 11px;
}
.footer-bottom {
  padding: 5px 0; /* Réduction du padding pour diminuer la hauteur */
}



/* =========================================================
   KMG — AVIS CLIENTS (section + slider + popup)
   Version unifiée, sans doublons, prête à coller
   Couleurs : or #e8cc80 — fond #333
   Dépendances HTML : #avis-clients, .slider, .item, #prev/#next,
   #open-popupavis, #popupavis, #avis-form, #avis-name/#avis-message,
   #avis-stars .form-star, #rating (hidden), .avis-submit,
   .close-popupavis (ou .avis-close)
   ========================================================= */



#avis-clients {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: auto;
  position: relative;
  text-align: center;
  color: #e8cc80;
  background-color: #333 !important;
  position: relative;
}

#avis-clients h1 {
  text-align: center;
  font-size: 2.5em;
  letter-spacing: 1px;
  margin-bottom: 24px;
}

#avis-clients h1::after {
  content: "";
  display: block;
  width: 50%;
  height: 3px;
  margin: 10px auto 0;
  background: linear-gradient(90deg, rgba(232,204,128,.0), rgba(232,204,128,.9), rgba(232,204,128,.0));
}

#avis-clients p {
  font-size: large;
  margin: 0;
}

/* ---------- Slider ---------- */
.slider-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
}

.slider {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60%;
  max-width: 720px;
  height: 370px;
  overflow: hidden;
  margin-inline: auto;
}

.item {
  position: absolute;
  width: 250px;
  height: 320px;
  background: #333;
  border-radius: 12px;
  padding: 20px;
  color: #e8cc80;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 6px 18px rgba(255, 215, 0, 0.25);
  overflow: hidden;
  transition: transform .35s ease, opacity .35s ease, filter .35s ease;
}

.item .name {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 6px;
}

/* étoiles affichées sur les cartes avis */
.star { font-size: 40px; color: #777; }
.star.active,
.star.review-star.active {
  color: #e8cc80 !important;
  -webkit-text-fill-color: #e8cc80 !important;
  text-shadow:
    0 0 6px rgba(232, 204, 128, 0.8),
    0 0 15px rgba(212, 175, 55, 0.6),
    0 0 30px rgba(212, 175, 55, 0.3);
}

/* Flèches avis - meme style que realisations */
#next, #prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  background: transparent;
  color: #e8cc80;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    180deg,
    #8c7a3c 0%,
    #b49c5c 20%,
    #f5e6a3 40%,
    #e8cc80 50%,
    #f5e6a3 60%,
    #b49c5c 80%,
    #8c7a3c 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  border: 2px solid transparent;
  border-image: linear-gradient(
    180deg,
    #8c7a3c 0%,
    #b49c5c 20%,
    #f5e6a3 40%,
    #e8cc80 50%,
    #f5e6a3 60%,
    #b49c5c 80%,
    #8c7a3c 100%
  ) 1;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 1.4rem;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
}
#prev:hover, #next:hover {
  background-image: linear-gradient(
    180deg,
    #d4af37 0%,
    #f5e6a3 30%,
    #fff8dc 50%,
    #f5e6a3 70%,
    #d4af37 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 18px rgba(255, 215, 0, 0.6);
}
#prev { left: calc(55% - 400px) !important; }
#next { right: calc(55% - 400px) !important; }

/* ---------- Bouton “Ajouter un avis” ---------- */
#open-popupavis {
  background: transparent;
  color: #e8cc80;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(180deg, #8c7a3c 0%, #b49c5c 20%, #f5e6a3 40%, #e8cc80 50%, #f5e6a3 60%, #b49c5c 80%, #8c7a3c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  border: 2px solid transparent;
  border-image: linear-gradient(180deg, #8c7a3c 0%, #b49c5c 20%, #f5e6a3 40%, #e8cc80 50%, #f5e6a3 60%, #b49c5c 80%, #8c7a3c 100%) 1;
  border-radius: 10px;
  font-weight: 700;
  padding: 8px 16px;
  font-size: 12px;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 4px 8px rgba(255, 223, 107, 0.5);
  position: relative;
  z-index: 10;
}
#open-popupavis:hover {
  background-image: linear-gradient(180deg, #d4af37 0%, #f5e6a3 30%, #fff8dc 50%, #f5e6a3 70%, #d4af37 100%);
  -webkit-background-clip: text;
  background-clip: text;
  transform: scale(1.05);
  box-shadow: 0 6px 14px rgba(255, 215, 0, 0.5);
}
#open-popupavis:active { transform: scale(0.97); }

/* ---------- Popup (modale) ---------- */
/* Masquée par défaut */
#popupavis {
  display: none;
  position: fixed;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: min(90vw, 520px);
  max-height: 85vh;
  background: #1e1e1e;
  z-index: 2000;
  padding: 22px;
  border-radius: 18px;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 12px 32px rgba(0,0,0,.45), 0 0 0 1px rgba(232,204,128,.18);
  overflow: auto;
}

/* Visible quand active (classe ajoutée en JS) */
#popupavis.active {
  display: block;
  opacity: 1;
  visibility: visible;
}

/* Contenu */
.avis-modal__content,
.popupavis-content { /* les deux noms sont supportés */
  position: relative;
  width: 100%;
  text-align: center;
  color: #e8cc80;
}

/* Bouton fermer (supporte .close-popupavis ET .avis-close) */
.close-popupavis,
.avis-close {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 20px;
  line-height: 1;
  color: #e8cc80;
  background: rgba(255, 223, 107, 0.12);
  border: 1px solid rgba(255, 223, 107, 0.25);
  border-radius: 8px;
  padding: 6px 8px;
  cursor: pointer;
  z-index: 9999;
}

/* Empêche le scroll arrière-plan quand la popup est ouverte (classe ajoutée en JS) */
body.popup-open { overflow: hidden; }

/* ---------- Formulaire dans la popup ---------- */
#avis-form { margin-top: 8px; }

.avis-field { margin: 14px 0; }

#avis-form label,
.avis-label {
  display: block !important;
  color: #e8cc80;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: .02em;
}

/* Champs texte */
/* === Formulaire Avis Client : titres et champs === */
#avis-form label {
  font-size: 1.3rem !important;    /* agrandit le texte des labels */
  color: hsl(42, 9%, 57%);                  /* ta couleur or si tu veux */
  font-weight: 600;
  display: block;
  margin-bottom: 8px;
}

/* Champ “Votre nom” */
#avis-name {
  font-size: 1.1rem !important;    /* texte plus grand dans le champ */
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #e8cc80;
  background-color: #111;
  color: #fff;
}

/* Champ “Votre avis” (le textarea) */
#avis-message {
  font-size: 1.1rem !important;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #e8cc80;
  background-color: #111;
  color: #fff;
}

/* Ligne “Votre note” */
.avis-label {
  font-size: 1.3rem !important;
  color: #e8cc80;
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
}

/* Étoiles */
#avis-stars .form-star {
  font-size: 2rem !important;      /* étoiles plus grosses */
  color: #e8cc80;
  cursor: pointer;
  transition: transform .2s;
}
#avis-stars .form-star:hover {
  transform: scale(1.2);
}

/* Animation au survol du bouton Envoyer */
.avis-submit {
  background: transparent;
  color: #e8cc80;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(180deg, #8c7a3c 0%, #b49c5c 20%, #f5e6a3 40%, #e8cc80 50%, #f5e6a3 60%, #b49c5c 80%, #8c7a3c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  border: 2px solid transparent;
  border-image: linear-gradient(180deg, #8c7a3c 0%, #b49c5c 20%, #f5e6a3 40%, #e8cc80 50%, #f5e6a3 60%, #b49c5c 80%, #8c7a3c 100%) 1;
  font-weight: bold;
  font-size: 1.1rem;
  border-radius: 10px;
  padding: 10px 18px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}
.avis-submit:hover {
  background-image: linear-gradient(180deg, #d4af37 0%, #f5e6a3 30%, #fff8dc 50%, #f5e6a3 70%, #d4af37 100%);
  -webkit-background-clip: text;
  background-clip: text;
  transform: scale(1.05);
  box-shadow: 0 4px 14px rgba(255, 215, 0, 0.5);
}

/* === Titre du formulaire d'avis === */
.avis-titre {
  text-align: center;
  font-size: 1.6rem;
  color: #e8cc80;          /* ton or */
  margin-bottom: 18px;
  letter-spacing: 0.5px;
  font-weight: 700;
}

/* === Toast “Merci pour votre commentaire” === */
#avis-toast {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  background: linear-gradient(180deg, #ffdf6b, #c7b06f); /* fond or lumineux */
  color: #111;                 /* texte foncé lisible */
  padding: 20px 30px;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.4);
  z-index: 6000;
  font-weight: 700;
  font-size: 1.3rem;           /* un peu plus grand */
  opacity: 0;
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
  text-align: center;
}


#avis-name,
#avis-message {
  width: 100%;
  background: #2a2a2a;
  color: #f5f5f5;
  border: 1px solid rgba(255,223,107,.35);
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
  transition: box-shadow .2s ease, border-color .2s ease;
 font-size:1.2rem !important;
}
#avis-name:focus,
#avis-message:focus {
  border-color: #e8cc80;
  box-shadow: 0 0 0 3px rgba(232,204,128,.15);
}

#avis-name { height: 42px; }
#avis-message { height: 110px; resize: vertical; }

/* Étoiles (version spans) */
#avis-stars {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin: 10px 0 14px;
}
.form-star {
  font-size: 32px;
  color: #888;
  cursor: pointer;
  transition: transform .15s ease, color .15s ease;
  user-select: none;
}
.form-star:hover { color: #e8cc80; transform: scale(1.06); }
.form-star.active { color: greenyellow; }

/* Bouton envoyer */
.avis-submit,
#avis-form button[type="submit"] {
  margin-top: 10px;
  background: linear-gradient(180deg, #ffdf6b, #b9912b);
  color: #131313;
  border: 0;
  border-radius: 12px;
  padding: 10px 18px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(255,223,107,.25);
  text-transform: none;
}
.avis-submit:hover,
#avis-form button[type="submit"]:hover { filter: brightness(1.05); }
.avis-submit:active,
#avis-form button[type="submit"]:active { transform: scale(0.98); }

/* Feedback (message “Merci…”) */
.avis-feedback { margin-top: 10px; color: #cfeacb; }
.avis-feedback.error { color: #ffb0b0; }

/* La section devient le conteneur de positionnement */
#avis-clients { position: relative; }

/* Toast centré DANS la section (plus d’ancrage en bas de page) */
#avis-toast{
  position: absolute !important;   /* clé : relatif à #avis-clients */
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) scale(.92) !important;
  background: rgba(30,30,30,.95);
  color: #e8cc80;
  padding: 18px 26px;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,.4), 0 0 0 1px rgba(232,204,128,.25);
  z-index: 3000;                  /* au-dessus du slider, sous la modale */
  font-weight: 700;
  font-size: 1.05rem;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease, transform .35s ease;
}



/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  #avis-clients { padding: 80px 0 24px; min-height: auto; }
  .slider { width: 100%; height: 340px; }
  .item   { width: 200px !important; max-width: 200px !important; height: 280px !important; padding: 12px; font-size: 0.85rem; }
  #prev { left: 2%; }
  #next { right: 2%; }

  .emoji { font-size: 24px; }
  .star  { font-size: 22px; }
  .form-star { font-size: 30px; }

  .item .name { font-size: 0.9rem; margin-bottom: 8px; }
  .item p { font-size: 0.8rem; line-height: 1.3; }

  #popupavis {
    width: 90vw;
    max-height: 80vh;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
  }
}

@media (max-width: 480px) {
  .slider { height: 300px; width: 100%; }
  .item   { width: 180px !important; max-width: 180px !important; height: 260px !important; padding: 10px; }
  .star   { font-size: 20px; }
  .form-star { font-size: 26px; }
  .emoji  { font-size: 20px; }
  .item .name { font-size: 0.85rem; }
  .item p { font-size: 0.75rem; }
}


@media screen and (min-width: 1367px) and (max-width: 1439px) {
  .logo {
      transform: translateX(-50%);
      max-width: 350px; /* Augmenté pour tablettes (iPad) */
      height: auto; /* Conserve les proportions */
      width: auto;
      margin-top: -30px; /* Ajustez cette valeur pour remonter le logo */
      margin-bottom: 10px; /* Ajoute un peu d'espace sous le logo */
      left: 45%; /* Centre horizontalement */
      transform: translateX(-50%); /* Assure un centrage parfait */
      position: absolute; /* Vérifie qu'il reste bien positionné */
  }
}

@media screen and (max-width: 430px) {
  .logo img {
    max-width: 250px !important; /* Augmenté pour très petits écrans (iPhone SE) */
    height: auto !important;
    padding-top: 0px !important; /* Réduit l'espace entre logo et titre sur mobile */

  }
}




@media (max-width: 768px) {
  .hero {
    padding-top: 150px !important; /* Réduit drastiquement l'espace en haut sur mobile */
  }

  .hero h1 {
    font-size: 2.5rem; /* Réduit la taille du titre */
    padding: 0 5px 0 5px !important; /* Espace gauche/droite mais pas en haut/bas */
    margin: 0 !important; /* Supprime tous les margins */
    margin-bottom: 5px !important; /* Réduit l'espace entre h1 et p */
    font-family: "Footlight MT Light", "Playfair Display", Arial, sans-serif !important;

  }

  .hero p {
    font-size: 1.5rem; /* Réduit la taille du texte */
    max-width: 90%; /* Évite que le texte soit trop large */
    margin: 0 !important; /* Supprime tous les margins */
    word-break: break-word; /* Empêche les coupures non désirées */
    font-family: "Footlight MT Light", "Playfair Display", Arial, sans-serif !important;

  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .navbar ul li a[href="#avis-clients"] {
    display: block !important;
    visibility: visible !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .btn-contact {
    right: 20px !important; /* Pousse le bouton vers la droite */
    width: 80px !important;  /* Réduit la largeur */
    height: 40px !important;  /* Réduit la hauteur */
    font-size: 14px !important; /* Réduit la taille du texte */

  }
}

@media screen and (min-width: 1367px) and (max-width: 1439px) {

  /* Animation pulse pour le bouton - défini ici aussi */
  @keyframes pulseBtnLaptop {
    0% {
      transform: scale(1);
      filter: brightness(1);
      box-shadow: 0 0 0 0 rgba(232, 204, 128, 0.7);
    }
    50% {
      transform: scale(1.2);
      filter: brightness(1.2);
      box-shadow: 0 0 20px 10px rgba(232, 204, 128, 0.4);
    }
    100% {
      transform: scale(1);
      filter: brightness(1);
      box-shadow: 0 0 0 0 rgba(232, 204, 128, 0);
    }
  }

  .navbar {
    /*padding-left: 10px !important; *//* Décale la navbar vers la gauche */
    /*transform: translateX(-60px) !important;*/
}


  .navbar ul {
      gap: 80px !important; /* Réduit l'espacement entre les liens */
  }


  .navbar ul li {
      margin-right: 20px !important; /* Réduit l'espacement entre les éléments */
  }

  /* BOUTON PULSE ICI - Animation forte et visible - SURPASSE MATERIALIZE */
  nav.navbar ul.right li.only-desktop a.btn-contact {
    animation: pulseBtnLaptop 1.5s ease-in-out infinite !important;
    transform-origin: center center !important;
    transition: none !important;
    animation-fill-mode: both !important;
    animation-play-state: running !important;
    will-change: transform, box-shadow, filter !important;
  }

  /* Sélecteur de secours */
  .btn-contact {
    animation: pulseBtnLaptop 1.5s ease-in-out infinite !important;
    transform-origin: center center !important;
  }

  #telephone-defilant {
    font-size: 1.5rem !important; /* Plus grand et gras sur mobile */
    font-weight: 1500 !important; /* Très gras */
    padding: 12px 16px;
    display: flex; /* Assure que le numéro défilant s'affiche en responsive */

    transform: translateX(-55%); /* Centre parfaitement */
    top: 80px; /* Ajuste la position */
    z-index: 9999;

  }

  /* SECTION MES SERVICES - 5 cards sur une ligne */
  #services {
    flex-wrap: wrap !important;
    gap: 15px !important;
    padding: 50px 20px !important;
  }
  #services h1 {
    flex-basis: 100% !important;
    width: 100% !important;
  }
  .service {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: auto !important;
  }
  .service img {
    height: 150px !important;
    object-fit: cover !important;
  }
  .service h2 {
    font-size: 1rem !important;
  }
  .service p {
    font-size: 0.9rem !important;
    padding: 8px !important;
  }

  /* SECTION MES RÉALISATIONS - 5 cards en ligne (grid géré par responsive.css) */
  .gallery {
    gap: 15px !important;
  }

  .card {
    height: 220px !important;
  }

  .card img {
    object-fit: cover !important;
    height: 100% !important;
  }

  #services, #realisations {
    min-height: auto; /* Ajuste la hauteur */
    padding: 50px 10px; /* Réduit l'espace interne */
    font-family: "Footlight MT Light", Arial, sans-serif!important;
    background-color: #333 !important;

}


.realisations h1{
  font-size: 2.5rem!important;
  
}

  
.service a h2 {
  font-size: 1.2em;
  margin: 10px 0;
  color: #e8cc80; /* Couleur du texte */
  text-decoration: none;
  font-family: "Footlight MT Light", "Playfair Display", Arial, sans-serif !important;
  text-decoration: none !important; /* Souligne au survol */
  width: 100%;
  font-weight: 900;
}
} /* fin ancien bloc laptop deplace hors 1024-1366 */


@media screen and (min-width: 1440px) {

  .navbar {
    padding-left: 10px !important;
    transform: translateX(-20px) !important;
  }

  .navbar ul {
    gap: 80px !important;
    justify-content: center;
  }

  .navbar ul li {
    margin-right: 80px;
  }

  .navbar ul li:last-child {
    margin-right: 0;
  }

  #telephone-defilant {
    font-size: 1.5rem !important;
    font-weight: 900 !important;
  }

  /* --- HERO : polices plus grandes --- */
  .hero h1 {
    font-size: 4em !important;
  }
  .hero p {
    font-size: 2.5em !important;
    max-width: 900px !important;
  }

  /* --- SERVICES : section + imposante, cartes même hauteur --- */
  #services {
    flex-wrap: wrap !important;
    gap: 30px !important;
    padding: 80px 50px !important;
    align-items: stretch !important; /* Toutes les cartes même hauteur */
  }
  #services h1 {
    flex-basis: 100% !important;
    width: 100% !important;
    font-size: 3rem !important;
    margin-bottom: 20px !important;
  }
  .service {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .service img {
    height: 220px !important;
    object-fit: cover !important;
  }
  .service a h2 {
    font-size: 1.5em !important;
  }
  .service p {
    font-size: 1.3rem !important;
    flex-grow: 1 !important; /* Remplit l'espace restant = même hauteur */
  }

  /* --- REALISATIONS : section + imposante --- */
  #realisations {
    padding: 80px 50px !important;
  }
  #realisations h1 {
    font-size: 3rem !important;
    margin-bottom: 30px !important;
  }

  /* --- CONTACT : section + imposante --- */
  #contact {
    padding: 60px 50px !important;
  }
  #contact h1 {
    font-size: 3rem !important;
  }

  /* --- AVIS CLIENTS : section + imposante --- */
  #avis-clients {
    padding: 80px 50px !important;
  }
  #avis-clients h1 {
    font-size: 3rem !important;
    margin-bottom: 30px !important;
  }
}

/* ===== TRES GRAND ECRAN (2560px+) ===== */
@media screen and (min-width: 2560px) {

  /* --- HEADER / NAVBAR : agrandi --- */
  header {
    padding: 50px 80px !important;
  }
  .navbar {
    height: auto !important;
  }
  .navbar ul {
    gap: 100px !important;
  }
  .navbar ul li a {
    font-size: 3.5rem !important;
    padding: 20px 10px !important;
  }
  /* Bouton contact : plus gros, ramené près de Avis */
  .navbar ul li.only-desktop {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    margin-left: -40px !important;
  }
  .btn-contact {
    width: 200px !important;
    height: 100px !important;
    position: relative !important;
    
   
  }
  .btn-contact span {
    font-size: 28px !important;
  }
  .btn-contact img {
    width: 350% !important;
  }

  /* --- LOGO : plus gros et descendu --- */
  .logo {
    top: 420px !important;
  }
  .logo img {
    height: 750px !important;
  }

  /* --- TELEPHONE DEFILANT : plus gros --- */
  #telephone-defilant {
    font-size: 3.8rem !important;
    padding: 26px 24px !important;
    top: 160px !important;
  }

  /* --- HERO : polices très grandes, texte descendu --- */
  .hero h1 {
    font-size: 8em !important;
    padding-top: 700px !important;
  }
  .hero p {
    font-size: 3.5em !important;
    max-width: 1400px !important;
    margin-top: 50px !important;
  }

  /* --- SERVICES : section imposante, cartes même hauteur --- */
  #services {
    padding: 120px 100px !important;
    gap: 50px !important;
    align-items: stretch !important;
  }
  #services h1 {
    font-size: 4.5rem !important;
    margin-bottom: 50px !important;
  }
  .service {
    display: flex !important;
    flex-direction: column !important;
  }
  .service img {
    height: 400px !important;
    object-fit: cover !important;
  }
  .service a h2 {
    font-size: 2.2em !important;
    margin: 20px 0 !important;
  }
  .service p {
    font-size: 1.8rem !important;
    flex-grow: 1 !important;
    padding: 20px 25px !important;
    line-height: 1.8 !important;
  }

  /* --- REALISATIONS : carrousel agrandi --- */
  #realisations {
    padding: 120px 100px !important;
  }
  #realisations h1 {
    font-size: 4.5rem !important;
    margin-bottom: 50px !important;
  }
  .real-slider-wrap {
    max-width: 1600px !important;
  }
  .real-slider {
    height: 700px !important;
  }
  .real-card {
    width: 500px !important;
    height: 650px !important;
    margin-left: -250px !important;
    margin-top: -325px !important;
  }
  #real-prev,
  #real-next {
    font-size: 3rem !important;
    width: 65px !important;
    height: 65px !important;
  }

  /* --- CONTACT : section imposante --- */
  #contact {
    padding: 120px 100px !important;
  }
  #contact h1 {
    font-size: 4.5rem !important;
    margin-bottom: 20px !important;
  }
  #contact > p {
    font-size: 1.8rem !important;
    margin-bottom: 40px !important;
  }
  #contact h6,
  .contact-section h6 {
    font-size: 2.2rem !important;
  }
  .contact-row {
    max-width: 1800px !important;
    gap: 80px !important;
  }
  .contact-form {
    padding: 50px !important;
    border-radius: 16px !important;
  }
  .contact-form h5 {
    font-size: 2.5rem !important;
    margin-bottom: 20px !important;
  }
  .contact-form input,
  .contact-form textarea {
    font-size: 1.5rem !important;
    padding: 20px 20px 20px 44px !important;
    border-radius: 8px !important;
  }
  .input-icon {
    font-size: 1.2rem !important;
    left: 16px !important;
  }
  .contact-form textarea {
    min-height: 200px !important;
  }
  .contact-form .btn-submit {
    font-size: 1.6rem !important;
    padding: 20px 40px !important;
  }

  /* --- Colonne droite : map + devis agrandies --- */
  .contact-right {
    gap: 30px !important;
  }
  .map-container {
    padding: 30px !important;
    border-radius: 16px !important;
  }
  #map-section h1 {
    font-size: 3.5rem !important;
    margin-bottom: 30px !important;
  }
  .map-container iframe {
    height: 400px !important;
    border-radius: 12px !important;
  }
  .devicontent {
    padding: 30px !important;
    border-radius: 16px !important;
  }
  .devicontent h5 {
    font-size: 2.5rem !important;
    margin-bottom: 25px !important;
  }
  #btn-devis {
    font-size: 1.6rem !important;
    padding: 20px 40px !important;
  }

  /* --- AVIS CLIENTS : slider agrandi --- */
  #avis-clients {
    padding: 120px 100px !important;
  }
  #avis-clients h1 {
    font-size: 4.5rem !important;
    margin-bottom: 50px !important;
  }
  .slider {
    max-width: 1400px !important;
    height: 550px !important;
  }
  .item {
    width: 400px !important;
    max-width: 400px !important;
    height: 500px !important;
    padding: 30px !important;
    border-radius: 16px !important;
  }
  .item .name {
    font-size: 1.6rem !important;
  }
  .item p {
    font-size: 1.3rem !important;
    line-height: 1.7 !important;
  }
  .star {
    font-size: 38px !important;
  }
  .emoji {
    font-size: 36px !important;
  }
  #prev,
  #next {
    font-size: 2.5rem !important;
    width: 60px !important;
    height: 60px !important;
  }
  #open-popupavis {
    font-size: 1.4rem !important;
    padding: 18px 35px !important;
  }

  /* --- FOOTER : agrandi --- */
  footer {
    padding: 40px 100px !important;
  }
  .footer-logo img {
    max-width: 180px !important;
  }
  .footer-title {
    font-size: 2.5rem !important;
  }
  .footer-social a img {
    width: 50px !important;
    height: 50px !important;
  }
  .footer-nav ul li {
    margin: 0 30px !important;
  }
  .footer-nav ul li a {
    font-size: 1.4rem !important;
  }
  footer p {
    font-size: 1.3rem !important;
  }
}

    
@media screen and (max-width: 768px) {
  #services {
      flex-direction: column !important;
      align-items: center !important;
      padding-top: 10%;
  }
  .service {
      margin-bottom: 30px !important; /* Ajoute un espace sous chaque card */
      padding: 10px !important; /* Ajoute un peu de respiration autour */
      width: 90%; /* Ajuste la largeur pour qu'elles restent bien centrées */
      max-width: 300px; /* Empêche qu'elles deviennent trop grandes */

  }


}

@media screen and (max-width: 1023px) {
  #services {
      flex-wrap: wrap !important;
      justify-content: center !important;
      align-items: stretch !important;
      gap: 20px !important;
  }

  .service {
      flex: 1 1 calc(25% - 20px); /* Force 4 cartes par ligne avec espace */
      max-width: 250px; /* Définit une largeur max */
      min-height: 350px; /* Force la même hauteur pour toutes */
      display: flex;
      flex-direction: column;
      justify-content: space-between; /* Assure une bonne répartition interne */
      
  }
}

  
@media screen and (max-width: 1023px) {
  .service p {
      height: 120px; /* Force toutes les descriptions à la même hauteur */
      overflow: hidden; /* Cache le surplus de texte */
      align-items: center;
      justify-content: center;
  }
}

@media screen and (max-width: 768px) {
  #contact {
      position: relative !important;
      z-index: 1 !important;
      margin-top: 0 !important;
      background-color: #333 !important; /* Ou autre couleur opaque */
  }

  #realisations {
      position: relative !important;
      z-index: 2 !important;
      background-color: #333 !important;
  }
}

@media screen and (max-width: 768px) {
  .container-principal {
      display: block !important; /* Évite que flexbox fasse buguer iOS */
  }

  #contact, #realisations {
      display: block !important;
      width: 100% !important;
      background-color: #333 !important; /* Ou autre couleur opaque */
      min-height: auto;
  }
}
/* Responsive Design */
@media (max-width: 768px) {
  .contact-form, .devicontent, .contact-right {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }

  .contact-form button, #btn-devis {
    font-size: 14px;
    padding: 10px;
  }
}

/* ======================
   MOBILE VERSION (Max Width 768px)
====================== */

@media (max-width: 768px) {

  /* Navbar desktop cachée sur mobile */
  .navbar {
    display: flex; /* Visible pour le burger menu */
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: transparent; /* Transparent, seul le burger est visible */
    z-index: 1000;
    padding: 10px 0;
  }

  /* Navbar masquée */
  .navbar.hidden {
  transform: translateY(-100%); /* Déplace la navbar vers le haut */
  opacity: 0; /* Rend la navbar invisible */
  }


  .navbar.active {
    display: flex; /* Affiche la navbar lorsqu'elle est active */
  }

  .burger-menu {
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1001;
    color: #b49c5c;
    font-size: 24px;
    cursor: pointer;
  }

  .burger-menu:hover {
    color: #ffd700;
  }

  /* Navbar links desktop cachés sur mobile */

  .navbar ul {
    display: none; /* Cachés par défaut, gérés par sidenav Materialize */
    flex-direction: column;
    width: 100%;
    position: absolute;
    top: 60px;
    left: 0;
    background-color: #333;
    padding: 10px;
    z-index: 1000;
  }

  /* Lorsque le menu burger est actif, on affiche le menu */
  .navbar ul.active {
    display: flex ;
    flex-direction: column;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background-color: #333;
    padding: 10px;
  }

  .navbar ul li {
    width: 100%;
    text-align: center;
    margin: 0;
  }

  .navbar ul li a {
    display: block;
    color: #b49c5c;
    padding: 10px 20px;
    text-decoration: none;
    font-size: 1.2rem;
  }

  .navbar ul li a:hover {
    background-color: #444;
    color: #ffd700;
  }

  /* Sous-menus */
  .navbar.submenu {
    display: none;
    flex-direction: column;
    background-color: #444;
    padding: 10px;
    border-radius: 5px;
  }

  .has-submenu.active  .submenu {
    display: flex;
  }

  .navbar.submenu li {
    margin: 0;
  }

  .navbar.submenu li a {
    padding: 8px 15px;
    font-size: 1rem;
    color: #b49c5c;
  }

  .navbar.submenu li a:hover {
    background-color: #555;
    color: #ffd700;
  }

  /* Services Section */
  #services {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .service {
    width: 90% !important;
    max-width: 350px !important;
  }

  .service img {
    height: auto;
    max-height: 200px;
  }



/* Pour les écrans plus petits (mobiles) */
@media screen and (max-width: 768px) {
  footer {
      padding: 20px 10px;
      overflow-x: hidden;
  }

  .footer-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding-left: 0;
  }

  .footer-title {
      font-size: 1.3rem;
      white-space: normal;
  }

  .footer-title-container {
      flex-direction: column;
      align-items: center;
  }

  .footer-title-container::before,
  .footer-title-container::after {
      display: none;
  }

  .footer-social {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px;
  }

  .footer-social a img {
      width: 35px;
      height: 35px;
      margin: 0 5px;
  }

  .footer-nav ul {
      flex-direction: row !important;
      justify-content: center !important;
      flex-wrap: nowrap !important;
      gap: 0 3px !important;
      padding: 0 !important;
  }

  .footer-nav ul li {
      margin: 0 !important;
  }

  .footer-nav ul li a {
      font-size: 0.65rem !important;
      white-space: nowrap !important;
  }

  .footer-logo img {
      max-width: 120px;
  }

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

  .footer-copyright p {
      font-size: 0.8rem;
      word-wrap: break-word;
  }
}
/* Réglage uniquement pour le mode responsive */
@media (max-width: 768px) {
  .logo {
     /* margin-top: -40px; /* Ajustez cette valeur pour remonter le logo */
      /*margin-bottom: 10px; /* Ajoute un peu d'espace sous le logo */
  }

  .logo img {
      max-width: 320px; /* Augmenté pour mobile (iPhone, Android) */
      height: auto; /* Conserve les proportions */
      width: auto;
  }

}
@media (max-width: 768px) {
  #telephone-defilant {
      font-size: 1.5rem !important; /* Plus grand et gras sur mobile */
      font-weight: 1500 !important; /* Très gras */
      padding: 12px 16px;
      display: block; /* Assure que le numéro défilant s'affiche en responsive */
      left: 50%; /* Centre horizontalement */
      transform: translateX(-50%); /* Centre parfaitement */
      top: 10px; /* Ajuste la position */
      background-color: transparent;
      z-index: 9999;

    }
}

/* Fixer le bouton en mode tablette */
@media screen and (max-width: 1023px) {
  #btn-contact {
      position: fixed; /* Devient fixe en mode tablette */
      bottom: 20px; /* Placé en bas */
      right: 20px; /* Toujours à droite */
      z-index: 1000; /* Assure qu'il reste au-dessus des autres éléments */
  }
}

/* Pour les écrans de taille moyenne (tablettes) */
@media screen and (max-width: 1023px) {
  footer {
      padding: 20px 15px;
  }

  .footer-title-container::before,
  .footer-title-container::after {
      margin: 0 30px;
  }

  .footer-social a img {
      width: 40px;
      height: 40px;
      margin: 0 12px;
  }

  .footer-nav ul li {
      margin: 5px 20px;
  }
}


/* Pour les petits téléphones */
@media screen and (max-width: 480px) {
  footer {
      padding: 15px 8px;
  }

  .footer-logo img {
      max-width: 100px;
  }

  .footer-title {
      font-size: 1.1rem;
  }

  .footer-social a img {
      width: 28px;
      height: 28px;
      margin: 0 4px;
  }

  .footer-nav ul {
      gap: 0 2px !important;
  }

  .footer-nav ul li a {
      font-size: 0.6rem !important;
  }

  .footer-legal {
      font-size: 10px;
  }

  .footer-copyright p {
      font-size: 0.7rem;
  }
}

/* Pour les très petits téléphones (320px) */
@media screen and (max-width: 340px) {
  footer {
      padding: 10px 4px !important;
  }

  .footer-content {
      padding: 0 !important;
  }

  .footer-nav ul {
      gap: 0 1px !important;
  }

  .footer-nav ul li a {
      font-size: 0.5rem !important;
      letter-spacing: -0.3px !important;
  }

  .footer-social a img {
      width: 28px !important;
      height: 28px !important;
  }
}

@supports (-webkit-touch-callout: none) {
  #services, #realisations, #contact {
      min-height: 100%;
      font-family: "Footlight MT Light", "Playfair Display", Arial, sans-serif !important;
      font-size: 1.3rem; /* Taille du titre */
      background-color: #333 !important;
  }
}
@media screen and (max-width: 768px) {
  #services, #realisations, #contact {
      min-height: 100%;
      height: auto !important;
      font-family: "Footlight MT Light", "Playfair Display", Arial, sans-serif !important;
      background-color: #333 !important;

  }

  .section h1 {
    font-size: 1.3rem; /* Taille du titre */
    color: #b49c5c; /* Couleur dorée */
    font-family: "Footlight MT Light", "Playfair Display", Arial, sans-serif !important;
  }
  
}


/* ==============================
   RESPONSIVE DESIGN
   ============================== */

/* Animation clé */
@keyframes slideIn {
  0% {
    transform: translateY(100px); /* Le texte commence en bas */
    opacity: 0; /* Invisible */
  }
  50% {
    transform: translateY(-10px); /* Monte légèrement */
    opacity: 0.5; /* Semi-visible */
  }
  100% {
    transform: translateY(0); /* Position finale au centre */
    opacity: 1; /* Complètement visible */
  }
}




@media screen and (max-width: 768px) {
  .hero {
      
      min-height: 100vh;
      z-index: 5;
      font-family: "Footlight MT Light", "Playfair Display", Arial, sans-serif !important;
      height: 100vh !important; /* Prend toute la hauteur de l'écran */
  }  
  
  
  #services, #realisations, #contact {
      z-index: 10;
      font-family: "Footlight MT Light", "Playfair Display", Arial, sans-serif !important;
      font-size: medium;
      background-color: #333 !important;
  }
}

/* Corriger la hauteur des sections pour les grands écrans */
@media screen and (min-width: 1025px) {
  section:not(.hero) {
      min-height: auto !important;
      height: auto !important;
  }
}

/* Ajustement spécifique pour tablettes */
@media screen and (min-width: 769px) and (max-width: 1023px) {
  section {
      min-height: auto !important;  /* Auto pour tablettes */
      height: auto !important;
      border-top: none;
  }
}

/* Ajustement pour mobiles */
@media screen and (max-width: 768px) {
  section {
      min-height: auto !important;
      height: auto !important;
      background-color: #333 !important;
      border-top: none;
  }
}

/* Animation pour Safari/Webkit - Compatible iOS */
@-webkit-keyframes fadeBackground {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@media screen and (max-width: 768px) {
  #popupavis {
    width: 90vw; /* Utilise 90% de la largeur de l’écran */
    max-width: 400px; /* Limite la largeur */
    max-height: 78vh; /* Ajuste la hauteur */
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(255, 215, 0, .3);
    text-align: center;
    transition: transform 0.3s ease-in-out;
    justify-content: center; /* Centre verticalement */
    font-family: "Footlight MT Light", Arial, sans-serif !important;
  }
}


.service:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.3);
}

/* Titre cliquable */
.service a h2 {
  font-size: 1.5em;
  margin: 10px 0;
  color: #e8cc80; /* Couleur du texte */
  text-decoration: none;
  font-family: "Footlight MT Light", "Playfair Display", Arial, sans-serif !important;
  text-decoration: none !important;
  width: 100%;
}


.service a h3:hover {
  text-decoration: none !important; /* Souligne au survol */
}

/* Image dans le bloc */
.service img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  padding: 10px;
  max-height: 50%;
  margin: auto;
  display: block;
}

/* Texte descriptif */
.service p {
  padding: 10px;
  font-size: 1em;
  color: #e8cc80;
  line-height: 1.6;
  font-family: "Footlight MT Light", "Playfair Display", Arial, sans-serif !important;
}


/* ==============================
   SECTION REALISATIONS
   ============================== */

/* Réalisations */
.realisations {
  
  padding-bottom: 0; /* Supprime le padding inutile */
  padding-top: 100px; /* Supprime le padding interne */
}

#realisations {
  display: flex;
  flex-direction: column; /* Aligne les éléments en colonne */
  justify-content: center; /* Centre verticalement */
  align-items: center; /* Centre horizontalement */
  min-height: auto;
  text-align: center; /* Centre le texte à l'intérieur */
  margin: 0; /* Supprime les marges externes */
  padding: 20px; /* Ajoute un peu d'espace intérieur */
  box-shadow: 0 4px 10px rgba(255, 215, 0, 0.3);
  z-index: 3 !important;
  position: relative !important;
  /* Dégradé effet miroir doré */
  background: linear-gradient(
    180deg,
    #1a1a1a 0%,
    #2a2a2a 10%,
    #3d3528 25%,
    #b49c5c 45%,
    #e8cc80 50%,
    #b49c5c 55%,
    #3d3528 75%,
    #2a2a2a 90%,
    #1a1a1a 100%
  );
}


#realisations h1  {
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: #e8cc80;
  padding-top: 150px!important;
  padding: 20px; /* Ajoute de l'espace interne */
  font-family: "Footlight MT Light", "Playfair Display", Arial, sans-serif !important;
  Margin-top: -10px;
}



.projet-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #e8cc80;
  text-align: center;
  font-family: "Footlight MT Light", Arial, sans-serif!important;
}


/* Titre cliquable */
.realisations h2 {
  display: none !important;
  font-size: 1.5em !important;
  margin: 10px 0;
  color: #e8cc80; /* Couleur du texte */
  text-decoration: none;
  font-family: "Footlight MT Light", Arial, sans-serif!important;
}

.realisations .gallery {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding-top: 200px;
}

.realisations .gallery img {
  width: 300px;
  height: auto;
  border-radius: 5px;
  box-shadow: 0 4px 10px rgba(255, 215, 0, 0.3);
}

.realisations, #contact {
  background-image: none;
  background-color: #333; /* Remplacez par la couleur souhaitée */
}

/* Conteneur des cartes réalisations - Dégradé effet miroir doré */
.realisation-container {
  background: linear-gradient(
    180deg,
    #1a1a1a 0%,
    #2a2a2a 10%,
    #3d3528 25%,
    #b49c5c 45%,
    #e8cc80 50%,
    #b49c5c 55%,
    #3d3528 75%,
    #2a2a2a 90%,
    #1a1a1a 100%
  );
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
}

/* Conteneur global de la galerie */
.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  box-shadow: 0 4px 10px rgba(255, 215, 0, 0.3);
}

/* Style pour chaque carte */
.card {
  width: 300px;
  height: 400px;
  perspective: 1000px; /* Perspective pour l'effet 3D */
  /* Dégradé effet miroir doré */
  background: linear-gradient(
    180deg,
    #1a1a1a 0%,
    #2a2a2a 10%,
    #3d3528 25%,
    #b49c5c 45%,
    #e8cc80 50%,
    #b49c5c 55%,
    #3d3528 75%,
    #2a2a2a 90%,
    #1a1a1a 100%
  ) !important;
  border-radius: 10px;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateY(0);
  transition: transform 0.6s ease;
  cursor: pointer;
  /* Dégradé effet miroir doré pour l'intérieur de la carte */
  background: linear-gradient(
    180deg,
    #1a1a1a 0%,
    #2a2a2a 10%,
    #3d3528 25%,
    #b49c5c 45%,
    #e8cc80 50%,
    #b49c5c 55%,
    #3d3528 75%,
    #2a2a2a 90%,
    #1a1a1a 100%
  );
  border-radius: 10px;
}

.card:hover .card-inner {
  transform: rotateY(180deg); /* Effet de retournement */
}

/* Face avant */
.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(255, 215, 0, 0.3);
}

.card-front {
  /* Dégradé effet miroir doré pour le fond des cartes */
  background: linear-gradient(
    180deg,
    #1a1a1a 0%,
    #2a2a2a 10%,
    #3d3528 25%,
    #b49c5c 45%,
    #e8cc80 50%,
    #b49c5c 55%,
    #3d3528 75%,
    #2a2a2a 90%,
    #1a1a1a 100%
  );
}

.card-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Dégradé pour quand l'image ne charge pas */
  background: linear-gradient(
    180deg,
    #1a1a1a 0%,
    #2a2a2a 10%,
    #3d3528 25%,
    #b49c5c 45%,
    #e8cc80 50%,
    #b49c5c 55%,
    #3d3528 75%,
    #2a2a2a 90%,
    #1a1a1a 100%
  ) !important;
}

/* Face arrière */
.card-back {
  background-color: #333;
  color: #e8cc80;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  transform: rotateY(180deg); /* Rotation arrière */
}

.card-back h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.card-back p {
  font-size: 1rem;
  margin-bottom: 15px;
  
}
.card-back  a .btn :hover {
 text-align: center !important;
 color: #333 !important; 
}

.btn {
  display: flex; /* Permet de gérer l'alignement avec Flexbox */
  justify-content: center; /* Centre horizontalement le contenu */
  align-items: center; /* Centre verticalement le contenu */
  text-align: center; /* Assure que le texte est bien centré */
}


.card-back .btn {
  background-color: #555;
  color: #e8cc80;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-weight: bold;
  transition: background-color 0.3s ease;
  text-align: center;
  
}

.card-back .btn:hover {
  background-color: #e8cc80;
  color: #333; /* Noir pour le texte au survol */
}

/* ==============================
   SECTION CONTACT
   ============================== */

#contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 10px 20px;
  background-color: #333;
  color: #e8cc80;
  box-sizing: border-box;
}

#contact h1 {
  font-size: 2.5rem;
  color: #e8cc80;
  text-align: center;
  cursor: pointer;
  font-family: "Footlight MT Light", "Playfair Display", Arial, sans-serif !important;
}

#contact > a {
  text-decoration: none;
  color: inherit;
  display: inline-block;
  margin-top: 50px;
}

#contact .custom-popup { pointer-events: auto; }
#contact .custom-popup .popup-content { pointer-events: auto; }

/* Layout contact : formulaire + colonne droite */
.contact-row {
  display: flex;
  flex-direction: row;
  gap: 30px;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .contact-row {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
}

/* ---- Formulaire redesigné ---- */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: #3a3a3a;
  padding: 25px;
  border-radius: 12px;
  color: #e8cc80;
  flex: 1;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 15px rgba(212, 175, 55, 0.1);
}

.contact-form h5 {
  font-size: 1.5rem;
  color: #e8cc80;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(180deg, #8c7a3c 0%, #b49c5c 20%, #f5e6a3 40%, #e8cc80 50%, #f5e6a3 60%, #b49c5c 80%, #8c7a3c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-align: center;
  margin-bottom: 8px;
  font-weight: bold;
}

form {
  position: relative;
  z-index: 10;
  border-radius: 15px !important;
}

form, form * {
  pointer-events: auto;
}

/* ---- Input groups avec icones ---- */
.input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.input-group .input-icon {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  color: #e8cc80;
  font-size: 15px;
  width: 18px;
  text-align: center;
  z-index: 2;
  pointer-events: none;
  background-image: linear-gradient(180deg, #8c7a3c 0%, #b49c5c 20%, #f5e6a3 40%, #e8cc80 50%, #f5e6a3 60%, #b49c5c 80%, #8c7a3c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.textarea-group .input-icon {
  top: 16px;
  transform: none;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 12px 12px 34px !important;
  border: none !important;
  border-left: 3px solid #b49c5c !important;
  border-radius: 8px !important;
  font-size: 16px;
  background-color: #444 !important;
  color: #e8cc80 !important;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(232, 204, 128, 0.5) !important;
  font-style: italic;
  opacity: 1 !important;
}

.contact-form input:focus,
.contact-form textarea:focus {
  color: #e8cc80 !important;
  border-color: #e8cc80 !important;
  border-left: 3px solid #f5e6a3 !important;
  outline: none !important;
  box-shadow: 0 0 15px rgba(232, 204, 128, 0.4), inset 0 0 5px rgba(232, 204, 128, 0.1) !important;
  background-color: #4a4a4a !important;
}

.contact-form label {
  display: none !important;
}

.contact-form textarea {
  resize: none;
  height: 150px !important;
  min-height: 130px !important;
}

/* ---- Bouton Envoyer (même style que #open-popupavis) ---- */
.contact-form .btn-submit {
  background: transparent;
  color: #e8cc80;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(180deg, #8c7a3c 0%, #b49c5c 20%, #f5e6a3 40%, #e8cc80 50%, #f5e6a3 60%, #b49c5c 80%, #8c7a3c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  border: 2px solid transparent;
  border-image: linear-gradient(180deg, #8c7a3c 0%, #b49c5c 20%, #f5e6a3 40%, #e8cc80 50%, #f5e6a3 60%, #b49c5c 80%, #8c7a3c 100%) 1;
  border-radius: 10px;
  font-weight: 700;
  padding: 12px 28px;
  font-size: 14px;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 4px 8px rgba(255, 223, 107, 0.5);
  margin-top: 5px;
  align-self: center;
  width: auto;
}

.contact-form .btn-submit:hover {
  background-image: linear-gradient(180deg, #d4af37 0%, #f5e6a3 30%, #fff8dc 50%, #f5e6a3 70%, #d4af37 100%);
  -webkit-background-clip: text;
  background-clip: text;
  transform: scale(1.05);
  box-shadow: 0 6px 14px rgba(255, 215, 0, 0.5);
}

.contact-form .btn-submit:active {
  transform: scale(0.97);
}

/* ---- Colonne droite : map + devis ---- */
.contact-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
}

/* ---- Section Map ---- */
#map-section {
  background-color: #333;
  padding: 40px 20px 30px;
  text-align: center;
}

#map-section h1 {
  font-size: 2.5rem;
  font-family: "Footlight MT Light", "Playfair Display", Arial, sans-serif !important;
  margin-bottom: 25px;
}

.map-container {
  max-width: 1100px;
  margin: 0 auto;
}

.map-container iframe {
  width: 100%;
  height: 350px;
  border: 2px solid rgba(212, 175, 55, 0.3);
  border-radius: 10px;
  display: block;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 15px rgba(212, 175, 55, 0.1);
}

/* ==============================
   POP UP FORMULAIRE DE CONTACT
   ============================== */
/* Popup Contact */
/* Forcer l'affichage de la pop-up contact */
.custom-popup {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.55);
 justify-content: center;
  z-index: 2200; /* au-dessus du reste, y compris avis */
}

/* Si une règle ailleurs écrase display, on force */
.custom-popup.show,
.custom-popup[aria-hidden="false"] {
  display: flex !important;
}

/* Petit effet + garantie de visibilité du contenu */
.custom-popup .popup-content {
  background:#333; color:#e8cc80;
  padding:22px 24px; border-radius:16px;
  box-shadow:0 10px 28px rgba(0,0,0,.45), 0 0 0 1px rgba(232,204,128,.2);
  max-width:520px; width:min(90vw,520px);
  text-align:center;
  opacity: 1; transform: scale(1);
}

.popup-close{
  margin-top:10px;
  background: transparent;
  color: #e8cc80;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(180deg, #8c7a3c 0%, #b49c5c 20%, #f5e6a3 40%, #e8cc80 50%, #f5e6a3 60%, #b49c5c 80%, #8c7a3c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  border: 2px solid transparent;
  border-image: linear-gradient(180deg, #8c7a3c 0%, #b49c5c 20%, #f5e6a3 40%, #e8cc80 50%, #f5e6a3 60%, #b49c5c 80%, #8c7a3c 100%) 1;
  border-radius:10px;
  padding:10px 16px; font-weight:700; cursor:pointer;
  box-shadow:0 6px 16px rgba(255,223,107,.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.popup-close:hover{
  background-image: linear-gradient(180deg, #d4af37 0%, #f5e6a3 30%, #fff8dc 50%, #f5e6a3 70%, #d4af37 100%);
  -webkit-background-clip: text;
  background-clip: text;
  transform: scale(1.05);
  box-shadow: 0 6px 14px rgba(255, 215, 0, 0.5);
}


/* Effet d’apparition */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -60%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}
.btn-contact {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100px; /* Ajuste la taille sans impacter la navbar */
  height: 60px;
  margin-left: 100px; /* Pousse le bouton complètement à droite */
  margin-top: 10px; /* Ajuste la hauteur pour aligner avec la navbar */
  border-radius: 30px;
  transition: all 0.3s ease-in-out;
  animation: pulse 1.5s infinite ease-in-out !important;
  right: 100px; /* Aligné à droite */
  transform: translateY(-50%);

}
.btn-contact { transition: transform .25s ease, box-shadow .25s ease; }

/* Effet d’ombre au survol */
.btn-contact:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3);
}

.btn-contact img {
  width: 300%;
  height: auto;
  display: block;
}

.btn-contact span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #f0eab7; /* Couleur or */
  font-size: 16px;
  font: weight 300px;
  text-align: center;
  white-space: nowrap; /* Empêche le retour à la ligne */
}

/* ============
   DEVIS (compact)
   ============*/

.devicontent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #3a3a3a;
  padding: 25px;
  border-radius: 12px;
  box-sizing: border-box;
  flex: 1;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 15px rgba(212, 175, 55, 0.1);
}

.devicontent h5 {
  font-size: 1.5rem;
  color: #e8cc80;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(180deg, #8c7a3c 0%, #b49c5c 20%, #f5e6a3 40%, #e8cc80 50%, #f5e6a3 60%, #b49c5c 80%, #8c7a3c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-align: center;
  margin-bottom: 10px;
  font-weight: bold;
}

.devicontent-image {
  flex: 1;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
}

.devicontent-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.devicontent-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
  text-align: center;
}

#btn-devis {
  background: transparent;
  color: #e8cc80;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(180deg, #8c7a3c 0%, #b49c5c 20%, #f5e6a3 40%, #e8cc80 50%, #f5e6a3 60%, #b49c5c 80%, #8c7a3c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  border: 2px solid transparent;
  border-image: linear-gradient(180deg, #8c7a3c 0%, #b49c5c 20%, #f5e6a3 40%, #e8cc80 50%, #f5e6a3 60%, #b49c5c 80%, #8c7a3c 100%) 1;
  border-radius: 10px;
  font-weight: 700;
  padding: 12px 28px;
  font-size: 14px;
  text-transform: uppercase;
  cursor: pointer;
  z-index: 10;
  pointer-events: auto;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 4px 8px rgba(255, 223, 107, 0.5);
}

#btn-devis:hover {
  background-image: linear-gradient(180deg, #d4af37 0%, #f5e6a3 30%, #fff8dc 50%, #f5e6a3 70%, #d4af37 100%);
  -webkit-background-clip: text;
  background-clip: text;
  transform: scale(1.05);
  box-shadow: 0 6px 14px rgba(255, 215, 0, 0.5);
}

#btn-devis:active {
  transform: scale(0.97);
}

/* ==============================
   HEADER & NAVBAR
   ============================== */

  header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px 60px;
  background-color: transparent;
  position: fixed;
  width: 100%;
  z-index: 1000;
  top: 0;
  left: 0;
  transition: top 0.4s ease-in-out; /* Transition fluide */
}

#telephone-defilant {
  display: none;
  position: fixed;
  top: 100px; /* Ajuste selon ton design */
  left: 50%;
  transform: translateX(-50%);
  color: #e8cc80; /* Texte doré (couleur originale) */
  padding: 10px 10px;
  border-radius: 10px;
  font-size: 1.5rem; /* Augmenté de 1.8rem à 2.2rem */
  font-weight: 1500; /* Très gras (maximum) */
  margin-top: -35px; /* Ajustez la valeur selon vos besoins */
  white-space: nowrap; /* Empêche le texte de passer à la ligne */
  overflow: hidden; /* Coupe le texte qui dépasse (à éviter si le numéro est trop long) */
  text-align: center; /* Centre le texte */
  max-width: 100%; /* S'assure que ça ne dépasse pas */

}

  

.shake {
  display: inline-block;
  color: #e8cc80; /* Couleur blanche */
  animation: shake-animation 0.5s infinite alternate;
}

@keyframes shake-animation {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg); }
  50% { transform: rotate(10deg); }
  75% { transform: rotate(-10deg); }
  100% { transform: rotate(10deg); }
}



  
  nav {
  background-color: transparent !important; /* ou la couleur de ton choix */
}


/* Style pour les liens de la nav-bar */
header nav ul {
  list-style: none; /* Supprime les puces */
  display: flex;
  gap: 20px; /* Espacement entre les liens */
  margin: 0;
  padding: 0;
}

header nav ul li a {
  text-decoration: none;
  color: white;
  font-weight: bold;
  font-size: 1.2rem;
  transition: color 0.3s ease;
}

header nav ul li a:hover {
  color: #e8cc80; /* Ajoute une couleur dorée au survol */
}

/* Style pour le logo */
/* Logo */
.logo {
  position: absolute; /* Permet au logo de flotter */
  top: 200px; /* Ajuste la position verticale */
  left: 50%; /* Centre horizontalement */
  transform: translateX(-50%); /* Centre parfaitement */
  z-index: 10; /* Passe au-dessus de la nav-bar et des autres éléments */
  transition: opacity 0.5s ease, visibility 0.5s ease; /* Animation de disparition */
  opacity: 1;
}

.logo img {
  height: 400px; /* Ajuste la taille du logo */
  width: auto; /* Garde les proportions */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Animation douce */
  animation: fadeInDown 0.8s ease-in-out;
}

.logo img:hover {
  transform: scale(1.1); /* Agrandit légèrement au survol */
  opacity: 0.9; /* Ajoute un effet de transparence au survol */
}

.logo.hidden {
  opacity: 0; /* Le logo devient invisible */
  display: none; /* Retire complètement le logo de l'affichage */
  /*transition: opacity 0.5s ease; /* Animation de disparition */
  visibility: hidden;
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}





 /* Styles généraux pour le menu */
 .navbar {

  justify-content: center;
  align-items: center;
  gap: 80px!important;
  position: fixed;
  top: 0;
  left: 20px;
  width: 100%;
  height: auto;
  background-color: transparent;
  z-index: 10;
  background: transparent; /* Navbar complètement transparente */
  border: none; /* Supprime toute bordure */
  box-shadow: none; /* Supprime toute ombre */

}
/* Masquer la navbar */
 .navbar.hidden {
  transform: translateY(-100%);
  opacity: 0;
}

.navbar ul {
  gap: 80px!important;
  text-align: center;
  display: absolute;
  flex-wrap: wrap;
 
}

.navbar ul li {
  position: relative;
  flex-direction: column;
  margin: 0; /* Réinitialise les marges si elles existent */
  margin-right: 30px; /* Ajuste l'espace entre les liens */
}

 
/* Lien principal */
.navbar ul li a {
  color: #e8cc80;
  text-decoration: none;
  padding: 5px 1px;
  font-size: 1.5rem;
  transition: color 0.3s;
}

.navbar ul li a:hover {
  color: #e8cc80; /* Couleur dorée au survol */
}

/* Navbar transparente */
.navbar-transparent {
  background-color: transparent;
}

/* ==============================
   DROPDOWN MENU NAVBAR
   ============================== */


/* Dropdown pour la navbar */
.dropdown {
  position: relative;
}

.dropdown-menu {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
  background-color: #444;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 4px 10px rgba(255, 215, 0, 0.3);
  z-index: 100;
  margin-top: -10px; /* Ajustez selon vos besoins */
}

/* Affichage au survol */
.dropdown:hover .dropdown-menu {
  display: block; /* Affiche le sous-menu */
}

.dropdown-menu a {
  display: block;
  color: #b49c5c;
  padding: 8px 15px;
  text-decoration: none;
  text-align: center; /* Centre le texte */
  font-family: "Footlight MT Light", Arial, sans-serif;}

.dropdown-menu a:hover {
  background-color: #b49c5c; /* Fond doré au survol */
  color: #333;
}




/* ==============================
   SOUS-MENUS (doublon nettoyé - voir bloc principal plus haut)
   ============================== */



/* ==============================
   MENU BURGER - MOBILE
   ============================== */
   /* Menu burger pour mobile */
  .burger-menu {
   display: none;
   background: none;
   border: none;
   font-size: 24px;
   color: #b49c5c;
   position: absolute;
   top: 20px;
   right: 20px;
   cursor: pointer;
   z-index: 15;
  }
  

  .burger-menu:hover {
  color: #ffd700; /* Couleur au survol */
  }

  .navbar ul.active {
  display: flex !important; /* On force l'affichage */
  flex-direction: column;
  position: absolute;
  top: 60px;
  left: 0;
  background-color: #333;
  padding: 20px;
  gap: 10px;
  border: none; /* Supprime la bordure */
  }


/* =========================================================
   KMG — AVIS CLIENTS (section + slider + popup)
   Version unifiée, sans doublons, prête à coller
   Couleurs : or #e8cc80 — fond #333
   Dépendances HTML : #avis-clients, .slider, .item, #prev/#next,
   #open-popupavis, #popupavis, #avis-form, #avis-name/#avis-message,
   #avis-stars .form-star, #rating (hidden), .avis-submit,
   .close-popupavis (ou .avis-close)
   ========================================================= */



#avis-clients {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: auto;
  position: relative;
  text-align: center;
  color: #e8cc80;
  background-color: #333 !important;
  position: relative;
}

#avis-clients h1 {
  text-align: center;
  font-size: 2.5em;
  letter-spacing: 1px;
  margin-bottom: 24px;
}

#avis-clients h1::after {
  content: "";
  display: block;
  width: 50%;
  height: 3px;
  margin: 10px auto 0;
  background: linear-gradient(90deg, rgba(232,204,128,.0), rgba(232,204,128,.9), rgba(232,204,128,.0));
}

#avis-clients p {
  font-size: large;
  margin: 0;
}

/* ---------- Slider ---------- */
.slider-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
}

.slider {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60%;
  max-width: 720px;
  height: 370px;
  overflow: hidden;
  margin-inline: auto;
}

.item {
  position: absolute;
  width: 250px;
  height: 320px;
  background: #333;
  border-radius: 12px;
  padding: 20px;
  color: #e8cc80;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 6px 18px rgba(255, 215, 0, 0.25);
  overflow: hidden;
  transition: transform .35s ease, opacity .35s ease, filter .35s ease;
}

.item .name {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 6px;
}

/* étoiles affichées sur les cartes avis */
.star { font-size: 40px; color: #777; }
.star.active,
.star.review-star.active {
  color: #e8cc80 !important;
  -webkit-text-fill-color: #e8cc80 !important;
  text-shadow:
    0 0 6px rgba(232, 204, 128, 0.8),
    0 0 15px rgba(212, 175, 55, 0.6),
    0 0 30px rgba(212, 175, 55, 0.3);
}

/* Flèches avis - meme style que realisations */
#next, #prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  background: transparent;
  color: #e8cc80;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    180deg,
    #8c7a3c 0%,
    #b49c5c 20%,
    #f5e6a3 40%,
    #e8cc80 50%,
    #f5e6a3 60%,
    #b49c5c 80%,
    #8c7a3c 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  border: 2px solid transparent;
  border-image: linear-gradient(
    180deg,
    #8c7a3c 0%,
    #b49c5c 20%,
    #f5e6a3 40%,
    #e8cc80 50%,
    #f5e6a3 60%,
    #b49c5c 80%,
    #8c7a3c 100%
  ) 1;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 1.4rem;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
}
#prev:hover, #next:hover {
  background-image: linear-gradient(
    180deg,
    #d4af37 0%,
    #f5e6a3 30%,
    #fff8dc 50%,
    #f5e6a3 70%,
    #d4af37 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 18px rgba(255, 215, 0, 0.6);
}
#prev { left: calc(50% - 400px) !important; }
#next { right: calc(50% - 400px) !important; }

/* ---------- Bouton “Ajouter un avis” ---------- */
#open-popupavis {
  background: transparent;
  color: #e8cc80;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(180deg, #8c7a3c 0%, #b49c5c 20%, #f5e6a3 40%, #e8cc80 50%, #f5e6a3 60%, #b49c5c 80%, #8c7a3c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  border: 2px solid transparent;
  border-image: linear-gradient(180deg, #8c7a3c 0%, #b49c5c 20%, #f5e6a3 40%, #e8cc80 50%, #f5e6a3 60%, #b49c5c 80%, #8c7a3c 100%) 1;
  border-radius: 10px;
  font-weight: 700;
  padding: 8px 16px;
  font-size: 12px;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 4px 8px rgba(255, 223, 107, 0.5);
  position: relative;
  z-index: 10;
}
#open-popupavis:hover {
  background-image: linear-gradient(180deg, #d4af37 0%, #f5e6a3 30%, #fff8dc 50%, #f5e6a3 70%, #d4af37 100%);
  -webkit-background-clip: text;
  background-clip: text;
  transform: scale(1.05);
  box-shadow: 0 6px 14px rgba(255, 215, 0, 0.5);
}
#open-popupavis:active { transform: scale(0.97); }

/* ---------- Popup (modale) ---------- */
/* Masquée par défaut */
#popupavis {
  display: none;
  position: fixed;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: min(90vw, 520px);
  max-height: 85vh;
  background: #1e1e1e;
  z-index: 2000;
  padding: 22px;
  border-radius: 18px;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 12px 32px rgba(0,0,0,.45), 0 0 0 1px rgba(232,204,128,.18);
  overflow: auto;
}

/* Visible quand active (classe ajoutée en JS) */
#popupavis.active {
  display: block;
  opacity: 1;
  visibility: visible;
}

/* Contenu */
.avis-modal__content,
.popupavis-content { /* les deux noms sont supportés */
  position: relative;
  width: 100%;
  text-align: center;
  color: #e8cc80;
}

/* Bouton fermer (supporte .close-popupavis ET .avis-close) */
.close-popupavis,
.avis-close {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 20px;
  line-height: 1;
  color: #e8cc80;
  background: rgba(255, 223, 107, 0.12);
  border: 1px solid rgba(255, 223, 107, 0.25);
  border-radius: 8px;
  padding: 6px 8px;
  cursor: pointer;
  z-index: 9999;
}

/* Empêche le scroll arrière-plan quand la popup est ouverte (classe ajoutée en JS) */
body.popup-open { overflow: hidden; }

/* ---------- Formulaire dans la popup ---------- */
#avis-form { margin-top: 8px; }

.avis-field { margin: 14px 0; }

#avis-form label,
.avis-label {
  display: block !important;
  color: #e8cc80;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: .02em;
}

/* Champs texte */
/* === Formulaire Avis Client : titres et champs === */
#avis-form label {
  font-size: 1.3rem !important;    /* agrandit le texte des labels */
  color: #e8cc80;                  /* ta couleur or si tu veux */
  font-weight: 600;
  display: block;
  margin-bottom: 8px;
}

/* Champ “Votre nom” */
#avis-name {
  font-size: 1.1rem !important;    /* texte plus grand dans le champ */
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #e8cc80;
  background-color: #111;
  color: #fff;
}

/* Champ “Votre avis” (le textarea) */
#avis-message {
  font-size: 1.1rem !important;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #e8cc80;
  background-color: #111;
  color: #fff;
}

/* Ligne “Votre note” */
.avis-label {
  font-size: 1.3rem !important;
  color: #e8cc80;
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
}

/* Étoiles */
#avis-stars .form-star {
  font-size: 2rem !important;      /* étoiles plus grosses */
  color: #e8cc80;
  cursor: pointer;
  transition: transform .2s;
}
#avis-stars .form-star:hover {
  transform: scale(1.2);
}

/* Animation au survol du bouton Envoyer */
.avis-submit {
  background: transparent;
  color: #e8cc80;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(180deg, #8c7a3c 0%, #b49c5c 20%, #f5e6a3 40%, #e8cc80 50%, #f5e6a3 60%, #b49c5c 80%, #8c7a3c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  border: 2px solid transparent;
  border-image: linear-gradient(180deg, #8c7a3c 0%, #b49c5c 20%, #f5e6a3 40%, #e8cc80 50%, #f5e6a3 60%, #b49c5c 80%, #8c7a3c 100%) 1;
  font-weight: bold;
  font-size: 1.1rem;
  border-radius: 10px;
  padding: 10px 18px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}
.avis-submit:hover {
  background-image: linear-gradient(180deg, #d4af37 0%, #f5e6a3 30%, #fff8dc 50%, #f5e6a3 70%, #d4af37 100%);
  -webkit-background-clip: text;
  background-clip: text;
  transform: scale(1.05);
  box-shadow: 0 4px 14px rgba(255, 215, 0, 0.5);
}

/* === Titre du formulaire d'avis === */
.avis-titre {
  text-align: center;
  font-size: 1.6rem;
  color: #e8cc80;          /* ton or */
  margin-bottom: 18px;
  letter-spacing: 0.5px;
  font-weight: 700;
}

/* === Toast “Merci pour votre commentaire” === */
#avis-toast {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  background: linear-gradient(180deg, #ffdf6b, #c7b06f); /* fond or lumineux */
  color: #111;                 /* texte foncé lisible */
  padding: 20px 30px;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.4);
  z-index: 6000;
  font-weight: 700;
  font-size: 1.3rem;           /* un peu plus grand */
  opacity: 0;
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
  text-align: center;
}


#avis-name,
#avis-message {
  width: 100%;
  background: #2a2a2a;
  color: #f5f5f5;
  border: 1px solid rgba(255,223,107,.35);
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
  transition: box-shadow .2s ease, border-color .2s ease;
 font-size:1.2rem !important;
}
#avis-name:focus,
#avis-message:focus {
  border-color: #e8cc80;
  box-shadow: 0 0 0 3px rgba(232,204,128,.15);
}

#avis-name { height: 42px; }
#avis-message { height: 110px; resize: vertical; }

/* Étoiles (version spans) */
#avis-stars {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin: 10px 0 14px;
}
.form-star {
  font-size: 32px;
  color: #888;
  cursor: pointer;
  transition: transform .15s ease, color .15s ease;
  user-select: none;
}
.form-star:hover { color: #e8cc80; transform: scale(1.06); }
.form-star.active { color: greenyellow; }

/* Bouton envoyer */
.avis-submit,
#avis-form button[type="submit"] {
  margin-top: 10px;
  background: linear-gradient(180deg, #ffdf6b, #b9912b);
  color: #131313;
  border: 0;
  border-radius: 12px;
  padding: 10px 18px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(255,223,107,.25);
  text-transform: none;
}
.avis-submit:hover,
#avis-form button[type="submit"]:hover { filter: brightness(1.05); }
.avis-submit:active,
#avis-form button[type="submit"]:active { transform: scale(0.98); }

/* Feedback (message “Merci…”) */
.avis-feedback { margin-top: 10px; color: #cfeacb; }
.avis-feedback.error { color: #ffb0b0; }

/* La section devient le conteneur de positionnement */
#avis-clients { position: relative; }

/* Toast centré DANS la section (plus d’ancrage en bas de page) */
#avis-toast{
  position: absolute !important;   /* clé : relatif à #avis-clients */
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) scale(.92) !important;
  background: rgba(30,30,30,.95);
  color: #e8cc80;
  padding: 18px 26px;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,.4), 0 0 0 1px rgba(232,204,128,.25);
  z-index: 3000;                  /* au-dessus du slider, sous la modale */
  font-weight: 700;
  font-size: 1.05rem;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease, transform .35s ease;
}


.service p {
  padding: 10px;
  font-size: 1.3rem;
  color: #e8cc80;
  line-height: 1.6;
  font-family: "Footlight MT Light", "Playfair Display", Arial, sans-serif !important;
}
.service a h2 {
  font-size: 1.2em;
  margin: 10px 0;
  color: #e8cc80; /* Couleur du texte */
  text-decoration: none;
  font-family: "Footlight MT Light", "Playfair Display", Arial, sans-serif !important;
  text-decoration: none !important; /* Souligne au survol */
  width: 100%;
  font-weight: 900;
}


@media screen and (max-width: 768px) {
  #popupavis {
    width: 90vw;           /* Utilise 90 % de la largeur de l’écran */
    max-width: 400px;      /* Limite la largeur */
    max-height: 78vh;      /* Ajuste la hauteur */
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(255, 215, 0, .3);
    text-align: center;
    transition: transform 0.3s ease-in-out;
    justify-content: center;  /* Centre verticalement */
    font-family: "Footlight MT Light", Arial, sans-serif !important;
  }
}


/* Portrait tablette/mobile */
@media (orientation: portrait) and (max-width: 1023px) {
  /* tes réglages portrait */
}

/* Paysage tablette */
@media (orientation: landscape) and (max-width: 1023px) {
  /* corrige les éléments tronqués : tailles, marges, overflow */
  .hero { min-height: 100vh; }
  /* ex: réduire titres, repositionner logo/phone, etc. */
}



/* ===== Tablette : correctifs visuels (portrait & paysage) ===== */

/* Portrait tablette/mobile */
@media (max-width: 1023px) and (orientation: portrait) {
  header { min-height: 64px; }
  .hero { min-height: 100vh; background-size: cover; background-position: center; }
  .logo img { max-width: 300px; height: auto; }
  #telephone-defilant { font-size: 1.5rem !important; font-weight: 1500 !important; }
}

/* Paysage tablette : éviter le "tronqué" */
@media (max-width: 1023px) and (orientation: landscape) {
  header { min-height: 56px; }
  .hero {
    min-height: 100vh;            /* occupe tout le viewport */
    background-size: cover;       /* évite les bandes */
    background-position: center;
    padding-top: 20px;
    
  }
  .hero h1 { font-size: clamp(22px, 4.2vw, 34px); }
  .hero p  { font-size: clamp(14px, 2.2vw, 18px); }
  .logo img { 
    max-width: 300px; 
    height: auto;
   
   }
  
  #telephone-defilant { font-size: 13px; }
}

/* Cache bien la nav desktop sous 992px (sinon conflit visuel) */
@media (max-width: 992px) {
  nav .right.hide-on-med-and-down { display: none !important; }
}

}

/* === KMG Mobile Menu v2 (ultra simple) === */
:root{
  --mm2-bg:#333; --mm2-bg2:#333; --mm2-text:#e8cc80; --mm2-shadow:0 8px 24px rgba(0,0,0,.5);
}

/* Par défaut : rien n’apparait sur desktop */
.mm2-burger{ display:none; }
.mm2-panel, .mm2-backdrop{ display:none; }

/* Mobile uniquement */
@media (max-width: 992px){
  /* masquer ton menu desktop sans toucher au reste */
  header nav ul.right{ display:none !important; }

  /* Burger */
  .mm2-burger{
    position:fixed; left:12px; top:12px;
    width:44px; height:44px; border:0; background:transparent; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    z-index:10010;
  }
  .mm2-burger span{
    display:block; width:24px; height:2px; background:var(--mm2-text);
    position:relative;
  }
  .mm2-burger span + span{ margin-top:6px; }

  /* Panneau */
  .mm2-panel{
    position:fixed; inset:0 auto 0 0; width:min(86vw,360px); height:100vh;
    background:var(--mm2-bg); color:var(--mm2-text);
    box-shadow:var(--mm2-shadow);
    transform:translateX(-100%); transition:transform .25s ease;
    z-index:10009; display:block; /* présent mais hors écran */
    padding:12px 10px 5px;
  }
  .mm2-panel[aria-hidden="false"]{ transform:translateX(0); }

  .mm2-close{
    position:absolute; right:10px; top:10px;
    background:transparent; border:0; color:var(--mm2-text); font-size:22px; cursor:pointer;
  }

  .mm2-list{ list-style:none; margin:44px 0 0; padding:0; }
  .mm2-list > li{ margin:4px 0; }

  .mm2-link{
    display:block; padding:12px 10px; border-radius:8px; text-decoration:none; color:var(--mm2-text);
  }
  .mm2-link:hover{ background:rgba(255,255,255,.08); }

  /* Accordéon ultra simple */
  .mm2-acc-btn{
    width:100%; text-align:left; padding:12px 10px; border:0; background:var(--mm2-bg2); color:var(--mm2-text);
    border-radius:8px; cursor:pointer; font-weight:600;
  }
  .mm2-acc-panel{ display:none; list-style:none; margin:6px 0 0; padding:0 0 0 10px; }
  .mm2-acc-btn[aria-expanded="true"] + .mm2-acc-panel{ display:block; }

  /* Backdrop */
  .mm2-backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.45);
    z-index:10008; opacity:0; transition:opacity .2s ease; display:block;
  }
  .mm2-backdrop.mm2-show{ opacity:1; }

  /* Verrou de scroll quand ouvert */
  body.mm2-open{ overflow:hidden !important; }
}

/* === KMG Mobile Menu v2 (ultra simple) === */
:root{
  --mm2-bg:#333; --mm2-bg2:#333; --mm2-text:#e8cc80; --mm2-shadow:0 8px 24px rgba(0,0,0,.5);
}

/* Par défaut : rien n’apparait sur desktop */
.mm2-burger{ display:none; }
.mm2-panel, .mm2-backdrop{ display:none; }

/* Mobile uniquement */
@media (max-width: 992px){
  /* masquer ton menu desktop sans toucher au reste */
  header nav ul.right{ display:none !important; }

  /* Burger */
  .mm2-burger{
    position:fixed; left:12px; top:12px;
    width:44px; height:44px; border:0; background:transparent; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    z-index:10010;
  }
  .mm2-burger span{
    display:block; width:24px; height:2px; background:var(--mm2-text);
    position:relative;
  }
  .mm2-burger span + span{ margin-top:6px; }

  /* Panneau */
  .mm2-panel{
    position:fixed; inset:0 auto 0 0; width:min(86vw,360px); height:100vh;
    background:var(--mm2-bg); color:var(--mm2-text);
    box-shadow:var(--mm2-shadow);
    transform:translateX(-100%); transition:transform .25s ease;
    z-index:10009; display:block; /* présent mais hors écran */
    padding:12px 10px 20px;
  }
  .mm2-panel[aria-hidden="false"]{ transform:translateX(0); }

  .mm2-close{
    position:absolute; right:10px; top:10px;
    background:transparent; border:0; color:var(--mm2-text); font-size:22px; cursor:pointer;
  }

  .mm2-list{ list-style:none; margin:44px 0 0; padding:0; }
  .mm2-list > li{ margin:4px 0; }

  .mm2-link{
    display:block; padding:12px 10px; border-radius:8px; text-decoration:none; color:var(--mm2-text);
  }
  .mm2-link:hover{ background:rgba(255,255,255,.08); }

  /* Accordéon ultra simple */
  .mm2-acc-btn{
    width:100%; text-align:left; padding:12px 10px; border:0; background:var(--mm2-bg2); color:var(--mm2-text);
    border-radius:8px; cursor:pointer; font-weight:600;
  }
  .mm2-acc-panel{ display:none; list-style:none; margin:6px 0 0; padding:0 0 0 10px; }
  .mm2-acc-btn[aria-expanded="true"] + .mm2-acc-panel{ display:block; }

  /* Backdrop */
  .mm2-backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.45);
    z-index:10008; opacity:0; transition:opacity .2s ease; display:block;
  }
  .mm2-backdrop.mm2-show{ opacity:1; }

  /* Verrou de scroll quand ouvert */
  body.mm2-open{ overflow:hidden !important; }
}

/* === HOTFIX mobile (cache le desktop et force l'affichage du tiroir) === */
@media (max-width: 992px){
  /* 1) on cache TOUT le menu desktop */
  header nav ul.right,
  header nav ul.right * ,
  header nav .submenu { 
    display: none !important;
    visibility: hidden !important;
  }

  /* 2) on force l'affichage du tiroir et du voile */
  .mm2-panel, .mm2-backdrop { 
    display: block !important; 
  }

  /* 3) tiroir au-dessus de tout, largeur visible et fond opaque */
  .mm2-panel{
    position: fixed !important;
    left: 0; top: 0; bottom: 0;
    width: min(86vw, 360px);
    height: 100vh;
    transform: translateX(-100%);
    background: #333;            /* fond plein pour ne plus "voir" la hero dessous */
    color: #e8cc80;
    z-index: 1050 !important;    /* Au-dessus navbar (1000) mais sous popups (2000+) */
  }
  .mm2-panel[aria-hidden="false"]{ transform: translateX(0); }

  /* 4) voile qui couvre la page (mais sous le tiroir) */
  .mm2-backdrop{
    position: fixed !important;
    inset: 0;
    background: rgba(0,0,0,.10);
    opacity: 0;
    transition: opacity .2s ease;
    z-index: 1040 !important;    /* Sous le panel (1050) */
  }
  .mm2-backdrop.mm2-show{ opacity: 1; }

  /* 5) bouton burger toujours au-dessus */
  .mm2-burger{
    position: fixed !important;
    left: 12px; top: 12px;
    z-index: 1100 !important;    /* Au-dessus du panel pour toujours être cliquable */
  }

  
}
/* === RESTAURE L’ALTERNANCE DE FOND EN MOBILE === */
@media (max-width: 992px){
  .hero {
    position: relative !important;
    overflow: hidden;                /* propre */
  }
 
.mm2-backdrop {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background: none !important;
}
/* === HERO BACKGROUND (desktop + mobile) === */
.hero {
  background: transparent !important;                 /* pas de fond noir sur le conteneur */
}

/* COMMENTÉ: Interférait avec l'animation d'alternance des images
.hero::after {
  background: none !important;
}
*/





/* sécurité : tout ce qui pourrait remonter au-dessus de la hero */
.hero > * { position: relative; z-index: 10; } /* Au-dessus des backgrounds et overlay */

@media (max-width: 992px){
}
/* ========================= */
/* MENU LATÉRAL SIMPLE KMG   */
/* ========================= */

/* Panneau mobile (par défaut caché à gauche) */
.mm2-panel {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: min(80vw, 320px);
  background: #111;                 /* fond neutre, pas de transparence */
  color: #d4b567;                   /* ton or */
  transform: translateX(-100%);
  transition: transform 0.35s ease;
  z-index: 1050;                    /* Cohérent avec règle media query */
  padding: 60px 20px;
  overflow-y: auto;
  box-shadow: 3px 0 8px rgba(0,0,0,.3);
  border-right: 1px solid rgba(212,181,103,.3);
}

/* Quand ouvert */
.mm2-panel[aria-hidden="false"] {
  transform: translateX(0);
}

/* Bouton burger */
.mm2-burger {
  position: fixed;
  top: 14px;
  left: 14px;
  width: 32px;
  height: 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1100;                    /* Cohérent avec règle media query */
}
.mm2-burger span {
  display: block;
  width: 100%;
  height: 3px;
  background: #d4b567;
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* Effet croix */
.mm2-panel[aria-hidden="false"] ~ .mm2-burger span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.mm2-panel[aria-hidden="false"] ~ .mm2-burger span:nth-child(2) {
  opacity: 0;
}
.mm2-panel[aria-hidden="false"] ~ .mm2-burger span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* Liens du menu */
.mm2-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mm2-list li {
  margin-bottom: 12px;
}
.mm2-link,
.mm2-acc-btn {
  color: #d4b567;
  text-decoration: none;
  font-size: 1.1rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-primary, "Footlight MT Light", serif);
  transition: color 0.2s;
}
.mm2-link:hover,
.mm2-acc-btn:hover {
  color: #f5d88b;
}

/* Sous-listes */
.mm2-acc-panel {
  margin: 6px 0 10px 15px;
  display: none;
}
.mm2-acc-btn[aria-expanded="true"] + .mm2-acc-panel {
  display: block;
}

/* cache le menu desktop en mobile */
@media (max-width: 992px){
  header nav ul.right,
  header nav ul.right *,
  header .btn-contact { display: none !important; }
}
/* --- MENU LATÉRAL : forcer l'empilement vertical --- */
@media (max-width: 992px){
  .mm2-list{
    display: flex !important;
    flex-direction: column !important;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .mm2-list > li{
    display: block !important;
    width: 100%;
  }
  .mm2-link,
  .mm2-acc-btn{
    display: block !important;
    width: 100%;
    padding: 12px 10px;
  }
  /* Sous-menus en colonne aussi */
  .mm2-acc-panel{
    display: none;                 /* ouvert via [aria-expanded] */
    flex-direction: column;
    gap: 6px;
    padding-left: 12px;
    margin: 6px 0 0;
    list-style: none;
  }
  .mm2-acc-btn[aria-expanded="true"] + .mm2-acc-panel{
    display: flex !important;
  }
}
/* --- HERO : film très léger pour faire ressortir l'or --- */
:root{ --hero-dark: 0.28 !important; }                 /* ajuste 0.20 → 0.40 selon ton goût */


/* le contenu passe au-dessus du film */
.hero > *{ position: relative; z-index: 2; }

/* Option : un poil plus sombre en mobile */
@media (max-width: 992px){
  :root{ --hero-dark: 0.32; }
}
/* ===== KMG Burger: reset propre ===== */
:root{
  --kmg-gold:#d4b567;
  --kmg-gold-strong:#ffdf6b;
  --kmg-dark:#333;
  --kmg-text:#e8cc80;
}

/* Masquer le menu desktop en mobile uniquement */
@media (max-width:992px){
  header nav ul.right, header nav ul.right *, header .btn-contact{ display:none !important; visibility:hidden !important; }
}

/* Bouton burger (mobile only) */
.mm2-burger{
  position:fixed; top:14px; left:14px;
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(34,34,34,.9);
  border:1px solid rgba(180,156,92,.6);
  border-radius:10px;
  z-index:2147483647;
  cursor:pointer;
}
.mm2-burger i{ font-size:20px; color:var(--kmg-gold); }
@media (min-width:993px){ .mm2-burger{ display:none !important; } }

/* Panneau latéral (mobile) */
.mm2-panel{
  position:fixed; left:0; top:15%;
  width: clamp(200px, 65vw, 240px);
  max-height:70vh; height:auto;
  padding:18px 15px;
  background:#333; color:var(--kmg-text);
  border-right:1px solid rgba(180,156,92,.25);
  border-radius:12px;
  box-shadow:6px 8px 18px rgba(0,0,0,.4);
  z-index:2147483646;
  transform: translateX(-110%);
  transition: transform .32s ease;
  display:block; /* jamais none */
}
body.mm2-open .mm2-panel{ transform: translateX(0); }

/* Liste verticale compacte */
.mm2-list{ display:flex; flex-direction:column; gap:8px; padding:0; margin:0; list-style:none; }
.mm2-link, .mm2-acc-btn{
  display:block; padding:10px 8px; border-radius:6px;
  color:var(--kmg-text); text-decoration:none; background:none; border:0; cursor:pointer;
  font: 500 1rem/1.2 var(--font-primary, "Footlight MT Light", serif);
}
.mm2-link:hover, .mm2-acc-btn:hover{ background: rgba(255,223,107,.08); color: var(--kmg-gold-strong); }

/* Sous-menus (accordéon) */
.mm2-acc-panel{ display:none; list-style:none; margin:6px 0 0 12px; padding:0; }
.mm2-acc-btn[aria-expanded="true"] + .mm2-acc-panel{ display:flex; flex-direction:column; gap:6px; }

/* Anti-conflits Materialize / vieilles règles */
body.kmg-burger-only .sidenav,
body.kmg-burger-only .sidenav-overlay{ display:none !important; }
.mm2-burger, .mm2-panel{ pointer-events:auto !important; }

/* Verrou de scroll quand ouvert */
@media (max-width:992px){ body.mm2-open{ overflow:hidden !important; } }

/* ===== HERO RESET: une seule source d'image + film léger ===== */
/* Supprime TOUT voile existant (overlay/::after) et ne garde que ::before */



/* === MENU BURGER SIMPLE KMG === */
.mm2-burger {
  position: fixed;
  top: 16px;
  left: 18px;
  z-index: 10000;
  background: none !important;
  padding: 10px 12px;
  cursor: pointer;
}
.mm2-burger i { color:#d4b567; font-size:1.5rem; }

.mm2-panel {
  position: fixed;
  left: 0;
  top: 16px;
  width: clamp(150px,55vw,160px);
  height: 100vh;
  color: #e8cc80;
  transform: translateX(-100%);
  transition: transform .3s ease;
  z-index: 9999;
    color: var(--kmg-or);
    border-right: 3px solid rgba(238, 212, 142, 0.25) !important;
    border-radius: 10px;
    box-shadow: 6px 8px 18px rgba(0,0,0,.35);
    background-color: rgba(32, 32, 32, 0.8) !important;
    gap: 6px;              /* était sans doute plus grand avant */
    margin: 6px 0 0;
    padding: 0;
    bottom: auto; max-height: 45vh;

}
body.mm2-open .mm2-panel { transform: translateX(0); }

.mm2-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.mm2-link { color:#e8cc80; text-decoration:none; font-size:1.1rem; }
.mm2-link:hover { color:#ffdf6b; }

/* Cache le menu desktop en mobile */
@media(max-width:992px){
  header nav ul.right, header .btn-contact{ display:none !important; }
}
/* ===== RESTAURE FOND ALTERNANT SUR .hero ===== */
.hero{
  position: relative !important;
  min-height: 100vh !important;
  background: transparent !important;
  overflow: hidden !important;
  height: 100vh !important; /* Prend toute la hauteur de l'écran */

}
/* Film foncé */
.hero .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.35);
  z-index: 2;
  pointer-events: none;
}

/* Garder .hero::after defini plus haut (image2 + animation). */


/* iOS : éviter le "fixed" - Déjà géré dans la définition principale */
@media (max-width: 992px){
  .hero::before{ background-attachment: scroll !important; }
  .hero::after{ background-attachment: scroll !important; }
}
}

.hero{ min-height: calc(var(--vh, 1svh) * 100); }


@media screen and (max-width:1366px) and (max-height:620px) {
  
  section.hero,
  .hero { 
    height:100vh !important; 
    min-height:100vh !important; 
    padding-top:12vh !important; 
    padding-bottom:4vh !important; 
    display:flex !important; 
    flex-direction:column; 
    justify-content:center; 
    align-items:center;
  }
.btn-contact{ left:auto!important; right:-120px!important; margin-left:0!important; transform:none!important; }
.navbar{ padding-right:200px !important;  
}

.navbar ul li {
  margin: 0 5px !important;  /* espace horizontal entre les liens */
}



     .hero h1{ margin:2vh 0 1.5vh !important; font-size:clamp(24px,3.2vw,36px) !important; }
    
    .hero p{ margin:0 !important; font-size:clamp(14px,1.6vw,20px) !important; max-width:80ch; }
  /* Si un padding géant ailleurs poussait le contenu : */
  section { padding-bottom:0 !important; }
    

  .hero h1{ 
    margin:0 2rem .2rem !important; 
    font-size:clamp(2rem,3vw,2.6rem) !important;
  }
  .hero p{
    margin:0 2rem !important;
    max-width:900px !important;
    font-size:clamp(1rem,1.4vw,1.25rem) !important;
  }
  .hero {
  justify-content: flex-end !important;
  padding-bottom: 8vh !important; /* ajuste la valeur : 6vh, 10vh... selon ton goût */
}

.logo {
  justify-content: center !important;
  padding-bottom: 8vh !important; /* ajuste la valeur : 6vh, 10vh... selon ton goût */
  height: auto !important;
}

  .logo img {
 
    max-height: 55vh !important;;
    width: auto !important;
    height: auto !important;
    width: auto !important;
    transform: translateX(15%) !important;
  }

   .hero-content { /* ou le conteneur qui englobe ton h1 + p */
  margin-top: auto !important;
  margin-bottom: 8vh !important;



    }

}

/* RÈGLES FINALES DESKTOP - PRIORITÉ ABSOLUE */
@media (min-width: 1024px) {
  /* Cache le burger a partir de 1024px */
  body.kmg-burger-only .kmg-burger,
  body.kmg-burger-only .kmg-burger-overlay,
  body.kmg-burger-only .kmg-burger-panel {
    display: none !important;
  }

  /* Force l'affichage du lien Avis */
  .navbar ul li a[href="#avis-clients"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 100 !important;
  }

  /* Réorganise la navbar */
  .navbar ul {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    position: relative !important;
    padding: 0 20px !important;
    gap: 30px !important;
    padding-right: 150px !important; /* Décale vers la gauche en ajoutant du padding à droite */
  }

  /* Tous les éléments de menu (sauf le bouton) */
  .navbar ul li:not(.only-desktop) {
    flex: 0 0 auto !important;
    position: relative !important;
  }

  /* Reset position pour les items avec sous-menu */
  .navbar ul li.has-submenu {
    position: relative !important;
  }

  /* S'assure que les sous-menus sont cachés par défaut */
  .navbar ul li.has-submenu .submenu {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  /* Affiche les sous-menus au survol uniquement */
  .navbar ul li.has-submenu:hover .submenu {
    display: flex !important;
  }

  /* Bouton contact en position absolue à droite */
  .navbar ul li.only-desktop {
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  .btn-contact {
    position: relative !important;
    margin: 0 !important;
  }
}

/* Ajustements spécifiques pour tablette/petit desktop */
@media (min-width: 1367px) and (max-width: 1439px) {

  /* Animation pulse pour le bouton contact laptop */
  @keyframes pulseLaptopBtn {
    0% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(232, 204, 128, 0.4);
    }
    50% {
      transform: scale(1.12);
      box-shadow: 0 0 20px 10px rgba(232, 204, 128, 0.2);
    }
    100% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(232, 204, 128, 0);
    }
  }

  .navbar ul {
    gap: 60px !important; /* Réduit légèrement pour laisser place à Avis */
  }

  /* Descend le logo sur laptop */
  .logo {
    top: 220px !important; /* Descendu de 180px à 220px */
  }

  /* Remonte et centre le téléphone sur laptop */
  #telephone-defilant {
    top: 105px !important; /* Remonté légèrement */
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  /* Fait pulser le bouton contact sur laptop */
  nav.navbar ul li.only-desktop a.btn-contact {
    animation: pulseLaptopBtn 2s infinite ease-in-out !important;
    transition: none !important;
  }

  /* S'assure que Avis est visible */
  .navbar ul li a[href="#avis-clients"] {
    display: block !important;
    visibility: visible !important;
  }
}

/* Ajustements pour grand desktop */
@media (min-width: 1367px) {
  .navbar ul {
    gap: 80px !important; /* Réduit de 90px à 80px pour Avis */
  }

  /* Descend légèrement le bouton contact en desktop */
  .navbar ul li.only-desktop {
    top: 55% !important;
  }
}

/* SECTION MES RÉALISATIONS - Macbook Air (5 colonnes via responsive.css) */
@media (min-width: 1367px) and (max-width: 1440px) {
  .gallery {
    gap: 25px !important;
  }

  .card {
    height: 250px !important;
  }

  .card img {
    object-fit: cover !important;
    height: 100% !important;
  }
}

@media (min-width: 1367px) and (max-width: 2559px) {
  .logo {
    top: 150px !important; /* Remonte le logo sur grand desktop */
  }
}

/* ====================================================
   Laptop / Petit desktop (1024 – 1439 px)
   Correctifs : logo trop grand, héro tassé, ticker
   ==================================================== */
@media (min-width: 1367px) and (max-width: 1439px) {

  /* Logo — réduit (root = 400 px, trop grand à hauteur ≤ 800 px) */
  .logo img {
    height: clamp(200px, 18vw, 260px) !important;
    width: auto !important;
  }

  /* Logo — centré et positionné juste sous la navbar */
  .logo {
    top: 130px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  /* Héro — libère de l'espace pour le contenu */
  .hero {
    padding-top: 390px !important;
  }

  /* h1 — retire le padding-top conçu pour l'ancien grand logo */
  .hero h1 {
    padding-top: 15px !important;
  }

  /* Ticker — résout le conflit 80 px (bloc 1) vs 105 px (bloc 2) */
  #telephone-defilant {
    top: 85px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}

/* RÈGLES FINALES MOBILE - PRIORITÉ ABSOLUE */
@media (max-width: 768px) {
  section.hero,
  .hero {
    padding-top: 60px !important; /* Réduit drastiquement pour rapprocher du logo */
    padding-bottom: 60px !important; /* Augmenté pour que le texte remonte */
    justify-content: flex-start !important; /* Aligne le contenu en haut */
  }

  .hero h1 {
    margin: 0 !important;
    margin-bottom: 10px !important;
    padding: 0 !important;
  }

  .hero p {
    margin: 0 !important;
    padding: 0 10px 20px 10px !important; /* Ajouté padding-bottom pour plus d'espace */
  }
}

/* RÈGLES SPÉCIFIQUES GRANDS MOBILES (Samsung S23 Ultra, etc.) */
@media (min-width: 360px) and (max-width: 768px) and (min-height: 700px) {
  section.hero,
  .hero {
    padding-top: 50px !important; /* Réduit drastiquement l'espace entre logo et titre */
  }

  .hero h1 {
    margin-bottom: 5px !important; /* Réduit l'espace entre h1 et p */
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

   .hero p {
    margin: 0 !important;
    padding: 0 5px !important;
  }
}

/* RÉDUCTION DES ESPACEMENTS ENTRE SECTIONS */
#services, #realisations, #avis-clients {
  min-height: auto !important;
  padding-top: 80px !important;
  padding-bottom: 40px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

#contact {
  min-height: auto !important;
  padding-top: 15px !important;
  padding-bottom: 40px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

#contact h1 {
  margin-bottom: 60px !important;
}

footer {
  margin-top: 20px !important;
}

#services h1, #realisations h1, #avis-clients h1, #contact h1 {
  padding-top: 10px !important;
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}

/* ALIGNEMENT DES BOUTONS SLIDER AVIS CLIENTS */
#prev {
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin-top: 15px !important; /* Ajustement manuel - descendre next */
}

#next {
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin-top: 15px !important; /* Ajustement manuel - descendre next */
}

/* SLIDER 3D AVIS - MOBILE RESPONSIVE */
@media (max-width: 768px) {
  .slider-wrap {
    width: 100% !important;
    padding: 0 !important;
  }

  .slider {
    width: 100% !important;
    height: 320px !important;
  }

  .item {
    width: 200px !important;
    max-width: 200px !important;
    height: 280px !important;
    padding: 12px !important;
    font-size: 0.85rem !important;
  }

  .item .name {
    font-size: 0.9rem !important;
    margin-bottom: 6px !important;
  }

  .item p {
    font-size: 0.8rem !important;
    line-height: 1.3 !important;
  }

  .emoji {
    font-size: 24px !important;
  }

  .star, .review-star {
    font-size: 20px !important;
  }

  #prev {
    left: -5px !important;
    z-index: 999 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
  }

  #next {
    right: -5px !important;
    z-index: 999 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
  }
}

@media (max-width: 480px) {
  .slider {
    height: 280px !important;
  }

  .item {
    width: 170px !important;
    max-width: 170px !important;
    height: 250px !important;
    padding: 10px !important;
  }

  .item .name {
    font-size: 0.85rem !important;
  }

  .item p {
    font-size: 0.75rem !important;
  }

  .emoji {
    font-size: 20px !important;
  }

  .star, .review-star {
    font-size: 18px !important;
  }

  #prev, #next {
    z-index: 999 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
  }
}

/* DESCENDRE LE BOUTON "AJOUTER UN AVIS" */
#open-popupavis {
  margin-top: 30px !important;
}

/* SCROLLBAR PERSONNALISÉE POUR POPUP AVIS */
#popupavis {
  overflow-y: auto !important;
}

/* Scrollbar pour Webkit (Chrome, Safari, Edge) */
#popupavis::-webkit-scrollbar {
  width: 10px;
}

#popupavis::-webkit-scrollbar-track {
  background: #333;
  border-radius: 10px;
}

#popupavis::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #c7b06f, #e8cc80);
  border-radius: 10px;
  border: 2px solid #333;
}

#popupavis::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #e8cc80, #f0d890);
}

/* Scrollbar pour Firefox */
#popupavis {
  scrollbar-width: thin;
  scrollbar-color: #e8cc80 #333;
}

/* RÉDUIRE LA TAILLE DE LA POPUP AVIS SUR MOBILE */
@media (max-width: 768px) {
  #popupavis {
    width: 85vw !important;
    max-width: 85vw !important;
    max-height: 65vh !important;
    padding-top: 40px !important;
  }

  .avis-close, .close-popupavis {
    position: absolute !important;
    top: -35px !important;
    right: -5px !important;
    z-index: 1000 !important;
  }
}

@media (max-width: 480px) {
  #popupavis {
    width: 90vw !important;
    max-height: 50vh !important;
    padding-top: 40px !important;
  }

  .avis-close, .close-popupavis {
    position: absolute !important;
    top: -35px !important;
    right: -5px !important;
    z-index: 1000 !important;
  }
}

/* Page realisations (cuisine) - footer mobile fixes */
@media (max-width: 375px) {
  body.service-page.is-cuisine footer .footer-social {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
  }

  body.service-page.is-cuisine footer .footer-social a,
  body.service-page.is-cuisine footer .footer-social a img {
    margin: 0 !important;
  }

  body.service-page.is-cuisine footer .footer-social a img {
    width: 20px !important;
    height: 20px !important;
  }

  body.service-page.is-cuisine footer .footer-nav ul {
    flex-wrap: nowrap !important;
    gap: 0 2px !important;
  }

  body.service-page.is-cuisine footer .footer-nav ul li a {
    font-size: 0.6rem !important;
  }
}

@media (max-width: 320px) {
  body.service-page.is-cuisine footer .footer-social a img {
    width: 24px !important;
    height: 24px !important;
  }

  body.service-page.is-cuisine footer .footer-nav ul {
    gap: 0 1px !important;
  }

  body.service-page.is-cuisine footer .footer-nav ul li a {
    font-size: 0.5rem !important;
    letter-spacing: -0.3px !important;
  }
}

/* ==============================
   REALISATION.PHP - FOOTER CUSTOM
   ============================== */

/* Back-to-top : fond transparent */
body.service-page.is-cuisine .kmg-backtotop {
  background: transparent !important;
  box-shadow: none !important;
  border: 2px solid #e8cc80 !important;
}

/* "Appelez-nous !" : ombre dorée */
body.service-page.is-cuisine footer .footer-title {
  text-shadow: 0 0 12px rgba(232, 204, 128, 0.7), 0 0 30px rgba(232, 204, 128, 0.4) !important;
}

/* Nav liens : caractères gras */
body.service-page.is-cuisine footer .footer-nav ul li a {
  font-weight: bold !important;
}

/* Footer copyright : tout sur une seule ligne */
body.service-page.is-cuisine footer .footer-copyright {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

body.service-page.is-cuisine footer .footer-copyright p {
  margin: 0 !important;
}

body.service-page.is-cuisine footer .footer-copyright p:last-child {
  display: inline;
}

body.service-page.is-cuisine footer .footer-copyright p:last-child a.footer-legal {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ================================================
   KMG REALISATIONS CAROUSEL (namespace .real-*)
   ================================================ */

/* Conteneur flex : boutons + slider */
.real-slider-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 0;
}

/* Zone des cartes */
.real-slider {
  position: relative;
  width: 100%;
  height: 450px;
  overflow: visible;
}

/* --- Carte individuelle --- */
.real-card {
  position: absolute;
  width: 300px;
  height: 400px;
  left: 50%;
  top: 50%;
  margin-left: -150px;
  margin-top: -200px;
  perspective: 1000px;
  transition: transform 0.5s ease, opacity 0.5s ease, filter 0.5s ease;
  cursor: pointer;
  pointer-events: none;
}

.real-card.is-active {
  pointer-events: auto;
  z-index: 10;
}

/* Inner : assure le retournement 3D */
.real-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}

/* Flip au hover (desktop uniquement, carte active) */
@media (hover: hover) {
  .real-card.is-active:hover .real-card-inner {
    transform: rotateY(180deg);
  }
}

/* Flip par clic (mobile) via classe JS */
.real-card.is-flipped .real-card-inner {
  transform: rotateY(180deg);
}

/* Faces avant / arriere */
.real-card-front,
.real-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 12px;
  overflow: hidden;
}

.real-card-front {
  background: linear-gradient(
    135deg,
    #b49c5c 0%,
    #f5e6a3 30%,
    #d4af37 50%,
    #b49c5c 70%,
    #8c7a3c 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
}

.real-card-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.real-card-back {
  background-color: #333;
  color: #e8cc80;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
}

.real-card-back h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: #e8cc80;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    180deg,
    #8c7a3c 0%,
    #b49c5c 20%,
    #f5e6a3 40%,
    #e8cc80 50%,
    #f5e6a3 60%,
    #b49c5c 80%,
    #8c7a3c 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
}

/* Bouton "En savoir plus" - effet miroir dore */
.real-btn {
  display: inline-block;
  background: transparent;
  color: #e8cc80;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    180deg,
    #8c7a3c 0%,
    #b49c5c 20%,
    #f5e6a3 40%,
    #e8cc80 50%,
    #f5e6a3 60%,
    #b49c5c 80%,
    #8c7a3c 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  padding: 10px 20px;
  border-radius: 5px;
  border: 2px solid transparent;
  border-image: linear-gradient(
    180deg,
    #8c7a3c 0%,
    #b49c5c 20%,
    #f5e6a3 40%,
    #e8cc80 50%,
    #f5e6a3 60%,
    #b49c5c 80%,
    #8c7a3c 100%
  ) 1;
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}

.real-btn:hover {
  background-image: linear-gradient(
    180deg,
    #d4af37 0%,
    #f5e6a3 30%,
    #fff8dc 50%,
    #f5e6a3 70%,
    #d4af37 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  transform: scale(1.05);
  box-shadow: 0 4px 14px rgba(255, 215, 0, 0.5);
}

/* Boutons prev / next */
#real-prev,
#real-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  background: transparent;
  /* Texte fleche avec gradient miroir */
  color: #e8cc80;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    180deg,
    #8c7a3c 0%,
    #b49c5c 20%,
    #f5e6a3 40%,
    #e8cc80 50%,
    #f5e6a3 60%,
    #b49c5c 80%,
    #8c7a3c 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  /* Bordure miroir */
  border: 2px solid transparent;
  border-image: linear-gradient(
    180deg,
    #8c7a3c 0%,
    #b49c5c 20%,
    #f5e6a3 40%,
    #e8cc80 50%,
    #f5e6a3 60%,
    #b49c5c 80%,
    #8c7a3c 100%
  ) 1;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 1.4rem;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
}

#real-prev:hover,
#real-next:hover {
  background-image: linear-gradient(
    180deg,
    #d4af37 0%,
    #f5e6a3 30%,
    #fff8dc 50%,
    #f5e6a3 70%,
    #d4af37 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 18px rgba(255, 215, 0, 0.6);
}

#real-prev { left: -40px; }
#real-next { right: -40px; }

/* --- Responsive --- */

/* Tablette */
@media (max-width: 768px) {
  .real-slider { height: 380px; }
  .real-card {
    width: 260px;
    height: 350px;
    margin-left: -130px;
    margin-top: -175px;
  }
  #real-prev { left: -0px; }
  #real-next { right: -0px; }
}

/* Mobile */
@media (max-width: 480px) {
  .real-slider { height: 340px; }
  .real-card {
    width: 230px;
    height: 320px;
    margin-left: -115px;
    margin-top: -160px;
  }
  #real-prev { left: 2px; }
  #real-next { right: 2px; }
  #real-prev,
  #real-next {
    width: 32px;
    height: 32px;
    font-size: 1.1rem;
  }
}

/* Petit mobile */
@media (max-width: 360px) {
  .real-slider { height: 310px; }
  .real-card {
    width: 200px;
    height: 280px;
    margin-left: -100px;
    margin-top: -140px;
  }
}

/* --- Box-shadow doree sur les cartes realisations --- */
.real-card-front,
.real-card-back {
  box-shadow: 0 6px 18px rgba(255, 215, 0, 0.25);
}

/* --- Supprime les ombres de separation entre sections --- */
#services,
#realisations,
#contact,
#avis-clients {
  box-shadow: none !important;
}

/* --- Effet miroir dore sur tous les titres --- */
.hero h1,
.section h1,
#services-title a,
#contact h1,
#avis-clients h1,
#map-section h1,
.service a h2,
.footer-title {
  color: #e8cc80 !important;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    180deg,
    #8c7a3c 0%,
    #b49c5c 20%,
    #f5e6a3 40%,
    #e8cc80 50%,
    #f5e6a3 60%,
    #b49c5c 80%,
    #8c7a3c 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
}

/* --- Hero h1 : gradient lumineux comme le p --- */
.hero h1 {
  background-image: linear-gradient(
    180deg,
    #e8cc80 0%,
    #f5e6a3 25%,
    #fff8dc 50%,
    #f5e6a3 75%,
    #e8cc80 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* --- KMG burger bouton (base) --- */
body.kmg-burger-only .kmg-burger {
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 12000;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
    background: transparent;
    border: 1px solid rgba(232, 204, 128, 0.25);
    color: #e8cc80;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

body.kmg-burger-only .kmg-burger i {
  font-size: 22px;
}

body.kmg-burger-only .sidenav,
body.kmg-burger-only .sidenav-trigger {
  display: none !important;
}

/* --- KMG burger overlay --- */
body.kmg-burger-only .kmg-burger-overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 11900;
}

body.kmg-burger-only.kmg-burger-open .kmg-burger-overlay {
  opacity: 1;
  pointer-events: auto;
}

/* --- KMG burger panel (sidebar) --- */
body.kmg-burger-only .kmg-burger-panel {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 280px;
  max-width: 85vw;
  background: rgba(20, 20, 20, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.4);
  transform: translateX(-105%);
  transition: transform 0.3s ease;
  z-index: 12000;
  padding: 64px 14px 22px;
  overflow-y: auto;
}

body.kmg-burger-only.kmg-burger-open .kmg-burger-panel {
  transform: translateX(0);
}

/* --- KMG burger close button --- */
body.kmg-burger-only .kmg-burger-close-btn {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  background: transparent !important;
  border: none;
  color: #e8cc80;
  font-size: 24px;
  cursor: pointer;
  padding: 8px 4px 16px;
  position: absolute;
  top: 10px;
  right: 10px;
  width: auto;
}

body.kmg-burger-only .kmg-burger-close-btn:hover {
  color: #fff;
}

/* --- KMG burger navigation list --- */
body.kmg-burger-only .kmg-burger-list,
body.kmg-burger-only .kmg-burger-sub {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.kmg-burger-only .kmg-burger-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body.kmg-burger-only .kmg-burger-list > li {
  border-bottom: 1px solid rgba(232, 204, 128, 0.15);
  padding: 2px 0;
}

body.kmg-burger-only .kmg-burger-list > li:last-child {
  border-bottom: none;
}

body.kmg-burger-only .kmg-burger-link,
body.kmg-burger-only .kmg-burger-acc-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color: #e8cc80;
    font-family: "Playfair Display", "Footlight MT Light", serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.3px;
    text-decoration: none;
    padding: 12px 10px;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    gap: 8px;
    flex-wrap: wrap;
    white-space: normal;
    word-break: break-word;
}

/* --- KMG burger sous-menus --- */
body.kmg-burger-only .kmg-burger-sub {
    display: none;
    margin: 4px 0 8px;
    padding: 4px 0 8px 14px;
    border-left: 1px solid rgba(232, 204, 128, 0.25);
    background: rgba(0, 0, 0, 0.12);
}

body.kmg-burger-only .kmg-burger-sub.open {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

body.kmg-burger-only .kmg-burger-sub li {
    width: 100%;
}

body.kmg-burger-only .kmg-burger-sub a {
    display: block;
    color: #d4c4a0;
    font-family: "Playfair Display", "Footlight MT Light", serif;
    font-size: 0.92rem;
    font-weight: 400;
    line-height: 1.4;
    padding: 10px 8px;
    text-decoration: none;
    border-bottom: 1px solid rgba(232, 204, 128, 0.12);
    white-space: normal;
    width: 100%;
}

body.kmg-burger-only .kmg-burger-sub li:last-child a {
  border-bottom: none;
}

body.kmg-burger-only .kmg-burger-sub a:hover {
  color: #fff;
  background: rgba(232, 204, 128, 0.15);
  padding-left: 10px;
}

/* ================================================
   RESPONSIVE INDEX.HTML - MOBILE
   ================================================ */

/* ===== BURGER : caché sur desktop (>=769px) ===== 
@media screen and (min-width: 769px) {
  .kmg-burger-only .kmg-burger {
    display: none !important;
  }
}*/

/* ===== TABLETTE INTERMEDIAIRE (481px - 768px) : services en 2 colonnes ===== */
@media screen and (min-width: 481px) and (max-width: 768px) {
  #services {
    flex-wrap: wrap !important;
    flex-direction: row !important;
  }
  .service {
    flex: 1 1 calc(50% - 15px) !important;
    max-width: calc(50% - 15px) !important;
  }
}
/* ============================================================
   SAMSUNG TABLETTES DE 769PX A 1023PX
   ============================================================ */
@media screen and (min-width: 769px) and (max-width: 992px) {

html body .logo img {
    height: clamp(180px, 38vh, 300px) !important;
    width: auto !important;
    max-width: 55vw !important;
  }
}
/* ============================================================
   SAMSUNG TABLETTES DE 993PX A 1023PX
   ============================================================ */
@media screen and (min-width: 993px) and (max-width: 1023px) {

html body .logo img {
    height: clamp(180px, 38vh, 300px) !important;
    width: auto !important;
    max-width: 55vw !important;
  }

  /* --- BURGER : visible, a gauche --- */
  .kmg-burger-only .kmg-burger {
    display: flex !important;
    position: fixed !important;
    left: 14px !important;
    right: auto !important;
    top: 14px !important;
    z-index: 12000 !important;
  }

  /* --- MASQUER navbar desktop + sous-menus + bouton contact --- */
  body.kmg-burger-only .navbar,
  body.kmg-burger-only nav.navbar,
  body.kmg-burger-only header .navbar,
  body.kmg-burger-only header nav ul.right,
  body.kmg-burger-only header nav ul.right *,
  body.kmg-burger-only .only-desktop,
  body.kmg-burger-only header .btn-contact {
    display: none !important;
  }
  body.kmg-burger-only .submenu,
  body.kmg-burger-only .has-submenu .submenu,
  body.kmg-burger-only .has-submenu.active .submenu {
    display: none !important;
  }
 }

/* ===== TABLETTE & MOBILE (max-width: 768px) ===== */
@media screen and (max-width: 768px) {

  /* --- ANTI-OVERFLOW global --- */
  /* clip ne crée pas de scroll container sur body (hidden le faisait → cassait position:fixed mobile) */
  body {
    overflow-x: clip !important;
    max-width: 100vw !important;
  }

  /* --- SECTIONS : hauteur auto, paddings réduits --- */
  section,
  section.hero,
  section:not(.hero),
  #services,
  #realisations,
  #contact,
  #avis-clients {
    min-height: auto !important;
    height: auto !important;
    overflow-x: hidden !important;
    padding-top: 30px !important;
    padding-bottom: 20px !important;
  }

  /* --- HEADER mobile : transparent --- */
  header {
    padding: 10px 15px !important;
    background: transparent !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  /* --- LOGO : gros et centré dans le Hero --- */
  body .logo {
    position: absolute !important;
    top: 18vh !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 10 !important;
    padding-bottom: 0 !important;
  }
  body .logo img {
    height: clamp(220px, 40vh, 350px) !important;
    width: auto !important;
    max-width: 90vw !important;
    max-height: none !important;
    animation: none !important;
    transform: none !important;
  }

  /* --- BURGER : visible, à GAUCHE --- */
  .kmg-burger-only .kmg-burger {
    display: block !important;
    position: fixed !important;
    left: 14px !important;
    right: auto !important;
    top: 14px !important;
    z-index: 12000 !important;
  }

  /* --- MASQUER navbar desktop + sous-menus + bouton contact --- */
  .navbar,
  nav.navbar,
  header .navbar,
  header nav ul.right,
  header nav ul.right *,
  .only-desktop,
  header .btn-contact {
    display: none !important;
  }
  .submenu,
  .has-submenu .submenu,
  .has-submenu.active .submenu {
    display: none !important;
  }

  /* --- HERO mobile : compact --- */
  .hero,
  section.hero {
    min-height: 90vh !important;
    height: auto !important;
    padding: 20px 20px 30px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: center !important;
  }
  .hero h1 {
    font-size: clamp(2.5rem, 8vw, 4rem) !important;
    padding-top: 0 !important;
    margin-top: auto !important;
    margin-bottom: 10px !important;
  }
  .hero p {
    font-size: clamp(1.5rem, 5vw, 3rem) !important;
    max-width: 95% !important;
    margin-bottom: 10px !important;
  }

  /* --- TELEPHONE DEFILANT --- */
  #telephone-defilant {
    position: fixed !important;
    top: 100px !important;
    font-size: 1.6rem !important;
    padding: 10px 16px !important;
    z-index: 999 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* --- SERVICES : COLONNE --- */
  #services {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    padding: 20px 15px !important;
    gap: 15px !important;
    align-items: center !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  #services h1 {
    font-size: 1.8rem !important;
    padding-top: 10px !important;
    margin-bottom: 10px !important;
    flex-basis: auto !important;
    width: 100% !important;
  }
  .service {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    min-height: auto !important;
  }
  .service img {
    height: 200px !important;
    width: 100% !important;
  }
  .service a h2 {
    font-size: 1.5rem !important;
  }
  .service p {
    font-size: 1.3rem !important;
    height: auto !important;
  }

  /* --- REALISATIONS CAROUSEL --- */
  #realisations {
    padding: 20px 10px !important;
    background: #333 !important;
    overflow: hidden !important;
  }
  #realisations h1 {
    font-size: 1.8rem !important;
    padding-top: 5px !important;
    margin-bottom: 10px !important;
  }
  .real-slider-wrap {
    max-width: 100% !important;
    padding: 10px 40px !important;
    overflow: hidden !important;
  }
  .real-slider {
    overflow: hidden !important;
  }

  /* --- CONTACT --- */
  #contact {
    padding: 20px 15px !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }
  #contact h1 {
    font-size: 1.8rem !important;
    padding-top: 5px !important;
    margin-bottom: 10px !important;
  }
  #contact > p {
    font-size: 0.95rem !important;
    padding: 0 10px !important;
  }
  .contact-row {
    flex-direction: column !important;
    gap: 20px !important;
    padding: 0 5px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .contact-form {
    padding: 20px 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .contact-form h5 {
    font-size: 1.2rem !important;
  }
  .contact-form input,
  .contact-form textarea {
    font-size: 16px !important;
    padding: 12px 12px 12px 34px !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }
  .contact-right {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .map-container {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 15px !important;
  }
  .map-container iframe {
    height: 250px !important;
  }
  .devicontent {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  #btn-devis {
    font-size: 16px !important;
    padding: 12px 20px !important;
  }

  /* --- AVIS CLIENTS : boutons dans le flux flex --- */
  #avis-clients {
    padding: 50px 10px !important;
    overflow: hidden !important;
  }
  #avis-clients h1 {
    font-size: 1.8rem !important;
    padding-top: 5px !important;
    margin-bottom: 10px !important;
  }
  .slider-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    overflow: hidden !important;
  }
  .slider {
    width: 70% !important;
    height: 300px !important;
    flex-shrink: 1 !important;
  }
  .item {
    width: 220px !important;
    height: 280px !important;
    padding: 15px !important;
  }
  .item .name {
    font-size: 14px !important;
  }
  .star {
    font-size: 28px !important;
  }
  #prev,
  #next {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    font-size: 1.1rem !important;
    flex-shrink: 0 !important;
  }
  #open-popupavis {
    font-size: 0.95rem !important;
    padding: 12px 25px !important;
  }

  /* --- POPUP AVIS --- */
  .avis-modal {
    width: 95% !important;
    padding: 25px 15px !important;
  }
  .avis-titre {
    font-size: 1.3rem !important;
  }

  /* --- FOOTER --- */
  footer {
    padding: 15px 10px !important;
    margin-top: 0 !important;
  }
  .footer-logo img {
    max-width: 100px !important;
  }
  .footer-title {
    font-size: 25px !important;
  }
  .footer-title-container::before,
  .footer-title-container::after {
    margin: 0 10px !important;
  }
  .footer-social a img {
    width: 34px !important;
    height: 34px !important;
    margin: 0 8px !important;
  }
  .footer-nav ul {
    flex-wrap: wrap !important;
    gap: 5px 10px !important;
  }
  .footer-nav ul li {
    margin: 0 4px !important;
  }
  .footer-nav ul li a {
    font-size: 1.3rem !important;
  }
  footer p {
    font-size: 0.95rem !important;
  }
  .footer-legal {
    font-size: 0.95rem !important;
  }

  /* --- POPUPS & COOKIES --- */
  .popup-content {
    max-width: 95% !important;
    padding: 25px 15px !important;
  }
  .cookie-popup {
    bottom: 16px !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    width: min(90vw, 300px) !important;
  }
}

/* ===== PETIT MOBILE (max-width: 480px) ===== */
@media screen and (max-width: 480px) {
  header {
    padding: 8px 12px !important;
  }
  .logo img {
    height: clamp(150px, 30vh, 250px) !important;
  }
  .hero, section.hero {
    padding: 20px 15px 30px !important;
  }
  .hero h1 {
    font-size: 1.7rem !important;
  }
  .hero p {
    font-size: 1.3rem !important;
  }
  #services {
    padding: 16px 8px !important;
    gap: 20px !important;
  }
  #services {

    font-size: 1.2rem !important;
  }

  .service {
    width: 100% !important;
    max-width: 275px !important;
    margin: 0 auto !important;
    padding: 5px !important;
    min-height: auto !important;
    display: block !important;
  }

  .service a {
    display: block !important;
  }

  .service img {
    height: 175px !important;
    padding: 0 !important;
    border-radius: 8px 8px 0 0 !important;
    display: block !important;
  }

  .service a h2 {
    font-size: 1rem !important;
    margin: 4px 0 0 !important;
    line-height: 1.2 !important;
    padding: 0 !important;
    transform: translateY(6px) !important;
  }

  .service p {
    font-size: 0.92rem !important;
    padding: 10px 6px !important;
    margin: 0 !important;
    line-height: 1.45 !important;
    height: auto !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    transform: translateY(8px) !important;
     padding-bottom: 8px !important;
   }

  #realisations {
    padding: 20px 8px !important;
  }
  #realisations h1 {
    font-size: 1.5rem !important;
  }
  #contact {
    padding: 5px 10px !important;
  }
  #contact h1 {
    font-size: 1.5rem !important;
  }
  .contact-form {
    padding: 15px 12px !important;
  }
  .contact-form input,
  .contact-form textarea {
    padding: 10px 10px 10px 34px !important;
  }
  .map-container {
    padding: 12px !important;
  }
  .map-container iframe {
    height: 220px !important;
  }
  #map-section h1 {
    font-size: 1.4rem !important;
  }
  #avis-clients h1 {
    font-size: 1.5rem !important;
  }
  .slider {
    width: 90% !important;
    height: 280px !important;
  }
  .item {
    width: 200px !important;
    height: 260px !important;
    padding: 12px !important;
  }
  .star {
    font-size: 24px !important;
  }

    .footer-social a img {
    width: 35px !important;
    height: 35px !important;
    margin: 0 3px !important;
  }

  .footer-social {
    margin: 4px 0 0 !important;
  }

  .footer-nav {
    margin: 0 !important;
    padding: 0 !important;
  }
 .footer-nav ul {
    gap: 2px 3px !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .footer-nav ul li {
    margin: 0 2px !important;
  }

  .footer-nav ul li a {
    font-size: 0.8rem !important;
    letter-spacing: -0.2px !important;
    padding: 0 2px !important;
    white-space: nowrap !important;
  }

  .footer-content p {
    font-size: 0.85rem !important;
    margin-top: -8px !important;
  }

  .footer-legal {
    font-size: 0.7rem !important;
  }
    footer {
    padding: 52px 8px 2px !important;
  }

  .footer-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    padding-left: 0 !important;
  }

  .footer-content > * {
    margin: 0 !important;
  }

  .footer-logo {
    margin-top: 0 !important;
    margin-bottom: 2px !important;
  }

  .footer-logo img {
    max-width: 100px !important;
    margin-bottom: 0 !important;
  }

  .footer-title-container {
    margin: 0 0 8px !important;
  }

  .footer-title {
    font-size: 25px !important;
    margin: 0 !important;
    line-height: 1.05 !important;
  }
}

/* ===== TRES PETIT ECRAN (max-width: 375px) ===== */
@media screen and (max-width: 375px) {
  header {
    padding: 6px 8px !important;
  }
  .logo img {
    height: clamp(130px, 28vh, 220px) !important;
  }
  .hero, section.hero {
    padding: 20px 10px 25px !important;
  }
  .hero h1 {
    font-size: 1.3rem !important;
  }
  .hero p {
    font-size: 0.9rem !important;
  }
  #services h1 {
    font-size: 1.3rem !important;
  }
  .service a h2 {
    font-size: 1rem !important;
  }
  .service img {
    height: 160px !important;
  }
  #realisations h1 {
    font-size: 1.3rem !important;
  }
  #contact h1 {
    font-size: 1.3rem !important;
  }
  .contact-form input,
  .contact-form textarea {
    padding: 10px 10px 10px 34px !important;
  }
  #avis-clients h1 {
    font-size: 1.3rem !important;
  }
  .slider {
    height: 260px !important;
  }
  .item {
    width: 180px !important;
    height: 240px !important;
    padding: 10px !important;
  }
  .star {
    font-size: 20px !important;
  }
  .footer-logo img {
    max-width: 60px !important;
  }
  .footer-title {
    font-size: 14px !important;
  }
  .footer-nav ul li a {
    font-size: 0.7rem !important;
  }
  footer p {
    font-size: 0.65rem !important;
  }

  /* --- 375px: calé sur le 320px (services + footer) --- */
  #services {
    padding: 18px 10px !important;
    gap: 14px !important;
  }

  .service {
    width: 100% !important;
    max-width: 290px !important;
    margin: 0 auto !important;
    padding: 6px !important;
    min-height: auto !important;
    display: block !important;
  }

  .service a {
    display: block !important;
  }

  .service img {
    height: 185px !important;
    padding: 0 !important;
    border-radius: 8px 8px 0 0 !important;
    display: block !important;
  }

  .service a h2 {
    margin: 4px 0 0 !important;
    line-height: 1.2 !important;
    padding: 0 !important;
    transform: translateY(6px) !important;
  }

  .service p {
    padding: 8px 6px !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    transform: translateY(8px) !important;
  }

  .footer-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    padding-left: 0 !important;
  }

  .footer-content > * {
    margin: 0 !important;
  }

  .footer-logo {
    margin-top: 2px !important;
    margin-bottom: 0 !important;
  }

  .footer-logo img {
    max-width: 75px !important;
    margin-bottom: 0 !important;
  }

  .footer-title-container {
    margin: 0 0 4px !important;
  }

  .footer-title {
    margin: 0 !important;
    line-height: 1.1 !important;
  }

  .footer-social {
    margin: 4px 0 !important;
  }

  .footer-social a img {
    width: 28px !important;
    height: 28px !important;
    margin: 0 4px !important;
  }

  .footer-nav {
    margin: 0 !important;
    padding: 0 !important;
  }

  .footer-nav ul {
    gap: 3px 4px !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .footer-nav ul li {
    margin: 0 3px !important;
  }

  .footer-nav ul li a {
    font-size: 0.68rem !important;
    white-space: nowrap !important;
    padding: 0 2px !important;
    letter-spacing: -0.2px !important;
  }

  footer p {
    margin-top: 6px !important;
  }
}

/* ===== LANDSCAPE MOBILE (max 900px + landscape) ===== */
@media screen and (max-width: 900px) and (orientation: landscape) {
  .hero, section.hero {
    min-height: auto !important;
    padding: 60px 20px 20px !important;
  }
  .hero h1 {
    font-size: 2rem !important;
    margin-bottom: 10px !important;
  }
  .hero p {
    font-size: 1.5rem !important;
    margin-bottom: 15px !important;
  }
  .logo img {
    height: clamp(100px, 50vh, 250px) !important;
  }
  #services {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }
  .service {
    flex: 1 1 calc(50% - 15px) !important;
  }
  .service img {
    height: 140px !important;
  }
}

/* ===== GLOBAL HEADER SPACING ===== */
header {
  padding-top: 60px !important;
}

@media screen and (max-width: 768px) {
  header {
    padding-top: 24px !important;
  }
}

/* ===== EXTRA PETIT MOBILE (max-width: 320px) ===== */
@media screen and (max-width: 320px) {
  header {
    padding: 4px 6px !important;
    padding-top: 18px !important;
  }

  html body .logo {
    top: 14vh !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    position: absolute !important;
    width: 100% !important;
    text-align: center !important;
  }

  html body .logo img {
    height: clamp(110px, 24vh, 190px) !important;
  }

  #telephone-defilant {
    top: 82px !important;
    font-size: 1.3rem !important;
    padding: 6px 8px !important;
    width: 96vw !important;
    white-space: normal !important;
    line-height: 1.2 !important;
  }

  .hero,
  section.hero {
    min-height: 100vh !important;
    padding: 16px 8px 22px !important;
  }

  .hero h1 {
    font-size: 1.15rem !important;
    line-height: 1.2 !important;
  }

  .hero p {
    font-size: 0.82rem !important;
    line-height: 1.4 !important;
  }

  #services {
    padding: 16px 8px !important;
    gap: 20px !important;
    padding-bottom: 8px !important;
  }

  #services h1 {
    font-size: 1.2rem !important;
  }

  .service {
    width: 100% !important;
    max-width: 275px !important;
    margin: 0 auto !important;
    padding: 5px !important;
    min-height: auto !important;
    display: block !important;
  }

  .service a {
    display: block !important;
  }

  .service img {
    height: 175px !important;
    padding: 0 !important;
    border-radius: 8px 8px 0 0 !important;
    display: block !important;
  }

  .service a h2 {
    font-size: 1rem !important;
    margin: 4px 0 0 !important;
    line-height: 1.2 !important;
    padding: 0 !important;
    transform: translateY(6px) !important;
  }

  .service p {
    font-size: 0.92rem !important;
    padding: 10px 6px !important;
    margin: 0 !important;
    line-height: 1.45 !important;
    height: auto !important;
    display: -webkit-box !important;
    line-clamp:-webkit-line-clamp 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    transform: translateY(8px) !important;
  }

  #realisations {
    padding: 25px 6px !important;
  }

  #realisations h1 {
    font-size: 1.2rem !important;
  }

  .real-slider-wrap {
    padding: 4px 28px !important;
  }

  .real-slider {
    height: 290px !important;
  }

  .real-card {
    width: 180px !important;
    height: 260px !important;
    margin-left: -90px !important;
    margin-top: -130px !important;
  }

  #real-prev,
  #real-next {
    width: 22px !important;
    height: 22px !important;
    font-size: 1rem !important;
  }

  #contact {
    padding: 3px 1px !important;
  }
  #contact > a {
    margin-top: 0 !important;
  }

  #contact h1 {
    font-size: 1.2rem !important;
  }

  #contact > p {
    font-size: 0.85rem !important;
    padding: 0 6px !important;
  }

  .contact-form {
    padding: 12px 10px !important;
  }

  .contact-form h5 {
    font-size: 1.05rem !important;
  }

  .contact-form input,
  .contact-form textarea {
    padding: 9px 9px 9px 30px !important;
    font-size: 15px !important;
  }

  .input-icon {
    font-size: 12px !important;
    left: 8px !important;
  }

  .map-container {
    padding: 10px !important;
  }
  .map-container iframe {
    height: 200px !important;
  }
  #map-section h1 {
    font-size: 1.2rem !important;
  }

  #btn-devis {
    font-size: 15px !important;
    padding: 10px 16px !important;
  }

  #avis-clients {
    padding: 28px 6px 52px !important;
  }

  #avis-clients h1 {
    font-size: 1.2rem !important;
  }

  .slider {
    width: 94% !important;
    height: 240px !important;
  }

  .item {
    width: 140px !important;
    height: 220px !important;
    padding: 8px !important;
  }

  .item .name {
    font-size: 13px !important;
  }

  .star {
    font-size: 18px !important;
  }

  .emoji {
    font-size: 18px !important;
  }

  #open-popupavis {
    font-size: 0.85rem !important;
    padding: 10px 18px !important;
  }

  #popupavis {
    width: 94vw !important;
    max-height: 45vh !important;
  }

  footer {
    padding: 10px 8px !important;
  }

  .footer-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    padding-left: 0 !important;
  }

  .footer-content > * {
    margin: 0 !important;
  }

  .footer-logo {
    margin-top: 0 !important;
    margin-bottom: 2px !important;
  }

  .footer-logo img {
    max-width: 100px !important;
    margin-bottom: 0 !important;
  }

  .footer-title-container {
    margin: 0 0 8px !important;
  }

  .footer-title {
    font-size: 25px !important;
    margin: 0 !important;
    line-height: 1.05 !important;
  }

  /*.footer-title-container::before,
  .footer-title-container::after {
    margin: 0 4px !important;
  }*/

  .footer-social a img {
    width: 35px !important;
    height: 35px !important;
    margin: 0 3px !important;
  }

  .footer-social {
    margin: 4px 0 0 !important;
  }

  .footer-nav {
    margin: 0 !important;
    padding: 0 !important;
  }

  .footer-nav ul {
    gap: 2px 3px !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .footer-nav ul li {
    margin: 0 2px !important;
  }

  .footer-nav ul li a {
    font-size: 0.8rem !important;
    letter-spacing: -0.2px !important;
    padding: 0 2px !important;
    white-space: nowrap !important;
  }

  .footer-content p {
    font-size: 0.7rem !important;
    margin-top: 4px !important;
  }

  .footer-legal {
    font-size: 0.7rem !important;
  }
}

/* ===== 321px–375px : force les styles services (si 375 ne bouge pas) ===== */
@media screen and (min-width: 321px) and (max-width: 375px) {
  body #services {
    padding: 18px 10px !important;
    gap: 14px !important;
  }

  body #services .service {
    width: 96% !important;
    max-width: 335px !important;
    margin: 0 auto !important;
    padding: 6px !important;
    flex: 0 0 auto !important;
    min-height: auto !important;
    display: block !important;
  }

  body #services .service img {
    height: 185px !important;
    width: 100% !important;
    padding: 0 !important;
    border-radius: 8px 8px 0 0 !important;
    display: block !important;
    max-height: none !important;
    object-fit: cover !important;
    background-color: #333 !important;
  }

  body #services .service a h2 {
    margin: 4px 0 0 !important;
    line-height: 1.2 !important;
    padding: 0 !important;
    transform: translateY(6px) !important;
  }

  body #services .service p {
    padding: 8px 6px !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    line-clamp:-webkit-line-clamp 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    transform: translateY(8px) !important;
  }
}

/* ===== 361px–499px : mobiles moyens (iPhone, Galaxy plié large, etc.) ===== */
@media screen and (min-width: 361px) and (max-width: 499px) {

  /* --- LOGO : réduit et centré --- */
  body .logo {
    top: 12vh !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  body .logo img {
    height: clamp(160px, 92vh, 200px) !important;
    width: auto !important;
    max-width: 85vw !important;
     margin-top: 60px;
  }

  /* --- HERO : texte sous le logo --- */
  .hero, section.hero {
    justify-content: flex-end !important;
    padding-bottom: 30px !important;
  }

      .hero .logo img {
        width: clamp(210px, 24vw, 300px) !important;
        height: auto !important;
        max-width: none !important;
        display: block !important;
        margin: 0 auto !important;
      }

  .hero h1 {
    padding: 0 !important;
    margin: 0 !important;
    margin-bottom: 10px !important;
    top: -20px !important;
  }
  .hero p {
    margin: 0 !important;
    margin-bottom: 50px !important;
    padding: 0 5px !important;
  }

  /* --- SERVICES : cards --- */
  body #services .service {
    width: 98% !important;
    max-width: 360px !important;
    margin: 0 auto !important;
  }
  body #services .service img {
    height: 300px !important;
    padding: 0 !important;
    border-radius: 12px 12px 0 0 !important;
    display: block !important;
    max-height: none !important;
    background-color: #333 !important;
  }
}

/* ===== 426px–768px : colonne unique services ===== */
@media screen and (min-width: 426px) and (max-width: 768px) {
  body .hero,
  body section.hero {
    min-height: 70vh !important;
    padding-top: 120px !important;
    justify-content: flex-end !important;
  }

  body .logo {
    position: absolute !important;
    top: 14vh !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 10 !important;
  }

  body #services {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 18px !important;
  }

  body #services .service {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    flex: 0 0 auto !important;
    min-height: auto !important;
    display: block !important;
  }

  body #services .service img {
    height: 300px !important;
    width: 100% !important;
    padding: 0 !important;
    border-radius: 8px 8px 0 0 !important;
    display: block !important;
    max-height: none !important;
    object-fit: cover !important;
    background-color: #333 !important;
  }
}

/* ============================================================
   SAMSUNG GALAXY Z FOLD 4 — PLIE (cover screen ~360px)
   ============================================================ */
@media screen and (min-width: 321px) and (max-width: 362px) {

  /* --- ANTI-OVERFLOW --- */
  /* clip ne crée pas de scroll container sur body */
  body {
    overflow-x: clip !important;
    max-width: 100vw !important;
  }

  /* --- HEADER --- */
  header {
    padding: 5px 8px !important;
    padding-top: 16px !important;
  }

  /* --- BURGER --- */
  .kmg-burger-only .kmg-burger {
    left: 10px !important;
    top: 10px !important;
  }

  /* --- LOGO : descendu, centré entre ticker et h1 --- */
  html body .logo {
    top: 22vh !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    position: absolute !important;
  }
  html body .logo img {
    height: clamp(150px, 22vh, 200px) !important;
    width: auto !important;
    max-width: 70vw !important;
  }

  /* --- TELEPHONE DEFILANT : même style que h1/p --- */
  html body #telephone-defilant {
    font-size: 1rem !important;
    padding: 30px 6px !important;
    width: 96vw !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    top: 48px !important;
    font-family: "Footlight MT Light", "Playfair Display", Arial, sans-serif !important;
    color: #e8cc80 !important;
    -webkit-text-fill-color: transparent !important;
    background-image: linear-gradient(180deg, #e8cc80 0%, #f5e6a3 25%, #fff8dc 50%, #f5e6a3 75%, #e8cc80 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
  }

  /* --- HERO : texte bien sous le logo --- */
  .hero, section.hero {
    min-height: 60vh !important;
    padding: 15px 8px 40px !important;
    justify-content: flex-end !important;
  }
  .hero h1 {
    font-size: 1.2rem !important;
    line-height: 1.25 !important;
    padding: 0 !important;
    padding-top: 20px !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
  }
  .hero p {
    font-size: 1rem !important;
    line-height: 1.4 !important;
    max-width: 95% !important;
    margin: 0 !important;
    margin-bottom: 10px !important;
    padding: 0 5px !important;
  }

  /* --- SERVICES --- */
  #services {
    padding: 15px 6px !important;
    gap: 14px !important;
  }
  #services h1 {
    font-size: 1.5rem !important;
    margin-bottom: 8px !important;
    padding-top: 5px !important;
  }
  .service {
    width: 100% !important;
    max-width: 280px !important;
    margin: 0 auto !important;
    padding: 4px !important;
    min-height: auto !important;
    display: block !important;
  }
  .service img {
    height: 170px !important;
    width: 100% !important;
    padding: 0 !important;
    border-radius: 8px 8px 0 0 !important;
    object-fit: cover !important;
  }
  .service a h2 {
    font-size: 1rem !important;
    margin: 3px 0 0 !important;
    line-height: 1.2 !important;
  }
  .service p {
    font-size: 1rem !important;
    padding: 6px 5px !important;
    line-height: 1.4 !important;
    height: auto !important;
  }

  /* --- REALISATIONS CAROUSEL --- */
  #realisations {
    padding: 15px 6px !important;
  }
  #realisations h1 {
    font-size: 1.5rem !important;
    margin-bottom: 8px !important;
  }
  .real-slider-wrap {
    padding: 5px 30px !important;
  }
  .real-slider {
    height: 300px !important;
  }
  .real-card {
    width: 190px !important;
    height: 270px !important;
    margin-left: -95px !important;
    margin-top: -135px !important;
  }
  #real-prev,
  #real-next {
    width: 24px !important;
    height: 24px !important;
    font-size: 1rem !important;
  }

  /* --- CONTACT --- */
  #contact {
    padding: 2px 6px !important;
  }
  #contact > a {
    margin-top: 0 !important;
  }
  #contact h1 {
    font-size: 1.5rem !important;
  }
  #contact > p {
    font-size: 0.8rem !important;
    padding: 0 5px !important;
  }
  .contact-row {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 0 3px !important;
  }
  .contact-form {
    padding: 10px 8px !important;
  }
  .contact-form h5 {
    font-size: 1rem !important;
  }
  .contact-form input,
  .contact-form textarea {
    padding: 8px 8px 8px 28px !important;
    font-size: 14px !important;
  }
  .input-icon {
    font-size: 11px !important;
    left: 7px !important;
  }
  .contact-right {
    gap: 12px !important;
  }
  .map-container {
    padding: 8px !important;
  }
  .map-container iframe {
    height: 180px !important;
  }
  #map-section h1 {
    font-size: 1.1rem !important;
    margin-bottom: 8px !important;
  }
  .devicontent {
    padding: 10px 8px !important;
  }
  .devicontent h5 {
    font-size: 1rem !important;
  }
  #btn-devis {
    font-size: 14px !important;
    padding: 8px 14px !important;
  }

  /* --- AVIS CLIENTS --- */
  #avis-clients {
    padding: 15px 5px 45px !important;
  }
  #avis-clients h1 {
    font-size: 1.5rem !important;
  }
  .slider {
    width: 95% !important;
    height: 260px !important;
  }
  .item {
    width: 175px !important;
    max-width: 175px !important;
    height: 235px !important;
    padding: 8px !important;
  }
  .item .name {
    font-size: 12px !important;
  }
  .item p {
    font-size: 0.7rem !important;
  }
  .star {
    font-size: 17px !important;
  }
  .emoji {
    font-size: 17px !important;
  }
  #open-popupavis {
    font-size: 0.8rem !important;
    padding: 8px 14px !important;
  }

  /* --- FOOTER --- */
  footer {
    padding: 8px 6px !important;
  }
  .footer-logo img {
    max-width: 100px !important;
  }
  .footer-title {
    font-size: 20px !important;
  }
  .footer-social a img {
    width: 34px !important;
    height: 34px !important;
    margin:  3px !important;
  }
  .footer-nav ul {
    flex-wrap: nowrap !important;
    gap: 1px 2px !important;
  }
  .footer-nav ul li a {
    font-size: 0.95rem !important;
    letter-spacing: -0.3px !important;
    white-space: nowrap !important;
    
  }
  .footer-content p,
  .footer-legal {
    font-size: 0.65rem !important;
  }
}

/* ============================================================
   SAMSUNG GALAXY Z FOLD 4 — DEPLIE (inner screen ~500-768px)
   ============================================================ */
@media screen and (min-width: 500px) and (max-width: 768px) {

  /* --- LOGO : centré entre ticker et h1 --- */
  html body .logo {
    top: 14vh !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  html body .logo img {
    height: clamp(180px, 28vh, 260px) !important;
    width: auto !important;
    max-width: 55vw !important;
  }

  /* --- TICKER : police augmentee --- */
  html body #telephone-defilant {
    font-size: 1.5rem !important;
  }

  /* --- HERO : texte bien sous le logo --- */
  html body .hero,
  html body section.hero {
    min-height: 65vh !important;
    justify-content: flex-end !important;
  }
  html body .hero h1 {
    font-size: 1.6rem !important;
    margin-top: 0 !important;
  }
  html body .hero p {
    font-size: 1.1rem !important;
    max-width: 90% !important;
  }

  /* --- SERVICES : colonne unique, cartes larges --- */
  html body #services {
    display: flex !important;
    flex-direction: column !important;
    padding: 25px 12px !important;
    gap: 18px !important;
    align-items: stretch !important;
  }
  html body #services h1 {
    font-size: 1.5rem !important;
    width: 100% !important;
  }
  html body #services .service {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    min-height: auto !important;
    display: block !important;
  }
  html body #services .service img {
    height: 500px !important;
    max-height: none !important;
    width: 100% !important;
    object-fit: cover !important;
    padding: 0 !important;
    border-radius: 8px 8px 0 0 !important;
  }
  html body #services .service a h2 {
    font-size: 1.3rem !important;
  }
  html body #services .service p {
    font-size: 1.1rem !important;
    height: auto !important;
    padding: 10px !important;
  }

  /* --- REALISATIONS CAROUSEL --- */
  #realisations {
    padding: 25px 10px !important;
  }
  #realisations h1 {
    font-size: 1.5rem !important;
  }
  .real-slider {
    height: 380px !important;
  }
  .real-card {
    width: 250px !important;
    height: 340px !important;
    margin-left: -125px !important;
    margin-top: -170px !important;
  }
  #real-prev,
  #real-next {
    width: 32px !important;
    height: 32px !important;
    font-size: 1.2rem !important;
  }

  /* --- CONTACT --- */
  #contact {
    padding: 2px 12px !important;
  }
  #contact h1 {
    font-size: 1.5rem !important;
  }
  #contact > p {
    font-size: 0.95rem !important;
  }
  .contact-row {
    flex-direction: column !important;
    gap: 16px !important;
  }
  .contact-form {
    padding: 18px !important;
  }
  .contact-form h5 {
    font-size: 1.2rem !important;
  }
  .contact-right {
    gap: 16px !important;
  }
  .map-container {
    padding: 15px !important;
  }
  .map-container iframe {
    height: 250px !important;
  }
  .devicontent {
    padding: 18px !important;
  }
  .devicontent h5 {
    font-size: 1.2rem !important;
  }
  #btn-devis {
    font-size: 16px !important;
    padding: 12px 22px !important;
  }

  /* --- AVIS CLIENTS --- */
  #avis-clients {
    padding: 25px 10px 50px !important;
  }
  #avis-clients h1 {
    font-size: 1.5rem !important;
  }
  .slider {
    height: 320px !important;
  }
  .item {
    width: 200px !important;
    max-width: 200px !important;
    height: 270px !important;
    padding: 12px !important;
  }
  .item .name {
    font-size: 0.9rem !important;
  }
  .item p {
    font-size: 0.8rem !important;
  }
  .star {
    font-size: 22px !important;
  }

  /* --- FOOTER --- */
  .footer-logo img {
    max-width: 110px !important;
  }
  .footer-title {
    font-size: 26px !important;
  }
  .footer-nav ul li a {
    font-size: 0.75rem !important;
  }
}

/* ============================================================
   GALAXY Z FOLD 4 — PAYSAGE PLIE (800×360 → hauteur tres courte)
   ============================================================ */
@media screen and (max-height: 400px) and (orientation: landscape) {
  /* --- LOGO : grand, centre de la page --- */
  html body .logo {
    top: 28vh !important;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-top: 0 !important;
  }
  html body .logo img {
    height: clamp(100px, 36vh, 160px) !important;
    max-width: 40vw !important;
    width: auto !important;
  }

  /* --- TICKER : descendu, police augmentee --- */
  html body #telephone-defilant {
    top: 58px !important;
    font-size: 1rem !important;
    padding: 4px 10px !important;
  }

  /* --- HERO : texte remonte sous le logo --- */
  html body .hero,
  html body section.hero {
    min-height: 100vh !important;
    padding: 10px 20px 28vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: center !important;
  }
  html body .hero h1 {
    font-size: 1.3rem !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 2px !important;
    line-height: 1.1 !important;
  }
  html body .hero p {
    font-size: 0.95rem !important;
    margin-bottom: 0 !important;
    line-height: 1.6 !important;
    max-width: 90% !important;
  }

  /* --- REALISATIONS : boutons prev/next rapproches --- */
  #real-prev {
    left: 9px !important;
  }
  #real-next {
    right: 9px !important;
  }
  #real-prev,
  #real-next {
    width: 30px !important;
    height: 30px !important;
    font-size: 1rem !important;
  }

  /* --- HEADER : compact --- */
  header {
    padding: 4px 10px !important;
    padding-top: 10px !important;
    min-height: auto !important;
  }
html body #services .service img {
    height: 500px !important;
    max-height: none !important;
    width: 100% !important;
    object-fit: cover !important;
    padding: 0 !important;
    border-radius: 8px 8px 0 0 !important;
  }

}

/* ============================================================
   GALAXY Z FOLD 4 — PAYSAGE DEPLIE (904×585 → hauteur moyenne)
   ============================================================ */
@media screen and (min-height: 401px) and (max-height: 620px) and (orientation: landscape) {
  /* --- LOGO : grand, centre de la page --- */
  html body .logo {
    top: 25vh !important;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-top: -40px !important;
  }
  html body .logo img {
    height: clamp(140px, 48vh, 240px) !important;
    max-width: 48vw !important;
    width: auto !important;
    
  }

  /* --- TICKER : descendu, police augmentee --- */
  html body #telephone-defilant {
    top: 102px !important;
    font-size: 1.3rem !important;
    padding: 5px 12px !important;
  }

  /* --- HERO : texte remonte sous le logo --- */
  html body .hero,
  html body section.hero {
    min-height: 100vh !important;
    padding: 15px 25px 22vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: center !important;
  }
  html body .hero h1 {
    font-size: 1.8rem !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 2px !important;
    line-height: 1.1 !important;
    top: 60px !important;
    
  }
  html body .hero p {
    font-size: 1.3rem !important;
    margin-bottom: -10px !important;
    line-height: 1.3 !important;
    max-width: 95% !important;
    top: 60px !important;
  }

  /* --- REALISATIONS : boutons prev/next rapproches --- */
  #real-prev {
    left: 10px !important;
  }
  #real-next {
    right: 10px !important;
  }
  #real-prev,
  #real-next {
    width: 36px !important;
    height: 36px !important;
    font-size: 1.2rem !important;
  }

  /* --- HEADER : compact --- */
  header {
    padding: 6px 12px !important;
    padding-top: 12px !important;
    min-height: auto !important;
  }
}

   /* ====== BOUTON BACK TO TOP ====== */
.kmg-backtotop {
  position: fixed;
  right: clamp(12px, 2vw, 24px);
  bottom: calc(clamp(12px, 2vw, 24px) + env(safe-area-inset-bottom));
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
  background: transparent !important;
  border: 2px solid #C9B47A !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.3);
  cursor: pointer;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(.98);
  transition: opacity .25s ease, transform .25s ease, box-shadow .25s ease;
  overflow: hidden;
}

/* ===== INDEX - PAYSAGE S23 ULTRA + FOLD 4 DEPLIE ===== */
@media screen and (orientation: landscape) and (min-width: 800px) and (max-width: 980px) and (max-height: 620px) {
  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) .hero,
  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) section.hero {
    min-height: 100vh !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding-top: 0 !important;
  }

  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) .logo {
    position: fixed !important;
    left: 50% !important;
    top: 37% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    z-index: 12 !important;
  }

  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) .logo img {
    width: clamp(170px, 18vw, 240px) !important;
    height: auto !important;
  }

  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) .hero h1 {
    margin-top: 60vh !important;
    margin-bottom: 26px !important;
    font-size: clamp(1.55rem, 2.6vw, 2.2rem) !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }

  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) .hero p {
    margin-top: 0 !important;
    font-size: clamp(1rem, 1.8vw, 1.3rem) !important;
    line-height: 1.45 !important;
    max-width: 78ch !important;
    text-align: center !important;
  }

  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) #telephone-defilant {
    font-size: clamp(1.15rem, 2vw, 1.55rem) !important;
    line-height: 1.2 !important;
    top: 42px !important;
  }
}

/* ===== INDEX ONLY - FORCE FINAL (S23 Ultra + Fold4 déplié) ===== */
@media screen and (orientation: landscape) and (min-width: 800px) and (max-width: 980px) and (max-height: 620px) {
  body.kmg-burger-only header .logo {
    position: fixed !important;
    top: 37% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    z-index: 30 !important;
  }

  body.kmg-burger-only header .logo img {
    width: clamp(185px, 20vw, 260px) !important;
    height: auto !important;
    max-width: none !important;
    top: -20px !important;
  }

  body.kmg-burger-only #top.hero {
    min-height: 100vh !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding-top: 0 !important;
  }

  body.kmg-burger-only #top.hero h1 {
    margin-top: 60vh !important;
    margin-bottom: 26px !important;
    font-size: clamp(1.6rem, 2.8vw, 2.3rem) !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }

  body.kmg-burger-only #top.hero p {
    margin-top: -10px !important;
    margin-bottom: -10px !important;
    font-size: clamp(1rem, 2vw, 1.35rem) !important;
    line-height: 1.45 !important;
    max-width: 98ch !important;
    text-align: center !important;
  }

  body.kmg-burger-only #telephone-defilant {
    top: 6px !important;
    font-size: clamp(1.2rem, 2vw, 1.7rem) !important;
    line-height: 1.2 !important;
  }
}

/* Ancien recalage intermediaire conserve hors breakpoint laptop */
@media (min-width: 1367px) and (max-width: 1439px) {
  body.kmg-burger-only header .logo,
  body.kmg-burger-only header .logo.hidden {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: absolute !important;
    top: 220px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 20 !important;
  }
}
/* Override direct INDEX - paysage S23 Ultra + Fold4 déplié */
    @media screen and (orientation: landscape) and (min-width: 800px) and (max-width: 980px) and (max-height: 620px) {
      header .logo {
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        top: 30px !important;
        transform: translateX(-50%) !important;
        width: max-content !important;
        display: flex !important;
        justify-content: center !important;
        margin: 0 !important;
        z-index: 60 !important;
      }

      header .logo a {
        display: block !important;
      }

      header .logo img {
        width: clamp(210px, 24vw, 300px) !important;
        height: auto !important;
        max-width: none !important;
        display: block !important;
        margin: 0 auto !important;
      }

      #top.hero {
        min-height: 100vh !important;
        height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        padding-top: 0 !important;
      }

      #top.hero h1 {
        margin-top: 60vh !important;
        margin-bottom: 52px !important;
        font-size: clamp(1.6rem, 2.8vw, 2.3rem) !important;
        line-height: 1.15 !important;
        text-align: center !important;
      }

      #top.hero p {
        margin-top: -16px !important;
        margin-bottom: 20px !important;
        font-size: clamp(1rem, 2vw, 1.35rem) !important;
        line-height: 1.45 !important;
        max-width: 98ch !important;
        text-align: center !important;
      }

      #telephone-defilant {
        top: 6px !important;
        font-size: clamp(1.4rem, .4vw, 2.1rem) !important;
        line-height: 1.2 !important;
        padding: 8px 14px !important;
      }
    }

/* ===== FIX FINAL: 320px centre + S23 Ultra paysage logo force ===== */

@media screen and (max-width: 320px) {
  html,
  body,
  body.kmg-burger-only header {
    transform: none !important;
  }

  html body.kmg-burger-only header .logo,
  html body.kmg-burger-only header .logo.hidden {
    position: fixed !important;
    top: 146px !important;
    left: 50% !important;
    right: auto !important;
    transform: translate3d(-50%, 0, 0) !important;
    width: max-content !important;
    display: flex !important;
    justify-content: center !important;
    z-index: 2147483646 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  html body.kmg-burger-only header .logo img {
    display: block !important;
    height: clamp(140px, 28vh, 210px) !important;
    width: auto !important;
    max-width: 92vw !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  html body.kmg-burger-only #telephone-defilant {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(96vw, 306px) !important;
    text-align: center !important;
    top: 106px !important;
  }

  html body.kmg-burger-only #top.hero,
  html body.kmg-burger-only section#top.hero {
    min-height: 100vh !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 184px 12px 26px !important;
    text-align: center !important;
  }

  html body.kmg-burger-only #top.hero h1,
  html body.kmg-burger-only #top.hero p {
    width: min(92vw, 300px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    transform: translateY(-52px) !important;
  }

  html body.kmg-burger-only #top.hero h1 {
    font-size: 1.3rem !important;
    line-height: 1.2 !important;
  }

  html body.kmg-burger-only #top.hero p {
    font-size: 0.95rem !important;
    line-height: 1.35 !important;
  }
}

@media screen and (orientation: landscape) and (min-width: 700px) and (max-width: 850px) and (max-height: 360px) {
  body.kmg-burger-only header .logo,
  body.kmg-burger-only header .logo.hidden {
    position: fixed !important;
    top: 48px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    inset: 48px auto auto 50% !important;
    width: max-content !important;
    display: flex !important;
    justify-content: center !important;
    z-index: 2147483646 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.kmg-burger-only header .logo img {
    display: block !important;
    width: clamp(132px, 20vw, 164px) !important;
    height: auto !important;
    max-width: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  body.kmg-burger-only #telephone-defilant {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(96vw, 710px) !important;
    text-align: center !important;
    top: 34px !important;
  }

  body.kmg-burger-only #top.hero {
    min-height: 100vh !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 124px 12px 14px !important;
    text-align: center !important;
  }

  body.kmg-burger-only #top.hero h1 {
    margin-top: 20px !important;
    margin-bottom: 6px !important;
    font-size: 1.28rem !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }

  body.kmg-burger-only #top.hero p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-size: 0.96rem !important;
    line-height: 1.32 !important;
    max-width: min(92vw, 560px) !important;
    text-align: center !important;
  }
}

@media screen and (orientation: landscape) and (min-width: 800px) and (max-width: 980px) and (max-height: 620px) {
  body.kmg-burger-only header .logo,
  body.kmg-burger-only header .logo.hidden {
    position: fixed !important;
    top: 50px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: max-content !important;
    display: flex !important;
    justify-content: center !important;
    z-index: 2147483646 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.kmg-burger-only header .logo a {
    display: block !important;
  }

  body.kmg-burger-only header .logo img {
    display: block !important;
    width: clamp(170px, 20vw, 240px) !important;
    height: auto !important;
    max-width: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

@media screen and (orientation: portrait) and (min-width: 390px) and (max-width: 430px) and (min-height: 700px) {
  body.kmg-burger-only header .logo,
  body.kmg-burger-only header .logo.hidden {
    position: fixed !important;
    top: 156px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: max-content !important;
    display: flex !important;
    justify-content: center !important;
    z-index: 2147483646 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.kmg-burger-only header .logo img {
    display: block !important;
    width: clamp(220px, 62vw, 300px) !important;
    height: auto !important;
    max-width: none !important;
    margin-top: 15px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
}

/* Burger ouvert: toujours au-dessus du logo force */
body.kmg-burger-only.kmg-burger-open .kmg-burger-overlay {
  z-index: 2147483646 !important;
}

body.kmg-burger-only.kmg-burger-open .kmg-burger-panel {
  z-index: 2147483647 !important;
}

body.kmg-burger-only.kmg-burger-open .kmg-burger-close-btn {
  position: relative !important;
  z-index: 2147483647 !important;
}


/* Cookie popup - styles autonomes, zéro héritage hero */
#cookie-popup .cookie-text {
  font-size: 13px;
  line-height: 1.4;
  color: #e0d5c0;
  margin: 0 0 10px;
  text-align: center;
}

/* Home services cards: desktop alignment + compact card height */
@media (min-width: 1024px) {
  body:not(.service-page) #services {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(220px, 1fr)) !important;
    gap: 28px !important;
    align-items: start !important;
  }

  body:not(.service-page) #services > #services-title {
    grid-column: 1 / -1 !important;
    margin-bottom: 8px !important;
  }

  body:not(.service-page) #services .service {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body:not(.service-page) #services .service > a {
    display: block !important;
  }

  body:not(.service-page) #services .service img {
    width: 100% !important;
    height: 200px !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    background-color: #2f2f2f !important;
  }

  body:not(.service-page) #services .service a h2 {
    margin: 8px 0 2px !important;
    line-height: 1.2 !important;
  }

  body:not(.service-page) #services .service p {
    margin: 0 !important;
    padding: 0 12px 8px !important;
    line-height: 1.3 !important;
    font-size: 0.98rem !important;
    height: auto !important;
    min-height: 0 !important;
    transform: none !important;
    overflow: visible !important;
    display: block !important;
    flex-grow: 0 !important;
  }
}

/* Force un vrai bouton flottant ancré au viewport */
body .kmg-backtotop {
  position: fixed !important;
  right: clamp(12px, 2vw, 24px) !important;
  bottom: calc(clamp(12px, 2vw, 24px) + env(safe-area-inset-bottom)) !important;
  z-index: 2147483646 !important;
}

/* Home only: phone ticker anchored to header (not viewport-floating) */
body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) #telephone-defilant {
  position: absolute !important;
  /*top: calc(100% + 8px) !important;*/
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: min(96vw, 720px) !important;
  margin: 0 !important;
  text-align: center !important;
  z-index: 20 !important;
}

/* Fold cover / very small phones: prevent floating logo+ticker all along the page */
@media screen and (max-width: 362px) {
  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) header .logo {
    position: absolute !important;
    top: 22vh !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    width: max-content !important;
    z-index: 20 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) header .logo.hidden {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) #telephone-defilant {
    width: min(94vw, 320px) !important;
    font-size: 1rem !important;
    white-space: normal !important;
    line-height: 1.2 !important;
  }
}

/* Safety lock: outside Hero on home, force-hide navbar/logo/ticker */
body.kmg-burger-only.kmg-out-hero:not(.service-page):not(.realisations-page):not(.devis-page) .navbar,
body.kmg-burger-only.kmg-out-hero:not(.service-page):not(.realisations-page):not(.devis-page) header .logo,
body.kmg-burger-only.kmg-out-hero:not(.service-page):not(.realisations-page):not(.devis-page) #telephone-defilant {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  
}

/* Services cards: no underline on links, premium hover effect on H2 */
body:not(.service-page) #services .service > a,
body:not(.service-page) #services .service > a:hover,
body:not(.service-page) #services .service > a:focus-visible {
  text-decoration: none !important;
}

body:not(.service-page) #services .service > a h2 {
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
  transition: color 0.25s ease, text-shadow 0.25s ease, transform 0.25s ease, letter-spacing 0.25s ease;
}

body:not(.service-page) #services .service > a h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(232, 204, 128, 0), rgba(232, 204, 128, 0.95), rgba(232, 204, 128, 0));
  transform: scaleX(0.35);
  transform-origin: center;
  opacity: 0.45;
  transition: transform 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease;
}

body:not(.service-page) #services .service > a:hover h2,
body:not(.service-page) #services .service > a:focus-visible h2 {
  color: #f5e6a3;
  letter-spacing: 0.03em;
  transform: translateY(-1px);
  text-shadow: 0 0 14px rgba(232, 204, 128, 0.35);
}

body:not(.service-page) #services .service > a:hover h2::after,
body:not(.service-page) #services .service > a:focus-visible h2::after {
  transform: scaleX(1);
  opacity: 1;
  box-shadow: 0 0 12px rgba(232, 204, 128, 0.45);
}

/* MES SERVICES (H1 link): keep plain title, no decoration on any state */
#services-title a,
#services-title a:hover,
#services-title a:focus,
#services-title a:focus-visible,
#services-title a:active {
  text-decoration: none !important;
}

/* ==========================================
   Zone d'intervention + engagements (home)
   Palette KMG: noir/anthracite + or existant
   ========================================== */
.kmg-zone-section {
  background-color: #333;
  padding: 40px 20px 30px;
}

.kmg-zone-intervention {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 22px;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(340px, 1fr);
  align-items: stretch;
  gap: 20px;
  border-radius: 14px;
  background: #333;
  border: 1px solid rgba(212, 175, 55, 0.25);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3), 0 0 16px rgba(212, 175, 55, 0.08);
}

.kmg-zone-intervention__map,
.kmg-engagements {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.kmg-zone-intervention h2 {
  margin: 0 0 12px;
  font-size: 1.6rem;
  font-family: "Footlight MT Light", "Playfair Display", Arial, sans-serif !important;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(180deg, #8c7a3c 0%, #b49c5c 20%, #f5e6a3 40%, #e8cc80 50%, #f5e6a3 60%, #b49c5c 80%, #8c7a3c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-align: center;
}

.kmg-zone-map-frame {
  flex: 1;
  width: 100%;
  min-height: 440px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.28);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28), 0 0 12px rgba(212, 175, 55, 0.08);
}

.kmg-zone-map-frame iframe {
  width: 100%;
  height: 100%;
  min-height: 440px;
  display: block;
}

.kmg-engagements {
  background: #3a3a3a;
  border-radius: 12px;
  border: 1px solid rgba(212, 175, 55, 0.22);
  padding: 16px 16px 14px;
}

.kmg-engagements__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  flex: 1;
  gap: 10px;
}

.kmg-engagement {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 10px;
  background: rgba(51, 51, 51, 0.9);
  border: 1px solid rgba(212, 175, 55, 0.14);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.kmg-engagement:hover {
  transform: translateY(-2px);
  border-color: rgba(232, 204, 128, 0.45);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25), 0 0 12px rgba(232, 204, 128, 0.12);
}

/* Animation d'apparition premium (droite -> gauche) */
.kmg-engagements.kmg-animate-ready .kmg-engagement {
  will-change: transform, opacity, filter;
  transition:
    transform var(--kmg-duration, 620ms) cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity var(--kmg-duration, 620ms) ease,
    filter var(--kmg-duration, 620ms) ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.kmg-engagements.kmg-animate-ready .kmg-engagement:not(.kmg-revealed) {
  opacity: 0;
  transform: translate3d(96px, 0, 0) scale(0.96);
  filter: blur(3px);
}

.kmg-engagements.kmg-animate-ready .kmg-engagement.kmg-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: none;
  transition-delay: 0ms;
}

@media (prefers-reduced-motion: reduce) {
  .kmg-engagements.kmg-animate-ready .kmg-engagement {
    transition: none !important;
    transition-delay: 0ms !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}

.kmg-engagement__icon {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(212, 175, 55, 0.32);
  background: rgba(0, 0, 0, 0.2);
  color: #e8cc80;
}

.kmg-engagement__icon i {
  font-size: 14px;
  color: #fff8dc;
}

.kmg-engagement__content {
  text-align: left;
}

.kmg-engagement__content h3 {
  margin: 0 0 2px;
  font-size: 1.02rem;
  font-family: "Footlight MT Light", "Playfair Display", Arial, sans-serif !important;
  font-weight: 600;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(180deg, #8c7a3c 0%, #b49c5c 20%, #f5e6a3 40%, #e8cc80 50%, #f5e6a3 60%, #b49c5c 80%, #8c7a3c 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.kmg-engagement__content p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.45;
  color: #fff8dc;
}

@media (max-width: 992px) {
  .kmg-zone-section {
    padding: 28px 16px 24px;
  }

  .kmg-zone-intervention {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .kmg-zone-map-frame,
  .kmg-zone-map-frame iframe {
    min-height: 360px;
  }
}

@media (max-width: 768px) {
  .kmg-zone-section {
    padding: 20px 10px 18px;
  }

  .kmg-zone-intervention {
    padding: 14px;
    gap: 14px;
  }

  .kmg-zone-intervention h2 {
    font-size: 1.3rem;
    margin-bottom: 10px;
    text-align: center;
  }

  .kmg-engagement {
    padding: 9px;
    gap: 10px;
  }

  .kmg-engagement__icon {
    width: 30px;
    height: 30px;
    min-width: 30px;
  }

  .kmg-engagement__icon i {
    font-size: 13px;
  }

  .kmg-engagement__content h3 {
    font-size: 0.96rem;
  }

  .kmg-engagement__content p {
    font-size: 0.86rem;
  }
}

/* Avis dynamiques MySQL */
#avis-layer[aria-hidden="true"] {
  display: none;
}

#avis-layer[aria-hidden="false"] {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 1999;
}

#avis-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
}

#contact .hp-field,
#avis-clients .hp-field {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  pointer-events: none !important;
}

#avis-clients .kmg-honeypot-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

#avis-clients .item .review-meta {
  margin-top: 6px;
  font-size: 0.85rem;
  opacity: 0.85;
}

#avis-clients .item .review-reply {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(232, 204, 128, 0.25);
  font-size: 0.85rem;
  color: rgba(232, 204, 128, 0.95);
}

#avis-numero-devis {
  width: 100%;
  background: #2a2a2a;
  color: #f5f5f5;
  border: 1px solid rgba(255, 223, 107, 0.35);
  border-radius: 10px;
  padding: 10px 12px;
  outline: 0;
  transition: box-shadow .2s ease, border-color .2s ease;
  font-size: 1rem;
}

#avis-numero-devis:focus {
  border-color: #e8cc80;
  box-shadow: 0 0 0 3px rgba(232, 204, 128, .15);
}

/* ======================================================
   POPUP AVIS - REFONTE PREMIUM (override final)
   ====================================================== */
#avis-clients #avis-layer[aria-hidden="true"] {
  display: none !important;
}

#avis-clients #avis-layer[aria-hidden="false"] {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3.5vh, 30px);
}

#avis-clients #avis-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.78);
  backdrop-filter: blur(2px);
}

#avis-clients #popupavis {
  position: relative !important;
  inset: auto !important;
  margin: 0 !important;
  display: block !important;
  width: min(95vw, 760px);
  max-height: min(78vh, 620px);
  max-height: min(78dvh, 620px);
  padding: 0 !important;
  border-radius: 18px;
  border: 1px solid rgba(232, 204, 128, 0.28);
  background:
    radial-gradient(circle at top right, rgba(232, 204, 128, 0.08), transparent 45%),
    linear-gradient(180deg, #262626 0%, #1a1a1a 100%);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.52),
    0 0 0 1px rgba(232, 204, 128, 0.12);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(16px) scale(0.985);
  transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s ease;
  z-index: 12001;
}

#avis-clients #popupavis.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

#avis-clients #popupavis .avis-modal__content {
  position: relative;
  width: 100%;
  max-height: min(78vh, 620px);
  max-height: min(78dvh, 620px);
  overflow: auto;
  padding: 14px 18px 16px;
  color: #e8cc80;
  text-align: left;
  scrollbar-width: thin;
  scrollbar-color: rgba(232, 204, 128, 0.35) transparent;
}

#avis-clients #popupavis .avis-modal__content::-webkit-scrollbar {
  width: 7px;
}

#avis-clients #popupavis .avis-modal__content::-webkit-scrollbar-thumb {
  background: rgba(232, 204, 128, 0.34);
  border-radius: 10px;
}

#avis-clients #popupavis .avis-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid rgba(232, 204, 128, 0.34);
  background: rgba(30, 30, 30, 0.7);
  color: #e8cc80;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

#avis-clients #popupavis .avis-close:hover {
  transform: scale(1.05);
  border-color: rgba(245, 230, 163, 0.75);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
}

#avis-clients #popupavis .avis-close:focus-visible {
  outline: 2px solid rgba(232, 204, 128, 0.7);
  outline-offset: 2px;
}

#avis-clients .avis-modal__header {
  padding: 0 34px 2px 0;
  margin-bottom: 8px;
  text-align: center;
}

#avis-clients .avis-titre {
  margin: 0;
  font-size: clamp(1.08rem, 0.98rem + 0.6vw, 1.42rem);
  line-height: 1.15;
  text-align: center;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    180deg,
    #8c7a3c 0%,
    #b49c5c 20%,
    #f5e6a3 40%,
    #e8cc80 50%,
    #f5e6a3 60%,
    #b49c5c 80%,
    #8c7a3c 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
}

#avis-clients .avis-subtitle {
  display: none !important;
}

#avis-clients #avis-form {
  margin-top: 0 !important;
  display: grid;
  gap: 10px;
}

#avis-clients #avis-form .avis-field {
  margin: 0 !important;
}

#avis-clients #avis-form label,
#avis-clients #avis-form .avis-label {
  display: block;
  margin-bottom: 5px;
  color: #e8cc80;
  font-size: 0.92rem !important;
  font-weight: 700;
  letter-spacing: 0.01em;
}

#avis-clients #avis-form input[type="text"],
#avis-clients #avis-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(232, 204, 128, 0.3);
  border-radius: 11px;
  background: rgba(20, 20, 20, 0.82);
  color: #f7f2e2;
  font-size: 0.95rem !important;
  line-height: 1.45;
  padding: 9px 11px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

#avis-clients #avis-form input[type="text"]::placeholder,
#avis-clients #avis-form textarea::placeholder {
  color: rgba(232, 204, 128, 0.48);
}

#avis-clients #avis-form input[type="text"]:focus,
#avis-clients #avis-form textarea:focus {
  border-color: rgba(245, 230, 163, 0.92);
  box-shadow: 0 0 0 3px rgba(232, 204, 128, 0.16);
  background: rgba(22, 22, 22, 0.95);
  outline: none;
}

#avis-clients #avis-message {
  min-height: 92px;
  max-height: 128px;
  resize: vertical;
}

#avis-clients .avis-help {
  margin: 4px 0 0;
  font-size: 0.8rem;
  color: rgba(232, 204, 128, 0.76);
  line-height: 1.35;
}

#avis-clients .avis-counter-wrap {
  margin-top: 4px;
  text-align: right;
}

#avis-clients .avis-char-count {
  display: inline-block;
  font-size: 0.8rem;
  color: rgba(232, 204, 128, 0.66);
}

#avis-clients .avis-char-count.is-near-limit {
  color: rgba(245, 230, 163, 0.92);
}

#avis-clients .avis-char-count.is-limit {
  color: #ffd58c;
}

#avis-clients #avis-stars {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
}

#avis-clients #avis-stars .form-star {
  font-size: 1.72rem !important;
  line-height: 1;
  color: rgba(232, 204, 128, 0.3);
  cursor: pointer;
  user-select: none;
  transition: transform 0.18s ease, color 0.18s ease, text-shadow 0.18s ease;
}

#avis-clients #avis-stars .form-star:hover {
  transform: translateY(-1px) scale(1.04);
  color: #f5e6a3;
}

#avis-clients #avis-stars .form-star.active {
  color: #e8cc80;
  text-shadow: 0 0 10px rgba(232, 204, 128, 0.25);
}

#avis-clients #avis-stars .form-star:focus-visible {
  outline: 2px solid rgba(232, 204, 128, 0.72);
  outline-offset: 3px;
  border-radius: 6px;
}

#avis-clients .avis-submit,
#avis-clients #avis-form button[type="submit"] {
  width: 100%;
  min-height: 42px;
  margin-top: 2px;
  border: 1px solid rgba(232, 204, 128, 0.45);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(245, 230, 163, 0.19), rgba(232, 204, 128, 0.07)),
    #171717;
  color: #f5e6a3 !important;
  -webkit-text-fill-color: #f5e6a3 !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  font-family: "Footlight MT Light", "Playfair Display", "Times New Roman", serif !important;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  line-height: 1.1;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

#avis-clients .avis-submit:hover,
#avis-clients #avis-form button[type="submit"]:hover {
  transform: translateY(-1px);
  border-color: rgba(245, 230, 163, 0.85);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.38);
}

#avis-clients .avis-submit:disabled,
#avis-clients #avis-form button[type="submit"]:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

#avis-clients .avis-submit:focus-visible,
#avis-clients #avis-form button[type="submit"]:focus-visible {
  outline: 2px solid rgba(232, 204, 128, 0.8);
  outline-offset: 2px;
}

#avis-clients .avis-feedback {
  margin: 8px 0 0;
  font-size: 0.88rem;
  line-height: 1.35;
  color: #d4efc5;
}

#avis-clients .avis-feedback.error {
  color: #ffb2b2;
}

@media (min-width: 860px) {
  #avis-clients #avis-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 22px;
    row-gap: 10px;
  }

  #avis-clients #avis-form .avis-field--half {
    min-width: 0;
  }

  #avis-clients #avis-form .avis-field--full,
  #avis-clients #avis-form .avis-submit,
  #avis-clients #avis-form .avis-feedback {
    grid-column: 1 / -1;
  }
}

#avis-toast {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) scale(0.94) !important;
  z-index: 13000 !important;
}

@media (max-width: 768px) {
  #avis-clients #avis-layer[aria-hidden="false"] {
    padding: 12px;
  }

  #avis-clients #popupavis {
    width: min(95vw, 540px);
    max-height: min(88vh, 700px);
    max-height: min(88dvh, 700px);
    border-radius: 15px;
  }

  #avis-clients #popupavis .avis-modal__content {
    padding: 14px 12px 14px;
  }

  #avis-clients .avis-titre {
    font-size: 1.18rem;
  }

  #avis-clients #avis-stars .form-star {
    font-size: 1.58rem !important;
  }

  #avis-clients #avis-message {
    min-height: 90px;
    max-height: 124px;
  }
}

@media (max-width: 420px) {
  #avis-clients #popupavis .avis-modal__content {
    padding: 14px 12px 14px;
  }

  #avis-clients .avis-modal__header {
    margin-bottom: 10px;
    padding-right: 36px;
  }

  #avis-clients .avis-titre {
    font-size: 1.1rem;
  }

  #avis-clients #avis-form label,
  #avis-clients #avis-form .avis-label {
    font-size: 0.88rem !important;
  }

  #avis-clients #avis-form input[type="text"],
  #avis-clients #avis-form textarea {
    padding: 10px 11px;
    font-size: 0.9rem !important;
  }
}

/* ======================================================
   NAVBAR DESKTOP - réglage du sous-menu (li > a)
   ====================================================== */
@media (min-width: 1024px) {
  header {
    z-index: 1200 !important;
  }

  header nav.navbar {
    z-index: 1210 !important;
  }

  #telephone-defilant {
    z-index: 1100 !important;
  }

  header nav.navbar ul.right.hide-on-med-and-down li.has-submenu {
    position: relative !important;
  }

  header nav.navbar ul.right.hide-on-med-and-down li.has-submenu::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 12px;
  }

  header nav.navbar ul.right.hide-on-med-and-down li.has-submenu:hover > .submenu,
  header nav.navbar ul.right.hide-on-med-and-down li.has-submenu:focus-within > .submenu {
    display: block !important;
  }

  header nav.navbar ul.right.hide-on-med-and-down .submenu {
    top: 100% !important;
    padding: 10px 8px !important;
    gap: 4px !important;
    align-items: stretch !important;
    z-index: 1220 !important;
  }

  header nav.navbar ul.right.hide-on-med-and-down .submenu li {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    display: block !important;
  }

  header nav.navbar ul.right.hide-on-med-and-down .submenu li a {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 4px 10px !important;
    line-height: 1.08 !important;
    text-align: left !important;
    font-size: 0.98rem !important;
    white-space: nowrap;
  }
}

/* ======================================================
   LAPTOP SOURCE OF TRUTH - HOME 1024-1366
   ====================================================== */
@media (min-width: 1024px) and (max-width: 1366px) {
  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) {
    --kmg-home-logo-top: clamp(118px, 15vh, 150px);
    --kmg-home-logo-size: clamp(220px, 19vw, 280px);
    --kmg-home-logo-gap: clamp(22px, 3vh, 42px);
  }

  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) header {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    padding: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
    z-index: 1200 !important;
  }

  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) .navbar {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 76px !important;
    padding: 14px 150px 0 24px !important;
    justify-content: center !important;
    align-items: flex-start !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 1210 !important;
    transform: none !important;
  }

  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) .navbar ul {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(18px, 3vw, 42px) !important;
    width: max-content !important;
    max-width: calc(100vw - 190px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    position: relative !important;
    transform: none !important;
  }

  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) .navbar ul li {
    margin: 0 !important;
    flex: 0 0 auto !important;
  }

  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) .navbar ul li a {
    font-size: clamp(1rem, 1.45vw, 1.25rem) !important;
    line-height: 1.1 !important;
    padding: 8px 4px !important;
    white-space: nowrap !important;
  }

  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) .navbar ul li.only-desktop {
    position: fixed !important;
    top: 14px !important;
    right: 20px !important;
    left: auto !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 1220 !important;
  }

  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) .btn-contact {
    position: relative !important;
    width: 104px !important;
    height: 60px !important;
    margin: 0 !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;
  }

  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) .btn-contact span {
    font-size: 16px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) header .logo,
  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) header .logo.hidden {
    display: flex !important;
    position: absolute !important;
    top: var(--kmg-home-logo-top) !important;
    left: 50% !important;
    right: auto !important;
    width: max-content !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateX(-50%) !important;
    justify-content: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 1220 !important;
  }

  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) header .logo img {
    display: block !important;
    width: auto !important;
    height: var(--kmg-home-logo-size) !important;
    max-width: min(34vw, 300px) !important;
    max-height: 38vh !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) #telephone-defilant {
    display: block !important;
    position: fixed !important;
    top: 78px !important;
    left: 50% !important;
    right: auto !important;
    width: auto !important;
    max-width: min(90vw, 720px) !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
    font-size: clamp(1.12rem, 1.45vw, 1.35rem) !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    z-index: 1190 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) .hero,
  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) section.hero {
    min-height: 100svh !important;
    height: 100svh !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: calc(var(--kmg-home-logo-top) + var(--kmg-home-logo-size) + var(--kmg-home-logo-gap)) 24px 54px !important;
    text-align: center !important;
    overflow: hidden !important;
  }

  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) .hero h1 {
    width: min(92vw, 980px) !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    font-size: clamp(2.35rem, 3.6vw, 3.35rem) !important;
    line-height: 1.08 !important;
  }

  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) .hero p {
    width: min(88vw, 900px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    font-size: clamp(1.25rem, 2.1vw, 1.85rem) !important;
    line-height: 1.35 !important;
  }

  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) .kmg-burger,
  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) .kmg-burger-overlay,
  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) .kmg-burger-panel {
    display: none !important;
  }

  body.kmg-burger-only.kmg-out-hero:not(.service-page):not(.realisations-page):not(.devis-page) .navbar,
  body.kmg-burger-only.kmg-out-hero:not(.service-page):not(.realisations-page):not(.devis-page) header .logo,
  body.kmg-burger-only.kmg-out-hero:not(.service-page):not(.realisations-page):not(.devis-page) #telephone-defilant {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (min-width: 1024px) and (max-width: 1100px) {
  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) .navbar,
  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) nav.navbar,
  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) .only-desktop,
  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) .btn-contact {
    display: none !important;
  }

  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) .kmg-burger {
    display: inline-flex !important;
    position: fixed !important;
    top: 14px !important;
    left: 14px !important;
    right: auto !important;
    width: 44px !important;
    height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1225 !important;
  }

  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) .kmg-burger-overlay,
  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) .kmg-burger-panel {
    display: block !important;
  }

  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) #telephone-defilant {
    max-width: calc(100vw - 108px) !important;
    left: calc(50% + 18px) !important;
  }
}

/* ======================================================
   LAPTOP 1101–1366px : burger seul, pas de navbar desktop
   ====================================================== */
@media (min-width: 1101px) and (max-width: 1366px) {

  /* Logo plus haut : ticker ~78px + hauteur ~40px = ~118px bas ; logo à 145px */
  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) {
    --kmg-home-logo-top: clamp(145px, 18vh, 175px);
  }

  /* ---- Masquer navbar desktop + sous-menus + bouton contact ---- */
  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) .navbar,
  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) nav.navbar,
  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) header .navbar,
  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) .only-desktop,
  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) header .btn-contact {
    display: none !important;
  }

  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) .submenu,
  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) .has-submenu .submenu,
  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) .has-submenu.active .submenu {
    display: none !important;
  }

  /* ---- Afficher le burger ---- */
  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) .kmg-burger {
    display: inline-flex !important;
    position: fixed !important;
    top: 14px !important;
    left: 14px !important;
    right: auto !important;
    width: 44px !important;
    height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1225 !important;
  }

  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) .kmg-burger-overlay,
  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) .kmg-burger-panel {
    display: block !important;
  }

  /* ---- Ticker : centré, pas décalé par le burger ---- */
  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) #telephone-defilant {
    left: 50% !important;
    max-width: min(90vw, 720px) !important;
  }
}

@media (min-width: 1367px) and (max-width: 2559px) {
  /* Sans ce fixe, header est static → logo/ticker sont absolute/body → scrollent */
  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background: transparent !important;
    z-index: 1200 !important;
  }

  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) header .logo,
  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) header .logo.hidden {
    top: 250px !important;
    margin-top: 0 !important;
  }
}

@media (min-width: 2560px) {
  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background: transparent !important;
    z-index: 1200 !important;
  }

  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) header .logo,
  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) header .logo.hidden {
    top: 450px !important;
  }
}

@media (min-width: 1024px) {
  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) #contact {
    padding: 18px 26px !important;
  }

  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) #contact .contact-row {
    max-width: 780px !important;
    gap: 18px !important;
    align-items: stretch !important;
  }

  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) #contact .contact-form,
  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) #contact .devicontent {
    flex: 0 1 370px !important;
    max-width: 370px !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
  }

  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) #contact .contact-form {
    gap: 4px !important;
  }

  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) #contact .contact-form h5,
  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) #contact .devicontent h5 {
    font-size: 1.05rem !important;
    margin-bottom: 3px !important;
  }

  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) #contact .contact-form input,
  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) #contact .contact-form textarea {
    font-size: 12px !important;
    padding: 4px 8px 4px 26px !important;
    min-height: 28px !important;
    height: 28px !important;
    line-height: 1.15 !important;
  }

  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) #contact .contact-form textarea {
    height: 36px !important;
    min-height: 36px !important;
  }

  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) #contact .input-icon {
    left: 7px !important;
    font-size: 12px !important;
  }

  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) #contact .contact-form .btn-submit,
  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) #contact #btn-devis {
    font-size: 12px !important;
    padding: 6px 16px !important;
  }

  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) #contact .devicontent-image {
    flex: 1 1 auto !important;
    max-height: 42px !important;
  }

  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) #contact .devicontent-actions {
    margin-top: 8px !important;
  }
}

@media (max-width: 768px) {
  #avis-clients #avis-layer[aria-hidden="false"] {
    padding: 8px !important;
  }

  #avis-clients #popupavis {
    width: min(90vw, 460px) !important;
    max-height: min(76vh, 560px) !important;
    max-height: min(76dvh, 560px) !important;
    border-radius: 13px !important;
  }

  #avis-clients #popupavis .avis-modal__content {
    padding: 10px 10px 12px !important;
  }

  #avis-clients .avis-modal__header {
    margin-bottom: 6px !important;
    padding-right: 32px !important;
  }

  #avis-clients .avis-titre {
    font-size: 1.02rem !important;
  }

  #avis-clients #avis-form {
    gap: 7px !important;
  }

  #avis-clients #avis-form label,
  #avis-clients #avis-form .avis-label {
    font-size: 0.8rem !important;
    margin-bottom: 3px !important;
  }

  #avis-clients #avis-form input[type="text"],
  #avis-clients #avis-form textarea {
    padding: 7px 9px !important;
    font-size: 0.82rem !important;
    border-radius: 9px !important;
  }

  #avis-clients #avis-message {
    min-height: 72px !important;
    max-height: 96px !important;
  }

  #avis-clients #avis-stars .form-star {
    font-size: 1.34rem !important;
  }

  #avis-clients .avis-help,
  #avis-clients .avis-char-count {
    font-size: 0.72rem !important;
  }

  #avis-clients .avis-submit,
  #avis-clients #avis-form button[type="submit"] {
    min-height: 36px !important;
    font-size: 0.86rem !important;
    border-radius: 10px !important;
  }

  #avis-clients #popupavis .avis-close {
    width: 28px !important;
    height: 28px !important;
    font-size: 19px !important;
    border-radius: 8px !important;
  }
}

@media (max-width: 420px) {
  #avis-clients #popupavis {
    width: 88vw !important;
    max-height: min(72vh, 500px) !important;
    max-height: min(72dvh, 500px) !important;
  }

  #avis-clients #popupavis .avis-modal__content {
    padding: 9px 9px 10px !important;
  }

  #avis-clients #avis-form input[type="text"],
  #avis-clients #avis-form textarea {
    padding: 6px 8px !important;
    font-size: 0.78rem !important;
  }
}

/* ======================================================
   ACCUEIL - HERO 769px -> 1055px
   Garde la hauteur du hero sans hack 100vw.
   ====================================================== */
@media screen and (min-width: 769px) and (max-width: 1055px) {
  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) #top.hero,
  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) section#top.hero {
    min-height: 100svh !important;
    height: 100svh !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
  }

  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) #top.hero::before,
  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) #top.hero::after,
  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) section#top.hero::before,
  body.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) section#top.hero::after {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
  }
}

/* ======================================================
   ACCUEIL - LARGEUR PAGE RACINE
   Le body global est un flex container centre. Sur desktop
   intermediaire, cela centre les sections directes au lieu
   de les laisser occuper toute la largeur.
   ====================================================== */
@media screen and (min-width: 769px) {
  body.home-page.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) {
    display: block !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
  }

  body.home-page.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) > header,
  body.home-page.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) > main,
  body.home-page.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) > section,
  body.home-page.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) > footer {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
  }

  body.home-page.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) #top.hero,
  body.home-page.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) #services,
  body.home-page.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) #realisations,
  body.home-page.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) #contact,
  body.home-page.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) #avis-clients,
  body.home-page.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) #zone-intervention {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1366px) {
  body.home-page.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) #services {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: clamp(14px, 1.8vw, 24px) !important;
    padding-left: clamp(12px, 2vw, 24px) !important;
    padding-right: clamp(12px, 2vw, 24px) !important;
    box-sizing: border-box !important;
  }

  body.home-page.kmg-burger-only:not(.service-page):not(.realisations-page):not(.devis-page) #services .service {
    min-width: 0 !important;
  }
}

/* ======================================================
   PAGE MENTIONS LEGALES / CONFIDENTIALITE
   ====================================================== */
body.mentions-legales-page {
  display: block !important;
  align-items: stretch !important;
  width: 100%;
  min-height: 100vh;
  padding: 0 !important;
  overflow-x: hidden;
  background: linear-gradient(180deg, #11100e 0%, #242321 48%, #151412 100%) !important;
  background-color: #11100e !important;
  color: #e8cc80;
  font-family: "Footlight MT Light", "Playfair Display", Arial, sans-serif !important;
}

html body.mentions-legales-page,
html body.mentions-legales-page * {
  box-sizing: border-box;
}

body.mentions-legales-page::before {
  display: none;
}

body.mentions-legales-page a {
  color: #e8cc80;
}

body.mentions-legales-page .legal-shell {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 44px 0 64px;
  position: relative;
  z-index: 1;
}

body.mentions-legales-page .legal-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 30px;
}

body.mentions-legales-page .legal-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid rgba(232, 204, 128, 0.42);
  border-radius: 8px;
  background: rgba(16, 14, 12, 0.74);
  color: #e8cc80 !important;
  text-decoration: none;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

body.mentions-legales-page .legal-back:hover,
body.mentions-legales-page .legal-back:focus-visible {
  border-color: rgba(232, 204, 128, 0.82);
  background: rgba(232, 204, 128, 0.08);
  transform: translateY(-1px);
}

body.mentions-legales-page .legal-date {
  color: rgba(232, 204, 128, 0.72);
  font-family: "Poppins", Arial, sans-serif;
  font-size: 0.84rem;
}

body.mentions-legales-page .legal-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: end;
  width: 100%;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 0 34px !important;
  position: relative !important;
  inset: auto !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(232, 204, 128, 0.22);
  text-align: left !important;
  z-index: auto !important;
}

body.mentions-legales-page .legal-hero::before,
body.mentions-legales-page .legal-section::before {
  content: none !important;
  display: none !important;
}

body.mentions-legales-page .legal-kicker {
  grid-column: 1;
  align-self: end;
  margin: 0 0 12px;
  color: #b49c5c;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.mentions-legales-page .legal-hero h1 {
  grid-column: 1;
  max-width: 650px;
  margin: 0;
  color: #e8cc80;
  font-family: "Footlight MT Light", "Playfair Display", serif;
  font-size: clamp(2.45rem, 4.2vw, 4rem);
  font-weight: 400;
  line-height: 1.08;
  text-align: left !important;
  overflow-wrap: anywhere;
  word-break: normal;
}

body.mentions-legales-page .legal-hero > p:not(.legal-kicker) {
  grid-column: 2;
  grid-row: 1 / span 2;
  max-width: 620px;
  margin: 0;
  color: rgba(246, 236, 205, 0.84);
  font-family: "Poppins", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.75;
  text-align: left !important;
  max-width: 100%;
  overflow-wrap: anywhere;
}

body.mentions-legales-page .legal-layout {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 46px;
  align-items: start;
  padding-top: 34px;
}

body.mentions-legales-page .legal-toc {
  position: sticky;
  top: 24px;
  padding: 18px 0;
  border-top: 1px solid rgba(232, 204, 128, 0.26);
  border-bottom: 1px solid rgba(232, 204, 128, 0.26);
}

body.mentions-legales-page .legal-toc strong {
  display: block;
  margin-bottom: 12px;
  color: #f1daa2;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
}

body.mentions-legales-page .legal-toc nav {
  display: grid;
  gap: 8px;
  height: auto !important;
  line-height: normal !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.mentions-legales-page .legal-toc a {
  display: block;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  color: rgba(246, 236, 205, 0.78);
  font-family: "Poppins", Arial, sans-serif;
  font-size: 0.86rem;
  line-height: 1.35;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease, padding-left 0.2s ease;
}

body.mentions-legales-page .legal-toc a:hover,
body.mentions-legales-page .legal-toc a:focus-visible {
  color: #e8cc80;
  padding-left: 4px;
}

body.mentions-legales-page .legal-content {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(232, 204, 128, 0.16);
  border-radius: 8px;
  background: rgba(18, 17, 15, 0.5);
}

body.mentions-legales-page .legal-section {
  display: block !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 34px clamp(24px, 4vw, 46px) !important;
  position: relative !important;
  inset: auto !important;
  z-index: auto !important;
  overflow: visible !important;
  background: transparent !important;
  background-image: none !important;
  border-top: 1px solid rgba(232, 204, 128, 0.18);
  text-align: left !important;
  animation: none !important;
  transition: none !important;
}

body.mentions-legales-page .legal-section:first-child {
  border-top: 0;
}

body.mentions-legales-page .legal-number {
  display: block;
  margin-bottom: 10px;
  color: rgba(232, 204, 128, 0.42);
  font-family: "Poppins", Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

body.mentions-legales-page .legal-section h2 {
  margin: 0 0 16px;
  color: #e8cc80;
  font-family: "Footlight MT Light", "Playfair Display", serif;
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.2;
  text-align: left !important;
}

body.mentions-legales-page .legal-section p {
  margin: 0 0 14px;
  color: rgba(246, 236, 205, 0.84);
  font-family: "Poppins", Arial, sans-serif;
  font-size: 0.98rem;
  line-height: 1.76;
  text-align: left !important;
}

body.mentions-legales-page .legal-section p:last-child {
  margin-bottom: 0;
}

body.mentions-legales-page .legal-info-list {
  display: grid;
  gap: 0;
  margin: 16px 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(232, 204, 128, 0.16);
}

body.mentions-legales-page .legal-info-list li {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(232, 204, 128, 0.16);
}

body.mentions-legales-page .legal-info-list span {
  color: rgba(232, 204, 128, 0.72);
  font-family: "Poppins", Arial, sans-serif;
  font-size: 0.86rem;
}

body.mentions-legales-page .legal-info-list strong {
  color: rgba(255, 247, 226, 0.94);
  font-family: "Poppins", Arial, sans-serif;
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.5;
}

body.mentions-legales-page .legal-info-list a {
  color: #e8cc80;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.mentions-legales-page .legal-note {
  color: rgba(232, 204, 128, 0.66) !important;
  font-size: 0.9rem !important;
}

body.mentions-legales-page .legal-bullets {
  margin: 10px 0 18px;
  padding-left: 20px;
  color: rgba(246, 236, 205, 0.86);
  font-family: "Poppins", Arial, sans-serif;
  font-size: 0.98rem;
  line-height: 1.7;
}

body.mentions-legales-page .legal-bullets li {
  margin-bottom: 8px;
}

body.mentions-legales-page footer {
  margin-top: 0 !important;
  border-top: 1px solid rgba(232, 204, 128, 0.18) !important;
  background: transparent !important;
  background-color: transparent !important;
}

body.mentions-legales-page footer .footer-content,
body.mentions-legales-page footer .footer-nav {
  background: transparent !important;
  background-color: transparent !important;
}

body.mentions-legales-page footer::before,
body.mentions-legales-page footer::after {
  content: none !important;
  display: none !important;
}

@media screen and (max-width: 900px) {
  body.mentions-legales-page .legal-shell {
    width: min(100% - 28px, 760px);
    padding-top: 28px;
  }

  body.mentions-legales-page .legal-hero {
    display: block !important;
    padding-bottom: 28px !important;
  }

  body.mentions-legales-page .legal-hero > p:not(.legal-kicker) {
    max-width: 100%;
    margin-top: 18px;
  }

  body.mentions-legales-page .legal-layout {
    display: block;
    padding-top: 24px;
  }

  body.mentions-legales-page .legal-toc {
    position: static;
    margin-bottom: 24px;
  }

  body.mentions-legales-page .legal-toc nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 16px;
  }

  body.mentions-legales-page .legal-hero h1 {
    font-size: 2.35rem;
  }
}

@media screen and (max-width: 560px) {
  body.mentions-legales-page .legal-topbar {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 26px;
  }

  body.mentions-legales-page .legal-hero h1 {
    font-size: 1.78rem;
    line-height: 1.14;
    width: 100%;
    max-width: 310px;
  }

  body.mentions-legales-page .legal-hero > p:not(.legal-kicker) {
    max-width: calc(100vw - 64px);
  }

  body.mentions-legales-page .legal-hero p,
  body.mentions-legales-page .legal-section p,
  body.mentions-legales-page .legal-bullets {
    font-size: 0.92rem;
  }

  body.mentions-legales-page .legal-toc nav {
    grid-template-columns: 1fr;
  }

  body.mentions-legales-page .legal-section {
    padding: 24px 18px !important;
  }

  body.mentions-legales-page .legal-section h2 {
    font-size: 1.5rem;
  }

  body.mentions-legales-page .legal-info-list li {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ── Fold/Flip écrans ultra-étroits ≤ 360px ── */
@media screen and (max-width: 360px) {
  /* Carrousel réalisations 3D */
  .real-slider-wrap {
    padding: 8px 0 !important;
  }
  .real-slider {
    height: 255px !important;
  }
  .real-card {
    width: 165px !important;
    height: 230px !important;
    margin-left: -82px !important;
    margin-top: -115px !important;
  }
  #real-prev,
  #real-next {
    width: 26px !important;
    height: 26px !important;
    font-size: 0.8rem !important;
  }
  #real-prev { left: 0 !important; }
  #real-next { right: 0 !important; }

  /* Avis clients slider */
  .slider-wrap {
    width: 90% !important;
    margin: 0 auto !important;
  }
  .slider-wrap .item {
    min-width: 80vw !important;
    padding: 14px 10px !important;
  }

  /* Footer icônes sociales */
  .footer-social {
    gap: 10px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  .footer-social a img {
    width: 28px !important;
    height: 28px !important;
  }
}