@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

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

body {
    margin: 0;
    line-height: normal;
    font-family: 'Open Sans', sans-serif;
}

/* Layout */
.container {
    width: 100%;
    height: 84px;
    padding: 10px 50px;
    background-color: #fff;
    border-bottom: 1px solid #e6e8eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Common styles */
.section-wrapper {
    margin: 0 70px 90px 70px;
}

/* Logo styles */
.logo {
    width: 114px;
    height: 18px;
    object-fit: cover;
}

.logos {
    width: 113.2px;
    height: 40.8px;
    object-fit: cover;
}

/* Hero section */

.hero-section{
   margin-bottom: 90px;
  }
  .hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    opacity: 1;
    transform: none;
    margin: 0 auto;
    max-width: 1250px;
    height: 709px;
    flex-shrink: 0;
}

.hero-content {
    flex: 1;
    max-width: 574px;
    display: flex;
    flex-direction: column;
    gap: 39px;
    z-index: 1;
}

.hero-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hero-title {
    font-size: 46px;
    line-height: 150%;
    color: #03345e;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    line-height: 150%; 
}

.hero-title p {
    margin: 0;
}

.hero-subtitle {
    font-size: 24px;
    line-height: 160%;
    font-weight: 600;
    color: #4d6f8d;
    font-family: 'Open Sans';
}


/* Media Queries */
@media screen and (max-width: 1024px) {
    .hero {
        padding: 30px 15px;
    }
    
    .hero-title {
        font-size: 40px;
    }
    
    .hero-subtitle {
        font-size: 20px;
    }
}

@media screen and (max-width: 768px) {
    .hero {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }
    
    .hero-content {
        max-width: 100%;
    }
    
    .hero-images {
        width: 100%;
        order: -1; /* Place les images au-dessus du texte sur mobile */
    }
    
    .hero-title {
        font-size: 32px;
    }
    
    .hero-subtitle {
        font-size: 18px;
    }
}

@media screen and (max-width: 480px) {
    .hero {
        padding: 20px 10px;
    }
    
    .hero-title {
        font-size: 28px;
    }
    
    .hero-subtitle {
        font-size: 16px;
    }
}
/*  */
.animation-container {
    position: relative;
    width: fit-content;
    margin-right: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .image-personne {
    max-width: 531px;
    height: auto;
    display: block;
  }
  
  .circle-container {
    position: absolute;
    transform-origin: center;
    animation: rotate 15s linear infinite;

  }
  
  .arrow-wrapper {
    position: absolute;
  }
  
  .arrow {
    position: absolute;
    z-index: 1; 
  }
  
  .shadow {
    position: absolute;
    z-index: 2;
    width: 513px; 
    height: auto;
    opacity: 212.5; 
    /* border-radius: 43%; */
    filter: blur(22px);
  }
  
  /* Positionnement des flèches et ombres */
  .arrow-left {
    transform: translate(-72%, -35%);
  }
  
  .shadow-left {
    transform: translate(-72%, -35%) scale(1.2); 
  }
  
  .arrow-right {
    transform: translate(-31%, -65%);
  }
  
  .shadow-right {
    transform: translate(-31%, -65%) scale(1.2); 
  }
  
  /* Animation pour rotation */
  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
.fonds-impact-teranga-container{
    width: 562px;
    position: relative;
    font-size: 46px;
    line-height: 150%;
    display: inline-block;
    font-family: 'Open Sans';
    color: #03345e;
    text-align: left;
}
.fonds-impact {
    margin: 0;
}
.une-initiative-qui {
    width: 574px;
    position: relative;
    font-size: 24px;
    line-height: 160%;
    font-weight: 600;
    font-family: 'Open Sans';
    color: #4d6f8d;
    text-align: left;
    display: inline-block;
}    
.fonds-impact-teranga-tech-incu-parent {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
    text-align: left;
    font-size: 46px;
    color: #03345e;
    font-family: 'Open Sans';
}
/*  */
.fonds-impact {
    margin: 0;
}
.fonds-impact-teranga-container {
    width: 562px;
    position: relative;
    line-height: 150%;
    display: inline-block;
}
.une-initiative-qui {
    width: 574px;
    position: relative;
    font-size: 24px;
    line-height: 160%;
    font-weight: 600;
    color: #4d6f8d;
    display: inline-block;
}
.fonds-impact-teranga-tech-incu-parent {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
}
.postuler {
    position: relative;
    line-height: 130%;
    color: #fff;
    font-family: 'Open Sans';
    text-decoration: none;
}
.postuler-wrapper:hover{
  background-color: #1787e9;
  transition: background-color 0.3s ease-in-out;
}
.postuler-wrapper {
    width: 347px;
    border-radius: 90px;
    background-color: #03345E;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 14px 126px;
    box-sizing: border-box;
    font-size: 22px;
    color: #fff;
}
.frame-parent-1 {
    position: relative;
    left: 19%;
    width: 574px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 39px;
}
/* MAIN */
/* section programme */
.section-programme {
    margin-bottom: 90px;
}
/* prendre en compte  */
.programme-container {
    display: flex;
    justify-content: space-between;
    padding: 60px;
    align-items: center;
    border-radius: 25px;
    background: #015AA9;
    gap: 60px;
    max-width: 1250px;
    margin: 0 auto;
}

.programme-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    color: #fff;
    max-width: 575px;
}

.programme-content h2 {
    font-family: "Open Sans";
    font-size: 32px;
    font-weight: 700;
    line-height: 160%;
}

.programme-content p {
    text-align: justify;
    font-family: "Open Sans";
    font-size: 18px;
    font-weight: 600;
    line-height: 210%;
}

.programme-image-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.programme-image {
    max-width: 100%;
    height: auto;
}

/* Responsive styles */
@media (max-width: 1024px) {
    .programme-container {
        padding: 40px;
        gap: 40px;
        margin: 0 20px;
    }
}

@media (max-width: 768px) {
    .programme-container {
        flex-direction: column;
        padding: 30px;
        gap: 30px;
    }

    .programme-content {
        max-width: 100%;
        text-align: center;
    }

    .programme-content h2 {
        font-size: 24px;
        line-height: 140%;
        text-align: left;
    }

    .programme-content p {
        font-size: 16px;
        line-height: 180%;
        text-align: left;
    }

    .programme-image-wrapper {
        order: 2;
        width: 100%;
    }

    .programme-image {
        width: 100%;
        max-width: 400px;
    }
}

