/* === Variables CSS === */
:root {
  --primary-font: 'Playfair Display', serif;
  --secondary-font: 'Inter', sans-serif;
  --text-color: #3A3A3A;
  --background-color: #FDFCFB;
  --accent-color: #C8B97E;
  --dark-bg-text: #f1f1f1;
  --footer-bg: #1a1a1a;
  --footer-text: #ccc;
  --link-hover-color: #A09367;
}



/* === Styles Globaux === */
body {
  font-family: 'Inter', sans-serif; /* Police de base plus moderne */
  line-height: 1.7;
  color: #333;
  background-color: #FFFFFF; /* Fond blanc principal */
  margin: 0; /* Supprime le bandeau blanc en haut */
  padding: 0;
  overflow-x: hidden; /* Empêche le défilement horizontal si du contenu dépasse */
  transition: opacity 0.5s ease-in-out; /* Pour l'effet fade-in */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--primary-font);
  color: var(--text-color);
  margin-top: 1.5em;
  margin-bottom: 0.8em;
  font-weight: bold;
}

h1 { font-size: 3rem; line-height: 1.2; font-weight: 700;}
h2 { font-size: 2.25rem; line-height: 1.3; }
h3 { font-size: 1.5rem; line-height: 1.4; }
h4 { font-size: 1.25rem; line-height: 1.5; }

section {
  padding: 60px 20px;
}

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

/* === Styles de la Navigation === */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 3rem; /* Réduit légèrement le padding vertical */
  background-color: rgba(253, 252, 251, 0.95);
  position: fixed; /* Changé de sticky à fixed pour un contrôle total */
  top: 0;
  left: 0; /* Assure qu'elle prend toute la largeur */
  right: 0; /* Assure qu'elle prend toute la largeur */
  z-index: 1000;
  box-shadow: 0 1px 10px rgba(0,0,0,0.03);
  transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out, background-color 0.3s ease; /* Ajout de transform à la transition */
}

.navbar.hidden {
  opacity: 0;
  visibility: hidden; /* Gardé pour l'accessibilité */
  pointer-events: none;
  transform: translateY(-100%); /* La sort de l'écran vers le haut */
}

.navbar.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0%); /* La remet en place */
}

.nav-logo {
  font-size: 1.6rem;
  text-decoration: none;
  font-weight: 700;
  color: #2C2C2C;
  font-family: 'Playfair Display', serif;
}

.nav-logo:hover {
  color: #C8B97E;
}

.nav-links a {
  margin-left: 1.5rem;
  font-weight: 500;
  color: #555;
  font-size: 1rem;
  text-transform: none;
  letter-spacing: normal;
  text-decoration: none;
}

.nav-links a:hover, .nav-links a.active {
  color: #C8B97E;
  border-bottom: none;
  padding-bottom: 0.3rem;
}

.nav-links a.active {
  text-decoration: underline;
  text-underline-offset: 3px; /* Ajuste l'espace entre le texte et le soulignement */
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 2rem;
  color: #333;
  cursor: pointer;
}

