/* Section Hero */
.hero-section {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 5px 20px;
    text-align: center;
    color: #111111;
}

.hero-subtitle {
    font-size: clamp(0.875rem, 0.38vw + 0.8rem, 1.125rem);
    font-weight: 400;
    letter-spacing: 0.08em;
    font-family: 'Futura PT', system-ui, 'Helvetica Neue', sans-serif;
    line-height: 1.24;
    text-transform: uppercase;
    margin-bottom: 20px;
    text-align: left;
}

.hero-title {
    font-size: clamp(3.5rem, 2.63vw + 2.99rem, 5.25rem);
    font-weight: 400;
    letter-spacing: 0.01em;
    font-family: 'Tiempos Headline', 'Lucida', Georgia, serif;
    line-height: 1.08;
    margin-bottom: 20px;
}

.hero-description {
    font-size: clamp(1.125rem, 0.56vw + 1.02rem, 1.5rem);
    font-weight: 400;
    letter-spacing: -0.005em;
    font-family: 'Futura PT', system-ui, 'Helvetica Neue', sans-serif;
    line-height: 1.24;
    margin-bottom: 40px;
}

/* Styles pour le Carrousel */
.top-carousel {
    position: relative;
    width: 100%;
    height: 75vh; /* Occupe toute la hauteur de la fenêtre */
    overflow: hidden;
}

.carousel-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    height: 100%;
}

.carousel-slide {
    flex: 0 0 100%; /* Chaque slide occupe 100% de la largeur */
    height: 100%;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Flèches de navigation améliorées */
.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.7); /* Fond semi-transparent */
    color: #111111;
    border: none;
    font-size: 2rem;
    padding: 15px;
    cursor: pointer;
    z-index: 1000;
    border-radius: 50%; /* Forme circulaire */
    user-select: none;
    transition: background 0.3s, transform 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); /* Ombre subtile */
}

.carousel-control:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-50%) scale(1.1); /* Agrandissement au survol */
}

.carousel-control.prev {
    left: 20px;
}

.carousel-control.next {
    right: 20px;
}

/* Styles pour les icônes Font Awesome */
.carousel-control i {
    font-size: 2rem;
    color: #111111;
}

/* Styles pour les icônes SVG */
.carousel-icon {
    width: 32px;
    height: 32px;
    fill: #ffffff;
}

/* Ajustements pour les écrans plus petits */
@media (max-width: 768px) {
    .carousel-control {
        padding: 10px;
    }

    .carousel-control i,
    .carousel-icon {
        font-size: 1.5rem;
        width: 24px;
        height: 24px;
    }
}

@media (max-width: 480px) {
    .carousel-control {
        padding: 8px;
    }

    .carousel-control i,
    .carousel-icon {
        font-size: 1.2rem;
        width: 20px;
        height: 20px;
    }
}

/* Section À propos */
.about-section {
    padding: 100px 20px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: justify;
}

.section-content {
    display: flex;
    flex-wrap: nowrap; /* Empêche le retour à la ligne */
    align-items: center;
    gap: 40px;
    padding: 20px;
    flex-direction: row; /* Par défaut, les éléments sont en ligne */
}

.text-content {
    flex: 1;
    max-width: 600px;
}

.media-content {
    flex: 1;
    max-width: 600px;
}

.section-title {
    font-size: clamp(2.25rem, 1.74rem + 2.63vw, 4rem);
    font-weight: 400;
    letter-spacing: 0.01em;
    font-family: 'Tiempos Headline', Georgia, serif;
    line-height: 1.16;
    margin-bottom: 20px;
}

.section-description {
    font-size: clamp(1.125rem, 1.02rem + 0.56vw, 1.5rem);
    font-weight: 400;
    letter-spacing: -0.005em;
    font-family: 'Futura PT', system-ui, 'Helvetica Neue', sans-serif;
    line-height: 1.24;
    text-align: justify;
    margin-bottom: 10px; /* Add space after the first paragraph */
}
.section-description.additional {
    margin-top: 20px; /* Add a larger space before the second paragraph */
}

/* Styles pour les pages de description */
.description-page {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.description-page.active {
    display: block;
    opacity: 1;
}

/* Indicateur de pagination centré */
.pagination-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}

.page-number {
    font-size: 1rem;
    font-weight: bold;
    color: #111111;
}

