/* === Base générale === */
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;
}

.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;
  margin-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
}

.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 {
  background-color: #007bff; /* Fond bleu */
  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 */
      margin-top: 10px; /* Un peu moins de marge en haut pour mieux s'intégrer */
      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 */
      
    }

    /* 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 */
}

/* 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;
}



.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;
}        

html, body {
    overflow-x: hidden;
    width: 100%;
  }

  * {
    max-width: 100%;
    box-sizing: border-box;
  }



            /* Set color style to inherit */
            .inherit-color * {
              color: inherit;
            }

            /* Focus state style for keyboard navigation for the focusable elements */
            *[tabindex]:focus-visible,
            input[type="file"]:focus-visible {
              outline: 0.125rem solid #4d65ff;
              outline-offset: 0.125rem;
            }

            /* Get rid of top margin on first element in any rich text element */
            .w-richtext > :not(div):first-child,
            .w-richtext > div:first-child > :first-child {
              margin-top: 0 !important;
            }

            /* Get rid of bottom margin on last element in any rich text element */
            .w-richtext > :last-child,
            .w-richtext ol li:last-child,
            .w-richtext ul li:last-child {
              margin-bottom: 0 !important;
            }

            /* Prevent all click and hover interaction with an element */
            .pointer-events-off {
              pointer-events: none;
            }

            /* Enables all click and hover interaction with an element */
            .pointer-events-on {
              pointer-events: auto;
            }

            /* Create a class of .div-square which maintains a 1:1 dimension of a div */
            .div-square::after {
              content: "";
              display: block;
              padding-bottom: 100%;
            }

            /* Make sure containers never lose their center alignment */
            .container-medium,
            .container-small,
            .container-large {
              margin-right: auto !important;
              margin-left: auto !important;
            }

            /* 
  Make the following elements inherit typography styles from the parent and not have hardcoded values. 
  Important: You will not be able to style for example "All Links" in Designer with this CSS applied.
  Uncomment this CSS to use it in the project. Leave this message for future hand-off.
  */
            /*
  a,
  .w-input,
  .w-select,
  .w-tab-link,
  .w-nav-link,
  .w-dropdown-btn,
  .w-dropdown-toggle,
  .w-dropdown-link {
    color: inherit;
    text-decoration: inherit;
    font-size: inherit;
  }
  */

            /* Apply "..." after 3 lines of text */