/* === Styles des boutons CTA === */
.cta-button {
  background-color: var(--accent-color);
  font-weight: bold; /* modifié */
  color: #FFFFFF; /* Modifié de var(--background-color) à #FFFFFF */
  padding: 12px 28px;
  border: none;
  border-radius: 5px;
  text-decoration: none;
  font-family: var(--primary-font);
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.2s ease;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.8px; /* Modifié de 0.5px à 0.8px pour correspondre à btn-scroll */
  font-size: 0.9rem; /* Ajouté pour correspondre */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.cta-button:hover, .cta-button:focus {
  background-color: var(--link-hover-color);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Styles spécifiques pour le bouton Découvrir de la section hero */
.hero-cta-button {
  background-color: #D8C7A3; /* Beige/Doré comme sur l'image */
  color: #60503C; /* Couleur de texte marron foncé comme sur l'image */
  font-weight: bold; /* Texte en gras comme sur l'image */
  display: inline-block; /* Pour que padding et margin fonctionnent bien */
}

.hero-cta-button:hover {
  background-color: #c7b591; /* Teinte légèrement plus foncée pour le survol */
  color: #60503C;
  transform: translateY(-2px);
}

/* === Footer === */
footer {
  background-color: var(--footer-bg);
  color: var(--footer-text);
  text-align: center;
  padding: 40px 20px;
  font-size: 0.9em;
}

footer p {
  margin: 8px 0;
}

footer a {
  color: var(--accent-color);
  text-decoration: none;
}

footer a:hover {
  color: var(--link-hover-color);
  text-decoration: underline;
}

/* === HERO SECTION === */
.hero {
  /* background-color: #FDFCFB; */ /* Commenté pour rendre le hero transparent et voir la vidéo */
  min-height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative; /* Nécessaire pour le positionnement de la vidéo et du contenu */
  overflow: hidden; /* Pour s'assurer que la vidéo ne déborde pas */
  padding: 0 2rem 4rem 2rem; /* Supprime padding-top, conserve les autres */
}



.hero-background-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: 0; /* Vidéo à la base du stacking context */
  opacity: 0.3; /* Opacité encore plus réduite */
}




.hero-text {
  position: relative; /* Pour s'assurer qu'il est au-dessus de la vidéo et du fondu */
  z-index: 2; /* Texte au-dessus du fondu et de la vidéo */
  display: flex;
  flex-direction: column;
  max-width: 800px;
}

.logo-hero {
  display: block; /* Nécessaire pour que margin auto fonctionne */
  width: 280px;
  max-width: 70vw;
  margin-bottom: 0.5rem; /* Espace réduit sous le logo */
  margin-left: auto; /* Pour forcer le centrage */
  margin-right: auto; /* Pour forcer le centrage */
  /* align-self: center; est implicite avec align-items: center sur le parent .hero-text */
}

.hero h1 {
  font-family: var(--primary-font);
  font-size: clamp(2rem, 5vw, 3.2rem); /* Responsive font size */
  color: var(--accent-color-dark); /* Utilisation d'une couleur d'accent sombre */
  margin-bottom: 0.25rem; /* Fortement réduit pour rapprocher du paragraphe */
  font-weight: 700; /* Assure une bonne lisibilité */
  letter-spacing: -0.5px; /* Léger ajustement de l'espacement des lettres */
  text-shadow: 1px 1px 3px rgba(0,0,0,0.1); /* Ombre subtile pour le relief */
}

.hero p {
  font-size: 1.25rem;
  font-weight: 500;
  color: #555;
  margin-bottom: 2.5rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.btn-scroll {
  display: inline-block;
  text-decoration: none;
  padding: 0.9rem 1.5rem; /* Ajustement padding horizontal si largeur fixe */
  border: 1px solid #C8B97E;
  border-radius: 50px;
  background-color: #C8B97E;
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(200, 185, 126, 0.3);
  width: 220px; /* Largeur fixe pour uniformiser */
  text-align: center; /* Centre le texte à l'intérieur du bouton */
  align-self: center; /* Assure le centrage du bouton lui-même dans le conteneur flex */
}

.btn-scroll:hover {
  background-color: #b8a66e;
  border-color: #b8a66e;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(184, 166, 110, 0.4);
}



/* === MAIN CONTENT & SECTIONS === */
main.content {
  padding: 5rem 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

main.content section {
  margin-bottom: 5rem;
}

/* Specific Section Styling */
.benefits-grid .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2.5rem;
}

.capsule {
  background-color: #fff;
  padding: 2.5rem 2rem;
  border-radius: 8px;
  border: 1px solid #ECECEC;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.capsule:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.07);
}

.capsule h3 {
  margin-top:0;
  font-size: 1.3rem;
}

.capsule p {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.6;
  margin-bottom: 0;
}

.services-list {
  list-style: none;
  padding-left: 0;
  column-count: 2;
  column-gap: 3rem;
}

.services-list li {
  margin-bottom: 1rem;
  padding-left: 1.75rem;
  position: relative;
  font-size: 1.05rem;
}

.services-list li::before {
  content: '\2713';
  color: #C8B97E;
  position: absolute;
  left: 0;
  font-weight: bold;
  font-size: 1.1rem;
}

/* Testimonials */
.testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2.5rem;
}

.testimonial {
  background-color: #FDFCFB;
  padding: 2rem;
  border-radius: 8px;
  border-left: 4px solid #C8B97E;
  box-shadow: 0 5px 15px rgba(0,0,0,0.04);
}

.testimonial p {
  font-style: italic;
  color: #444;
  font-size: 1.05rem;
  margin-bottom: 1rem;
}

.testimonial cite {
  font-style: normal;
  font-weight: bold;
  color: #2C2C2C;
  font-size: 0.95rem;
}

/* Pricing Table */
.pricing-section h2 {
  text-align: center;
}

.pricing-section p:first-of-type {
    text-align: center;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3rem;
}

.table-container {
    overflow-x: auto;
    background-color: #fff;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
}

.pricing-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0;
}