@media (max-width: 375px) {
    .programme-container {
        padding: 20px;
        margin: 0 15px;
        gap: 20px;
    }

    .programme-content h2 {
        font-size: 22px;
    }

    .programme-content p {
        font-size: 14px;
        line-height: 170%;
    }
}

/* section secteur */
.secteurs-section {
    margin-bottom: 90px;
}


.section-secteur{
    display: flex;
    max-width: 1250px;
    flex-direction: column;
    align-items: center;
    gap: 70px;
    margin: 0 auto;
}


.secteurs-section h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 0.5rem;
    font-size: 34px;
    line-height: 160%;
    font-family: 'Open Sans';
    color: #03345e;
}
.secteurs-section p {
    text-align: center;
    font-size: 2rem;
    color: #666;
    margin-bottom: 2rem;
    font-size: 16px;
    line-height: 160%;
    font-weight: 500;
    font-family: 'Open Sans';
    color: #4d6f8d;
    text-align: left;
}

.le-fond p{
    text-align: center;
    display: flex;
    justify-content: center;
}
.secteurs {
    display: flex;
    gap: 24px;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding: 0;
    width: 100%;
}
.carte-1 {
    max-width: none; 
    border-radius: 20px;
    background-color: #fff;
    border: 1px solid #e6e8eb;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    gap: 16px;
    font-size: 21px;
    color: #03345e;
    font-family: 'Open Sans';
    align-self: stretch;
    width: 1240px;
    height: 500px;
}
.icon-eau {
    width: 62px;
    position: relative;
    height: 62px;
}
.icon {
    width: 100px;
    border-radius: 16px;
    background-color: rgba(1, 90, 169, 0.05);
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 27px 20px;
    box-sizing: border-box;
}
.eau-assainissement {
    width: 249px;
    position: relative;
    line-height: 30px;
    display: inline-block;
}
.solutions-lies  {
    position: relative;
    text-align: left;
    flex-direction: column;
    align-items: flex-start;
    display: flex; 
    gap: 20px;
    flex: 1;
 
}

.solutions-lies h3 {
    color: #03345E;
    font-family: "Open Sans";
    font-size: 21px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px; 
}

.solutions-lies p {
    color: #4D6F8D;
    font-family: "Open Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 200%;  
}
.le-fond{
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.le-fond p {
    align-items: center;
    display: flex;
    justify-content: space-around;
    font-size: 18px;
    line-height: 160%;
    font-weight: 500;
    font-family: 'Open Sans';
    color: #4d6f8d;
}
.paragraphe{
    width: 100%;
    font-size: 16px;
    line-height: 200%;
    font-family: 'Open Sans';
    color: #4d6f8d;
}
.secteur img {
    width: 50px;
    height: 50px;
    margin-bottom: 1rem;
}

.secteur h3 {
    font-size: 32px;
    margin-bottom: 0.5rem;
    color: #002d66;
}

.secteur p { gap: 20px;
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
}


/* carousel */
.carousel-container {
    overflow: hidden;
    width: 100%;
    position: relative;
  }
  
  .carousel {
    display: flex;
    gap: 24px;
    width: max-content;
    transition: transform 0.5s ease-in-out; 
  }
  
  .carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-top: 30px;
}

.carousel-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none; 
    font-size: 30px;  
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
}

.carousel-btn:hover {
    transform: scale(1.2);
}

 
  

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.carte-1 {
  flex: 0 0 auto;
  width: 500px; 
}

/* Media Queries */
@media screen and (max-width: 1024px) {
    .carousel {
        gap: 16px;
    }
    
    .carte-1 {
        width: 400px;
    }
}
/* Responsivité */
@media (max-width: 1200px) {
    .secteurs {
        flex-wrap: wrap;
        gap: 32px;
    }
    
    .carte-1 {
        flex: 0 1 calc(50% - 16px);
    }
}
/* les caroussel  */
@media (max-width: 768px) {
    .secteurs-section {
        margin: 0 20px 60px 20px;
    }

    .le-fond h2 {
        font-size: 24px;
        line-height: 140%;
        margin-bottom: 16px;
    }

    .le-fond p {
        font-size: 15px;
        line-height: 160%;
        text-align: center;
        padding: 0 20px;
    }

    .le-fond p br {
        display: none; 
    }

    .secteurs {
        gap: 20px;
    }

    .carte-1 {
        flex: 1;
        padding: 20px;
        max-width:  340px;
        width: 100%;
        height: auto;
    }

    .icon {
        width: 80px;
        height: 80px;
        padding: 20px;
    }

    .icon-eau {
        width: 50px;
        height: 50px;
    }

    .solutions-lies h3 {
        font-size: 18px;
        line-height: 26px;
    }

    .solutions-lies p {
        font-size: 14px;
        line-height: 160%;
    }
    .carousel{
        transition: transform 0.5s ease-in-out; 

 
    }
}

@media (max-width: 425px){
    .carte-1 {
        flex: 1;
        padding: 29px 68px 30px;
        max-width:  375px;
        height: auto;
    }

}

@media (max-width: 375px){
    .carte-1 {
        flex: 1;
        padding: 48px;
        width:  657px;
        margin: 0% 5px;
    }
}



