/* === RESET & BASE === */
@font-face {
  font-family: "Font Awesome 6 Free";
  src: url("fonts/fa-solid-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  font-feature-settings: "liga"; /* optionnel, pour ligatures */
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  background: #f5f5f5;
  color: #333;
}
h1 {
  font-size: 2rem;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

/* === HEADER === */
header {
  background: linear-gradient(90deg, #444444dd 0%, #000000ee 100%);
  color: #fff;
  backdrop-filter: saturate(180%) blur(6px);
  position: sticky;
  top: 0;
  z-index: 999;
  height: 60px;
  overflow: visible;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  transition: box-shadow 0.3s ease;
}
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.5rem 1rem;
  flex-wrap: nowrap;
}

/* --- TITRE NORD SERVICES AMÉLIORÉ --- */
.site-title {
  font-size: 2rem;
  color: #ffffff;
  text-decoration: none;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  transition: color 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;
  position: relative;
  display: inline-block;
}
.site-title:hover,
.site-title:focus {
  color: #00baff;
  text-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 0 4px #00baff;
  transform: scale(1.07);
  transition: color 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;
}

.site-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background-color: #00baff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.site-title:hover::after,
.site-title:focus::after {
  transform: scaleX(1);
}

.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
#burger {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 999;
  margin-left: auto;
  flex-shrink: 0;
}
#burger span {
  width: 25px;
  height: 3px;
  background: white;
  display: block;
  margin-bottom: 5px;
  border-radius: 2px;
  transition: transform 0.4s ease, opacity 0.4s ease;
  transform-origin: center;
}
#burger.toggle span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
#burger.toggle span:nth-child(2) {
  opacity: 0;
}
#burger.toggle span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}
#burger span:nth-child(1) {
  transition-delay: 0.1s;
}
#burger span:nth-child(3) {
  transition-delay: 0.2s;
}

/* === MENU DÉROULANT === */
.nav-links {
  position: absolute;
  top: 60px;
  right: 10px;
  background: #1a1a1a;
  width: 220px;
  padding: 1rem;
  border-radius: 4px;
  /* autres propriétés communes */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(-10px);
  z-index: 998;
}

/* Media query uniquement si besoin de modifier une propriété spécifique */
@media (max-width: 600px) {
  /* Par exemple, si tu veux changer la largeur */
  /* .nav-links { width: 100%; } */
}

.nav-links.nav-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  max-height: 500px;
  overflow: visible;
  transform: translateY(0);
}
nav ul {
  list-style: none;
}
nav li {
  margin-bottom: 1rem;
}
.nav-link {
  color: white;
  text-decoration: none;
  padding: 0.5rem 0;
  font-weight: 600;
}
.nav-link:hover {
  text-decoration: underline;
}

/* === HERO === */
.hero {
  position: relative;
  overflow: hidden;
  color: white;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #000; /* couleur de secours */
}

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: brightness(0.8);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4); /* foncé mais translucide */
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2; /* le plus élevé pour être au-dessus de l’overlay */
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  color: #fff; /* pour assurer un bon contraste */
}

.hero h1 {
  font-weight: bold;
  line-height: 1.3;
  margin-bottom: 1.5rem;
  color: white;
  text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.8);
}

.hero h1 u {
  text-decoration: underline;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
}
.hero-buttons {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
  gap: 2rem;
  min-height: 116px; /* hauteur fixe pour réserver l’espace des boutons */
}
.hero-buttons a {
  display: inline-block;
}

/* === BOUTONS ICÔNES === */
.icon-btn {
  max-width: 100%;
  height: auto; /* ← ajoute cette ligne */
  cursor: pointer;
  vertical-align: middle;
  border-radius: 12px;
  transition: box-shadow 0.3s ease, transform 0.3s ease, filter 0.3s ease;
  margin: 0 auto;
  display: block;
}
.icon-btn:hover,
.icon-btn:focus {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
  transform: translateY(-6px);
  filter: brightness(1.05);
}
.appel-btn,
.whatsapp-btn {
  width: 230px !important;
  height: 90px !important;
  max-width: none !important;
  max-height: none !important;
}

/* === CONTACT MAIL === */
.contact-mail {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: bold;
  font-size: 1.1rem;
  color: #004099; /* état normal */
  text-decoration: none;
}

.contact-mail:hover {
  color: #007bff; /* survol souris */
  text-decoration: underline;
}


/* Téléphone : mêmes couleurs */
.contact-phone {
  color: #004099;
  font-weight: bold;
  text-decoration: none;
}
.contact-phone:hover,
.contact-phone:focus {
  color: #007bff;
  text-decoration: underline;
}