.pricing-table th, .pricing-table td {
  padding: 1.25rem 1rem;
  text-align: left;
  border-bottom: 1px solid #ECECEC;
}

.pricing-table th {
  background-color: transparent;
  color: #2C2C2C;
  font-weight: bold;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pricing-table td {
  color: #444;
  font-size: 0.95rem;
}

.pricing-table tr:last-child td {
    border-bottom: none;
}

.pricing-table .price {
  display: block;
  font-size: 0.85rem;
  color: #C8B97E;
  font-weight: 700;
  margin-top: 0.25rem;
}

.pricing-table td:nth-child(1) {
    font-weight: 500;
    color: #3A3A3A;
}

/* Final CTA Section */
section:has(> .cta-button) {
    text-align: center;
}
section:has(> .cta-button) h2 {
    margin-bottom: 1rem;
}
section:has(> .cta-button) p {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 2rem;
}

/* === RESPONSIVE ADJUSTMENTS === */
@media (max-width: 992px) {
  .services-list {
    column-count: 1;
  }
}

@media (max-width: 768px) {
  h1 { font-size: 2.5rem; }
  h2 { font-size: 1.875rem; }
  h3 { font-size: 1.375rem; }

  .navbar {
    padding: 1rem 1.5rem;
  }
  .nav-links {
    display: none;
    flex-direction: column;
    background-color: #fff;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    box-shadow: 0 5px 10px rgba(0,0,0,0.05);
    padding: 1rem 0;
  }

  .nav-links.active {
    display: flex;
  }

  .nav-links a {
    margin: 0.75rem 1.5rem;
    display: block;
    text-align: center;
    border-bottom: none;
    padding-bottom: 0;
  }
  .nav-links a:hover, .nav-links a.active {
    border-bottom: none;
    padding-bottom: 0;
    background-color: #f8f7f4;
    border-radius: 4px;
  }

  .menu-toggle {
    display: block;
  }

  .hero {
    min-height: 70vh;
  }
  .hero h1 { font-size: 2.5rem; }
  .hero p { font-size: 1.1rem; }
  .logo-hero { width: 200px; }

  main.content {
    padding: 3rem 1rem;
  }
  main.content section {
    margin-bottom: 3rem;
  }
}

/* === STYLES SPÉCIFIQUES POUR LA PAGE VIDÉOS === */
.page-content {
  padding-top: 4rem;
}

.section-intro {
  text-align: center;
  font-size: 1.1rem;
  color: #555;
  max-width: 700px;
  margin: 0 auto 3rem auto;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2.5rem;
}

.video-item {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

.video-thumbnail-link {
  display: block;
  position: relative;
  overflow: hidden;
}

.video-thumbnail {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.video-thumbnail-link:hover .video-thumbnail {
  transform: scale(1.05);
}

.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: rgba(255, 255, 255, 0.9);
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease, color 0.3s ease;
  pointer-events: none;
}

.video-thumbnail-link:hover .play-icon {
  background-color: rgba(200, 185, 126, 0.8);
  color: #fff;
}

.video-item h3 {
  font-size: 1.25rem;
  margin: 1.5rem 1.5rem 0.5rem 1.5rem;
  color: #3A3A3A;
}

.video-item p {
  font-size: 0.9rem;
  color: #666;
  padding: 0 1.5rem 1.5rem 1.5rem;
  margin-bottom: 0;
  line-height: 1.5;
}

/* Lightbox Styles */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.lightbox:target,
.lightbox[style*="display: flex"] {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.lightbox-content {
  position: relative;
  padding: 20px;
  background: #000;
  max-width: 960px;
  width: 90%;
}

.lightbox-content iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
}

.lightbox-close {
  position: absolute;
  top: -40px;
  right: 0px;
  font-size: 2.5rem;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  line-height: 1;
}

/* Styles pour les boutons de navigation de la lightbox */
.lightbox-prev,
.lightbox-next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 24px;
  transition: 0.3s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  background-color: rgba(0, 0, 0, 0.3);
  border: none;
}

.lightbox-prev {
  left: 15px;
  border-radius: 3px 0 0 3px;
}

.lightbox-next {
  right: 10px;
}

.lightbox-prev:hover,
.lightbox-next:hover {
  background-color: rgba(0, 0, 0, 0.6);
}

/* Lightbox Media Borders & Styling */
#lightboxPhotoImage,
#videoLightboxIframe {
  border: 4px solid #C8B97E;
  box-sizing: border-box;
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

#lightboxPhotoImage {
  max-height: 80vh;
  object-fit: contain;
}