@media (max-width: 320px) {
    .carte-1 {
        flex: 0 0 auto;
        width: 205px; 
        padding: 15px;
        margin: 0 10px;
        height: auto; 
        box-sizing: border-box; 
    }
    /* Ajustements supplémentaires pour assurer la lisibilité */
    .carte-1 h3 {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .carte-1 p {
        font-size: 14px;
        line-height: 1.4;
    }

    /* Assurer que le conteneur parent gère bien le défilement */
    .carousel {
        display: flex;
        overflow: hidden;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

    /* Éviter les débordements */
    .carousel-container {
        width: 100%;
        max-width: 320px;
        overflow: hidden;
        margin: 0 auto;
    }
}
@media (max-width: 375px) {
    .secteurs-section {
        margin: 0 15px 40px 15px;
    }

    .le-fond h2 {
        font-size: 22px;
    }

    .le-fond p {
        font-size: 14px;
        padding: 0 10px;
    }

}



/*  */
.section-eligibility {
    margin-bottom: 90px;
}
.eligibility-frame-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: #015AA9;
    border-radius: 25px;
    margin: 0 auto;
    gap: 100px;
    flex-shrink: 0;
    padding: 33px 60px;
    max-width: 1250px;
    height: 651px;
}

.eligibility-criteria-container{
    flex: 1;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 50px;
    text-align: left;
    font-size: 32px;
    color: #fff;
    font-family: 'Open Sans';
}
.eligibility-title-wrapper {
    text-align: left;
}
.eligibility-title {
    width: 100%;
    font-size: 32px;
    line-height: 160%;
    display: inline-block;
    font-family: 'Open Sans';
    color: #fff;
}

.eligibility-subtitle {
    width: 330px;
    font-size: 19px;
    line-height: 160%;
    font-weight: 600;
    font-family: 'Open Sans';
    color: #fff;
    display: inline-block;
}
.eligibility-postuler-wrapper {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-align: left;
    font-size: 22px;
    color: #03345e;
    font-family: 'Open Sans';
}
.eligibility-postuler:hover{
  background-color:#0375da;
  transition: background-color 0.3s ease-in-out;
  color: #fff;
}
  .check{
    width: 60%;
  }
.eligibility-postuler {
    background-color: #fff;
    border-radius: 90px;
    color: #03345e;
    font-size: 18px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    text-decoration: none;
    padding: 14px 126px;
}

.eligibility-criteria-text {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.eligibility-criteria-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.eligibility-criteria-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #FFF;
    font-family: "Open Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; 
}


.eligibility-icon  {
    width: 60px;
    position: relative;
    border-radius: 16px;
    height: 60px;
    flex-shrink: 0;
}
li{
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 15px;
    box-sizing: border-box;
    gap: 5%;
    text-align: left;
    font-size: 14px;
    font-family: 'Open Sans';
}

/*  Processus de financement */
.le-processus-de {
    width: 484px;
    position: relative;
    line-height: 160%;
    display: inline-block;
}
.le-processus-de-financement-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.la-dure-du {
    width: 799px;
    position: relative;
    line-height: 160%;
    display: inline-block;
}
.la-dure-du-processus-de-finan-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: 24px;
    color: #4d6f8d;
}
.group-child {
    position: absolute;
    top: 186px;
    left: 636px;
    max-width: 100%;
    overflow: hidden;
    height: 1219px;
}
.group-item {
    position: absolute;
    top: 186px;
    left: 636px;
    max-height: 100%;
    width: 10.7px;
}
.appel-candidatures {
    width: 322px;
    position: relative;
    line-height: 160%;
    display: inline-block;
    color: #03345E;
    text-align: right;
    font-family: "Open Sans";
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
}
.un-appel5 {
    align-self: stretch;
    position: relative;
    font-family: "Open Sans";
    font-size: 16px;
    line-height: 160%;
    color: #4d6f8d;
    left: 8%;
}
.un-appel1 {
    align-self: stretch;
    position: relative;
    font-family: "Open Sans";
    font-size: 16px;
    line-height: 160%;
    color: #4d6f8d;
    left: 0%;
}
.un-appel7 {
    align-self: stretch;
    position: relative;
    font-family: "Open Sans";
    font-size: 16px;
    line-height: 160%;
    color: #4d6f8d;
    left: 0%;
}
.un-appel3{
    align-self: stretch;
    position: relative;
    font-family: "Open Sans";
    font-size: 16px;
    line-height: 160%;
    color: #4d6f8d;
    left: 0%;
}
.un-appel-2 {
    align-self: stretch;
    position: relative;
    font-size: 16px;
    line-height: 160%;
    color: #4d6f8d;
    left: 8%;
    font-family: "Open Sans";
    font-style: normal;
}
.un-appel4{
    align-self: stretch;
    position: relative;
    font-size: 16px;
    line-height: 160%;
    color: #4d6f8d;
    left: 8%;
    font-family: "Open Sans";
    font-style: normal;
}

.un-appel6{
    align-self: stretch;
    position: relative;
    font-size: 16px;
    line-height: 160%;
    color: #4d6f8d;
    left: 8%;
    font-family: "Open Sans";
    font-style: normal;
}

.un-appel8{
    align-self: stretch;
    position: relative;
    font-size: 16px;
    line-height: 160%;
    color: #4d6f8d;
    left: 8%;
    font-family: "Open Sans";
    font-style: normal;
}


/* Media Queries */
@media screen and (max-width: 1200px) {
    .vector-parent {
        gap: 20px;
    }
    
    .appel-candidatures, .due-diligence-et, .comit-de-slection {
        font-size: 20px;
    }
    
    .la-dure-du {
        font-size: 20px;
    }
}

@media screen and (max-width: 768px) {
    .timeline-container {
        padding: 10px;
    }
    
    .vector-parent {
        flex-direction: column;
        gap: 30px;
    }
    
    .timeline-line {
        left: 20px;
    }
    
    /* Réorganiser les points de timeline */
    .frame-parent, .frame-parent2 {
        padding-left: 40px;
    }
    
    .timeline-point {
        position: absolute;
        left: 0;
        width: 30px;
        height: 30px;
    }
    
    /* Ajuster le texte */
    .appel-candidatures, .due-diligence-et, .comit-de-slection {
        font-size: 18px;
        text-align: left;
    }
    
    .un-appel, .un-appel1, .un-appel3, 
    .un-appel-2, .un-appel4, .un-appel6, .un-appel8 {
        left: 0;
        text-align: left;
    }
}