/* === DEVIS GRATUIT === */
.devis-gratuit {
  font-size: 2rem;
  font-weight: 900;
  color: #222;
  text-align: center;
  margin: 1.5rem 0;
}

/* === SERVICES === */
.services {
  background: white;
  padding: 2rem 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}
.services h2 {
  width: 100%;
  margin-bottom: 2rem;
  font-size: 1.8rem;
  color: #222;
}

/* === SECTEUR === */
.secteur {
  background: #f0f0f0;
  padding: 2rem 1rem;
}
.secteur h2 {
  text-align: center;
  margin-bottom: 1rem;
  color: #222;
}
.secteur p {
  max-width: 700px;
  margin: auto;
  font-size: 1.1rem;
  color: #222;
  text-align: center;
}
.villes-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  list-style: none;
  padding: 0;
  margin-top: 1rem;
}
.villes-list li {
  background: #e0e0e0;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-weight: bold;
}

/* === AVIS CLIENTS === */
.avis {
  background: #ffffff;
  padding: 2rem 1.5rem;
  border-radius: 12px;
  margin: 2rem 0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  line-height: 1.6;
  font-size: 1.05rem;
  color: #333333;
  font-style: italic;
  transition: transform 1.2s ease-out, opacity 1.2s ease-out;
  will-change: opacity, transform;
  opacity: 0.3;
  transform: translateY(150px);
}

.avis.visible {
  opacity: 1;
  transform: translateY(0);
}

.avis:nth-child(1) { transition-delay: 0s; }
.avis:nth-child(2) { transition-delay: 0.1s; }
.avis:nth-child(3) { transition-delay: 0.2s; }
.avis:nth-child(4) { transition-delay: 0.3s; }


.avis:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.avis cite {
  display: block;
  margin-top: 0.8rem;
  font-style: normal;
  font-weight: bold;
  color: #007bff;
  text-align: right;
}

/* Animation décalée entre chaque avis */
.avis:nth-child(1) { transition-delay: 0s; }
.avis:nth-child(2) { transition-delay: 0.1s; }
.avis:nth-child(3) { transition-delay: 0.2s; }
.avis:nth-child(4) { transition-delay: 0.3s; }




/* === CONTACT SECTION === */
.contact {
  background: #fff;
  padding: 2rem 1rem;
  text-align: center;
}
.contact h2 {
  margin-bottom: 1rem;
}
.contact p {
  margin-bottom: 1rem;
  font-size: 1rem;
  color: #444;
}

/* === FOOTER === */
footer {
  background: #222;
  color: white;
  text-align: center;
  padding: 1rem;
}

/* === FOOTER LINKS === */
.footer-links {
  margin-top: 0.5rem;
  font-size: 0.9rem;
}
.footer-links a {
  color: #e0e0e0;
  text-decoration: none;
  margin: 0 0.5rem;
}
.footer-links a:hover,
.footer-links a:focus {
  color: #fff;
  text-decoration: underline;
}

/* === CARTE LEAFLET === */
#map {
  height: 400px;
  border-radius: 10px;
  margin-top: 1.5rem;
}

/* === RESPONSIVE MOBILE (≤600px) === */
@media (max-width: 600px) {
  .nav-links.nav-active {
    max-height: 500px;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .container {
    padding: 0 0.5rem;
  }
  .hero {
    padding: 3rem 1rem;
    min-height: 300px;
  }
  .hero h1 {
    font-size: 1.6rem;
  }
  .hero p {
    font-size: 1rem;
  }
  .hero-buttons {
    flex-direction: column;
    gap: 1rem;
  }

  .site-title {
    font-size: 1.4rem;
    letter-spacing: 1px;
  }
}

/* === ACCESSIBILITY FOCUS === */
a:focus,
button:focus {
  outline: 3px solid #007bff;
  outline-offset: 2px;
}

/* === STYLES POUR LES ÉTOILES DANS LES AVIS === */
.avis-clients .etoiles i {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #ffc107;
  font-size: 1.4rem;
  margin-right: 4px;
  transition: color 0.3s ease, transform 0.3s ease;
}
.avis-clients .etoiles i:last-child {
  margin-right: 0;
}
.avis-clients .avis:hover .etoiles i {
  color: #ffca2c;
  transform: scale(1.1);
}

/* === NOUVEAU STYLE CARTE SERVICE === */
.service-card {
  display: flex;
  flex-direction: row;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
  margin: 2rem auto;
  max-width: 1000px;
  cursor: pointer;
  will-change: transform, box-shadow, opacity;
  backface-visibility: hidden;

  /* Animation apparition */
  opacity: 0.3;
  transform: translateY(150px);
  transition: transform 1.2s ease-out, opacity 1.2s ease-out;
}

.service-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Animation décalée entre chaque carte */
.service-card:nth-child(1) { transition-delay: 0s; }
.service-card:nth-child(2) { transition-delay: 0.1s; }
.service-card:nth-child(3) { transition-delay: 0.2s; }
.service-card:nth-child(4) { transition-delay: 0.3s; }

.service-card:hover .service-card-img {
  background-color: #e6e6e6;
}


.service-card-text {
  flex: 1;
  padding: 2.5rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(255 255 255 / 0.95);
   color: #111; /* texte très foncé */
  backdrop-filter: saturate(180%) blur(8px);
  transition: background-color 0.3s ease;
}

.service-card:hover .service-card-text {
  background: rgba(255 255 255 / 1);
}

.accent {
  color: #5a3b0f;
  font-weight: 900;
  letter-spacing: 0.03em;
}

.service-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: #222;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 0.75rem;
  display: inline-block;
  transition: opacity 0.3s ease;
}

