/* === Base générale === */
::selection {
    background-color: #edc200 !important;
    color: #013692;

}

body {
  margin: 0;
  padding: 0;
  background-color: #000080; /* Bleu foncé */
  font-family: 'Georgia', serif;
  color: #000;
}

/* === Typographies === */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 1rem 0;
  font-weight: bold;
  line-height: 1.2;
}

h1 {
  font-size: 2.2rem;
  text-align: center;
}

p {
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* === Conteneurs === */
.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 2rem;
}

.card {
  background-color: white;
  border-radius: 60px;
  padding: 50px;
  max-width: 600px;
  width: 100%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  text-align: center;
}

/* === Formulaires === */
form input[type="email"],
form input[type="text"],
form textarea {
  width: 100%;
  padding: 15px;
  margin: 10px 0;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-size: 1rem;
}

form textarea {
  resize: vertical;
  height: 120px;
}

/* === Boutons === */
.btn-gold {
  background: linear-gradient(45deg, #D4AF37, #B8860B, #FFD700, #B8860B);
  color: #000080;
  padding: 12px 24px;
  border-radius: 5px;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  display: inline-block;
  text-align: center;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn-gold:hover {
  filter: brightness(1.1);
}

/* === Messages formulaire === */
.message {
  margin-top: 20px;
  font-weight: bold;
  text-align: center;
}

.success {
  color: green;
}

.error {
  color: red;
}

/* === Menu principal === */
.menu-container {
  background-color: #000080;
  padding: 20px;
  text-align: center;
}

.main-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.main-menu > li {
  display: inline-block;
  position: relative;
}

.dropdown-toggle {
  color: white;
  font-size: 18px;
  text-decoration: none;
  padding: 12px 20px;
  display: inline-block;
  transition: background 0.3s;
}

.dropdown-toggle:hover {
  background-color: #001199;
  border-radius: 8px;
}

/* === Dropdown menu === */
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: blue;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
  min-width: 220px;
  z-index: 1000;
}

.dropdown-menu li {
  border-bottom: 1px solid #eee;
}

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

.dropdown-menu a {
  color: #000080;
  text-decoration: none;
  display: block;
  padding: 6px 6px;
  font-weight: 500;
}

.dropdown-menu a:hover {
  background-color: #f2f2f2;
}

.dropdown:hover .dropdown-menu {
  display: block;
}
.hero_home_heading {
  font-size: 32px;
  font-weight: bold;
  color: transparent; /* On rend le texte transparent pour pouvoir appliquer un dégradé */
  background: linear-gradient(45deg, #D4AF37, #B8860B, #FFD700, #B8860B); /* Dégradé doré */
  -webkit-background-clip: text; /* Cette propriété applique le fond au texte */
  background-clip: text; /* Applique également l'effet sur le texte */
  text-align: center;
  margin-top: 20px;
  text-transform: uppercase; /* Transforme le texte en majuscules, comme dans le bouton */
  letter-spacing: 1px; /* Espacement des lettres pour donner un effet plus aéré */
  display: inline-block;
  transition: background-color 0.3s ease; /* Ajout d'une transition pour un effet au survol */
}
.dropdown-grid {
  display: flex;
  gap: 2rem;
  padding: 2rem;
  background-color: white;
  color: #0A1F44;
}

.dropdown-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.dropdown-section {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.dropdown-title {
  font-weight: bold;
  color: #BFA046; /* doré */
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.dropdown-link {
  text-decoration: none;
  color: #0A1F44;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.dropdown-link strong {
  text-align: left;
}

.dropdown-link:hover {
  color: #BFA046;
}

.dropdown-subtitle {
  font-size: 0.8rem;
  color: #6B7280;
}

.dropdown-cta {
  flex: 0.8;
  background: #F9FAFB;
  padding: 1.5rem;
  border-radius: 8px;
  border: 1px solid #E5E7EB;
}

.cta-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  color: #0A1F44;
}

.cta-title {
  font-size: 1.1rem;
  font-weight: bold;
  color: #0A1F44;
}

.cta-text {
  font-size: 0.9rem;
  color: #6B7280;
}

.cta-button {
  background-color: #BFA046;
  color: white;
  padding: 0.5rem 1rem;
  text-align: center;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
}

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

.dropdown-grid.two-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem; /* ou 32px selon ton design */
  padding: 2rem;
}

.dropdown-column {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.dropdown-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #333;
}

.dropdown-link {
  text-decoration: none;
  color: #222;
  display: block;
}

.dropdown-subtitle {
  display: block;
  font-size: 0.85rem;
  color: #777;
  margin-top: 0.25rem;
}

.epargne-retraite-menu {
  color: white; /* Texte en blanc */
}

/* Pour les liens à l'intérieur de ce menu */
.epargne-retraite-menu .dropdown-link {
  color: white; /* Texte des liens en blanc */
}

.epargne-retraite-menu .dropdown-link:hover {
  color: #ffcc00; /* Changer la couleur au survol */
}

/* Titre en blanc aussi */
.epargne-retraite-menu .dropdown-title {
  color: white;
}

/* Pour les sous-titres en gris clair */
.epargne-retraite-menu .dropdown-subtitle {
  color: #dcdcdc;
}



#epargne-retraite-dropdown .dropdown-link {
  color: white; /* Texte des liens en blanc */
}

#epargne-retraite-dropdown .dropdown-title {
  color: white; /* Titre en blanc */
}