.next-page-button,
.prev-page-button {
    background-color: #111111;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 1rem;
    border-radius: 30px;
    transition: background-color 0.3s;
}

.next-page-button:hover,
.prev-page-button:hover {
    background-color: #333333;
}

/* Désactiver les boutons si nécessaire */
.next-page-button[disabled],
.prev-page-button[disabled] {
    background-color: #cccccc;
    cursor: not-allowed;
}

/* Centered Title for Advisor Section */
.advisor-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.advisor-title-center {
    font-size: clamp(0.875rem, 0.38vw + 0.8rem, 1.125rem);
    font-weight: 400;
    letter-spacing: 0.08em;
    font-family: 'Futura PT', system-ui, 'Helvetica Neue', sans-serif;
    line-height: 1.24;
    margin-bottom: 20px;
    text-align: center;
    color: #111111;
    text-transform: uppercase;
}

/* Styles for the Advisor Info Section */
.advisor-info {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 15px;
    background-color: #f8f8f8;
    color: #111111;
    max-width: 600px; /* Optional: Set a max width for better centering */
}

.advisor-photo {
    flex: 0 0 120px; /* Fixed width for the photo */
    margin-right: 20px;
}

.advisor-photo img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.advisor-card {
    text-align: left;
    font-family: Arial, sans-serif;
}