.service-card:hover .service-label {
  opacity: 1;
  color: #b07d42;
}

.service-card-text h3 {
  font-size: 2rem;
  margin-bottom: 1.2rem;
  color: #222;
  font-weight: 900;
  line-height: 1.2;
  transition: color 0.3s ease;
}

.service-card-text:hover h3 {
  color: #b07d42;
}

.service-card-text .accent {
  color: #5a3b0f;
  font-weight: 900;
  letter-spacing: 0.03em;
}

.service-card-text p {
  font-size: 1.05rem;
  color: #111;
  line-height: 1.7;
  margin-bottom: 1.8rem;
  opacity: 0.9;
  transition: opacity 0.4s ease;
}

.service-card:hover .service-card-text p {
  opacity: 1;
}

.service-link {
  cursor: pointer;
  align-self: flex-start;
  font-weight: 700;
  color: #fff;
  background-color: #6b4a17; /* un marron plus foncé */
  padding: 0.75rem 1.8rem;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 6px 12px rgba(107, 74, 23, 0.6);
  transition: background-color 0.3s ease, box-shadow 0.3s ease,
    transform 0.15s ease;
  user-select: none;
}

.service-link:hover,
.service-link:focus {
  background-color: #52380f;
  box-shadow: 0 10px 20px rgba(82, 56, 15, 0.8);
  transform: translateY(-2px);
}

/* Ensuite ce code pour un focus visible accessible */
.service-link:focus-visible {
  outline: 3px solid #b07d42;
  outline-offset: 3px;
}


/* Container 3D pour un petit effet de perspective */
.service-card-img {
  flex: 0 0 400px;
  max-width: 100%;
  overflow: hidden;
  border-radius: 20px 0 0 20px;
  background-color: #f0f0f0;
  perspective: 800px;
}


/* Image : transition douce multi-effets */
.service-card-img img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transform: scale(1) translateZ(0);
  transform-origin: center center;
  transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),
    filter 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),
    box-shadow 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.service-card-img img:hover,
.service-card-img img:focus {
  transform: scale(1.08) translateY(-5px) translateZ(30px);
  filter: brightness(1.1) saturate(1.2);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
  outline: 3px solid #007bff;
  outline-offset: 4px;
}



/* Responsive */
@media (max-width: 768px) {
  .service-card {
    flex-direction: column;
  }

  .service-card-img {
    width: 100%;
    height: auto;
    flex: unset !important; /* annule le flex fixe de 400px */
    border-radius: 20px 20px 0 0;
    border-right: none;
    overflow: hidden;
  }

  .service-card-img img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 20px 20px 0 0;
  }

  .service-card-text {
    width: 100%;
    padding: 2rem 1.5rem;
    backdrop-filter: none;
    background: #fff;
  }
}