#epargne-retraite-dropdown .dropdown-subtitle {
  color: #dcdcdc; /* Sous-titres en gris clair */
}

#epargne-retraite-dropdown .dropdown-link:hover {
  color: #ffcc00; /* Changer la couleur au survol */
}


.profile-card {
  flex: 1;
  min-height: 300px;
  background-size: cover;
  background-position: center;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.profile-card:hover {
  transform: translateY(-5px);
}

.profile-link {
  display: block;
  height: 100%;
  color: white;
  text-decoration: none;
  background-color: rgba(0, 0, 0, 0.5); /* overlay */
}

.profile-content {
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.profile-content h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

.profile-content ul {
  list-style: disc;
  padding-left: 20px;
  margin: 0;
}

.profile-content li {
  font-size: 16px;
  margin-bottom: 5px;
}

.profiles-container {
  max-width: 1200px;
  margin: 0 auto;
}
.container {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      padding: 40px;
      max-width: 1000px;
      margin: auto;
    }

    .box {
      flex: 1;
      height: 200px;
      border: 4px solid;
      border-radius: 12px;
    }

    .box.red {
      border-color: red;
    }

    .box.green {
      border-color: green;
    }

    .box.blue {
      border-color: blue;
    }

    .section_title {
      font-size: 20px !important; /* Taille de police plus petite pour les titres de sections */
      font-weight: bold;
      color: transparent; /* Texte transparent pour appliquer un dégradé */
      background: linear-gradient(45deg, #D4AF37, #B8860B, #FFD700, #B8860B); /* Dégradé doré */
      -webkit-background-clip: text; /* Applique le fond au texte */
      background-clip: text; /* Applique également l'effet sur le texte */
      text-align: left; /* Alignement à gauche pour plus de lisibilité dans les sections */
      text-transform: uppercase; /* Texte en majuscules pour un effet plus fort */
      letter-spacing: 1px; /* Espacement des lettres pour donner un effet aéré */
      display: inline-block;
      transition: background-color 0.3s ease; /* Transition douce lors du survol */
      padding: 14px;
      
    }
 

    /* Sous-titres avec texte noir */
.section_subtitle {
    color: black !important; /* Le texte normal est noir */
    font-size: 16px; /* Taille de texte pour les sous-titres */
    transition: color 0.3s ease, background-color 0.3s ease; /* Transition fluide pour la couleur et le fond */
    padding: 5px; /* Ajout d'un peu de padding pour l'effet de fond */
    text-align:  left;
}

/* Sous-titres avec une couleur plus foncée */
.darker_subtitle {
    color: #333 !important; /* Couleur plus foncée pour le texte */
    transition: color 0.3s ease, background-color 0.3s ease; /* Transition fluide pour la couleur et le fond */
    padding: 3px; /* Ajout d'un peu de padding pour l'effet de fond */
}

/* Effet de survol - couleur du texte et fond */
.section_subtitle:hover, .darker_subtitle:hover {
    color: blue; /* Changer la couleur du texte en bleu */
    background-color: #f0f0f0; /* Fond gris clair lors du survol */
    border-radius: 1px; /* Optionnel : Ajoute un coin légèrement arrondi au fond */
}

.section_title {
  display: flex;
  align-items: center;
  font-weight: bold;
  gap: 8px;
  margin-bottom: 8px;
}

.section_icon {
  width: 45px;
  height: auto;
  object-fit: contain;
}

.navbar_dropdown-container {
  position: relative;
}

.dropdown-top-right-button {
  position: absolute;
  top: 35px;
  right: 35px;
  z-index: 10;
  
}

.btn-cta {
  background: linear-gradient(45deg, #D4AF37, #B8860B, #FFD700, #B8860B);
  color: #000080;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.btn-cta:hover {
  background-color: #e6be00;
}

body {
  margin: 0;
}

.transition-zone {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Georgia, serif;
  font-size: 2rem;
  color: white;

  background-image:
    radial-gradient(
      ellipse at 50% 10%,    /* <--- bulle centrée horizontalement, descendue à 75% */
      #ff1e1e 0%, 
      #00008b 70%
    ),
    linear-gradient(
      to bottom,
      #f4e9d6 0%,    /* beige clair */
      #d8c7b0 15%,
      #7a6dcb 40%,
      #00008b 65%,
      #000010 100%
    );

  background-blend-mode: overlay, normal;
  background-size: cover;
  background-repeat: no-repeat;
}
.dropdown-column > div:hover {
  z-index: 10 !important;
}

.cartes-profil-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  padding: 40px 0;
  box-sizing: border-box;
  position: relative;
}

.carte-profil {
  width: 40%; /* au lieu de 220px */
  min-width: 180px; /* largeur minimale pour ne pas s’écraser */
  max-width: 240px;
  height: 320px;
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  position: relative;
  transition: transform 0.3s ease, z-index 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  flex-shrink: 0;
}


.carte-profil:hover {
  transform: scale(1.07);
  z-index: 10;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.carte-profil.chevauche {
  margin-left: -40px;
  z-index: 1;
}


.carte-image {
  height: 100%;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
}

.carte-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 20px 30px;
  border-radius: 12px;
}

.carte-overlay h3 {
  margin-bottom: 40px;
  font-size: 20px;
}

.carte-overlay ul {
  list-style-type: disc;
  padding: 0;
  margin: 0;
}

.carte-overlay li {
  margin-bottom: 20px;
}

#scrollContainer::-webkit-scrollbar {
  display: none;
}