/* ##################################  retour page formation   ################################## */

.back-link {
  text-align: left;
  /*margin-bottom: 2px;*/
  margin-top:10%;
}

.back-link a {
  color: #830b88;
  text-decoration: none;
  font-weight: bold;
}

.back-link a:hover {
  text-decoration: underline;
}

/* ##################################  Section équipe   ################################## */

#section_formation {
    background-color:#ffffffe7;
    /*padding: 20px 0 100px 0 ;*/
    text-align:center; 
    margin-top:30px;
}

#section_formation h2 {
    text-align: center;
    margin-bottom: 0px;
    font-size: 40px;
    color: #2e65ca;
    padding-top: 15%;
  
}


.section_equipe {
    padding:10px;
    text-align:left;
}


.accordion-item {
    margin-bottom: 10px;

}

.accordion-header {
    background-color: #eee8e8; /*#d1e1fa*/
    border-radius: 5px;
    padding: 20px;
    cursor:pointer;
    font-weight:500;
    text-align: left;
    font-size: 20px;
    margin-bottom:20px;
    display: flex;
    justify-content: space-between;
    align-items: center;

}




.accordion-content {
    max-height:0;
    overflow:hidden;
    transition:/*max-height 0.5s ease;*/ max-height 0.4s ease, padding 0.4s ease;
    display: grid;
    padding: 0 30px;
    gap:30px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    /* ou replace "auto-fit" par 3 si tu veux 3 fixes */
    

}



/* Icône flèche */
.icon {
  transition: transform 0.3s ease;
}

.accordion-item.active .icon {
  transform: rotate(180deg);
}

/* Flèche SVG */
.arrow {
  width: 24px;
  height: 24px;
  stroke: #333;
}

/*
.accordion-header .symbol {
  font-size: 30px;
  font-weight: bold;
}




/*.accordion-content p, h4{
    margin:0;
    padding:3px;
    text-align: center;
    font-size: 15px;
    margin: 0px;
}*/

.accordion-item.active .accordion-content{
    max-height: 1000px;
    padding-bottom:5px;
}



.team-mem{
    background-color:#dfecfd; 
    padding: 5px;
    border-radius: 5px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    
}

/* Cible précisément les h4 et p dans les membres */
.team-mem h4,
.team-mem p {
    color:#212180;
    white-space: normal;
    word-break: break-word;
    margin: 3px 0;
    font-size: 15px;
    line-height: 1.6; /* 1.6 fois la taille de la police */
}

@media (max-width: 768px) {
    .accordion-header {
        font-size: 18px;
        padding: 15px;
    }

    .accordion-header .symbol {
        font-size: 26px;
    }

    .accordion-content {
        padding: 0 15px;
        gap: 20px;
    }

    .team-mem h4,
    .team-mem p {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .accordion-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .accordion-header .symbol {
        align-self: flex-end;
    }

    .accordion-content {
        grid-template-columns: 1fr; /* une seule colonne en mobile */
        padding: 0 10px;
        gap: 15px;
    }

    .team-mem {
        padding: 8px;
    }
}