/* Style général du container FAQ */
.faq {
  max-width: 900px;
  margin: 2rem auto 4rem;
  padding: 2rem 1rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.faq h2 {
  text-align: center;
  font-weight: 700;
  font-size: 2rem;
  margin-bottom: 2rem;
  color: #2c3e50;
}

.faq dl {
  border-top: 2px solid #b07d42;
}

.faq dt {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.25rem;
  padding: 1rem 1rem 1rem 2.5rem;
  border-bottom: 1px solid #b07d42;
  position: relative;
  color: #222;
  user-select: none;
  outline: none;
}

/* Flèche avant le titre */
.faq dt::before {
  content: "▶"; /* triangle droit */
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #b07d42;
  font-size: 1.1rem;
  transition: transform 0.3s ease, color 0.3s ease;
}

/* Style quand le dt est focus ou "actif" */
.faq dt:focus,
.faq dt:focus-visible {
  background-color: #f4ecd5;
  color: #8a5e2d;
  outline: none;
  box-shadow: 0 0 0 3px #b07d42aa;
}

/* Flèche tournée au focus */
.faq dt:focus::before,
.faq dt:focus-visible::before {
  transform: translateY(-50%) rotate(90deg);
  color: #8a5e2d;
}

/* Masquer par défaut les réponses */
.faq dd {
  max-height: 0;
  overflow: hidden;
  padding: 0 1rem;
  color: #555;
  line-height: 1.6;
  font-size: 1.1rem;
  margin: 0 0 1.5rem 2.5rem;
  border-bottom: 1px solid #e3d7ba;
  transition: max-height 0.35s ease, padding 0.35s ease;
}

/* Afficher la réponse quand le dt précédent est focus */
/* On utilise le sélecteur adjacent + et :focus-within sur le container */
.faq dt:focus + dd {
  max-height: 100vh; /* assez grand pour contenir */
  padding-top: 0.75rem;
  padding-bottom: 1rem;
}

/* Dernier dd sans bordure */
.faq dd:last-of-type {
  border-bottom: none;
}
.contact-mail:focus,
.contact-mail:focus-visible,
.contact-mail:focus-within {
  color: #007bff;
  text-decoration: underline;
  outline: 3px solid #007bff;
  outline-offset: 2px;
}

.faq dt:hover + dd {
  max-height: 100vh;
  padding-top: 0.75rem;
  padding-bottom: 1rem;
}


.fa-solid {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

.fa {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
}

.leaflet-container img.leaflet-tile {
  mix-blend-mode: normal !important;
}

#tarteaucitronAlertBig {
  background: #fff;
  color: #333;
  font-family: Arial, sans-serif;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  padding: 1.5rem;
  max-width: 600px;
}

#tarteaucitronAlertBig button {
  background: #2c6bed;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 0;
  margin-right: 0.5rem;
  margin-top: 0.5rem;
  cursor: pointer;
}

#tarteaucitronAlertBig a {
  color: #2c6bed;
  text-decoration: underline;
}

/* === SECTION AVIS CLIENTS === */
.avis-clients .container {
  max-width: 900px;
  margin: 2rem auto;
  padding: 1.5rem;
  font-family: 'Montserrat', sans-serif;
  color: #222222;
  background: #f9fbfd;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}


/* Étoiles à l'intérieur de l'avis */
.etoiles {
  margin-top: 1rem;
  color: #fbbc04;
  font-size: 1.5rem;
  display: inline-flex;
  gap: 0.15rem;
}

.etoiles i {
  filter: drop-shadow(0 0 1px rgba(0,0,0,0.15));
}

/* Conteneur du lien vers les avis Google */
.google-reviews-link {
  text-align: center;
  margin-top: 3rem;
}

.google-reviews-link p {
  font-weight: 700;
  font-size: 1.3rem;
  margin-bottom: 1.2rem;
  color: #0b47a1;
  letter-spacing: 0.03em;
}

/* Boutons Google (section + footer) */
.btn-google,
.btn-avis-google {
  display: inline-block;
  text-align: center;
  background-color: #1a73e8;
  color: #fff;
  padding: 0.8rem 1.8rem;
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(26, 115, 232, 0.45);
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
  line-height: 1.4;
  max-width: 100%;
}

.btn-google:hover,
.btn-google:focus,
.btn-avis-google:hover,
.btn-avis-google:focus {
  background-color: #155ab6;
  box-shadow: 0 6px 16px rgba(21, 90, 182, 0.65);
  outline: none;
}

/* Texte sur 1 ligne et étoiles en dessous */
.btn-google span,
.btn-avis-google span {
  display: block;
}

.btn-google .stars,
.btn-avis-google .stars {
  margin-top: 0.3rem;
  display: flex;
  justify-content: center;
  gap: 0.2rem;
}

.stars i {
  font-size: 1.2rem;
  color: #fbbc04;
  filter: drop-shadow(0 0 1px rgba(0,0,0,0.12));
}

/* Footer : centrage du bouton */
.avis-google-btn {
  text-align: center;
  margin-top: 1rem;
}

/* === Responsive === */
@media (max-width: 480px) {
  .avis-clients .container {
    padding: 1rem;
  }

  .avis {
    padding: 1.2rem 1.4rem;
    font-size: 1rem;
  }

  .btn-google,
  .btn-avis-google {
    padding: 0.7rem 1.2rem;
    font-size: 1rem;
  }

  .etoiles {
    font-size: 1.3rem;
  }

  .stars i {
    font-size: 1.1rem;
  }

  .google-reviews-link p {
    font-size: 1.15rem;
  }
}