.about-photo { 
    width: 180px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    display: block;
    margin-bottom: 0; /* géré via flex */
}

/* Photo et présentation côte à côte (grande largeur) */
@media (min-width: 768px) {
    .about-header {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 20px;
    }

    .about-photo {
        flex-shrink: 0;
    }
}

/* Titres à droite de la photo */
.about-intro h2,
.about-intro h3,
.about-intro h4 {
    margin: 0;
    text-align: left;
}

/* Texte biographique en dessous */

.about-bio {
    margin-top: 20px;
}

.items-main-about {
    padding: 20px;
    background-color: #F9DBC2; 
    border-radius: 8px;
    box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: row;
    width: 100%;
}

.item-main-about {
    width: 100%;
}

.items-main-about-middle {
    margin-top: 10px; 
    display: flex;
    flex-direction: row;	
    gap:10px;
}

.item-main-about-middle {
    width: 100%;
    height: auto;	
    margin-bottom: 10px;
    padding: 20px;
    background-color: #F9DBC2; 
    border-radius: 8px;
    box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.3);
}

.contact-phone,
.contact-email,
.contact-adress {
    display: flex;         
    justify-content: left; 
}

.contact-phone a,
.contact-email a {
    display: inline-flex;  
    align-items: center;   
    gap: 10px;             
    text-decoration: none; 
    color: inherit;        
}

.contact-email {
    word-break: break-word;
    overflow-wrap: break-word; 
}

.separator {
    width: 100%;
    height: 2px;
    background-color: #67564D;
    margin: 20px 0;
}

a:hover {
    color: #FF3840; 
    font-weight: bold;
}

@media (max-width: 767px) {
  .items-main-about-middle {
    flex-direction: column;
    gap: 4px;
  }

  .about-header {
    flex-direction: column;
    align-items: flex-start; /* Aligner à gauche */
  }

  .about-intro h2,
  .about-intro h3,
  .about-intro h4 {
    text-align: left; /* Titres alignés à gauche */
  }
}