.advisor-name {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.advisor-title {
    font-size: 1.125rem;
    font-weight: normal;
    margin-bottom: 20px;
}

.advisor-contact,
.advisor-email,
.advisor-website,
.advisor-rsac {
    font-size: 1rem;
    margin-bottom: 10px;
    color: #111111;
    text-decoration: none;
}

/* Prevent phone number links from turning blue on mobile */
.advisor-contact a {
    color: inherit; /* Inherits the color from .advisor-contact */
    text-decoration: none; /* Removes underline on mobile */
}

.advisor-website {
    font-size: 1rem;
    color: #111111;
    text-decoration: none;
}

.advisor-website:hover {
    text-decoration: underline;
}

/* Responsive adjustments for the advisor card */
@media (max-width: 768px) {
    .advisor-info {
        flex-direction: column; /* Stacks photo and text vertically on small screens */
        align-items: center; /* Centers content on mobile */
        padding: 20px;
        width: 100%; /* Ensures full width on mobile */
        box-sizing: border-box; /* Prevents overflow */
    }

    .advisor-photo {
        margin-right: 0; /* Removes right margin on mobile */
        margin-bottom: 15px; /* Adds space below photo on mobile */
        width: 50%;
    }

    .advisor-card {
        text-align: center; /* Centers text on mobile */
    }

    /* Ensure the advisor-section container is responsive */
    .advisor-section {
        padding: 20px;
        width: 100%;
        box-sizing: border-box; /* Prevents overflow */
    }
}

/* Logo Section */
.advisor-logo {
    margin-top: 20px;
    width: 100%;
    max-width: 600px; /* Matches the width of advisor-info */
    text-align: center;
}

.advisor-logo img {
    width: 100%;
    height: auto;
    max-width: 100%; /* Ensures it scales with the container */
}

/* Section Emplacement */
.location-section {
    padding: 100px 20px;
    background-color: #f8f8f8;
}

.location-section .media-content iframe {
    border-radius: 15px;
}



/* Section Caractéristiques du bien */
.project-features-section {
  padding: 80px 20px;
  background-color: #ffffff;
}

.project-features-container {
  max-width: 1200px;
  margin: 0 auto;
}

.project-features-container .section-title {
  font-size: clamp(2.25rem, 1.74rem + 2.63vw, 3rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  font-family: 'Tiempos Headline', Georgia, serif;
  line-height: 1.16;
  margin-bottom: 40px;
  text-align: center;
  color: #111111;
}

.features-grid {
  display: flex;
  flex-wrap: wrap;        /* Permet de passer à la ligne si nécessaire */
  justify-content: center;/* Centre les items sur chaque ligne */
  gap: 60px;              /* Espace horizontal/vertical entre items */
  margin: 0 auto;         /* Pour s’assurer que le conteneur est centré */
}


.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.feature-item img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  margin-bottom: 10px;
}

.feature-label {
  font-size: 1rem;
  color: #555555;
  margin-bottom: 5px;
}

.feature-value {
  font-size: 1.25rem;
  font-weight: 600;
  color: #111111;
}


/* Section Description du bien */
.project-description-section {
  padding: 100px 20px;
  background-color: #fafafa;
}

.project-description-section .container {
  max-width: 1200px;
  margin: 0 auto;
}

.project-description-section .section-title {
  font-size: clamp(2.25rem, 1.74rem + 2.63vw, 3rem);
  text-align: center;
  margin-bottom: 40px;
  color: #111111;
}

.project-description-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.description-block {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.description-block h3 {
  font-size: 1.25rem;
  color: #111111;
  margin-bottom: 10px;
}

.description-block p {
  font-size: 1rem;
  line-height: 1.6;
  color: #555;
}


/* Section Porteur de projet */
.project-owner-section {
  padding: 80px 20px;
  background-color: #fdfdfd;
  text-align: left;
}

.project-owner-section .container {
  max-width: 1200px;
  margin: 0 auto;
}

.project-owner-section .section-title {
  font-size: clamp(2.25rem, 1.74rem + 2.63vw, 3rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  font-family: 'Tiempos Headline', Georgia, serif;
  line-height: 1.16;
  margin-bottom: 40px;
  text-align: center;
  color: #111111;
}

.owner-info {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.owner-photo {
  flex: 0 0 150px;
}

.owner-photo img {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
}

.owner-details {
  flex: 1;
}

/* Container des bulles en vertical */
.bubbles-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bubble {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.bubble h3 {
  font-size: 1.25rem;
  color: #111111;
  margin-bottom: 10px;
}

.bubble p {
  font-size: 1rem;
  line-height: 1.6;
  color: #555555;
  margin: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .owner-info {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .owner-photo {
    margin-bottom: 20px;
  }
}


/* Section Investissement */
.investment-section {
    padding: 100px 20px;
    background-color: #f8f9fa;
    border-radius: 10px;
    margin: 0 auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }

  .section-title {
    font-size: clamp(2.25rem, 1.74rem + 2.63vw, 4rem);
    font-weight: 400;
    letter-spacing: 0.01em;
    font-family: 'Tiempos Headline', Georgia, serif;
    line-height: 1.16;
    margin-bottom: 20px;
}

  
  .investment-header h2 {
    text-align: center;
    font-size: 2.5rem;
    font-family: 'Tiempos Headline', Georgia, serif;
    margin-bottom: 50px;
    color: #111111;
  }
  
  .investment-details {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
  }
  
  .investment-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  .info-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  }
  
  .info-icon {
    width: 40px; /* Largeur de l'image */
    height: 40px; /* Hauteur de l'image */
    margin-right: 15px; /* Espacement entre l'icône et le texte */
    object-fit: contain; /* Ajuste l'image sans la déformer */
    display: inline-block; /* S'assure que c'est bien en ligne */
    vertical-align: middle; /* Aligne l'icône avec le texte */
}
  
  .info-label {
    font-size: 0.9rem;
    color: #555555;
  }
  
  .info-value {
    font-size: 1.2rem;
    font-weight: 600;
    color: #111111;
  }
  
  .investment-progress {
    background: #ffffff;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    text-align: center;
  }
  
  .progress-label {
    font-size: 0.9rem;
    color: #555555;
    margin-bottom: 10px;
  }
  
  .progress-bar {
    position: relative;
    height: 10px;
    background: #e9ecef;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 10px;
  }
  
  .progress-fill {
    height: 100%;
    background: #007bff;
    transition: width 0.3s ease;
  }
  
  .progress-value {
    font-size: 0.9rem;
    color: #555555;
  }
  
  .parts-remaining {
    font-size: 0.9rem;
    font-weight: 600;
    color: #111111;
  }
  
  .investment-form {
    background: #ffffff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    text-align: center;
  }
  
  .form-label {
    font-size: 0.9rem;
    color: #555555;
    margin-bottom: 10px;
    display: block;
  }
  
  .parts-control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
  }
  
  .control-btn {
    background-color: #111;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    padding: 5px 10px;
    cursor: pointer;
  }
  
  .parts-input {
    width: 60px;
    text-align: center;
    font-size: 1rem;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  
  .total-to-invest {
    font-size: 1rem;
    font-weight: 600;
    color: #111111;
    margin-bottom: 20px;
  }
  
  .cta-button {
    display: inline-block;
    background-color: #111;
    color: #ffffff;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .cta-button:hover {
    background-color: #333;
  }
  
  /* Responsive Design */
  @media (max-width: 768px) {
    .investment-info {
      grid-template-columns: 1fr;
    }

  }




/* Styles pour le formulaire d'investissement */
.investment-form {
    background: #ffffff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    text-align: center;
}

.form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: nowrap; /* Empêche le retour à la ligne */
    position: relative; /* Nécessaire pour la ligne verticale */
}

/* Section pour le nombre de parts */
.input-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.input-section label {
    font-size: 1rem;
    color: #333333;
    margin-bottom: 8px;
    font-weight: 500;
}

.input-field {
    width: 100%;
    padding: 10px 15px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #f9f9f9;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.input-field:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.25);
}

.input-section .info-icon {
    font-size: 0.875rem;
    color: #666666;
    margin-top: 5px;
}

.input-section .info-icon svg {
    width: 16px;
    height: 16px;
    margin-left: 5px;
    fill: #666666;
}


/* Ligne verticale de séparation */
.vertical-separator {
    width: 1px;
    background-color: #e0e0e0;
    height: 80px; /* Ajustez la hauteur selon vos besoins */
    margin: 0 20px;
}

/* Section pour le total à investir et le bouton */
.total-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 250px;
}

.total-section p {
    font-size: 1.1rem;
    margin-bottom: 20px;
    color: #333333;
}

.cta-button {
    background-color: #007bff;
    color: #ffffff;
    padding: 12px 25px;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.cta-button:hover {
    background-color: #0056b3;
}

/* Ajustements pour petits écrans */
@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
        align-items: stretch;
    }

    .vertical-separator {
        display: none; /* Masque la ligne verticale sur petits écrans */
    }

    .total-section {
        align-items: flex-start;
    }
}
  
/* Bouton Appel à l'Action */
.cta-button {
    display: inline-block;
    padding: 15px 30px;
    background-color: #111111;
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    border-radius: 50px;
    transition: background-color 0.3s;
}

.cta-button:hover {
    background-color: #333333;
}

/* Section Performance Énergétique */
.energy-performance-section {
    padding: 100px 20px;
    background-color: #fafafa;
  }
  
  .section-header-performance h2 {
    text-align: center;
    font-size: 2.5rem;
    font-family: 'Tiempos Headline', Georgia, serif;
    margin-bottom: 50px;
    color: #111111;
  }
  
  .energy-content {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 40px;
  }
  
  .energy-box {
    flex: 1;
    background-color: #ffffff;
    border-radius: 15px;
    text-align: center;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
  
  .energy-box .energy-icon img {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
  }
  
  .energy-info h3 {
    font-size: 1.25rem;
    color: #111111;
    margin-bottom: 10px;
  }
  
  .energy-info p {
    font-size: 1rem;
    color: #555555;
  }
  
  .energy-excellence {
    display: flex;
    justify-content: space-between;
    gap: 20px;
  }
  
  .excellence-box {
    flex: 1;
    background-color: #ffffff;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
  }
  
  .excellence-box h3 {
    font-size: 1.25rem;
    color: #111111;
    margin-bottom: 15px;
  }

  .excellence-box p {
    font-size: 1.25rem;
    color: #111111;
    margin-bottom: 15px;
  }
  
  .excellence-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .excellence-box ul li {
    font-size: 1rem;
    color: #555555;
    margin-bottom: 10px;
  }
  
  /* Responsive Design */
  @media (max-width: 768px) {
    .energy-content,
    .energy-excellence {
      flex-direction: column;
    }
  
    .energy-box,
    .excellence-box {
      margin-bottom: 20px;
    }
  }
  
/* Section Suivi des Travaux */
.construction-progress-section {
    padding: 100px 20px;
    background-color: #fefefe;
}

.construction-progress-section .container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.construction-progress-section .section-title {
    text-align: center;
    font-size: 2.5rem;
    font-family: 'Tiempos Headline', Georgia, serif;
    margin-bottom: 50px;
    color: #111111;
}

.progress-line {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Assure l'alignement vertical */
    position: relative;
    margin: 0 40px;
    height: 40px; /* Définit une hauteur suffisante pour les icônes */
}

.progress-line::before {
    content: '';
    position: absolute;
    top: 50%; /* Place la ligne au centre du conteneur */
    left: 0;
    width: 100%;
    height: 2px; /* Épaisseur de la ligne */
    background-color: #ccc;
    z-index: 1;
    transform: translateY(-50%); /* Centre la ligne */
}

.progress-item {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transform: translateY(50%);
}

.progress-item.completed .progress-icon {
    background-color: #BAA883; /* Couleur or pour les étapes complétées */
}

.progress-icon {
    width: 40px;
    height: 40px;
    background-color: #ccc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 0; /* Place les icônes au-dessus de la ligne */
    top: 50%; /* Place les icônes au centre vertical */
    transform: translateY(-50%);  /*Corrige le décalage */
}

.check-icon {
    width: 24px;
    height: 24px;
    stroke: #ffffff;
}

.circle {
    width: 24px;
    height: 24px;
    background-color: #ccc;
    border-radius: 50%;
}

.progress-date {
    margin-top: 10px; /* Espacement entre la date et l'icône */
    font-size: 1.125rem;
    font-family: 'Tiempos Headline', Georgia, serif;
    color: #111111;
}


.progress-title {
    font-size: 1rem;
    color: #555555;
    font-family: 'Futura PT', system-ui, 'Helvetica Neue', sans-serif;
}

/* Responsive - Petits écrans */
@media (max-width: 768px) {
    .construction-progress-section {
        display: flex;
        flex-direction: column;
        justify-content: center; /* Centre verticalement */
        align-items: center; /* Centre horizontalement */
        min-height: 100vh; /* Remplit toute la hauteur de l'écran */
        text-align: center; /* Aligne le texte au centre */
        margin: 0; /* Supprime les marges */
    }

    .progress-line {
        flex-direction: column; /* Passe en colonne */
        align-items: flex-start;
        height: auto;
        margin: 0;
    }

    .progress-line::before {
        top: 20px;
        left: 20px; /* Décalage pour aligner la ligne sous les points */
        width: 2px; /* Ligne verticale fine */
        height: 100%; /* Ligne sur toute la hauteur */
        transform: none; /* Supprime le décalage horizontal */
    }

    .progress-item {
        flex-direction: row; /* Les points et le texte sont alignés horizontalement */
        align-items: center;
        margin-bottom: 25px;
        width: 100%; /* Occupe toute la largeur */
    }

    .progress-item:last-child {
        margin-bottom: 0;
    }

    .progress-icon {
        margin-right: 15px; /* Espace entre le point et le texte */
        top: 20px;
        position: relative;
    }

    .progress-content {
        text-align: left; /* Texte aligné à gauche */
    }
}

/* Styles de la section simulation des intérêts composés */

.simulator-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 100px 20px;
    box-sizing: border-box;
    min-height: 100vh;
  }
  
  .simulator-container {
    display: flex;
    flex-direction: row;
    gap: 40px;
    min-height: 80vh;
    box-sizing: border-box;
    width: 90%;
    max-width: 1200px;
    background-color: #FFFFFF;
    border: 1px solid #CCC;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0px 4px 20px rgba(0,0,0,0.1);
  }
  
  .inputs-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-right: 1px solid #CCC;
    padding-right: 40px;
  }
  
  .input-row {
    display: flex;
    flex-direction: column;
  }
  
  .inputs-section label {
    font-size: 0.875rem;
    font-weight: 400;
    margin-bottom: 5px;
    color: #333333;
    display: inline-flex;
    align-items: center;
  }
  
  .inputs-section label .info-icon {
    margin-left: 5px;
  }
  
  .inputs-section input {
    background: transparent;
    border: none;
    border-bottom: 1px solid #CCC;
    color: #000000;
    font-size: 1.125rem;
    padding: 5px 0;
    width: 100%;
  }
  
  .inputs-section input:focus {
    outline: none;
    border-bottom: 1px solid #555;
  }
  
  .inputs-section span {
    font-size: 0.875rem;
    color: #555555;
    margin-left: auto;
    padding-top: 5px;
  }
  
  .inputs-section .input-row + .input-row {
    margin-top: 20px;
  }
  
  /* Retirer les flèches des inputs number */
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  input[type=number] {
    -moz-appearance: textfield;
  }
  
  .results-section {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 40px;
  }
  
  .results-overview {
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
  
  .results-overview .capital-final p:first-child {
    color: #333333;
    font-size: 1rem;
    margin: 0;
    letter-spacing: 0.05em;
  }
  
  .results-overview .capital-final p:last-child {
    font-size: 2rem;
    font-weight: 600;
    margin: 0;
    color: #000000;
  }
  
  .investments-interests {
    display: flex;
    gap: 40px;
    justify-content: center;
  }
  
  .investments-interests div p:first-child {
    font-size: 0.875rem;
    color: #333333;
    margin: 0;
    text-align: center;
  }
  
  .investments-interests div p:last-child {
    font-size: 1.125rem;
    font-weight: 500;
    margin: 0;
    color: #000000;
    text-align: center;
  }
  
  .chart-container {
    position: relative;
    background: #FFFFFF;
  }
  
  .summary-text {
    font-size: 1rem;
    line-height: 1.5;
    color: #333333;
    text-align: center;
  }
  
  .summary-text span {
    color: #000000;
    font-weight: 500;
  }
  
  .custom-tooltip {
    background: rgba(0,0,0,0.85);
    padding: 10px;
    border-radius: 8px;
    color: #FFFFFF;
    font-size: 0.875rem;
    white-space: nowrap;
  }
  
  .custom-tooltip .tooltip-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
  }
  
  .custom-tooltip .tooltip-row:last-child {
    margin-bottom: 0;
  }
  
  .tooltip-year {
    font-weight: 600;
  }
  
  .tooltip-total {
    font-weight: 600;
  }
  
  .recharts-default-legend {
    text-align: center;
  }
  
  .recharts-legend-item text {
    fill: #333333 !important;
    font-size: 0.875rem;
  }
  
  /* Style pour les icônes info et leur tooltip personnalisé */
  .info-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: help;
  }
  
  .info-icon .tooltip-text {
    display: none;
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.85);
    color: #FFFFFF;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.875rem;
    white-space: nowrap;
  }
  
  .info-icon .tooltip-text::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(0,0,0,0.85);
  }
  
  .info-icon:hover .tooltip-text {
    display: block;
  }
  
  label svg {
    color: #666666;
    width: 14px;
    height: 14px;
  }
  
  .disclaimer {
    margin-top: 20px;
    font-size: 0.75rem;
    color: #666666;
    text-align: center;
    max-width: 600px;
  }
  
  .explanation-section {
    max-width: 800px;
    margin: 40px auto;
    color: #000000;
  }
  
  .explanation-section h2 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: #000000;
  }
  
  .explanation-section p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 20px;
    color: #000000;
  }
  
  .explanation-section ul {
    list-style-type: disc;
    margin-left: 20px;
    margin-bottom: 20px;
  }
  
  .explanation-section li {
    margin-bottom: 10px;
    color: #000000;
  }
  
  @media (max-width: 768px) {
    .simulator-container {
      flex-direction: column;
      padding: 20px;
      width: 98%;
    }
  
    .inputs-section {
      border: none;
      padding-right: 0;
    }
  }

