/* SECTION */
.apropos-section {
    width:100%;
    background-color:#F0E2D5;
    padding:50px 20px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
}

/* PHOTO */

.apropos-photo-container img{
    width:240px;
    height:240px;
    border-radius:50%;
    object-fit:cover;
    box-shadow:0 6px 12px rgba(0,0,0,0.12);
}

/* CONTENU */

.apropos-text{
    max-width:750px;
    text-align:center;
    display:flex;
    flex-direction:column;
    gap:12px;
}

/* INTRO */

.apropos-text .intro{
    font-family:'Coco',sans-serif;
    font-size:1.7rem;
    color:#A17665;
    margin-bottom:5px;
}

/* PRESENTATION */

.apropos-text .presentation{
    font-family:'Helvetica',serif;
    font-size:1.1rem;
    color:#A17665;
    line-height:1.5;
}

/* DIPLOMES */

.apropos-text .diplome{
    font-family:'Helvetica',serif;
    font-size:1rem;
    color:#A17665;
    line-height:1.5;
    background:#ffffff80;
    padding:15px 18px;
    border-radius:10px;
}

/* LIENS */

.apropos-text a{
    color:#A17665;
    text-decoration:underline;
}

.apropos-text a:hover{
    color:#8E8E74;
}

/* GALERIE */
.apropos-gallery {
    width: 90%;
    margin: 0 auto;
    position: relative;
    height: 600px; /* hauteur fixe ou à adapter */
}

.gallery-fade {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.gallery-fade img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.gallery-fade img.active {
    opacity: 1;
}

/* BLOCS */
/* CONTENEUR DE BLOCS */
.apropos-blocks {
    display: flex;
    justify-content: center; /* centre les blocs sur la page */
    gap: 30px; /* espace entre les deux blocs */
    width: 90%;
    margin: 0 auto 60px; /* centre et espace avec sections précédentes et suivantes */
}

/* BLOCS INDIVIDUELS */
.apropos-cabinet,
.apropos-approche {
    flex: 1; /* largeur égale */
    padding: 30px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    min-height: 250px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* COULEURS DES BLOCS */
.apropos-cabinet {
    background-color: #B9B8A4;
    color: #F0E2D5;
}

.apropos-approche {
    background-color: #B9B8A4;
    color: #F0E2D5;
}

/* TITRES ET PARAGRAPHES */
.apropos-cabinet h3,
.apropos-approche h3 {
    font-family: 'Coco', sans-serif;
    font-size: 2rem;
    margin-bottom: 15px;
}

.apropos-cabinet p,
.apropos-approche p {
    font-family: 'Helvetica', serif;
    font-size: 1.2rem;
    line-height: 1.8;
}

/* BLOC PRESTATIONS */
.apropos-prestations {
    width: 100%;
    background-color: #8E8E74; /* couleur de fond de la section */
    text-align: center;
    padding: 80px 20px; /* espace vertical et horizontal */
    box-sizing: border-box;
}

/* TITRE */
.apropos-prestations h2 {
    font-family: 'Coco', sans-serif;
    font-size: 3rem;
    color: #F0E2D5;
    margin-bottom: 30px;
}

/* PARAGRAPHE */
.apropos-prestations p {
    font-family: 'Helvetica', serif;
    font-size: 1.3rem;
    line-height: 1.8;
    max-width: 800px; /* limite la largeur du texte */
    margin: 0 auto 40px; /* centre le texte et espace avec le bouton */
    color: #F0E2D5;
}

/* BOUTON */
.btn-prestations {
    padding: 15px 50px;
    font-family: 'Coco', sans-serif;
    font-size: 1.5rem;
    background-color: #D79C73;
    color: #F0E2D5;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.btn-prestations:hover {
    background-color: #A17665;
    transform: scale(1.05);
}

/* MEDIA QUERY */
/* TABLETTE - max 1024px */
@media (max-width: 1024px) {

    .apropos-section {
        padding: 60px 20px;
        gap: 30px;
    }

    .apropos-photo-container img {
        width: 250px;
        height: 250px;
    }

    .apropos-text .intro {
        font-size: 1.6rem;
    }

    .apropos-text p:last-child {
        font-size: 1.1rem;
        max-width: 700px;
    }

    .apropos-gallery {
        height: 500px;
    }

    .apropos-blocks {
        flex-direction: column;
        gap: 20px;
    }

    .apropos-cabinet,
    .apropos-approche {
        padding: 20px;
        min-height: 200px;
    }

    .apropos-cabinet h3,
    .apropos-approche h3 {
        font-size: 1.8rem;
    }

    .apropos-cabinet p,
    .apropos-approche p {
        font-size: 1.1rem;
    }

    .apropos-prestations {
        padding: 60px 15px;
    }

    .apropos-prestations h2 {
        font-size: 2.5rem;
    }

    .apropos-prestations p {
        font-size: 1.1rem;
        max-width: 700px;
        margin-bottom: 30px;
    }

    .btn-prestations {
        font-size: 1.3rem;
        padding: 12px 40px;
    }
}

/* MOBILE - max 768px */
@media (max-width: 768px) {

    .apropos-section {
        padding: 50px 15px;
        gap: 20px;
    }

    .apropos-photo-container img {
        width: 200px;
        height: 200px;
    }

    .apropos-text .intro {
        font-size: 1.4rem;
    }

    .apropos-text p:last-child {
        font-size: 1rem;
        max-width: 600px;
    }

    .apropos-gallery {
        height: 400px;
    }

    .apropos-blocks {
        gap: 15px;
    }

    .apropos-cabinet,
    .apropos-approche {
        padding: 15px;
        min-height: 180px;
    }

    .apropos-cabinet h3,
    .apropos-approche h3 {
        font-size: 1.6rem;
    }

    .apropos-cabinet p,
    .apropos-approche p {
        font-size: 1rem;
    }

    .apropos-prestations {
        padding: 50px 10px;
    }

    .apropos-prestations h2 {
        font-size: 2rem;
    }

    .apropos-prestations p {
        font-size: 1rem;
        max-width: 500px;
        margin-bottom: 25px;
    }

    .btn-prestations {
        font-size: 1.2rem;
        padding: 10px 35px;
    }
}

/* PETIT MOBILE - max 480px */
@media (max-width: 480px) {

    .apropos-section {
        padding: 40px 10px;
        gap: 15px;
    }

    .apropos-photo-container img {
        width: 150px;
        height: 150px;
    }

    .apropos-text .intro {
        font-size: 1.2rem;
    }

    .apropos-text p:last-child {
        font-size: 0.9rem;
        max-width: 400px;
    }

    .apropos-gallery {
        height: 300px;
    }

    .apropos-blocks {
        flex-direction: column;
        gap: 10px;
    }

    .apropos-cabinet,
    .apropos-approche {
        padding: 20px;
        min-height: 150px;
    }

    .apropos-cabinet h3,
    .apropos-approche h3 {
        font-size: 1.4rem;
    }

    .apropos-cabinet p,
    .apropos-approche p {
        font-size: 0.9rem;
    }

    .apropos-prestations {
        padding: 40px 10px;
    }

    .apropos-prestations h2 {
        font-size: 1.8rem;
    }

    .apropos-prestations p {
        font-size: 0.9rem;
        max-width: 350px;
        margin-bottom: 20px;
    }

    .btn-prestations {
        font-size: 1rem;
        padding: 8px 30px;
    }
}