/* Note: #videoLightboxIframe typically gets its dimensions from its HTML attributes (width, height).
   The 'max-width: 100%' rule above helps it shrink if the viewport or its container is too narrow.
   For fully responsive iframes that adapt to container width while maintaining aspect ratio,
   you might need additional CSS like: width: 100%; height: auto; aspect-ratio: 16/9; */

.photo-lightbox-content #lightboxPhotoCaption {
  color: #f1f1f1;
  margin-top: 15px;
  padding: 0 15px;
  text-align: center;
  font-size: 0.95em;
  line-height: 1.4;
}

/* Ensure the direct content wrapper inside lightbox has no padding that could interfere */
.lightbox .lightbox-content {
    padding: 0;
}

/* === STYLES SPÉCIFIQUES POUR LA PAGE CONTACT === */
.contact-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.contact-section h2 {
  text-align: center;
  margin-bottom: 1rem;
}

.contact-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2.5rem;
  padding: 0 20px;
  flex-wrap: wrap; /* Rétabli pour permettre au titre/intro de prendre toute la largeur */
}

/* Styles pour le titre et l'intro centrés - Réintroduit */
.contact-title-centered,
.contact-intro-centered {
  flex-basis: 100%; /* Prend toute la largeur disponible */
  text-align: center;
  margin-bottom: 1.5rem; /* Espace avant le contenu principal (form/details) */
}

.contact-title-centered {
  margin-top: 0; /* Ajustez si besoin */
}
/* Fin des styles pour titre/intro */

.form-container { /* Ce conteneur existe dans contact.html et enveloppe votre <form> */
  flex: 2; 
  min-width: 300px;
}

.contact-details { /* Carte pour les détails de contact */
  flex: 1;
  background-color: #f8f9fa; /* Fond légèrement gris pour la carte */
  padding: 2rem; /* Padding interne */
  border-radius: 8px; /* Coins arrondis */
  box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* Ombre discrète */
  min-width: 280px; /* Largeur minimale pour éviter qu'il soit trop écrasé */
  margin-top: 2rem; /* Ajouté pour décaler ce bloc vers le bas */
}