/* Section Téléchargements documents relatifs au projet */
.download-section {
  padding: 100px 20px;
  border-radius: 10px;
  margin: 80px auto; /* Espace pour l’aérer, similaire à vos autres sections */
  background-color: #fcfcfc;
}

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

/* Titre principal, cohérent avec .section-title ailleurs */
.download-section .section-title {
  text-align: center;
  font-size: 2.5rem;
  font-family: 'Tiempos Headline', Georgia, serif;
  margin-bottom: 50px;
  color: #111111;
}

/* Intro / description sous le titre */
.download-intro {
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem);
  font-family: 'Futura PT', system-ui, 'Helvetica Neue', sans-serif;
  line-height: 1.4;
  color: #555555;
  text-align: center;
  max-width: 800px;
  margin: 0 auto 40px; /* Centré, avec marge en bas pour espacer */
}

/* Liste de téléchargements */
.download-list {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
}

.download-item {
  /* On applique le style au lien <a> plutôt qu’à un <div> */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  width: 280px;             /* Largeur fixe ou max-width, selon préférence */
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  padding: 30px;
  text-decoration: none;    /* Enlève le soulignement du lien */
  color: inherit;           /* Pour que le texte prenne la couleur par défaut */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Icône PDF */
.download-icon {
  width: 60px; 
  height: 60px;
  margin-bottom: 15px;
  object-fit: contain;
}

/* Titre & description */
.download-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: #111111;
}