@media screen and (max-width: 480px) {
    .le-processus-de {
        font-size: 24px;
    }
    
    .la-dure-du {
        font-size: 18px;
    }
    
    .appel-candidatures, .due-diligence-et, .comit-de-slection {
        font-size: 16px;
    }
    
    .un-appel1, .un-appel3, .un-appel-2 ,
    .un-appel4, .un-appel6, .un-appel8 {
        font-size: 14px;
    }
    
    .timeline-point {
        width: 25px;
        height: 25px;
    }
}
.appel-candidatures-parent {
    align-self: stretch;
    width: 426px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
}
.div1 {
    position: relative;
    font-size: 156px;
    line-height: 160%;
    font-weight: 600;
    color: rgba(1, 90, 169, 0.2);
    text-align: left;
    z-index: 2;
    margin: 0 auto;
    font-family: 'Open Sans';
}
.frame-group {
    align-self: stretch;
    height: 372px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 89px;
}
.evaluation-et-slection {
    width: 394px;
    position: relative;
    line-height: 160%;
    display: inline-block;
}
.evaluation-et-slection-des-ca-parent {
    align-self: stretch;
    width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.frame-container {
    height: 372px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 72px;
}
.due-diligence-et {
    align-self: stretch;
    position: relative;
    color: #03345E;
    font-family: "Open Sans";
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 160%; 
    left: 8%;
}
.due-diligence-et-visites-de-te-parent {
    position: relative;
    align-self: stretch;
    width: 420px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
    left: -8%;
}
.frame-div {
    height: 372px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 73px;
}
.frame-parent1 {
    height: 372px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 74px;
}
.frame-parent {
    top: 0px;
    left: 0px;
    width: 605px;
    height: 1578px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 50px; 
    position: relative;
    z-index: 1;
}
.div5-1 {
    position: relative;
    line-height: 160%;
    font-weight: 600;
    font-size: 156px;
    font-family: 'Open Sans';
    color: rgba(1, 90, 169, 0.2);
    text-align: left;
    Width: 90px;
    height: 250px;
    top: 2px;
}
.div5-4 {
    position: relative;
    line-height: 160%;
    font-weight: 600;
    font-size: 156px;
    font-family: 'Open Sans';
    color: rgba(1, 90, 169, 0.2);
    text-align: left;
    Width: 90px;
    height: 250px;
    top: -2px;
    left: -4%;
}
.div5-6 {
    position: relative;
    line-height: 160%;
    font-weight: 600;
    font-size: 156px;
    font-family: 'Open Sans';
    color: rgba(1, 90, 169, 0.2);
    text-align: left;
    Width: 90px;
    height: 250px;
    top: -2px;
    left: 31%;
}
.div5-5 {
    position: relative;
    line-height: 160%;
    font-weight: 600;
    font-size: 156px;
    font-family: 'Open Sans';
    color: rgba(1, 90, 169, 0.2);
    text-align: left;
    Width: 90px;
    height: 250px;
    top: -5px;
    left: -5%;
}
.div5-8 {
    position: relative;
    line-height: 160%;
    font-weight: 600;
    font-size: 156px;
    font-family: 'Open Sans';
    color: rgba(1, 90, 169, 0.2);
    text-align: left;
    Width: 90px;
    height: 250px;
    top: -2px;
    left: 25%;
}
.div5-2 {
    position: absolute;
    line-height: 160%;
    font-weight: 600;
    font-size: 156px;
    font-family: 'Open Sans';
    color: rgba(1, 90, 169, 0.2);
    text-align: left;
    Width: 90px;
    height: 250px;
    top: 3.5%;
    left: 4%;
    font-style: normal;
}
.div5-3 {
  position: relative;
  line-height: 160%;
  font-weight: 600;
  font-size: 156px;
  font-family: 'Open Sans';
  color: rgba(1, 90, 169, 0.2);
  text-align: left;
  Width: 90px;
  height: 250px;
  top: 2px;
}
.div5-7 {
  position: relative;
  line-height: 160%;
  font-weight: 600;
  font-size: 156px;
  font-family: 'Open Sans';
  color: rgba(1, 90, 169, 0.2);
  text-align: left;
  Width: 90px;
  height: 250px;
  top: 2px;
}
.prslection-des-dossiers-de-c-parent {
    position: relative;
    align-self: stretch;
    width: 447px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
    font-size: 32px;
    color: #03345e;
    left: 12%;
}
.parent {
    align-self: stretch;
    height: 372px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.notification-et-prise-de-conta-parent {
    position: relative;
    align-self: stretch;
    width: 447px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 32px;
    color: #03345e;
    left: 8%;
}
.group {
    align-self: stretch;
    height: 372px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.comit-de-slection {
    width: 430px;
    position: relative;
    line-height: 160%;
    display: inline-block;
    left: 8%;
}
.comit-de-slection-au-finance-parent {
    position: relative;
    width: 444px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    font-size: 32px;
    color: #03345e;
    left: 11%;
}
.container3 {
    align-self: stretch;
    height: 372px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}
.parent1 {
    align-self: stretch;
    height: 372px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}
.frame-parent2 {
    position: absolute;
    left: 665px;
    top: 0%;
    width: 607px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 30px;
    text-align: left;
    font-size: 156px;
    color: rgba(1, 90, 169, 0.2);
}
.vector-parent {
    width: 1272px;
    position: relative;
    height: 1578px;
    text-align: right;
}
.div {
    max-width: 1250px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    font-size: 32px;
    color: #03345e;
    font-family: 'Open Sans';
    margin: 0 auto;
}
   

.timeline-container {
    display: flex;
    justify-content: center;
    position: relative;
}
/* Ligne principale */
.timeline-line {
  position: absolute;
  width: 2px;
  height: 78%;
  top: 11%; 
  background-color: #CCDEEE;
  transform: translateX(-50%);
  transition: background-color 0.5s ease-in-out, top 1s linear;
}
/* Points */
.timeline-point-line-1, .timeline-point-line-2, .timeline-point-line-3, .timeline-point-line-4 {
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: #CCDEEE; 
  border: none; 
  border-radius: 50%; 
  left: 50%;
  transform: translateX(-50%);
  transition: background-color 1s ease, color 1s ease; 
}

/* Chiffres */
.timeline-point p {
  color: #CCDEEE;
}
/* Animation des chiffres */
.timeline-point p.active {
  color: #015AA9; /* Bleu */
  font-weight: bold;
  transition: color 0.5s ease-in-out;
}

/* Animation de descente des points */
.timeline-point-line-1.active {
  animation: moveDown1 1s linear forwards;
}
.timeline-point-line-2.active {
  animation: moveDown2 1s linear forwards;
}
.timeline-point-line-3.active {
  animation: moveDown3 1s linear forwards;
}
.timeline-point-line-4.active {
  animation: moveDown4 1s linear forwards;
}
.timeline-point-line {
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: #CCDEEE; 
  border-radius: 50%;
  left: 50%;
  transform: translateX(-50%);
  transition: background-color 0.5s ease-in-out, top 1s linear;
}
/* Animations spécifiques pour descendre les points */
@keyframes moveDown1 {
  0% { top: 20%; background-color: #015AA9; }
  100% { top: 40%; background-color: #CCDEEE; }
}

@keyframes moveDown2 {
  0% { top: 40%; background-color: #015AA9; }
  100% { top: 60%; background-color: #CCDEEE; }
}

@keyframes moveDown3 {
  0% { top: 60%; background-color: #015AA9; }
  100% { top: 80%; background-color: #CCDEEE; }
}

@keyframes moveDown4 {
  0% { top: 80%; background-color: #015AA9; }
  100% { top: 99%; background-color: #CCDEEE; }
}

/*  */
.kpi-title {
    align-self: stretch;
    width: 100%;
    font-size: 32px;
    line-height: 160%;
    font-family: 'Open Sans';
    color: #fff;
    text-align: left;
}
.kpi-header {
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    text-align: left;
    font-size: 32px;
    color: #fff;
    font-family: 'Open Sans';
    flex: 1 0 0;
    align-self: stretch;
}
.decore {
    width: 420.5px;
    position: relative;
    height: 337px;
    object-fit: contain;
}

.kpi-value {
    width: 75px;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.2);
    height: 71px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
}

.kpi-value-container {
    width: 75px;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.2);
    height: 71px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
}
.kpi-description {
    width: 230px;
    position: relative;
    font-size: 18px;
    line-height: 160%;
    font-weight: 600;
    display: inline-block;
}
.kpi-item {
    width: 287px;
    height: 174px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 15px;
    box-sizing: border-box;
    gap: 10px;
}
.kpi-value-box {
    width: 75px;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.2);
    height: 71px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
}
.kpi-description-paragraph {
    margin: 0;
}
.kpi-body {
    width: 100%;
    position: relative;
    height: 439px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 39px;
    text-align: left;
    font-size: 24px;
    color: #fff;
    font-family: 'Open Sans';
}
.kpi-detailed-description {
    align-self: stretch;
    position: relative;
    font-size: 18px;
    line-height: 160%;
    font-weight: 600;
}
.kpi-extra-description {
    width: 233px;
    position: relative;
    font-size: 18px;
    line-height: 160%;
    font-weight: 600;
    display: inline-block;
}
.kpi-row {
    align-self: stretch;
    height: 174px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 30px;
}
.kpi-body-wrapper {
    width: 604px;
    height: 439px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 39px;
    font-size: 24px;
}
.kpi-header-container {
    position: absolute;
    top: calc(50% - 219.5px);
    left: calc(50% - 580px);
    width: 1160px;
    height: 439px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 100px;
}
.kpi-container {
    margin-bottom: 9Opx;
}
.kpi{
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    border-radius: 20px;
    background-color: #ca6d50;
    color: #fff;
    font-family: 'Open Sans';
    padding: 60px;
    gap: 60px;
    will-change: opacity, transform;
    max-width: 1250px;
    margin: 0 auto;

}
.kpi-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
}
.kpi-title {
    font-size: 32px;
    line-height: 160%;
    font-weight: 700;
    color: #fff;
    margin: 0;
}
.kpi-illustration {
    width: 75%;
    height: auto;
}
.kpi-right {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.kpi-row {
    display: flex;
}
.kpi-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.kpi-value {
    width: 150px;
    height: 71px;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
}
.kpi-value b {
    font-size: 24px;
    font-weight: 700;
    display: inline-block;
    /* transition: transform 0.2s ease; */
}

/* .kpi-value b.animate {
    transform: scale(1.1);
} */

.kpi-description {
    font-size: 18px;
    line-height: 160%;
    font-weight: 600;
    max-width: 230px;
}
.kpi-description p {
    margin: 0;
}

/* main content */
@media(max-width: 768px) {
    .main-content{
        margin: 0;
        padding: 0;
    }
}
/* Fix pour les écrans de 320px */
@media screen and (max-width: 320px) {
    body, html {
      overflow-x: hidden;
      max-width: 100%;
    }
  }
/* Fix pour les écrans de 375px */
  @media screen and (max-width: 375px) {
    body, html {
      overflow-x: hidden;
      max-width: 100%;
    }
  }
/* Fix pour les écrans de 425px */
  @media screen and (max-width: 425px) {
    body, html {
      overflow-x: hidden;
      max-width: 100%;
    }
  }
/* Fix pour les écrans de 768px */
  @media screen and (max-width: 768px) {
    body, html {
      overflow-x: hidden;
      max-width: 100%;
    }
}

/* Styles mobiles améliorés pour la section KPI */
@media (max-width: 768px) {
    .kpi {
        flex-direction: column;
        padding: 30px 20px;
        gap: 40px;
        margin: 0 20px;
    }

    .kpi-left {
        width: 100%;
        text-align: center;
        gap: 30px;
    }

    .kpi-title {
        font-size: 24px;
        line-height: 140%;
        text-align: center;
        margin-bottom: 20px;
    }

    .kpi-illustration {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }

    .kpi-right {
        width: 100%;
        gap: 20px;
    }

    .kpi-row {
        flex-direction: column;
        gap: 16px;
    }

    .kpi-item {
        flex-direction: row;
        align-items: center;
        gap: 16px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        padding: 12px;
        width: 100%;
        margin: 0;
    }

    .kpi-value {
        width: 100px;
        height: 60px;
        min-width: 100px;
        margin: 0;
        padding: 0 8px;
    }

    .kpi-value b {
        font-size: 20px;
    }

    .kpi-description {
        font-size: 15px;
        line-height: 150%;
        text-align: left;
        max-width: none;
    }
}

@media (max-width: 375px) {
    .kpi {
        padding: 24px 16px;
        margin-top: 185px;
    }

    .kpi-title {
        font-size: 22px;
    }

    .kpi-illustration {
        max-width: 250px;
    }

    .kpi-item {
        padding: 10px;
        gap: 12px;
    }

    .kpi-value {
        width: 90px;
        height: 50px;
        min-width: 90px;
        padding: 0 6px;
    }

    .kpi-value b {
        font-size: 18px;
    }

    .kpi-description {
        font-size: 14px;
        line-height: 140%;
    }
}

@media (max-width: 320px) {
    .kpi {
        padding: 24px 16px;
        margin-top: 146%;
    }
}
/*  */

.processus-de-financement {
    margin-bottom: 90px;
}

.faq-title {
    width: 390px;
    position: relative;
    line-height: 160%;
    display: inline-block;
}
.faq-image {
    position: relative;
    max-width: 100%;
    overflow: hidden;
    object-fit: cover;
}

.ellipse-div {
    width: 140px;
    position: relative;
    border-radius: 50%;
    background-color: #015aa9;
    height: 140px;
    left: 5%;
    top: -441px;
}
.ellipse-div1 {
    width: 120px;
    position: relative;
    border-radius: 50%;
    background-color: #ca6d50;
    height: 120px;
    left: 74%;
    top: -251px;
}

.question-text {
    position: relative;
    letter-spacing: -0.05em;
}
.icon-arrow {
    width: 24px;
    position: relative;
    height: 24px;
    transition: transform 0.3s ease, color 0.3s ease;
}


.question-title {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.answer-text {
    align-self: stretch;
    position: relative;
    letter-spacing: -0.05em;
    line-height: 32px;
    text-align: left;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    overflow: hidden;
    max-height: 0; 
    padding: 0 15px;
}
.faq-item {
    align-self: stretch;
    border-radius: 20px;
    background-color: #fff;
    border: 1px solid #dfe5ec;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
}


.faq-item.open  {
  background-color: #015AA9;
}
.question-title.open b  {
  color: #fff
}
.answer-text.open{
  color: #fff
}

.question-title.open img {
  color: #fff;

}
.fund-objective-parent {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.faq-item-second {
    align-self: stretch;
    border-radius: 20px;
    background-color: #fff;
    border: 1px solid #e6e8eb;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.faq-content {
    width: 830px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 24px;
    margin-top: -14%;
}

.faq-container {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 7%;
    font-size: 16px;
}

.faq-section-parent, .kpi-container {
  margin-bottom: 90px; 
}

.faq{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  will-change: opacity, transform;
  margin: 0 auto;
  max-width: 1250px;
  gap: 51px;

}
.title {
    width: 100%;
    text-align: center;
    margin-bottom: 50px;
}

.faq-title {
    font-size: 32px;
    line-height: 160%;
    color: #03345e;
}

.faq-container {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 60px;
}

.cercler {
    flex: 0 0 40%;
    max-width: 1250px;
    margin-top: -43px;
}

.faq-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    position: relative;
    z-index: 1;
}

.ellipse-div {
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background-color: #015aa9;
    left: -20px;
    top: 20%;
    z-index: 0;
}

.ellipse-div1 {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: #ca6d50;
    right: -20px;
    bottom: 20%;
    z-index: 0;
}

.faq-content {
    flex: 0 0 55%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 0;
}

.faq-item {
    width: 100%;
    border-radius: 20px;
    background-color: #fff;
    border: 1px solid #dfe5ec;
    padding: 16px;
    cursor: pointer;
}

.question-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 8px;
}

.question-text {
    font-size: 16px;
    font-weight: 700;
    color: #03345e;
    letter-spacing: -0.05em;
}

.answer-text {
    font-size: 16px;
    line-height: 1.6;
    color: #4d6f8d;
    padding: 0 8px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}

.answer-text.open {
    max-height: 1000px;
    padding: 16px 8px;
}

.footer-container {
  margin-bottom: 80px;
}
.footer{
  width: 100%;
  padding: 20px 100px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid #E6E8EB;
  background: #FFF;
  gap:10px;
  position:relative;
  top:76px
}
.logo-group {
  display: flex;
  align-items: center;
  gap: 85px;
}

.logo-group img {
  height: auto;
  object-fit: cover;
}

.logo-group img:nth-child(1) {
  width: 153px;
}

.logo-group img:nth-child(2) {
  width: 118.6px;
}

.logo-group img:nth-child(3) {
  width: 73px;
}

.logo-group img:nth-child(4) {
  width: 80px;
}

.contact-info-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact {
  display: flex;
  align-items: center;
  gap: 10px;
}

.contact-img {
  width: 21.3px;
  height: 21.3px;
}

.contact-title {
  color: #03345E;
  font-family: "Open Sans";
  font-size: 20px;
  font-weight: 500;
  line-height: 160%;
}

.contact-mail {
  color: #03345E;
  font-family: "Open Sans";
  font-size: 20px;
  font-weight: 400;
  line-height: 160%;
}
.contact-mail  a {
    text-decoration: none;
    color: #03345E;
    font-family: "Open Sans";
    font-size: 20px;
    font-weight: 400;
    line-height: 160%;
  }
/* FAQ Section Responsive Styles */
@media (max-width: 768px) {
    .faq-section-parent {
        margin: 0 20px 40px 20px;
    }

    .faq-container {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .cercler {
        flex: none;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
        order: -1; 
    }

    .faq-content {
        flex: none;
        width: 100%;
        margin-top: 0;
    }

    .faq-title {
        font-size: 24px;
        width: 100%;
        text-align: center;
    }

    .faq-item {
        padding: 12px;
    }

    .question-title {
        padding: 6px;
    }

    .question-text {
        font-size: 14px;
        line-height: 1.4;
    }

    .answer-text {
        font-size: 14px;
        line-height: 1.5;
    }

    .answer-text.open {
        padding: 12px 6px;
    }

    .arrow-wrapper {
        width: 20px;
        height: 20px;
        display: none;
    }

    .ellipse-div,
    .ellipse-div1 {
        display: none; /* Cache les cercles décoratifs sur mobile */
    }

    .hero {
        display: flex;
        flex-direction: column;
        gap: 40px;
        height: auto;
    }
}

@media (max-width: 375px) {
    .faq-section-parent {
        margin: 0 15px 30px 15px;
    }

    .faq-title {
        font-size: 22px;
    }

    .cercler {
        max-width: 250px;
    }

    .ellipse-div,
    .ellipse-div1 {
        width: 60px;
        height: 60px;
    }

    .faq-item {
        padding: 10px;
    }

    .question-text {
        font-size: 13px;
    }

    .answer-text {
        font-size: 13px;
        line-height: 1.4;
    }

    .footer-container {
      padding: 15px;
    }
  
    .logo-group {
      gap: 20px;
    }
  
    .logo-group img:nth-child(1) {
      width: 130px;
    }
  
    .logo-group img:nth-child(2) {
      width: 100px;
    }
  
    .logo-group img:nth-child(3) {
      width: 60px;
    }
  
    .logo-group img:nth-child(4) {
      width: 65px;
    }
  
    .contact-title,
    .contact-mail {
      font-size: 10px;
    }
  
}


/* footer */

.main-image {
    width: 153px;
    position: relative;
    height: 24.2px;
    object-fit: cover;
}
.secondary-image {
    width: 118.6px;
    position: relative;
    height: 42.7px;
    object-fit: cover;
}
.tertiary-image {
    width: 73px;
    position: relative;
    height: 76px;
    object-fit: cover;
}
.overlay-icon {
    width: 80px;
    position: relative;
    height: 54px;
    overflow: hidden;
    flex-shrink: 0;
}
.image-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 85px;
}
.contact-label {
    position: absolute;
    top: 0px;
    left: 91px;
    line-height: 160%;
    font-weight: 500;
}
.contact-icon {
    width: 100%;
    position: relative;
    max-width: 100%;
    overflow: hidden;
    height: 21.3px;
    top: 15%;
}
.contact-section {
    width: 123px;
    position: relative;
    height: 32px;
    color: #03345E;
    font-family: "Open Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 160%; /* 32px */
}
.contact-email {
    color: #03345E;
    font-family: "Open Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 32px */
}
.contact-info-container {
    width: 277px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
}
.image-frame-wrapper {
    width: 100%;
    position: relative;
    height: 196px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 20px 100px;
    box-sizing: border-box;
    text-align: left;
    font-size: 20px;
    color: #03345e;
    font-family: 'Blacker Text';
    border-top: 1px solid #E6E8EB;
    background: #FFF;
    justify-content: space-between;
}

/* Section éligibilité responsive styles */
@media (max-width: 768px) {
    .eligibility-frame-group {
        flex-direction: column;
        padding: 30px 20px;
        gap: 30px;
        height: auto;
        margin: 0 20px;
    }

    .eligibility-criteria-container {
        width: 100%;
        align-items: center;
        text-align: center;
        gap: 30px;
    }

    .eligibility-title-wrapper {
        width: 100%;
        text-align: center;
    }

    .eligibility-title {
        font-size: 24px;
        line-height: 140%;
        width: 100%;
    }

    .eligibility-subtitle {
        font-size: 16px;
        width: 100%;
    }

    .eligibility-postuler-wrapper {
        width: 100%;
    }

    .eligibility-postuler {
        width: 100%;
        max-width: 300px;
        padding: 12px 20px;
        font-size: 16px;
        text-align: center;
    }

    .check {
        display: none; /* Cache l'image check sur mobile */
    }

    .eligibility-criteria-text {
        width: 100%;
    }

    .eligibility-criteria-list {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .eligibility-criteria-list li {
        font-size: 14px;
        line-height: 150%;
        padding: 12px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        margin: 0;
    }

    .eligibility-criteria-list li span {
        display: flex;
        align-items: center;
        margin-right: 10px;
    }

}

@media (max-width: 375px) {
    .eligibility-frame-group {
        padding: 20px 15px;
        gap: 25px;
    }

    .eligibility-title {
        font-size: 22px;
    }

    .eligibility-subtitle {
        font-size: 15px;
    }

    .eligibility-postuler {
        padding: 10px 15px;
        font-size: 15px;
    }

    .eligibility-criteria-list li {
        font-size: 13px;
        padding: 10px;
    }
}

/* Processus de financement responsive styles */
@media (max-width: 1024px) {
    .processus-de-financement {
        margin: 0 40px 60px 40px;
    }

    .le-processus-de {
        font-size: 28px;
        width: 100%;
        text-align: center;
    }

    .la-dure-du {
        font-size: 20px;
        width: 100%;
        text-align: center;
    }

    .vector-parent {
        width: 100%;
        padding: 0;
    }
    .section-secteur{
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .processus-de-financement {
        margin: 0 20px 40px 20px;
    }

    .le-processus-de {
        font-size: 24px;
        line-height: 140%;
    }

    .la-dure-du {
        font-size: 18px;
        line-height: 160%;
        padding: 0 20px;
        margin-bottom: 40px;
    }

    /* Masquer la timeline et ses points */
    .timeline-container .timeline-line,
    .timeline-point-line-1,
    .timeline-point-line-2,
    .timeline-point-line-3,
    .timeline-point-line-4 {
        display: none;
    }
    .timeline-point p {
        color: #015AA9;
      }
    /* Réorganisation des étapes en une seule colonne */
    .vector-parent {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .frame-parent,
    .frame-parent2 {
        width: 100%;
        height: auto;
        position: static;
        display: contents;
    }

    .frame-group { order: 1; } /* Étape 1 */
    .parent { order: 2; } /* Étape 2 */
    .frame-container { order: 3; } /* Étape 3 */
    .group { order: 4; } /* Étape 4 */
    .frame-div { order: 5; } /* Étape 5 */
    .container3 { order: 6; } /* Étape 6 */
    .frame-parent1 { order: 7; } /* Étape 7 */
    .parent1 { order: 8; } /* Étape 8 */

    /* Style des étapes individuelles */
    .frame-group,
    .frame-container,
    .frame-div,
    .frame-parent1,
    .parent,
    .group,
    .container3,
    .parent1 {
        background: #F8F9FA;
        border-radius: 12px;
        padding: 28px;
        margin: 0;
        position: relative;
        height: auto;
        width: 100%;
    }

    /* Style des numéros d'étapes */
    .div5-1,
    .div5-2,
    .div5-3,
    .div5-4,
    .div5-5,
    .div5-6,
    .div5-7,
    .div5-8 {
        font-size: 55px;
        opacity: 0.2;
        position: absolute;
        top: -211%;
        transform: none;
        left: 2048%;
    }



    /* Style des titres et contenus */
    .appel-candidatures,
    .evaluation-et-slection,
    .due-diligence-et,
    .comit-de-slection {
        font-size: 18px;
        line-height: 140%;
        color: #03345E;
        margin-bottom: 12px;
        padding-right: 40px; 
        text-align: left;
        left: 1%;
    }

    .evaluation-et-slection{
        left : -20%
    }
    .un-appel,
    .un-appel1,
    .un-appel-2,
    .un-appel3,
    .un-appel4, 
    .un-appel6,
    .un-appel7,
    .un-appel8,
    .un-appel5 {
        font-size: 14px;
        line-height: 160%;
        color: #4D6F8D;
        width: 90%;
        text-align: left;
    }
    .un-appel5{
        left: 1%;
    }
    .appel-candidatures{
        left: -51%;
    }

    /* Ajustement des conteneurs */
    .appel-candidatures-parent,
    .evaluation-et-slection-des-ca-parent,
    .due-diligence-et-visites-de-te-parent,
    .prslection-des-dossiers-de-c-parent,
    .notification-et-prise-de-conta-parent,
    .comit-de-slection-au-finance-parent {
        width: 100%;
        position: static;
    }
}

@media (max-width: 375px) {
    .processus-de-financement {
        margin: 0 15px 30px 15px;
    }

    .le-processus-de {
        font-size: 22px;
    }

    .la-dure-du {
        font-size: 16px;
    }

    .frame-group,
    .frame-container,
    .frame-div,
    .frame-parent1,
    .parent,
    .group,
    .container3,
    .parent1 {
        padding: 16px;
        width: 100%;
        height: auto;
    }
    .timeline-line {
        transition: none; 
      }
    
      .timeline-point-line-1, 
      .timeline-point-line-2, 
      .timeline-point-line-3, 
      .timeline-point-line-4 {
        transition: none; 
      }
    
      .timeline-point p.active {
        transition: none; 
      }
      .timeline-point p {
        color: #015AA9;
      }
    .appel-candidatures,
    .evaluation-et-slection,
    .due-diligence-et,
    .comit-de-slection {
        font-size: 16px;
        width: 100%;
        height: auto;

    }
    .un-appel1,
    .un-appel-2,
    .un-appel3,
    .un-appel4,
    .un-appel5,
    .un-appel6,
    .un-appel7,
    .un-appel8 {
        font-size: 13px;
        width: 100%;
        height: auto;
    }
        .un-appel5{
            left: -2%;
        }
    .footer-container {
      padding: 15px;
    }
  
    .logo-group {
      gap: 20px;
    }
  
    .logo-group img:nth-child(1) {
      width: 130px;
    }
  
    .logo-group img:nth-child(2) {
      width: 100px;
    }
  
    .logo-group img:nth-child(3) {
      width: 60px;
    }
  
    .logo-group img:nth-child(4) {
      width: 65px;
    }
  
    .contact-title,
    .contact-mail {
      font-size: 10px;
    }
}

@media (max-width: 425px){
    .processus-de-financement {
        margin: 0 15px 30px 15px;
    }

    .le-processus-de {
        font-size: 22px;
    }

    .la-dure-du {
        font-size: 16px;
    }

    .frame-group,
    .frame-container,
    .frame-div,
    .frame-parent1,
    .parent,
    .group,
    .container3,
    .parent1 {
        padding: 7px;
        width: 100%;
        height: auto;
    }
    .div5-1,
    .div5-2,
    .div5-3,
    .div5-4,
    .div5-5,
    .div5-6,
    .div5-7,
    .div5-8 {
        font-size: 40px;
        left: 1244%;
        top: -65px;   
    }
    .timeline-line {
        transition: none; 
      }
    
      .timeline-point-line-1, 
      .timeline-point-line-2, 
      .timeline-point-line-3, 
      .timeline-point-line-4 {
        transition: none; 
      }
    
      .timeline-point p.active {
        transition: none; 
      }
     .timeline-point p{
        color: #015AA9;
     }
    .appel-candidatures,
    .evaluation-et-slection,
    .due-diligence-et,
    .comit-de-slection {
        font-size: 16px;
        width: 100%;
        height: auto;
        left : 0%
    }
    .evaluation-et-slection{
        text-align: left;
    }
    .un-appel1,
    .un-appel-2,
    .un-appel3,
    .un-appel4,
    .un-appel5,
    .un-appel6,
    .un-appel7,
    .un-appel8 {
        font-size: 13px;
        width: 100%;
        max-width: 86%;
        height: auto;
        text-align: left;
        padding: 6px;
    }
    .un-appel5{
        left: 1%;
    }

}
/* alignement des chiffres */
@media (max-width: 375px){
    .div5-1,
    .div5-2,
    .div5-3,
    .div5-4,
    .div5-5,
    .div5-6,
    .div5-7,
    .div5-8 {
        font-size: 40px;
        left: 1140%;
    }
}

@media (max-width: 320px){
    .frame-group,
    .frame-container,
    .frame-div,
    .frame-parent1,
    .parent,
    .group,
    .container3,
    .parent1 {
        padding: 7px;
        width: 100%;
        height: auto;
    }

    .div5-1,
    .div5-2,
    .div5-4,
    .div5-3,
    .div5-5,
    .div5-6,
    .div5-7,
    .div5-8 {
        font-size: 40px;
        left: 924%;
        top: -77px
    }
    .timeline-line {
        transition: none; 
      }
    
      .timeline-point-line-1, 
      .timeline-point-line-2, 
      .timeline-point-line-3, 
      .timeline-point-line-4 {
        transition: none; 
      }
    
      .timeline-point p.active {
        transition: none; 
      }
     .timeline-point p{
        color: #015AA9;
     }
    .appel-candidatures,
    .evaluation-et-slection,
    .due-diligence-et,
    .comit-de-slection {
        font-size: 16px;
        width: 100%;
        height: auto;
    }
    .evaluation-et-slection{
        left: -1%;
        text-align: left;
    }
    .un-appel1,
    .un-appel-2,
    .un-appel3,
    .un-appel4,
    .un-appel5,
    .un-appel6,
    .un-appel7,
    .un-appel8 {
        font-size: 13px;
        width: 100%;
        height: auto;
        text-align: left;
    }
}

@media (max-width: 768px) {
    .arrow {
        display: none;
    }
    
    .hero-section {
        min-height: auto;
        margin-bottom: 60px;
        flex-direction: column;
        gap: 30px;
    }

    .hero-content {
        max-width: 100%;
        text-align: center;
        align-items: center;
    }

    .hero-text {
        align-items: center;
    }

    .hero-images {
        justify-content: center;
        width: 100%;
        display: flex;
    }

    .circle-container {
        margin-right: 0;
        text-align: center;
    }

    .image-personne {
        max-width: 80%;
        margin-left: 11%;
    }

    .footer-container {
      padding: 20px;
      flex-direction: column;
      gap: 30px;
    }
  
    .logo-group {
      gap: 30px;
      flex-wrap: wrap;
      justify-content: center;
    }
  
    .contact-info-container {
      align-items: center;
    }
}
/* style pour centré le hero section */
@media (max-width: 320px) {
    .image-personne {
        max-width: 80%;
        margin-left: 36%;
    }
  .postuler-wrapper{
    margin-left: 8%;
    width: 50%;
  }
}
@media (max-width: 375px) {
    .image-personne {
        max-width: 80%;
        margin-left: 26%;
    }
 
}
@media (max-width: 425px) {
    .image-personne {
        max-width: 80%;
        margin-left: 20%;
    }
  .postuler-wrapper{
    width: 100%;
    margin: 0;
  }
  .hero-text {
    text-align: center;
  }
}

/* Animation de fade-in */
.fade-in-section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}

.fade-in-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Ajustement pour les sections spécifiques */
.hero-section {
  opacity: 1;
  transform: none;
}

/* Pour éviter les conflits avec d'autres transitions */
.section-programme,
.secteurs-section,
.section-eligibility,
.processus-de-financement,
.kpi-container,
.faq-section-parent {
  will-change: opacity, transform;
}

/* Modification des styles responsives pour le footer */
@media (max-width: 768px) {
  .footer {
    flex-direction: column;
    padding: 30px 20px;
    gap: 30px;
  }

  .logo-group {
    flex-direction: column;
    gap: 25px;
    align-items: center;
  }

  .contact-info-container {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }

  .contact {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .contact::after {
    content: ":";
    color: #03345E;
  }
}

@media (max-width: 375px) {
  .contact-info-container {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  .contact-title,
  .contact-mail {
    font-size: 10px;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *



 */