.contact-details h3 {
  font-size: 1.5rem;
  color: #3A3A3A;
  margin-bottom: 1.5rem;
}

.contact-details p {
  margin-bottom: 1rem;
  line-height: 1.6;
  color: #555;
}

.contact-details p strong {
  color: #3A3A3A;
}

.contact-link {
  color: var(--accent-color);
  text-decoration: none;
  font-weight: bold;
}

.contact-link:hover {
  text-decoration: underline;
}

.contact-details h4 {
  font-size: 1.1rem;
  color: #3A3A3A;
  margin-top: 2rem;
  margin-bottom: 0.8rem;
}

.social-links a {
  display: inline-block;
  margin: 0 1px; /* Marge minimale pour un léger espacement */
  padding: 0.5rem 0.8rem;
  border: none !important;
  outline: none !important;
  text-decoration: none !important;
  color: #555;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.social-links a:hover {
  background-color: var(--accent-color);
  color: #fff;
  border-color: var(--accent-color);
}

.social-links a:hover,
.social-links a:focus {
  border: none !important;
  outline: none !important;
  background-color: transparent !important;
}

.social-links a img {
  border: none !important;
  outline: none !important;
  vertical-align: middle;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: #444;
  font-weight: bold;
  font-size: 0.9rem;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1rem;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px rgba(200, 185, 126, 0.2);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.form-submit-button {
  background-color: var(--accent-color);
  font-weight: bold; /* modifié */
  color: var(--background-color);
  padding: 12px 28px;
  border: none;
  border-radius: 5px;
  text-decoration: none;
  font-family: var(--primary-font);
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.2s ease;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  width: auto;
  font-size: 1rem;
  cursor: pointer;
}

/* Responsive pour la page contact */
@media (max-width: 992px) { 
  .contact-container {
    flex-direction: column; 
    align-items: stretch; 
    gap: 2rem; 
  }

  .form-container,
  .contact-details {
    width: 100%; 
    flex-basis: auto; 
  }
}

/* === STYLES POUR LA SECTION RÉALISATIONS (VIDEOS.HTML) === */
.realisations-section h2 {
  margin-bottom: 0.5rem;
}

/* Styles pour la navigation par onglets */
.tabs-navigation {
  display: flex;
  justify-content: center;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid #eee;
}

.tab-link {
  padding: 1rem 1.5rem;
  cursor: pointer;
  border: none;
  background-color: transparent;
  font-size: 1.1rem;
  font-weight: bold;
  color: #777;
  position: relative;
  transition: color 0.3s ease;
  margin-bottom: -1px;
}

.tab-link:hover {
  color: #333;
}

.tab-link.active {
  color: var(--accent-color);
  border-bottom: none;
  text-decoration: none;
}

.tab-content {
  display: none;
  animation: fadeInTab 0.5s ease-in-out;
}

.tab-content.active {
  display: block;
}

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

.tab-content h3 {
  font-size: 1.8rem;
  color: #3A3A3A;
  margin-bottom: 0.8rem;
  text-align: left;
}

.tab-content > p {
  font-size: 1rem;
  color: #666;
  margin-bottom: 2.5rem;
  max-width: 800px;
}

/* Styles pour la grille de photos */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.photo-item {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.photo-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.07);
}

.photo-thumbnail-link {
  display: block;
  position: relative;
  overflow: hidden;
}