.download-desc {
  font-size: 1rem;
  color: #555555;
  margin-bottom: 20px;
}

/* Effet au survol : agrandir légèrement la carte et accentuer l’ombre */
.download-item:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Responsivité */
@media (max-width: 768px) {
  .download-list {
    flex-direction: column; /* Les items s’empilent */
    align-items: center;
  }
}

/* Section Commentaires */
.comments-section {
  padding: 100px 20px;
  background-color: #fff;
}

.comments-section .container {
  max-width: 800px;
  margin: 0 auto;
}

.comments-section .section-title {
  font-size: clamp(2rem, 2vw + 1rem, 3rem);
  text-align: center;
  margin-bottom: 40px;
  color: #333;
}

/* Zone grisée pour les utilisateurs non connectés */
.comments-disabled {
  background-color: #e0e0e0;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}

.comments-disabled p {
  margin-bottom: 20px;
  font-size: 1rem;
  color: #666;
}

.btn-login {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border-radius: 5px;
  text-decoration: none;
}

/* Formulaire de commentaire */
.comment-form textarea {
  width: 100%;
  min-height: 100px;
  padding: 10px;
  margin-bottom: 20px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.comment-form .btn-submit {
  padding: 10px 20px;
  background-color: #28a745;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.success-message {
  margin-bottom: 15px;
  padding: 10px;
  background-color: #d4edda; /* Fond vert clair */
  color: #155724;           /* Texte vert foncé */
  border: 1px solid #c3e6cb;
  border-radius: 5px;
  text-align: center;
}

.comment-form {
  text-align: center;
}

.comment-form .cta-button {
  display: inline-block;
  margin: 0 auto;
}

/* Cadran d’avertissement dans la section Investissement */
.risk-warning-invest {
  background: #ffffff;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  text-align: center;
}

/* --- cadran Investissement : réglages typographiques --- */
.risk-warning-invest strong {
  color: #111111;           /* “Avertissement” en noir */
}

.risk-warning-invest a {
  color: #007bff;           /* même bleu que tes boutons / liens */
  text-decoration: none;
}

.risk-warning-invest a:hover {
  text-decoration: none;
}


@media (max-width: 768px) {
  /* même logique responsive que vos autres cadrans */
  .risk-warning-invest {
    margin-bottom: 20px;
  }
}




/* Comité de sélection */
.committee-section {
  padding: 100px 20px;
  background-color: #f8f8f8;
}
.committee-section .section-title {
  text-align: center;
  font-size: clamp(2.25rem, 1.74rem + 2.63vw, 3rem);
  margin-bottom: 40px;
  color: #111111;
}

/* Liste verticale des membres (cartes empilées) */
.committee-grid{
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1900px;
  margin: 0 auto;
}

/* Carte : photo à gauche, infos à droite */
.member-card{
  display: flex;
  align-items: center;        /* centre verticalement le bloc texte vs la photo */
  gap: 20px;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
}

/* Vignette fixe, même taille pour tous */
.member-photo{
  flex: 0 0 96px;            /* colonne fixe à 96px */
  width: 96px;
  height: 96px;
  border-radius: 12px;
  overflow: hidden;           /* pour clipper l’image dans le rayon */
  background: #f2f2f2;
}
.member-photo img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* recadre proprement quelle que soit la source */
}

/* Texte à droite, aligné à gauche, centré verticalement */
.member-body{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;    /* centrage vertical */
  text-align: left;           /* aligné à gauche */
}

.member-name{
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #111;
}

.member-role{
  margin: 4px 0 10px;
  font-size: 0.95rem;
  color: #6b7280;
}

.member-bio{
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #444;
}

.committee-empty { text-align: center; color: #666; }

/* Mobile : on garde la photo à gauche et le texte à droite */
@media (max-width: 768px) {
  .member-card { gap: 14px; align-items: flex-start; }
  .member-photo{ flex-basis: 72px; width: 72px; height: 72px; border-radius: 10px; }
}