.text-style-3lines {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* Apply "..." after 2 lines of text */
.text-style-2lines {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Apply "..." after 6 lines of text */
.text-style-6lines {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}

/* Adds inline flex display */
.display-inlineflex {
  display: inline-flex;
}

/* These classes are never overwritten */
.hide {
  display: none !important;
}

@media screen and (max-width: 991px) {
  .hide,
  .hide-tablet {
    display: none !important;
  }
}
@media screen and (max-width: 767px) {
  .hide-mobile-landscape {
    display: none !important;
  }
}
@media screen and (max-width: 479px) {
  .hide-mobile {
    display: none !important;
  }
}

.margin-0 {
  margin: 0rem !important;
}

.padding-0 {
  padding: 0rem !important;
}

.spacing-clean {
  padding: 0rem !important;
  margin: 0rem !important;
}

.margin-top {
  margin-right: 0rem !important;
  margin-bottom: 0rem !important;
  margin-left: 0rem !important;
}

.padding-top {
  padding-right: 0rem !important;
  padding-bottom: 0rem !important;
  padding-left: 0rem !important;
}

.margin-right {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
  margin-left: 0rem !important;
}

.padding-right {
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
  padding-left: 0rem !important;
}

.margin-bottom {
  margin-top: 0rem !important;
  margin-right: 0rem !important;
  margin-left: 0rem !important;
}

.padding-bottom {
  padding-top: 0rem !important;
  padding-right: 0rem !important;
  padding-left: 0rem !important;
}

.margin-left {
  margin-top: 0rem !important;
  margin-right: 0rem !important;
  margin-bottom: 0rem !important;
}

.padding-left {
  padding-top: 0rem !important;
  padding-right: 0rem !important;
  padding-bottom: 0rem !important;
}

.margin-horizontal {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
}

.padding-horizontal {
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
}

.margin-vertical {
  margin-right: 0rem !important;
  margin-left: 0rem !important;
}

.padding-vertical {
  padding-right: 0rem !important;
  padding-left: 0rem !important;
}

/* Apply "..." at 100% width */
.truncate-width {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Removes native scrollbar */
.no-scrollbar {
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Improve readability */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -o-font-smoothing: antialiased;
}


.dropdown-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding: 2rem;
}

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

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

.dropdown-title {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.dropdown-link {
  text-decoration: none;
  color: #222;
  font-size: 0.95rem;
}

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

/* better underlines */
body {
  text-underline-offset: 0.2em;
}

/* relative position for sections */
section,
header {
  position: relative;
}

/* button style reset */
button {
  all: unset;
  cursor: pointer;
}
button:focus {
  outline: revert;
}

/* button hover */
.button:hover .button-gradient {
  top: 100%;
  right: 90%;
}
.button.is-light .button-gradient {
  background-color: var(--color--gold200);
}
.button.is-gold .button-gradient {
  background-color: var(--color--gold300);
}

/* selection styles */
::selection {
  -webkit-text-fill-color: var(--color--grey000);
  color: #fff;
  background-color: var(--color--gold500);
  color: var(--color--grey000);
}

/* box shadows */
:root {
  --shadow--light-soft: 0px 3px 8px 0px #0000000f,
    0px 14px 14px 0px #0000000d, 0px 31px 19px 0px #00000008,
    0px 55px 22px 0px #00000003, 0px 86px 24px 0px #00000000;
  --shadow--light-strong: 0px 2.77px 2.21px 0px #00000005,
    0px 6.65px 5.32px 0px #00000007,
    0px 12.52px 10.02px 0px #00000009,
    0px 22.34px 17.87px 0px #0000000b,
    0px 41.78px 33.42px 0px #0000000d, 0px 100px 80px 0px #00000012;
  --shadow--dark-soft: 0px 0.61px 0.8px 0px #00000009,
    0px 1.46px 1.93px 0px #0000000d, 0px 2.75px 3.63px 0px #00000011,
    0px 4.91px 6.48px 0px #00000014,
    0px 9.19px 12.12px 0px #00000018, 0px 22px 29px 0px #00000021;
  --shadow--dark-strong: 0px 8px 17px 0px #0000003d,
    0px 31px 31px 0px #00000036, 0px 71px 42px 0px #0000001f,
    0px 126px 50px 0px #0000000a, 0px 197px 55px 0px #00000000;
}

/* fluid responsive */
html {
  font-size: 1.125rem;
}
@media screen and (max-width: 1920px) {
  html {
    font-size: calc(0.625rem + 0.41666666666666674vw);
  }
}
@media screen and (max-width: 1440px) {
  html {
    font-size: calc(0.8126951092611863rem + 0.20811654526534862vw);
  }
}
@media screen and (max-width: 479px) {
  html {
    font-size: calc(0.7494769874476988rem + 0.8368200836820083vw);
  }
}

/* hide empty cms sections */
[data-cms-section]:not(:has(.w-dyn-item)) {
  display: none;
}
.wf-design-mode [data-cms-section]:not(:has(.w-dyn-item)) {
  display: block;
}

/* hide lotties */
.wf-design-mode [data-lottie] {
  display: none;
}

/* card link cover */
.link-cover::before {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 0;
  cursor: pointer;
}

/* navbar menu styles */
@media screen and (max-width: 992px) {
  .navbar_component:has(.navbar_checkbox:checked) .navbar_menu {
    transform: translateX(0%);
  }
  .navbar_burger-line.is-top:has(~ .navbar_checkbox:checked) {
    transform: rotate(45deg) translateY(8.25px);
  }
  .navbar_burger-line.is-mid:has(~ .navbar_checkbox:checked) {
    width: 0rem;
  }
  .navbar_burger-line.is-bottom:has(~ .navbar_checkbox:checked) {
    transform: rotate(-45deg) translateY(-8.25px);
  }
  body:has(.navbar_checkbox:checked) {
    overflow: hidden;
  }
}

/* navbar responsive on desktop */
@media only screen and (max-width: 1130px) and (min-width: 992px) {
  .navbar_logo {
    flex-grow: 1;
  }
  .navbar_link {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .navbar_link,
  .navbar_buttons .button-text {
    font-size: 0.875rem;
  }
  .navbar_container,
  .navbar_buttons.is-desktop {
    gap: 0rem;
  }
}

/* custom list icon */
.text-rich-text ul {
  padding: 0;
  list-style-type: none;
}
.text-rich-text ul li {
  background-image: url("https://cdn.prod.website-files.com/66c6f43f5f140ff1e09d4c92/66ea75a8c186e973f40840d1_icon-plus.svg");
  background-position: 0 0.625rem;
  background-repeat: no-repeat;
  padding-left: 1.75rem;
}

.text-rich-text :not([class*="button"]) a:not([class*="button"]) {
  color: var(--color--gold700);
  text-decoration: underline;
}

/* dark theme */
.theme-dark {
  background-color: var(--background--primary);
  color: var(--text--primary);
  --background--primary: var(--color--grey900);
  --background--secondary: var(--color--grey800);
  --background--tertiary: var(--color--grey700);
  --background--alternate-primary: var(--color--grey100);
  --background--alternate-secondary: var(--color--grey200);
  --background--white: var(--color--grey1000);
  --background--black: var(--color--grey000);
  --text--primary: var(--color--grey000);
  --text--secondary: var(--color--grey200);
  --text--alternate-primary: var(--color--grey900);
  --text--alternate-secondary: var(--color--grey600);
  --border--primary: rgba(255, 255, 255, 0.15);
}
/* stats border */
.stats_item:first-child {
  border-left: none;
}
@media screen and (max-width: 767px) {
  .stats_item:first-child {
    border-top: none;
  }
}

/* awards item display in designer */
.w-editor .awards_item,
.wf-design-mode .awards_item {
  min-width: 100%;
}

/* basic content reversed */
.basic_content[reverse="Oui"] {
  order: -1;
}

/* faq animation */
.faq_card:has(.faq_checkbox:checked) .faq_answer {
  grid-template-rows: 1fr;
  opacity: 100%;
}
.faq_card:has(.faq_checkbox:checked) .faq_icon {
  transform: rotate(45deg);
}
.wf-design-mode .faq_answer {
  grid-template-rows: 1fr;
  opacity: 100%;
}
.wf-design-mode .faq_checkbox {
  pointer-events: none;
}

/* solutions list icon */
.solutions_card ul {
  padding: 0;
  list-style-type: none;
}
.solutions_card ul li {
  background-image: url("https://cdn.prod.website-files.com/66c6f43f5f140ff1e09d4c92/66ea7e54e7fbd4e23788557d_icon-check.svg");
  background-size: 1rem 1rem;
  background-position: 0 0.5rem;
  background-repeat: no-repeat;
  padding-left: 1.75rem;
}

/* why styles */
.why_item:first-child {
  padding-left: 0;
  border-left: none;
}
.why_item:last-child {
  padding-right: 0;
}
.why_component:not(:has(.why_item:nth-child(4))) {
  grid-template-columns: 1fr 1fr 1fr;
}
@media screen and (max-width: 991px) and (min-width: 479px) {
  .why_component:has(.why_item:nth-child(4))
    .why_item:nth-child(even) {
    padding-right: 0;
  }
  .why_component:has(.why_item:nth-child(4))
    .why_item:nth-child(odd) {
    padding-left: 0;
    border-left: none;
  }
  .why_component:has(.why_item:nth-child(4))
    .why_item:not(:nth-child(n + 3)) {
    border-top: none;
  }
}
@media screen and (max-width: 991px) and (min-width: 768px) {
  .why_component:not(:has(.why_item:nth-child(4))) .why_item {
    border-top: none;
  }
}
@media screen and (max-width: 767px) {
  .why_component:not(:has(.why_item:nth-child(4))) {
    grid-template-columns: 1fr;
  }
  .why_component:not(:has(.why_item:nth-child(4)))
    .why_item:first-child {
    border-top: none;
  }
  .why_component:not(:has(.why_item:nth-child(4))) .why_item {
    min-width: 100%;
    border-left: none;
    padding-left: 0;
    padding-right: 0;
  }
}
@media screen and (max-width: 478px) {
  .why_item:first-child {
    border-top: none;
  }
  .why_item {
    border-left: none;
  }
}

/* wallets hover state */
.wallets_item:hover .wallets_card-inner {
  transform: translateY(-1.5rem);
}
.wallets_item:hover .wallets_card {
  box-shadow: var(--shadow--light-strong);
}

/* posts list items limit */
[data-limit-3] .posts_item:nth-child(n + 4) {
  display: none;
}

/* table last child no border */
.table_item:last-child {
  border-bottom: none;
}

/* mute a link when another one is hovered */
.navbar_products-grid:has(.navbar_products-link:hover)
  .navbar_products-link:not(:hover),
.navbar_grid-links:has(.navbar_grid-link:hover)
  .navbar_grid-link:not(:hover),
.navbar_resources-links:has(.navbar_grid-link:hover)
  .navbar_grid-link:not(:hover),
.footer_menu:has(.footer_link:hover) .footer_link:not(:hover) {
  opacity: 60%;
}

.navbar_products-link,
.navbar_grid-link,
.footer_link {
  transition-property: opacity;
  transition-duration: 250ms;
  transition-timing-function: ease;
}

/* hide table of contents if not enough titles */
.post_toc:has(.post_toc-link-wrap:first-child:last-child),
.post_sidebar:has(.post_toc-link-wrap:first-child:last-child)
  .post_sidebar-title {
  display: none;
}

/* highlight current section in posts */
.post_toc-link.w--current/*:not(~ .post_toc-link.w--current)*/ {
  color: var(--text--primary);
}

/* remove text wrap balance on post headings */
.post_component .text-rich-text h1,
.post_component .text-rich-text h2,
.post_component .text-rich-text h3,
.post_component .text-rich-text h4,
.post_component .text-rich-text h5,
.post_component .text-rich-text h6 {
  text-wrap: pretty;
}
/* Styles pour la barre de navigation */
.navbar_logo {
    display: flex;
    align-items: center;
    height: 60px; /* Ajuste la hauteur de la barre */
}

/* Logo responsive */
.navbar_logo-image {
    width: auto; 
    height: 50px; /* Ajuste la taille du logo */
    max-height: 100%;
}

/* Ajustement pour écrans plus petits */
@media (max-width: 768px) {
    .navbar_logo-image {
        height: 40px; /* Réduit la taille sur mobile */
    }
}

               
.custom-dropdown-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  padding: 2rem;
}

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

.dropdown-title {
  font-weight: 600;
  font-size: 1.40rem;
  margin-bottom: 0.25rem;
}

.dropdown-link {
  display: block;
    text-decoration: none;
  font-size: 0.95rem;
  color: #333;
  line-height: 1.4;
}

.dropdown-subtitle {
  display: block;
  font-size: 0.75rem;
  color: #777;
}

@media screen and (max-width: 992px) {
  .custom-dropdown-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 600px) {
  .custom-dropdown-grid {
    grid-template-columns: 1fr;
  }
}
                
.navbar_dropdown-list {
  display: none; /* Masque les sous-menus par défaut */
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 200px; /* Ajustez la largeur si nécessaire */
  z-index: 999;
}

.navbar_dropdown:hover .navbar_dropdown-list {
  display: block; /* Affiche les sous-menus au survol */
}

.basic_gradient2 {
  background: linear-gradient(135deg, #00008B, #0000FF);
  color: white; /* Pour que le texte soit lisible sur fond foncé */
}

.fade-border {
  height: 30px;  /* Ajuste la hauteur à ta préférence */
  background: rgba(255, 255, 255, 0.3);  /* Légère transparence pour le dégradé */
  filter: blur(5px);  /* Flou pour adoucir la transition */
}
.section_basic {
  background-image: 
    linear-gradient(to bottom, transparent, white 70%),  /* Dégradé vers le bas */
    url('/Site/assets/images/bleu2.png'); /* Ton image en arrière-plan */
  background-size: cover;
  background-position: center;
}
.separator {
  display: block;
  width: 100%;
  margin-top: -1px; /* pour éviter une ligne blanche entre les sections */
}


.wave-bottom {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  z-index: 2;
  pointer-events: none; /* pour éviter les clics bloqués */
}
.transition-gradient {
  height: 100px;
  background: linear-gradient(to bottom, #013692 0%, #eeeeed 100%);
  margin-top: -1px;
  margin-bottom: -1px;
}

.wave-transition svg {
  display: block;
  width: 100%;
  height: 100px;
}
.section-bleue {
  position: relative;
  background: linear-gradient(to bottom, rgba(0, 84, 179, 1), rgba(255, 255, 255, 1)),
              url('/Site/assets/images/bleu.png') no-repeat center/cover;
}

.centered-title {
  text-align: center;
  color: #000;
  background-color: transparent;
  margin-bottom: 10px;
}

.subtext-centered {
  text-align: center;
  font-size: 16px;
  color: #333;
  margin-bottom: 40px;
}

.three-boxes {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.white-box {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  width: 300px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.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 */
  margin-top: 10px; /* Un peu moins de marge en haut pour mieux s'intégrer */
  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 */
  
}



.faq-item {
  position: relative;
  padding: 20px;
  margin-bottom: 10px; /* pour l'espacement entre les questions */
}

.faq-item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(45deg, #D4AF37, #B8860B, #FFD700, #B8860B);
}

.faq-question {
  font-family: 'Merriweather', serif;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-size: 1.3em;
  font-weight: bold;
  background-image: linear-gradient(45deg, #D4AF37, #B8860B, #FFD700, #B8860B);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  cursor: pointer;
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}


.faq-question::after {
  content: "\25BA"; /* ▶ */
  display: inline-block;
  margin-left: auto;
  transition: transform 0.3s ease;
}

.faq-question.open::after {
  transform: rotate(90deg); /* vers le bas */
  content: "\25BC"; /* ▶ */

}


.faq-answer {
  font-family: 'Merriweather', serif;

  overflow: hidden;
  height: 0;
  opacity: 0;
  transition: height 0.6s ease-in-out, opacity 0.6s ease-in-out;
  color: rgb(255, 255, 255);
}

.carte-profil {
  width: 220px;
  height: 320px;
  border-radius: 12px;
  position: relative;
  background-color: #ffffff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, z-index 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
  cursor: pointer;
}

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

.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;
}

.basic_imagery {
  position: relative;
}

.floating-columns {
  position: absolute;
  top: 50%;
  right: 23%;
  transform: translate(-66%, -50%);
  display: flex;
  flex-direction: column;
  gap: 20px;
  z-index: 10;
}
.floating-columns1 {
  position: absolute;
  top: 50%;
  left: 60%;
  transform: translate(-66%, -50%);
  display: flex;
  flex-direction: column;
  gap: 20px;
  z-index: 10;
}

.floating-box {
  width: 250px;
  height: 80px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}





.faq-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  font-family: sans-serif;
  padding: 0 20px; /* Pour un peu de marge intérieure */
}

.faq {
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px; /* Augmenter l'espace entre les questions */
}

.question {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-size: 1.3em;
  font-weight: bold;
  background-image: linear-gradient(45deg, #D4AF37, #B8860B, #FFD700, #B8860B);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  cursor: pointer;
  padding: 10px 0;
  margin-bottom: 15px; /* Espace sous chaque question */
}

/* Style de la réponse avec animation fluide */
.answer {
  width: 100%;
  padding-bottom: 10px;
  display: block;  /* Toujours présent pour l'animation */
  padding: 0 16px; /* Pour espacer un peu le texte */
  font-size: 18px;
  line-height: 1.5;
  color: white;
  max-height: 0; /* Initialement, la réponse est cachée */
  overflow: hidden; /* Masque le contenu quand la réponse est fermée */
  opacity: 0;
  visibility: hidden;
  transition: max-height 0.6s ease, opacity 0.3s ease, visibility 0.3s ease; /* Animation de la réponse */
}

.faq.active .answer {
  max-height: 2000px; /* Hauteur maximale pour afficher tout le contenu */
  opacity: 1; /* Rendre la réponse visible */
  visibility: visible; /* La rendre visible */
  padding: 10px 16px; /* Ajoute de l'espace autour du texte */
}





.faq.collapsing .answer {
  transition: max-height 0.2s ease, opacity 0s ease, visibility 0s ease;
}


.tabs {
  display: flex;
  justify-content: center;
  gap: 40px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 30px;
  padding-bottom: 20px;

}

.tab {
  background: none;
  border: none;
  font-size: 1.2em;
  font-weight: 600;
  padding: 10px 15px;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: border-color 0.3s, color 0.3s;
  color: #999;
}

.tab.active {
  border-color: white;
  color: white;
}

.tab-content {
  text-align: center;
  height: 320px;
  width: auto;
}

.tab-image {
  display: none;
  width: auto;
  height: 320px;
  margin-right: auto;
}

.tab-image.active {
  display: inline-block;
}

/* Container for image and card */
/* Conteneur pour l'image */
.tab-content-container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border: 2px solid #FFD700;
  padding: 10px;
  border-radius: 10px;
  width: auto;
  max-width: 900px;
  margin: auto;
  gap: 10px;
}

/* Les cartes sont cachées par défaut sauf celle active */


/* Les images sont cachées aussi par défaut sauf l'image active */


/* Activer la carte et l'image sélectionnées */
.tab-image.active {
  display: block;
}



.carte-profil.active {
  position: static;
  visibility: visible;
}

/* Onglets actifs */
.tab.active {
  color: white;
}

/* Overlay des cartes */


@media (max-width: 768px) {
  .tabs{
    gap:0px;
  }
}