.photo-thumbnail {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.photo-thumbnail-link:hover .photo-thumbnail {
  transform: scale(1.05);
}

.photo-item h4 {
  font-size: 1.1rem;
  font-weight: bold;
  padding: 1rem 1.25rem;
  margin: 0;
  color: #4A4A4A;
  text-align: center;
  background-color: #fdfcfb;
}

/* Styles pour la Lightbox Photo (complémentaires à .lightbox général) */
.photo-lightbox-content img {
  max-width: 90vw;
  max-height: 80vh;
  display: block;
  margin: 0 auto;
  border-radius: 4px;
}

.lightbox-caption {
  text-align: center;
  color: #eee;
  margin-top: 1rem;
  font-size: 0.9rem;
  padding: 0 1rem;
}

/* Styles pour le placeholder de la visite virtuelle */
.virtual-tour-placeholder {
  background-color: #fff;
  padding: 2.5rem;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 8px 25px rgba(0,0,0,0.05);
}

.virtual-tour-placeholder img {
  width: 100%;
  max-width: 500px;
  margin: 0 auto 1.5rem auto;
  display: block;
  border-radius: 8px;
  border: 1px solid #eee;
}

.virtual-tour-placeholder p {
  color: #555;
  line-height: 1.7;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
}

.virtual-tour-placeholder p strong {
  color: #3A3A3A;
}

.virtual-tour-placeholder .cta-button {
  margin-top: 1.5rem;
}

.cta-final-section {
  text-align: center;
  padding: 3rem 1rem; /* Ajout de padding pour l'espacement */
  background-color: #f9f9f9; /* Léger fond pour la distinguer si besoin */
}

.cta-final-section h2 {
  margin-bottom: 1rem;
}

.cta-final-section p {
  margin-bottom: 2rem;
  font-size: 1.1rem;
  color: #555;
}

/* ==========================================================================
   Tarifs Page Styles
   ========================================================================== */

.page-header {
  background-color: var(--color-dark-gray); /* Ou une autre couleur sobre */
  color: var(--color-white);
  padding: 3rem 20px;
  text-align: center;
  margin-bottom: 3rem;
}

.page-header h1 {
  font-size: 2.8rem;
  margin-bottom: 0.5rem;
  color: var(--color-white);
}

.page-header p {
  font-size: 1.1rem;
  color: var(--color-light-gray); /* Un gris plus clair pour le sous-titre */
  max-width: 600px;
  margin: 0 auto;
}

.tarifs-page .content {
  padding-top: 1rem; /* Ajuster si le header de page est suffisant */
}

.tarifs-section {
  margin-bottom: 4rem;
  padding: 0 20px;
}

.tarifs-section h2 {
  text-align: center;
  font-size: 2.2rem;
  margin-bottom: 1rem;
  color: var(--color-primary);
}

.tarifs-section .section-description {
  text-align: center;
  font-size: 1.1rem;
  color: var(--color-text-muted);
  margin-bottom: 2.5rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Packs Immobiliers */


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


.pack-card .pack-prices th,
.pack-card .pack-prices td {
  text-align: left;
  padding: 0.6rem 0.4rem;
  border-bottom: 1px solid var(--color-light-gray);
  font-size: 0.9rem;
}

.pack-card .pack-prices th {
  color: var(--color-primary);
  font-weight: 600;
}

.pack-card .pack-prices td:last-child {
  text-align: right;
  font-weight: 600;
  color: var(--color-text);
}

.pack-card .pack-prices tr:last-child td {
  border-bottom: none;
}

.pack-card h4 {
  font-size: 1.1rem;
  color: var(--color-primary);
  margin-top: 1rem;
  margin-bottom: 0.8rem;
}



.pack-card .note {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: auto; /* Pousse la note vers le bas si la carte est flex column */
  padding-top: 1rem;
}

/* -------------------------------------------------------------------------- */
/* Styles pour le Tableau Comparatif des Packs Immobiliers                    */
/* -------------------------------------------------------------------------- */

.comparison-table-container {
  overflow-x: auto; /* Permet le scroll horizontal sur petits écrans */
  margin-top: 2rem;
  margin-bottom: 3rem;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px; /* Empêche le tableau d'être trop écrasé avant le scroll */
}

.comparison-table th,
.comparison-table td {
  padding: 1rem 0.75rem; /* Augmentation du padding vertical */
  text-align: left;
  border-bottom: 1px solid #eee;
  vertical-align: middle; /* Aligner le contenu verticalement au centre */
}

.comparison-table thead th {
  background-color: #f8f9fa;
  font-weight: 600;
  color: #333;
  border-top-left-radius: 8px; /* Pour le premier th */
  border-top-right-radius: 8px; /* Pour le dernier th */
  text-align: center;
  padding: 1.2rem 0.75rem;
  position: sticky; /* Utile si le tableau devient très long verticalement */
  top: 0;
  z-index: 10;
}

.comparison-table thead th:first-child {
  text-align: left;
  border-top-left-radius: 8px;
  border-top-right-radius: 0;
}
.comparison-table thead th:last-child {
  border-top-right-radius: 8px;
  border-top-left-radius: 0;
}


.comparison-table th h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.3rem; /* Taille des titres des packs */
  color: var(--primary-color);
}

.pack-description-table {
  font-size: 0.85rem;
  color: #555;
  margin-bottom: 0;
  min-height: 50px; /* Assurer une hauteur minimale pour l'alignement */
}

.comparison-table tbody tr:last-child td {
  border-bottom: none;
}

.comparison-table tbody tr:hover {
  background-color: #f5f5f5;
}

.comparison-table tbody tr:hover .featured-column-cell {
  background-color: #fff7e0; /* Couleur de survol distincte pour la colonne Signature */
}

.comparison-table .feature-label {
  font-weight: 600;
  color: #444;
}

.comparison-table .feature-col-header {
  width: 25%; /* Donner plus d'espace à la colonne des caractéristiques */
  font-size: 1rem;
}

.comparison-table td:not(:first-child),
.comparison-table th:not(:first-child) {
  text-align: center;
}

.comparison-table .check-icon,
.comparison-table .cross-icon {
  font-size: 1.2rem;
}
.comparison-table .check-icon {
  color: #28a745; /* Vert */
}
.comparison-table .cross-icon {
  color: #dc3545; /* Rouge/Gris pour "non inclus" */
}

/* Colonne mise en avant (Signature) */
.comparison-table .featured-column {
  background-color: #fff9e6; /* Un fond légèrement différent */
  border-left: 2px solid var(--secondary-color);
  border-right: 2px solid var(--secondary-color);
  box-shadow: 0 0 15px rgba(255, 193, 7, 0.3) inset;
}

.comparison-table .featured-column-cell {
  background-color: #fffcf2; /* Fond encore plus subtil pour les cellules */
  font-weight: 600;
}

.popular-badge-table {
  display: inline-block;
  background-color: var(--secondary-color);
  /* color: white; */ /* Ancienne couleur */
  color: #333; /* Nouvelle couleur de texte plus foncée */
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem; 
  border-radius: 15px;
  margin-bottom: 0.5rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  /* Optionnel: ajouter un peu plus de padding si le texte est serré */
  /* padding: 0.35rem 0.8rem; */ 
}

.price-group-header td,
.services-group-header td {
  background-color: #e9ecef;
  font-weight: bold;
  color: #343a40;
  text-align: left !important;
  padding-left: 1rem;
}

.note-row td {
  font-size: 0.8rem;
  color: #6c757d;
  text-align: center !important;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  background-color: #f8f9fa;
}

/* Responsive pour le tableau */
@media (max-width: 768px) {
  .comparison-table thead th h3 {
    font-size: 1.1rem;
  }
  .pack-description-table {
    font-size: 0.8rem;
    min-height: 40px;
  }
  .comparison-table th,
  .comparison-table td {
    padding: 0.75rem 0.5rem;
  }
   .comparison-table .feature-col-header {
    font-size: 0.9rem;
  }
  .popular-badge-table {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
  }
}


/* Tables pour Prestations à la carte et Options */
.table-responsive-container {
  overflow-x: auto;
  margin-bottom: 2rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.pricing-table-detailed,
.pricing-table-options {
  width: 100%;
  min-width: 600px; /* Pour forcer le scroll si besoin sur petits écrans */
  border-collapse: collapse;
  background-color: var(--color-white);
}

.pricing-table-detailed th,
.pricing-table-detailed td,
.pricing-table-options th,
.pricing-table-options td {
  padding: 0.9rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-light-gray);
  font-size: 0.95rem;
}

.pricing-table-detailed thead th {
  background-color: var(--color-light-bg); /* Un fond léger pour l'en-tête */
  color: var(--color-primary);
  font-weight: 600;
  white-space: nowrap;
}

.pricing-table-options td:first-child {
  font-weight: 500;
}

.pricing-table-detailed td,
.pricing-table-options td {
  color: var(--color-text);
}

.pricing-table-detailed tr:last-child td,
.pricing-table-options tr:last-child td {
  border-bottom: none;
}

.pricing-table-detailed tr:hover td,
.pricing-table-options tr:hover td {
  background-color: var(--color-lighter-bg); /* Effet de survol léger */
}

/* CTA Section - reprise du style existant si besoin */
.cta-final-section {
  background-color: var(--color-dark-gray);
  color: var(--color-white);
  padding: 3rem 20px;
  text-align: center;
  margin-top: 3rem;
}

.cta-final-section h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--color-white);
}

