* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }

  body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      overflow-x: hidden;
      background: #fff;
      /* color: #fff; */
  }

  .default-color {
      color: #fff
  }

  /* Navigation */
  nav {
      position: fixed;
      top: 0;
      width: 100%;
      padding: 20px 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 1000;
      transition: all 0.4s ease;
  }

  nav.scrolled {
      background: rgba(107, 211, 157, 0.419);
      backdrop-filter: blur(10px);
      padding: 15px 50px;
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
  }

  .logo {
      font-size: 28px;
      font-weight: 700;
      letter-spacing: 2px;
      color: #fff;
  }

  .nav-links {
      display: flex;
      gap: 40px;
      list-style: none;
  }

  .nav-links>li {
      position: relative;
  }

  .nav-links>li>a {
      display: flex;
      /* Ajouté pour aligner le chevron à droite */
      justify-content: space-between;
      align-items: center;
      padding: 15px 15px;
      /* border-bottom: 1px solid rgba(255, 255, 255, 0.15); */
      /* font-weight: 500; */
  }

  .nav-links a {
      color: #fff;
      text-decoration: none;
      font-size: 14px;
      letter-spacing: 1px;
      transition: color 0.3s;
      text-transform: uppercase;
      display: block;
      padding: 10px 0;
  }

  .nav-links a:hover {
      color: rgba(107, 211, 157, 0.807);
  }

  /* Dropdown Menu */
  .dropdown {
      position: relative;
  }

  .dropdown-toggle {
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
  }

  .dropdown-toggle::after {
      content: '▼';
      font-size: 10px;
      transition: transform 0.3s ease;
  }

  .dropdown:hover .dropdown-toggle::after {
      transform: rotate(180deg);
  }

  .dropdown-menu {
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(10, 10, 10, 0.98);
      backdrop-filter: blur(20px);
      min-width: 250px;
      padding: 20px 0;
      border: 1px solid rgba(107, 211, 157, 0.494);
      opacity: 0;
      visibility: hidden;
      transform: translateX(-50%) translateY(20px);
      transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  }

  .dropdown:hover .dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
  }

  .dropdown-menu li {
      list-style: none;
  }

  .dropdown-menu a {
      padding: 12px 30px;
      color: rgba(255, 255, 255, 0.8);
      font-size: 13px;
      transition: all 0.3s ease;
      border-left: 3px solid transparent;
  }

  .dropdown-menu a:hover {
      color: rgba(107, 211, 157, 0.807);
      background: rgba(201, 166, 92, 0.05);
      border-left-color: rgba(107, 211, 157, 0.894);
      padding-left: 35px;
  }

  /* Mobile Menu Toggle */
  .menu-toggle {
      display: none;
      flex-direction: column;
      gap: 6px;
      cursor: pointer;
      z-index: 1001;
  }

  .menu-toggle span {
      width: 30px;
      height: 2px;
      background: #fff;
      transition: all 0.3s ease;
  }

  .menu-toggle.active span:nth-child(1) {
      transform: rotate(45deg) translate(8px, 8px);
  }

  .menu-toggle.active span:nth-child(2) {
      opacity: 0;
  }

  .menu-toggle.active span:nth-child(3) {
      transform: rotate(-45deg) translate(7px, -7px);
  }

  /* Mobile Menu Overlay */
  .menu-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background: rgba(0, 0, 0, 0.8);
      opacity: 0;
      visibility: hidden;
      transition: all 0.4s ease;
      z-index: 998;
  }

  .menu-overlay.active {
      opacity: 1;
      visibility: visible;
  }

  /* Hero Slider */
  .hero-slider {
      position: relative;
      height: 60vh;
      overflow: hidden;
  }

  .slide {
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 1.5s ease-in-out;
  }

  .slide.active {
      opacity: 1;
  }

  .slide-bg {
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      transform: scale(1.1);
      animation: zoomIn 20s ease-out forwards;
  }

  @keyframes zoomIn {
      to {
          transform: scale(1);
      }
  }

  .slide.active .slide-bg {
      animation: zoomIn 20s ease-out forwards;
  }

  .hero-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6));
  }

  .hero-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      z-index: 2;
      width: 90%;
      max-width: 1200px;
  }

  .hero-content h1 {
      font-size: 72px;
      font-weight: 300;
      margin-bottom: 20px;
      letter-spacing: 3px;
      opacity: 0;
      transform: translateY(30px);
      animation: fadeInUp 1s ease forwards 0.3s;
  }

  .hero-content .subtitle {
      font-size: 24px;
      color: rgba(107, 211, 157, 0.872);
      margin-bottom: 10px;
      opacity: 0;
      transform: translateY(30px);
      animation: fadeInUp 1s ease forwards 0.5s;
  }

  .hero-content .location {
      font-size: 18px;
      color: rgba(255, 255, 255, 0.8);
      opacity: 0;
      transform: translateY(30px);
      animation: fadeInUp 1s ease forwards 0.7s;
  }

  @keyframes fadeInUp {
      to {
          opacity: 1;
          transform: translateY(0);
      }
  }

  /* Scroll Indicator */
  .scroll-indicator {
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 3;
  }

  .scroll-indicator::before {
      content: '';
      display: block;
      width: 2px;
      height: 60px;
      background: rgba(255, 255, 255, 0.5);
      margin: 0 auto 10px;
      animation: scrollDown 2s infinite;
  }

  @keyframes scrollDown {

      0%,
      100% {
          transform: translateY(0);
          opacity: 0;
      }

      50% {
          transform: translateY(15px);
          opacity: 1;
      }
  }

  /* About Section with Parallax */
  .about-section {
      position: relative;
      padding: 100px 50px;
      background: #0a0a0a;
      overflow: hidden;
  }

  .parallax-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><rect fill="%23111111" width="1000" height="1000"/><g fill="%23c9a65c" opacity="0.05"><circle cx="200" cy="200" r="100"/><circle cx="800" cy="600" r="150"/><circle cx="500" cy="800" r="80"/></g></svg>');
      background-size: cover;
      will-change: transform;
  }

  .content-wrapper {
      max-width: 1200px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
  }

  .about-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
  }

  .about-text h2 {
      font-size: 48px;
      margin-bottom: 30px;
      font-weight: 300;
      letter-spacing: 2px;
  }

  .about-text p {
      font-size: 18px;
      line-height: 1.8;
      color: rgba(255, 255, 255, 0.8);
      margin-bottom: 30px;
  }

  .cta-button {
      display: inline-block;
      padding: 15px 40px;
      background: transparent;
      border: 2px solid rgba(107, 211, 157, 0.807);
      color: rgba(107, 211, 157, 0.807);
      text-decoration: none;
      letter-spacing: 2px;
      transition: all 0.3s ease;
      text-transform: uppercase;
      font-size: 14px;
  }

  .cta-button:hover {
      background: rgba(107, 211, 157, 0.324);
      color: #f8f8f8;
  }

  /* Stats Section */
  .stats-section {
      padding: 100px 50px;
      background: #111;
  }

  .stats-grid {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 50px;
      text-align: center;
  }

  .stat-item {
      padding: 40px;
      background: rgba(201, 166, 92, 0.05);
      border: 1px solid rgba(107, 211, 157, 0.324);
      transition: transform 0.3s ease;
  }

  .stat-item:hover {
      transform: translateY(-10px);
  }

  .stat-number {
      font-size: 56px;
      font-weight: 700;
      color: rgba(107, 211, 157, 0.971);
      margin-bottom: 10px;
  }

  .stat-label {
      font-size: 16px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.7);
  }

  /* Portfolio Section */
  .portfolio-section {
      padding: 150px 50px;
      background: #0a0a0a;
  }

  .section-title {
      text-align: center;
      font-size: 48px;
      font-weight: 300;
      letter-spacing: 2px;
      margin-bottom: 80px;
  }

  .portfolio-grid {
      max-width: 1400px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
      gap: 30px;
  }

  .portfolio-item {
      position: relative;
      height: 500px;
      overflow: hidden;
      cursor: pointer;
  }

  .portfolio-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s ease;
  }

  .portfolio-item:hover img {
      transform: scale(1.1);
  }

  .portfolio-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 40px;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
      transform: translateY(100%);
      transition: transform 0.4s ease;
  }

  .portfolio-item:hover .portfolio-overlay {
      transform: translateY(0);
  }

  .portfolio-overlay h3 {
      font-size: 28px;
      margin-bottom: 10px;
      font-weight: 400;
  }

  .portfolio-overlay p {
      color: rgba(107, 211, 157, 0.324);
      letter-spacing: 1px;
  }

  /* --- Classes d'Animation au Scroll --- */
  .reveal {
      opacity: 0;
      transform: translateY(50px);
      transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition-delay: 0.1s;
  }

  .reveal-left {
      opacity: 0;
      transform: translateX(-50px);
      transition: all 0.8s ease-out;
  }

  .reveal-right {
      opacity: 0;
      transform: translateX(50px);
      transition: all 0.8s ease-out;
  }

  /* État actif quand l'élément est visible */
  .reveal.active,
  .reveal-left.active,
  .reveal-right.active {
      opacity: 1;
      transform: translate(0, 0);
  }

  /* Optionnel : Délai pour les éléments en grille (Portfolio) */
  .portfolio-item:nth-child(2) {
      transition-delay: 0.2s;
  }

  .portfolio-item:nth-child(3) {
      transition-delay: 0.3s;
  }


  /* Services Section */
  .services-section {
      padding: 100px 50px;
      background: #111;
      /* Fond légèrement plus clair que le noir pur */
  }

  .services-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 30px;
      margin-top: 50px;
  }

  .service-card {
      padding: 40px;
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(107, 211, 157, 0.1);
      transition: all 0.4s ease;
      text-align: center;
  }

  .service-card:hover {
      background: rgba(107, 211, 157, 0.05);
      border-color: rgba(107, 211, 157, 0.5);
      transform: translateY(-10px);
  }

  .service-icon {
      width: 60px;
      height: 60px;
      margin: 0 auto 25px;
      color: rgba(107, 211, 157, 0.8);
  }

  .service-card h3 {
      font-size: 20px;
      margin-bottom: 15px;
      font-weight: 400;
      letter-spacing: 1px;
      color: #fff;
  }

  .service-card p {
      font-size: 15px;
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.6);
  }

  /* Adaptation Mobile */
  @media (max-width: 768px) {
      .services-section {
          padding: 60px 20px;
      }
  }


  /* Styles inspirés de HanoverCo.com */
  .hanover-services {
      padding: 120px 0;
      background-color: #0a0a0a;
      color: #ffffff;
      font-family: 'Inter', sans-serif;
  }

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

  /* Header */
  .section-header {
      margin-bottom: 60px;
      max-width: 700px;
  }

  .subtitle {
      color: #6bd39d;
      /* Votre vert émeraude */
      text-transform: uppercase;
      letter-spacing: 3px;
      font-size: 13px;
      font-weight: 700;
      display: block;
      margin-bottom: 15px;
  }

  .main-title {
      font-size: 42px;
      font-weight: 300;
      margin-bottom: 25px;
  }

  .description {
      color: rgba(255, 255, 255, 0.6);
      line-height: 1.8;
      font-size: 17px;
  }

  /* Grid & Cards */
  .capabilities-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
      gap: 20px;
      margin-bottom: 80px;
  }

  .cap-card {
      height: 450px;
      background-size: cover;
      background-position: center;
      position: relative;
      display: flex;
      align-items: flex-end;
      padding: 40px;
      overflow: hidden;
      transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  .cap-card:hover {
      transform: scale(1.02);
  }

  .cap-content {
      position: relative;
      z-index: 2;
  }

  .cap-card h3 {
      font-size: 24px;
      margin-bottom: 15px;
      font-weight: 400;
  }

  .cap-card p {
      color: rgba(255, 255, 255, 0.8);
      margin-bottom: 20px;
      font-size: 15px;
      max-width: 280px;
  }

  .cap-link {
      color: #6bd39d;
      text-decoration: none;
      font-weight: 600;
      font-size: 14px;
      transition: letter-spacing 0.3s;
  }

  .cap-link:hover {
      letter-spacing: 2px;
  }

  /* Stats Bar */
  .stats-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      padding-top: 60px;
      text-align: center;
  }

  .stat-item {
      flex: 1;
  }

  .stat-number {
      display: block;
      font-size: 48px;
      font-weight: 200;
      color: #ffffff;
      margin-bottom: 10px;
  }

  .stat-label {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: rgba(255, 255, 255, 0.5);
  }

  .stat-divider {
      width: 1px;
      height: 60px;
      background: rgba(255, 255, 255, 0.1);
  }

  .featured-projects {
      padding: 100px 0;
      background: #0a0a0a;
      overflow: hidden;
  }

  .projects-content-wrapper {
      display: flex;
      align-items: flex-start;
      gap: 40px;
      padding-left: 50px;
      /* Aligné avec le reste du site */
  }

  .projects-text {
      flex: 0 0 300px;
      /* Largeur fixe pour le texte à gauche */
      padding-top: 20px;
  }

  /* Fenêtre d'affichage du carrousel */
  .projects-carousel-window {
      flex: 1;
      overflow: hidden;
      padding-bottom: 30px;
  }

  .carousel-track {
      display: flex;
      gap: 20px;
      transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  }

  /* Chaque carte occupe 1/3 de la largeur visible moins les gaps */
  .project-card {
      flex: 0 0 calc(33.333% - 20px);
      background: #111;
      border-radius: 4px;
      transition: transform 0.4s ease;
  }

  .project-img-box {
      width: 100%;
      height: 350px;
      overflow: hidden;
  }

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

  .project-card:hover img {
      transform: scale(1.1);
  }

  .project-info {
      padding: 20px;
  }

  .project-info h3 {
      font-size: 18px;
      font-weight: 400;
      margin-bottom: 5px;
      color: #fff;
  }

  .project-info p {
      color: #6bd39d;
      font-size: 14px;
      letter-spacing: 1px;
  }

  /* Boutons */
  .carousel-navigation {
      display: flex;
      gap: 10px;
      margin-top: 30px;
  }

  .control-btn {
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: white;
      width: 45px;
      height: 45px;
      cursor: pointer;
      transition: 0.3s;
  }

  .control-btn:hover {
      background: #6bd39d;
      color: #000;
      border-color: #6bd39d;
  }

  /* Responsive */
  @media (max-width: 1024px) {
      .project-card {
          flex: 0 0 calc(50% - 20px);
      }

      /* 2 par 2 sur tablette */
      .projects-content-wrapper {
          flex-direction: column;
          padding-left: 20px;
      }
  }

  @media (max-width: 600px) {
      .project-card {
          flex: 0 0 85%;
      }

      /* 1 seul projet visible à 85% sur mobile */
  }

  @media (max-width: 768px) {
      .main-title {
          font-size: 32px;
      }

      .stats-bar {
          flex-direction: column;
          gap: 40px;
      }

      .stat-divider {
          display: none;
      }

      .capabilities-grid {
          grid-template-columns: 1fr;
      }
  }

  /* Utilisation de variables CSS pour des couleurs communes */
  :root {
      --primary-green: rgba(107, 211, 157, 0.807);
      --dark-bg: #0a0a0a;
      --medium-dark-bg: #111;
      --light-text: #ffffff;
      --faded-text: rgba(255, 255, 255, 0.6);
  }

  .land-development {
      padding: 100px 0;
      background: var(--medium-dark-bg);
      /* Un fond légèrement différent pour varier */
      overflow: hidden;
      color: var(--light-text);
  }

  .land-container {
      max-width: 1400px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      gap: 80px;
      padding: 0 50px;
  }

  /* Texte à gauche (réutilise les styles de projects-text) */
  .land-text {
      flex: 0 0 350px;
      /* Un peu plus large pour le texte foncier */
      padding-top: 20px;
  }

  .land-text .subtitle {
      color: var(--primary-green);
  }

  .land-text .main-title {
      font-size: 42px;
      font-weight: 300;
      margin-bottom: 25px;
  }

  .land-text .description {
      color: var(--faded-text);
      line-height: 1.8;
      font-size: 17px;
  }

  .land-details {
      margin: 30px 0;
      border-top: 1px solid rgba(107, 211, 157, 0.2);
      padding-top: 20px;
  }

  .land-details .detail-item {
      margin-bottom: 10px;
      font-size: 15px;
      color: var(--faded-text);
  }

  .land-details .detail-item strong {
      color: var(--primary-green);
  }

  .land-text .cta-button {
      display: inline-block;
      padding: 15px 40px;
      background: transparent;
      border: 2px solid var(--primary-green);
      color: var(--primary-green);
      text-decoration: none;
      letter-spacing: 2px;
      transition: all 0.3s ease;
      text-transform: uppercase;
      font-size: 14px;
  }

  .land-text .cta-button:hover {
      background: rgba(107, 211, 157, 0.324);
      color: var(--light-text);
  }


  /* Carrousel à droite */
  .land-carousel-wrapper {
      flex: 1.5;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      /* Boutons à droite */
  }

  .land-carousel-window {
      width: 100%;
      overflow: hidden;
      border-radius: 4px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  }

  .land-carousel-track {
      display: flex;
      gap: 20px;
      transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  }

  .land-card {
      flex: 0 0 calc(33.333% - 20px);
      /* Affiche 3 cartes par défaut */
      background: var(--dark-bg);
      border-radius: 4px;
      overflow: hidden;
      transition: transform 0.4s ease;
  }

  .land-img-box {
      width: 100%;
      height: 300px;
      /* Hauteur des images du lotissement */
      overflow: hidden;
  }

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

  .land-card:hover img {
      transform: scale(1.1);
  }

  .land-info {
      padding: 20px;
  }

  .land-info h3 {
      font-size: 18px;
      font-weight: 400;
      margin-bottom: 5px;
      color: var(--light-text);
  }

  .land-info p {
      color: var(--primary-green);
      font-size: 14px;
      letter-spacing: 1px;
  }

  .carousel-navigation.land-nav {
      display: flex;
      gap: 10px;
      margin-top: 30px;
      /* justify-content: flex-end; */
      /* Si les boutons sont dans projects-carousel-wrapper */
  }

  /* Responsive */
  @media (max-width: 1200px) {
      .land-card {
          flex: 0 0 calc(50% - 20px);
      }

      /* 2 par 2 sur tablette */
      .land-container {
          flex-direction: column;
          padding: 0 20px;
      }

      .land-text {
          text-align: center;
          max-width: 100%;
          flex: auto;
      }

      .land-carousel-wrapper {
          align-items: center;
          width: 100%;
      }
  }

  @media (max-width: 768px) {
      .land-card {
          flex: 0 0 90%;
      }

      /* 1 seul projet visible à 90% sur mobile */
      .land-text .main-title {
          font-size: 32px;
      }

      .land-container {
          gap: 40px;
      }
  }

  /* Footer */
  footer {
      padding: 80px 50px 40px;
      background: #000;
      text-align: center;
  }

  footer .logo {
      margin-bottom: 30px;
  }

  .footer-links {
      display: flex;
      justify-content: center;
      gap: 40px;
      margin-bottom: 30px;
      flex-wrap: wrap;
  }

  .footer-links a {
      color: rgba(255, 255, 255, 0.6);
      text-decoration: none;
      transition: color 0.3s;
  }

  .footer-links a:hover {
      color: rgba(107, 211, 157, 0.324);
  }

  .copyright {
      color: rgba(255, 255, 255, 0.4);
      font-size: 14px;
      margin-top: 30px;
  }

  /* Responsive */
  @media (max-width: 968px) {
      .menu-toggle {
          display: flex;
      }

      .nav-links {
          position: fixed;
          top: 0;
          right: -100%;
          height: 200vh;
          width: 320px;
          background: #0a0a0a;
          backdrop-filter: blur(20px);
          flex-direction: column;
          padding: 100px 0 30px;
          gap: 0;
          transition: right 0.4s ease;
          border-left: 1px solid rgba(201, 166, 92, 0.3);
          overflow-y: auto;
          z-index: 999;
      }

      .nav-links.active {
          right: 0;
      }

      .nav-links>li {
          width: 100%;
      }

      .nav-links>li>a {
          padding: 18px 30px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.15);
          font-weight: 500;
      }

      .dropdown-toggle {
          justify-content: space-between;
          width: 100%;
      }

      .dropdown-toggle::after {
          transition: transform 0.3s ease;
          font-size: 12px;
      }

      .dropdown.active .dropdown-toggle::after {
          transform: rotate(180deg);
      }

      .dropdown-menu {
          position: static;
          top: 0 !important;
          left: 0 !important;
          transform: none !important;
          opacity: 1;
          visibility: visible;
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.4s ease;
          background: #000000;
          border: none;
          padding: 0;
          box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);


      }

      .dropdown.active .dropdown-menu {

          max-height: 500px;
          padding: 15px 0;
          border-top: 2px solid rgba(107, 211, 157, 0.324);
          border-bottom: 2px solid rgba(107, 211, 157, 0.324);
      }

      .dropdown-menu a {
          padding: 16px 30px 16px 50px;
          font-size: 14px;
          border-left: 3px solid transparent;
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
          color: #ffffff;
          font-weight: 400;
          background: #1a1a1a;
      }

      .dropdown-menu a:hover {
          padding-left: 55px;
          background: rgba(107, 211, 157, 0.324);
          border-left-color: #ffffff;
          color: #0a0a0a;
      }

      .dropdown-menu li:last-child a {
          border-bottom: none;
      }
  }

  @media (max-width: 768px) {
      .hero-content h1 {
          font-size: 42px;
      }

      .about-content {
          grid-template-columns: 1fr;
          gap: 40px;
      }

      .stats-grid {
          grid-template-columns: 1fr;
      }

      .portfolio-grid {
          grid-template-columns: 1fr;
      }

      nav {
          padding: 15px 20px;
      }
  }


  .modal-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.9);
      z-index: 2000;
      backdrop-filter: blur(5px);
  }

  .modal-content {
      position: relative;
      width: 90%;
      max-width: 1200px;
      height: 80vh;
      margin: 5vh auto;
      background: #111;
      border: 1px solid rgba(107, 211, 157, 0.3);
      border-radius: 8px;
      overflow: hidden;
  }

  .modal-body {
      display: flex;
      height: 100%;
  }

  /* Sidebar Gauche */
  .modal-sidebar {
      width: 350px;
      background: #1a1a1a;
      padding: 30px;
      border-right: 1px solid #333;
      display: flex;
      flex-direction: column;
  }

  .close-modal {
      margin-left: 10px;
      cursor: pointer
  }

  .search-box input {
      width: 100%;
      padding: 12px;
      background: #0a0a0a;
      border: 1px solid #444;
      color: white;
      margin: 20px 0;
      border-radius: 4px;
  }

  .lot-list {
      list-style: none;
      overflow-y: auto;
      flex-grow: 1;
  }

  .lot-list li {
      padding: 15px;
      border-bottom: 1px solid #333;
      cursor: pointer;
      transition: 0.3s;
      font-size: 14px;
      display: flex;
      justify-content: space-between;
  }

  .lot-list li:hover {
      background: #222;
      color: #6bd39d;
  }

  .status {
      font-size: 10px;
      text-transform: uppercase;
      padding: 2px 6px;
      border-radius: 3px;
  }

  .disponible {
      background: rgba(107, 211, 157, 0.2);
      color: #6bd39d;
  }

  .vendu {
      background: rgba(255, 0, 0, 0.2);
      color: #ff4d4d;
  }

  /* Viewer Droite */
  .modal-viewer {
      flex: 1;
      position: relative;
      background: #000;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
  }

  .image-zoom-container {
      transition: transform 0.3s ease;
      cursor: grab;
  }

  .image-zoom-container img {
      max-width: 100%;
      display: block;
  }

  .viewer-controls {
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 10;
      display: flex;
      gap: 10px;
  }

  .viewer-controls button,
  .download-btn {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: white;
      padding: 10px 15px;
      cursor: pointer;
      text-decoration: none;
      font-size: 14px;
  }

  .viewer-controls button:hover {
      background: #6bd39d;
      color: black;
  }

  .modal-card {
      background: white;
      position: absolute;
      top: 50%;
      left: 50%;
      /* Le transform décale la modal de la moitié de sa propre taille */
      transform: translate(-50%, -50%);

      width: 90%;
      max-width: 1000px;
      animation: slideUp 0.3s ease-out;
  }

  @keyframes slideUp {
      from {
          /* On doit répéter le -50% horizontal pour ne pas perdre le centrage gauche */
          transform: translate(-50%, -40%);
          opacity: 0;
      }

      to {
          /* État final : parfaitement centré */
          transform: translate(-50%, -50%);
          opacity: 1;
      }
  }

  /* Header */
  .modal-header {
      padding: 15px;
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;
  }

  .header-titles h2 {
      margin: 0;
      font-size: 22px;
      color: #333;
  }

  .lot-badge {
      color: #10b981;
      font-weight: 600;
      font-size: 14px;
      margin-top: 5px;
  }

  .btn-close-circle {
      background: #f5f5f5;
      border: none;
      font-size: 24px;
      width: 20px;
      height: 20px;
      border-radius: 30%;
      cursor: pointer;
      color: #999;
  }

  /* Grid & Form */
  .modal-body_ {
      padding: 30px;
      overflow-y: auto;
      max-height: 70vh;
  }

  .modal-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
  }

  @media (max-width: 850px) {
      .modal-grid {
          grid-template-columns: 1fr;
      }
  }

  .input-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 15px;
  }

  .input-group {
      margin-bottom: 15px;
  }

  .input-group label {
      display: block;
      font-size: 12px;
      font-weight: 700;
      color: #666;
      text-transform: uppercase;
      margin-bottom: 6px;
  }

  .input-group input,
  .input-group textarea {
      width: 100%;
      padding: 10px 15px;
      border: 1px solid #ddd;
      border-radius: 8px;
      font-size: 14px;
      outline: none;
      transition: border 0.3s;
  }

  .input-group input:focus {
      border-color: #10b981;
  }

  /* Time Slots */
  .time-selection-box {
      background: #f9fdfb;
      padding: 20px;
      border-radius: 12px;
      border: 1px solid #e6f4ee;
      margin-top: 20px;
  }

  .section-mini-title {
      margin: 0 0 15px 0;
      font-size: 15px;
      color: #333;
  }

  .slots-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
  }


  /* Calendar */
  .calendar-section {
      background: #fcfcfc;
      padding: 20px;
      border-radius: 12px;
      border: 1px solid #f0f0f0;
  }

  .calendar-nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
  }

  .nav-btn {
      background: white;
      border: 1px solid #eee;
      padding: 5px 12px;
      border-radius: 6px;
      cursor: pointer;
  }

  .mode-toggles {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
  }

  .mode-btn {
      flex: 1;
      padding: 8px;
      border-radius: 6px;
      border: 1px solid #eee;
      background: #eee;
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
  }

  .mode-btn.active {
      background: white;
      border-color: #10b981;
      color: #10b981;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }

  .selection-banner {
      background: #10b981;
      color: white;
      padding: 10px;
      text-align: center;
      border-radius: 8px;
      margin-bottom: 15px;
      font-weight: 500;
      font-size: 14px;
  }

  .calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 4px;
      text-align: center;
  }

  .day-header {
      font-size: 10px;
      font-weight: 700;
      color: #bbb;
      padding-bottom: 5px;
  }

  .day-cell {
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      cursor: pointer;
      font-size: 13px;
  }

  .day-cell:hover:not(.disabled) {
      background: #e6f4ee;
      color: #10b981;
  }

  .day-cell.selected {
      background: #10b981;
      color: white;
      font-weight: 700;
      transform: scale(1.1);
  }

  .day-cell.today {
      border: 2px solid #10b981;
      color: #10b981;
  }

  .day-cell.disabled {
      opacity: 0.2;
      cursor: not-allowed;
  }

  .day-cell.is-full {
      color: #ef4444;
      background: #fef2f2;
  }

  /* Footer */
  .modal-footer {
      padding: 20px 30px;
      border-top: 1px solid #eee;
      display: flex;
      gap: 15px;
  }

  .btn-secondary {
      flex: 1;
      padding: 15px;
      border-radius: 10px;
      border: 1px solid #ddd;
      background: white;
      cursor: pointer;
      font-weight: 600;
  }

  .btn-primary {
      flex: 1;
      padding: 15px;
      border-radius: 10px;
      border: none;
      background: #10b981;
      color: white;
      cursor: pointer;
      font-weight: 700;
      transition: 0.3s;
  }

  .btn-primary:disabled {
      opacity: 0.4;
      cursor: not-allowed;
  }

  .btn-primary:hover:not(:disabled) {
      background: #059669;
  }


  /* Conteneur fixe */
  #toast-container {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 9999;
      display: flex;
      flex-direction: column;
      gap: 12px;
      pointer-events: none;
      /* Laisse passer les clics si pas de toast */
  }

  /* Carte du Toast */
  .toast-card {
      pointer-events: auto;
      /* Réactive les clics sur le toast lui-même */
      display: flex;
      align-items: center;
      width: 320px;
      padding: 16px;
      background: white;
      border-radius: 12px;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
      border-left: 4px solid #ddd;
      /* Par défaut */
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      transform: translateX(120%);
      /* Caché par défaut à droite */
  }

  /* États d'entrée/sortie (gérés par votre JS) */
  .toast-card.show {
      transform: translateX(0);
  }

  /* Icône et texte */
  .toast-icon-container {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 32px;
      height: 32px;
      border-radius: 8px;
  }

  .toast-text {
      margin-left: 12px;
      font-size: 14px;
      font-weight: 500;
      color: #4b5563;
      font-family: sans-serif;
  }

  /* Bouton fermer */
  .toast-close-btn {
      margin-left: auto;
      background: transparent;
      border: none;
      padding: 6px;
      cursor: pointer;
      color: #9ca3af;
      border-radius: 6px;
      display: flex;
  }

  .toast-close-btn:hover {
      background-color: #f3f4f6;
      color: #111827;
  }

  .toast-close-btn svg {
      width: 14px;
      height: 14px;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
  }

  /* Couleurs dynamiques (à appliquer via JS) */
  .toast-success {
      border-left-color: #10b981;
  }

  .toast-success .toast-icon-container {
      background-color: #ecfdf5;
      color: #10b981;
  }

  .toast-error {
      border-left-color: #ef4444;
  }

  .toast-error .toast-icon-container {
      background-color: #fef2f2;
      color: #ef4444;
  }

  .toast-info {
      border-left-color: #3b82f6;
  }

  .toast-info .toast-icon-container {
      background-color: #eff6ff;
      color: #3b82f6;
  }


  /* --- Overlay et Structure de base --- */
  .property-modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
  }

  .property-modal-overlay.hidden {
      display: none;
  }

  .property-modal-bg-close {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: -1;
  }

  .property-modal-container {
      /* width: 100%;
        max-width: 900px;
        background: white;
        border-radius: 16px;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        max-height: 90vh;
        overflow-y: auto;
        position: relative;
        animation: modalSlideUp 0.3s ease-out; */

      background: white;
      position: relative;

      overflow: hidden;
      border-radius: 16px;

      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      max-width: 900px;
      animation: slideUp 0.3s ease-out;

  }

  @keyframes modalSlideUp {
      from {
          transform: translateY(20px);
          opacity: 0;
      }

      to {
          transform: translateY(0);
          opacity: 1;
      }
  }


  /* --- Header --- */
  .property-modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 24px;
      border-bottom: 1px solid #eee;
  }

  .property-modal-header h5 {
      margin: 0;
      font-size: 20px;
      color: #1f2937;
  }

  .btn-close-modal {
      background: transparent;
      border: none;
      color: #9ca3af;
      cursor: pointer;
      font-size: 20px;
      transition: color 0.2s;
  }

  .btn-close-modal:hover {
      color: #4b5563;
  }

  /* --- Body & Layout --- */
  .property-modal-body {
      padding: 24px;
      overflow-y: auto;
      max-height: 90vh;
  }

  .info-grid-layout {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 24px;
      margin-top: 24px;
  }

  @media (max-width: 768px) {
      .info-grid-layout {
          grid-template-columns: 1fr;
      }
  }

  /* --- Carousel Area --- */
  .main-display-box {
      position: relative;
      height: 400px;
      background: #f3f4f6;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }

  .carousel-nav-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255, 255, 255, 0.3);
      border: none;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      color: #1f2937;
      cursor: pointer;
      z-index: 10;
      transition: background 0.2s;
  }

  .carousel-nav-btn:hover {
      background: rgba(255, 255, 255, 0.5);
  }

  .carousel-nav-btn.prev {
      left: 16px;
  }

  .carousel-nav-btn.next {
      right: 16px;
  }

  /* Container des miniatures */
  .thumbnail-flex {
      display: flex;
      justify-content: center;
      gap: 8px;
      /* Espace réduit entre les images */
      margin-top: 12px;
      overflow-x: auto;
      padding: 5px;
  }

  /* Style de chaque miniature réduit */
  .thumbnail-item {
      width: 60px;
      /* Largeur fixe plus petite */
      height: 45px;
      /* Hauteur proportionnelle */
      flex-shrink: 0;
      /* Empêche l'image de s'écraser */
      border-radius: 6px;
      /* Arrondis plus fins */
      overflow: hidden;
      cursor: pointer;
      border: 2px solid #e5e7eb;
      /* Bordure grise par défaut */
      transition: all 0.2s ease;
      background: #eee;
  }

  .thumbnail-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* Recadre l'image proprement */
      display: block;
  }

  /* Hover : on éclaircit un peu */
  .thumbnail-item:hover {
      border-color: #d1d5db;
      transform: translateY(-2px);
      /* Petit effet de levier */
  }

  /* État Actif : Bordure Indigo bien visible */
  .thumbnail-item.active {
      border-color: #059669;
      box-shadow: 0 0 0 1px #059669;
      /* Double bordure pour la précision */
      opacity: 1;
  }

  /* --- Content & Badge --- */
  .badge-type {
      display: inline-block;
      padding: 4px 16px;
      background: #059669;
      color: white;
      border-radius: 99px;
      font-size: 13px;
      font-weight: 600;
      margin-bottom: 12px;
  }

  #detailMainTitle {
      margin: 0 0 8px 0;
      color: #111827;
      font-size: 24px;
  }

  .location-text {
      color: #4b5563;
      display: flex;
      align-items: center;
      margin-bottom: 16px;
      font-size: 15px;
  }

  .location-text i {
      margin-right: 8px;
      color: #059669;
  }

  .section-subtitle {
      margin: 24px 0 8px 0;
      font-size: 18px;
      font-weight: 700;
      color: #111827;
  }

  .desc-text {
      color: #4b5563;
      font-size: 14px;
      line-height: 1.6;
  }

  /* --- Price Card Column --- */
  .price-specs-card {
      background: linear-gradient(135deg, #f5f3ff 0%, #f3f4f6 100%);
      padding: 24px;
      border-radius: 12px;
  }

  .main-price {
      font-size: 28px;
      font-weight: 800;
      color: #059669;
      margin: 0 0 16px 0;
  }

  .separator {
      border: 0;
      border-top: 1px solid #d1d5db;
      margin-bottom: 16px;
  }

  .specs-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
  }

  .spec-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
  }

  .spec-label {
      color: #4b5563;
      display: flex;
      align-items: center;
  }

  .spec-label i {
      margin-right: 8px;
      color: #4f46e5;
      width: 18px;
      text-align: center;
  }

  .spec-value {
      font-weight: 700;
      color: #111827;
  }

  /* Container interne du carousel */
  #carouselInner {
      position: relative;
      width: 100%;
      height: 100%;
  }

  /* Chaque slide individuelle */
  .carousel-slide-item {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      z-index: 0;
      transition: opacity 0.5s ease-in-out;
  }

  /* Image à l'intérieur de la slide */
  .carousel-slide-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  /* État actif de la slide */
  .carousel-slide-item.active {
      opacity: 1;
      z-index: 10;
  }

  .py-large {
      padding: 100px 0;
  }

  .pb-large {
      padding-bottom: 100px;
  }

  .text-emerald {
      color: #10b981;
  }


  .kicker-white {
      text-transform: uppercase;
      letter-spacing: 0.3em;
      color: var(--emerald);
      font-size: 0.85rem;
      margin-bottom: 20px;
      display: block;
  }

  .text-white {
      color: #fff;
  }