.cta-final-section p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  color: var(--color-light-gray);
}

.cta-final-section .btn-scroll {
  display: inline-block;
  text-decoration: none;
  padding: 0.9rem 1.5rem; /* Ajustement padding horizontal si largeur fixe */
  border: 1px solid #C8B97E;
  border-radius: 50px;
  background-color: #C8B97E;
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(200, 185, 126, 0.3);
  width: 220px; /* Largeur fixe pour uniformiser */
  text-align: center; /* Centre le texte à l'intérieur du bouton */
  align-self: center; /* Assure le centrage du bouton lui-même dans le conteneur flex */
}

.cta-final-section .btn-scroll:hover {
  background-color: #b8a66e;
  border-color: #b8a66e;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(184, 166, 110, 0.4);
}






/* Responsive adjustments */
@media (max-width: 992px) {
  .pack-card {
    max-width: 350px; /* Permet 2 cartes par ligne sur tablettes moyennes */
  }
}

@media (max-width: 768px) {
  .page-header h1 {
    font-size: 2.2rem;
  }
  .tarifs-section h2 {
    font-size: 1.8rem;
  }
  .packs-container {
    flex-direction: column; 
    align-items: center; 
  }
  .pack-card {
    flex-basis: auto; 
    width: 100%; 
    max-width: 450px; 
    margin-bottom: 2rem; 
  }
  .featured-pack {
    transform: scale(1); /* Pas de zoom sur mobile */
  }
}

@media (max-width: 480px) {
  .page-header {
    padding: 2rem 15px;
  }
  .page-header h1 {
    font-size: 1.8rem;
  }
  .page-header p {
    font-size: 1rem;
  }
  .tarifs-section {
    padding: 0 15px;
  }
  .tarifs-section h2 {
    font-size: 1.6rem;
  }
  .tarifs-section .section-description {
    font-size: 0.95rem;
  }
  .pack-card {
    padding: 1.5rem;
  }
  .pricing-table-detailed th,
  .pricing-table-detailed td,
  .pricing-table-options th,
  .pricing-table-options td {
    padding: 0.7rem 0.8rem;
    font-size: 0.9rem;
  }
}

/* --- Styles pour les témoignages --- */

.view-tarifs-prompt {
  padding: 50px 20px; /* Ajustez le padding selon vos besoins */
  text-align: center;
  background-color: #f9f9f9; /* Optionnel: une couleur de fond légère pour la distinguer */
}

.view-tarifs-prompt h2 {
  margin-bottom: 20px;
}

.view-tarifs-prompt p {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
  font-size: 1.1rem; /* Taille de police légèrement augmentée pour la lisibilité */
  line-height: 1.6;
}

/* === Section CTA Final === */
.cta-final-section {
}