/*style principal pour plusieur page*/

/*style pour toute page enfant*/

.body-page-enfant {
    display: flex;
    flex-direction: column;
    background: none;
    margin: 60px 0px 0px 0px; /* Laisser de l'espace pour le header */
    padding: 0px;
    min-height: 100vh; /* Utilisez min-height pour s'assurer que la hauteur minimale est de 100% de la hauteur de la fenêtre */
    overflow-y: auto; /* Défilement uniquement si nécessaire */
}





/*style barre d'acceuil*/

/* style barre d'accueil */
/* Style pour le menu hamburger et les liens de menu */
#nav-top {
    top: 0;
    position: fixed;
    width: 100%;
    height: 60px;
    margin: 0;
    z-index: 10;
    background-color: rgba(61, 74, 72, 0.70);
    backdrop-filter: blur(10px);
    display: flex;

    align-items: center;
    padding: 0 20px;
}

#nav-menu {
    display: flex;
    align-items: center;
    justify-content: center; /* Centre les liens horizontalement */
    flex: 1; /* S'assure que le menu occupe tout l'espace disponible */
}

#nav-links {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
    gap: 20px;
    
}
#Acc {
    font-family: "Playfair Display", serif;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff; /* Couleur texte en blanc pour contraster avec le fond */
    text-decoration: none;
    position: absolute;
    left: 60px;
}
#nav-links li {
    display: inline-block;
}

#nav-top ul li a {
    font-family: "Playfair Display", serif;
    text-transform: uppercase;
    font-weight: bold;
    color: #ffffff;
    text-decoration: none;
    padding: 5px 10px;
    transition: color 0.3s ease;
}

#nav-top ul li a:hover {
    color: rgba(159, 86, 44, 1);
}

#nav-toggle {
    display: none; /* Masquer l'icône hamburger par défaut */
    cursor: pointer;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
}

#nav-toggle span {
    display: block;
    height: 3px;
    background: #ffffff;
    border-radius: 3px;
}

/* Menu mobile */
@media (max-width: 900px) {
    #nav-links  {
        display: none; /* Masquer les liens du menu sur les petits écrans */
        position: absolute;
        top: 60px;
        left: 0;
        padding: 20px;
        background-color: rgba(61, 74, 72,1);
        width: auto;
        height: auto;
        flex-direction: column;
        gap: 20px;
        z-index: 9;
    }
    #nav-links a {
        display: block;
        border: #9F562C 1px solid;
        margin: 0px;

    }
    #nav-links li{
        margin: -10.5px;
    }

    #nav-toggle {
        display: flex; /* Afficher l'icône hamburger sur les petits écrans */
    }

    /* Menu actif */
    #nav-menu.active #nav-links {
        display: flex; /* Afficher les liens lorsque le menu est actif */
    }
}

/* Effets d'animation pour le menu hamburger */
#nav-menu.active #nav-links {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}





/* style page d'accueil*/

#htmlpagep, #body-pagep {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden; /* Désactive le défilement */
}

#body-pagep {
    display: flex;
    flex-direction: column;
    background: none; /* Aucune couleur de fond sur le body */
}


#background-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(61, 74, 72, 0.50); /* Couleur de fond pour les côtés */
    z-index: 1; /* Assure que ce conteneur reste en arrière-plan */
}

main {
    position: relative;
    height: 100vh; /* Occupe toute la hauteur de la fenêtre */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5; /* Au-dessus du background-container */
    overflow: hidden; /* Assure qu'il n'y ait pas de défilement au sein de main */
}

#img-principal {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin-top: 60px;
    width: 100%;  
    height: 100%; /* Assure que l'image couvre toute la hauteur */
    object-fit: cover; /* Couvre tout l'espace sans déformer l'image */
    z-index: -1; /* Reste en arrière-plan */
    display: block;
}


/* supression du c-cadre car inutile*/

/* Effet de survol sur le conteneur principal */
#c-cadre:hover {
    transform: translateY(-5px); /* Légère élévation au survol */
}

/* Style pour l'élément MD */
#MD {
    width: 250px; /* Largeur fixe */
    height: 150px; /* Hauteur fixe */
    background-color: #2C3C37; /* Couleur de fond vert foncé */
    color: #ffffff; /* Couleur du texte blanche pour contraste */
    display: flex;
    justify-content: center; /* Centre le texte horizontalement */
    align-items: center; /* Centre le texte verticalement */
    font-size: 3rem; /* Taille de police grande et imposante */
    font-weight: bold; /* Texte en gras */
    border-radius: 10px; /* Angles légèrement arrondis */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Ombre pour profondeur */
    cursor: default; /* Curseur par défaut */
    transition: transform 0.3s ease; /* Transition pour effet de survol */
}

/* Effet de survol sur MD */
#MD:hover {
    transform: scale(1.05); /* Agrandissement léger au survol */
}

/* Style pour le conteneur "Qui suis-je ?" */
#Qui {
    width: 250px; /* Largeur initiale */
    height: 150px; /* Hauteur initiale */
    background-color: #9F562C; /* Couleur de fond marron chaud */
    color: #ffffff; /* Couleur du texte blanche */
    border-radius: 10px; /* Angles arrondis */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Ombre pour profondeur */
    overflow: hidden; /* Cache le contenu débordant */
    position: relative; /* Positionnement relatif pour éléments internes */
    cursor: pointer; /* Change le curseur en main au survol */
    transition: all 0.6s ease-out; /* Transition globale pour les changements */
    display: flex;
    flex-direction: column; /* Aligne les éléments verticalement */
    justify-content: center; /* Centre verticalement */
    align-items: center; /* Centre horizontalement */
    text-align: center; /* Centre le texte */
    padding: 20px; /* Espacement interne */
}

/* Style pour le titre à l'intérieur de "Qui suis-je ?" */
#Qui h1 {
    font-size: 1.5rem; /* Taille de police pour le titre */
    margin-bottom: 10px; /* Espacement inférieur pour séparation */
    transition: color 0.3s ease; /* Transition de couleur au survol */
}

/* Style pour le texte caché */
#q-t-cache {
    font-size: 1rem; /* Taille de police standard */
    line-height: 1.6; /* Hauteur de ligne pour meilleure lisibilité */
    text-align: justify; /*justifé le texte*/
    opacity: 0; /* Rend le texte invisible initialement */
    max-height: 0; /* Hauteur maximale nulle pour cacher le texte */
    overflow: hidden; /* Cache le débordement du texte */
    transition: opacity 0.5s ease, max-height 0.5s ease; /* Transitions pour apparition douce */
}

/* Effets au survol de "Qui suis-je ?" */
#Qui:hover {
    width: 600px ; /* Augmente la largeur pour révéler le contenu */
    height: 340px; /* Augmente la hauteur pour révéler le contenu */
    background-color: #2C3C37; /* Change la couleur de fond au survol */
    align-items: flex-start; /* Aligne le contenu en haut à gauche */
    padding: 30px; /* Augmente le padding pour aérer le contenu */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); /* Accentue l'ombre pour effet de focus */
}

/* Changement de couleur du titre au survol */
#Qui:hover h1 {
    color: #9F562C; /* Change la couleur du titre pour contraste */
}

/* Apparition du texte caché au survol */
#Qui:hover #q-t-cache { /* hover et remplacer par active pour être utilisé avec le code JavaScript*/
    opacity: 1; /* Rend le texte visible */
    max-height: 200px; /* Définit une hauteur suffisante pour afficher le texte */
    margin-top: 10px; /* Ajoute un espacement supérieur */
}

@media (max-width: 700px) {
    
    #Qui:hover {
        width: 400px ; /* Augmente la largeur pour révéler le contenu */
        height: 50%; /* Augmente la hauteur pour révéler le contenu */
        background-color: #2C3C37; /* Change la couleur de fond au survol */
        align-items: flex-start; /* Aligne le contenu en haut à gauche */
        padding: 30px; /* Augmente le padding pour aérer le contenu */
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); /* Accentue l'ombre pour effet de focus */
    }
    #Qui:hover #q-t-cache { /* hover et remplacer par active pour être utilisé avec le code JavaScript*/
        opacity: 1; /* Rend le texte visible */
        max-height: 400px; /* Définit une hauteur suffisante pour afficher le texte */
        margin-top: 10px; /* Ajoute un espacement supérieur */
    }

}


/* Media query pour responsivité sur écrans plus petits */
@media (max-width: 500px) {
    #c-cadre {
        width: 90%; /* Adapte la largeur du conteneur */
        padding: 20px; /* Réduit le padding */
    }

    #MD,
    #Qui {
        width: 100%; /* Les éléments prennent toute la largeur disponible */
    }

    #Qui:hover {
        width: 100%; /* Conserve la largeur sur mobile lors du survol */
    }

}

/* Styles pour les écrans tactiles */
@media (pointer: coarse) {
    #Qui {
        cursor: default; /* Change le curseur pour les écrans tactiles */
        max-width: fit-content;
    }

    #Qui.active {
        width: auto;
        max-width: 600px;
        height: auto;
        background-color: #2C3C37;
        align-items: flex-start;
        padding: 30px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    }

    #Qui.active h1 {
        color: #9F562C;
    }

    #Qui.active #q-t-cache {
        opacity: 1;
        max-height: 400px; /* s'assurer que la valeur valeur max-height n'est pas "auto" */
        margin-top: 10px;
    }

    
}






footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 0px;
    background-color: #fff;
    text-align: center;
    border-top: 1px solid #ddd;
}




/* Style Page Parcour */
*,
*::before,
*::after {
    box-sizing: border-box;
}


.parcour-section {
    background-color: #2c3c37;
    color: #e5e5e5;
    max-width: 100%;
    box-sizing: border-box;
    padding: 50px 10%;
    padding-bottom: 175px;
    display: flex;
    flex-direction: column;
    gap: 60px;
    position: relative;
}

.parcour-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background-color: rgba(159, 86, 44, 1);
    transform: translateX(-50%);
}

/* Boîtes H2 */
.timeline-box {
    position: relative;
    width: 60%; /* width de la boite*/
    padding: 20px;
    background-color: #3d4a48;
    color: #ffffff;
    border-radius: 10px;
    text-align: center;
    transition: background-color 0.4s ease, box-shadow 0.3s ease;
    cursor: pointer;
    margin: 0 auto;
}


.timeline-box::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    width: 20px;
    height: 2px;
    background-color: rgba(159, 86, 44, 1);
    transform: translateY(-50%);
}

.timeline-box:nth-child(odd)::before {
    left: -20px;
}

.parcour-section h2 {
    font-family: "Playfair Display", serif;
    text-transform: capitalize;
    font-size: 1.8em;
    margin: 0;
    transition: transform 0.3s ease;
    z-index: 2;
}



.timeline-box:hover {
    background-color: rgba(159, 86, 44, 1);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    transform: scale(1.05, 1.08); /* Augmente à la fois la largeur et la hauteur */
    transition: background-color 0.4s ease, box-shadow 0.3s ease, transform 0.3s ease;
    /*nouvelle width de la boite*/
}


.timeline-box:hover h2 {
    transform: scale(1.05);
}

/* Texte masqué */
.timeline-box .hidden-content {
    font-family: "Cormorant Garamond", serif;
    font-size: 1 em;
    font-weight: 400;
    text-align: justify;
    line-height: 1.8;
    color: #e5e5e5;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.7s ease, opacity 0.5s ease, padding 0.5s ease;
    padding: 0;
}



.timeline-box:hover .hidden-content {
    opacity: 1;
    max-height: 800px;/* Ajuste la hauteur en fonction du contenu */
    padding: 20px 0 0;
    /*overflow-y: auto;  Permet de rajouter une barre pour défiler le texte*/
}

/* Animation d'apparition */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.parcour-section h2 {
    animation: slideInUp 0.8s ease;
}

@media (max-width: 768px) {
    .parcour-section {
        padding: 30px 5%;
    }

    .timeline-box {
        width: 100%;
        margin: 20px 0;
        padding: 20px;
    }

    .parcour-section::before {
        left: 5%;
        transform: translateX(0);
    }

    .timeline-box::before {
        display: none;
    }
}

/* Styles pour les écrans tactiles */
@media (pointer: coarse) {
    .timeline-box{
        cursor: default;/* Change le curseur pour les écrans tactiles */
    }

     /* Activer l'état 'active' au clic */
    .timeline-box.active {
        background-color: rgba(159, 86, 44, 1);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        transform: scale(1.05, 1.08); /* Augmente à la fois la largeur et la hauteur */
        transition: background-color 0.4s ease, box-shadow 0.3s ease, transform 0.3s ease;
        /*nouvelle width de la boite*/
    }

    .timeline-box.active h2 {
        transform: scale(1.05);
    }

    .timeline-box.active .hidden-content {
        opacity: 1;
        max-height: 800px;/* Ajuste la hauteur en fonction du contenu */
        padding: 20px 0 0;
        /*overflow-y: auto;  Permet de rajouter une barre pour défiler le texte*/
    }

    
}

/* Page Realisation*/

/* Style global pour la page de réalisations */

/* Conteneur principal de la galerie */
#r-box-real {
    background-color: #2c3c37; /* Fond vert foncé */
    height: 100%;
    color: #e5e5e5;
    padding: 50px 15%; /* Marges intérieures */
    display: flex;
    flex-direction: column;
    gap: 60px;
    position: relative;
    max-width: 100%;
    box-sizing: border-box;
    padding-bottom: 175px;
}

/* Style pour la mosaïque d'images */
#r-image {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Quatre colonnes de largeur égale */
    gap: 25px; /* Espace entre les images */
    justify-items: center;
    width: 100%;
}

/* Style général pour les images */
.r-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    backface-visibility: hidden;
    transform-style: preserve-3d;
    opacity: 0; /* Initialement caché */
    animation: fadeInUp 0.8s ease forwards; /* Applique l'animation à chaque image */
}
/* Style pour les légendes des images */
.r-item h2 {
    font-size: 1.7rem;
    color: #ffffff; /* Couleur blanche pour le texte */
    text-align: center;
    opacity: 0; /* Initialement caché */
    position: absolute; /* Positionnement absolu */
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) scale(0.9); /* Positionnement initial avec légère réduction d'échelle */
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out; /* Transition pour l'opacité et la transformation */
    z-index: 10; /* s'assurer que le texte a une priorité d'affichage plus élevée */
}

.r-item img {
    position: relative; /* s'assurer que l'image reste au même niveau ou en dessous du texte */
    width: 100%;
    height: 100%;
    object-fit: cover; /* Les images remplissent leur conteneur */
    transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out; /* Transition légèrement plus lente et synchronisée */
    cursor: pointer;
    transform: translateZ(0); /* Préserve la perspective */
}

.r-item:hover {
    transform: scale(1.05, 1.05); /* Légère augmentation de la taille de la boite de l'image */
}

/* Effet de survol pour les images */
.r-item:hover img {
    transform: scale(1.05); /* Léger zoom de l'image */
    opacity: 1; /* Maintien de la transparence de l'image */
    filter: blur(2px) brightness(60%); /* Ajout du filtre de luminosité pour assombrir l'image */
}

/* Effet de survol pour afficher le texte */
.r-item:hover h2 {
    opacity: 1; /* Le texte devient visible */
    transform: translateX(-50%) translateY(-50%) scale(1); /* Le texte reprend son échelle normale */
}

/* Animation d'apparition */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Délais pour l'animation */
.r-item:nth-child(1) {
    animation-delay: 0.2s;
}

.r-item:nth-child(2) {
    animation-delay: 0.4s;
}

.r-item:nth-child(3) {
    animation-delay: 0.6s;
}

.r-item:nth-child(4) {
    animation-delay: 0.8s;
}


/* Responsive design pour petits écrans */

@media (max-width: 900px) {
    #r-image {
        grid-template-columns: repeat(3, 1fr); /* Adapte la grille à deux colonnes pour les petits écrans */
    }
}
@media (max-width: 768px) {
    #r-image {
        grid-template-columns: repeat(2, 1fr); /* Adapte la grille à deux colonnes pour les petits écrans */
    }
}

@media (max-width: 480px) {
    #r-image {
        grid-template-columns: 1fr; /* Adapte la grille à une colonne pour les très petits écrans */
    }
}





/*Page contact*/
/*Page contact*/
#body-page-enfant-contact {
    position: relative;
}

/* Animation d'apparition */
@keyframes fadeSlideIn {
    0% {
        opacity: 0;
        transform: translateY(20px); /* Démarre légèrement en dessous */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* Arrive à sa position finale */
    }
}

/* Applique l'animation aux sections */
#contact-form-section, .info-contact {
    animation: fadeSlideIn 1s ease-out;
    opacity: 0; /* Assure que l'opacité est à 0 avant le déclenchement de l'animation */
    animation-fill-mode: forwards; /* Garde l'élément à sa position finale après l'animation */
    animation-delay: 0.2s; /* Début avec un léger délai */
}

/* Vous pouvez ajuster l'animation pour chaque section si nécessaire */
#contact-form-section {
    animation-delay: 0.4s; /* Un peu de délai supplémentaire pour un effet décalé */
}

/* Section du formulaire de contact */

/* Image en arrière-plan */
#img-contact {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    filter: blur(2px);
    z-index: -1; /* Place l'image en arrière-plan */
   
}

/* Conteneur principal */
.p-m-section {
    position: relative;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    height: 100%;
    gap: 60px;
    z-index: 1;
    align-items: center; /* Aligne les éléments en haut : flex-start pour les centrer */
    justify-content: space-evenly; /* Espacement égal entre les sections */
    padding: 50px 30px; /* Espacement interne pour la section principale */
    min-height: 100vh; /* S'assure que la section occupe toute la hauteur de la vue */
}

/* Positionner le formulaire de contact à gauche */
#contact-form-section {
    max-width: 800px;
    width: 45%; /* Occupe environ 45% de la largeur pour laisser de la place à la section info-contact */
    padding: 40px;
    margin-left: 30px; /* Marge gauche de 30px */
    background-color: #2c3c37; /* Fond vert foncé */
    color: #e5e5e5; /* Texte gris clair */
    border-radius: 10px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); /* Ombre plus prononcée */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    overflow: hidden; /* Empêche le contenu de déborder */
}

/* Effet de zoom au survol de la section */
#contact-form-section:hover {
    transform: translateY(-10px); /* Légère élévation */
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.4); /* Ombre plus grande */
}

#contact-form-section h1 {
    font-family: "Playfair Display", serif;
    font-size: 2.5rem;
    margin-bottom: 20px;
    text-align: center;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

/* Animation pour le titre */
#contact-form-section h1::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 3px;
    background-color: rgba(159, 86, 44, 1);
    transition: width 0.4s ease-in-out, left 0.4s ease-in-out;
}

#contact-form-section:hover h1::after {
    width: 100%;
    left: 0;
}

#contact-form-section p {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.2rem;
    text-align: center;
    margin-bottom: 30px;
    color: #cfcfcf;
    transition: color 0.3s ease-in-out;
}

#contact-form-section p:hover {
    color: #ffffff; /* Passe à blanc au survol */
}

#contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Espace entre les éléments du formulaire */
}

#contact-form label {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.2rem;
    color: #ffffff;
    position: relative;
    padding-left: 10px;
    transition: color 0.3s ease-in-out;
}

#contact-form label:hover {
    color: rgba(159, 86, 44, 1); /* Couleur de survol */
}

/* Effet de survol pour les inputs */
#contact-form input,
#contact-form textarea {
    padding: 12px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 1rem;
    font-family: "Cormorant Garamond", serif;
    color: #333;
    background-color: #f5f5f5;
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Changement de couleur et ombre au focus */
#contact-form input:focus,
#contact-form textarea:focus {
    border-color: rgba(159, 86, 44, 1);
    box-shadow: 0 0 8px rgba(159, 86, 44, 0.5);
    outline: none; /* Enlève l'effet de focus par défaut */
}

/* Bouton de soumission avec effet de transition */
#contact-form button {
    padding: 12px 20px;
    font-family: "Playfair Display", serif;
    font-size: 1.2rem;
    color: #ffffff;
    background-color: rgba(159, 86, 44, 1); /* Couleur du bouton */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Effet de survol pour le bouton */
#contact-form button:hover {
    background-color: rgba(159, 86, 44, 0.8); /* Couleur du bouton au survol */
    transform: translateY(-5px); /* Légère élévation */
}

/* Animation de secousse sur le bouton au focus 
#contact-form button:focus {
    animation: shake 1.4s cubic-bezier(.36,.07,.19,.97) both;
} */
/* Animation de rebond sur le bouton au focus */
#contact-form button:focus {
    animation: bounce 0.6s ease-in-out both;
}

/* Positionner la section info-contact à droite */
.info-contact {
    width: 30%; /* Occupe environ 45% de la largeur */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre le contenu horizontalement */
    text-align: center; /* Centre le texte */
    background-color: #f5f5f5; /* Fond clair pour contraster avec le formulaire */
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Ombre légère */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Effet de survol pour la section info-contact */
.info-contact:hover {
    transform: translateY(-10px); /* Légère élévation */
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.3); /* Ombre plus grande */
}

/* Style de l'image en cercle */
.info-contact img {
    width: 250px;
    height: 250px;
    border-radius: 50%; /* Rend l'image circulaire */
    object-fit: cover; /* Recadre l'image pour qu'elle remplisse le cercle sans déformation */
    margin-bottom: 30px;
    transition: transform 0.3s ease-in-out;
}

/* Effet de survol pour l'image */
.info-contact img:hover {
    transform: scale(1.1); /* Agrandit l'image légèrement au survol */
}

/* Style des informations de contact */
.info-contact a {
    font-family: "EB Garamond", system-ui;
    font-size: 1.2rem;
    color: #333;
    text-decoration: none;
    margin: 5px 0;
    transition: color 0.3s ease-in-out;
}

.info-contact a:hover {
    color: rgba(159, 86, 44, 1); /* Change la couleur du texte au survol */
}

/* Style des icônes sociales */
.info-contact div span {
    margin-top: 20px;
}

.info-contact div span a {
    text-decoration: none;
}

.info-contact div span img {
    width: 40px;
    height: 40px;
    margin-top: 35px;
    transition: transform 0.3s ease-in-out;
}

.info-contact div span img:hover {
    transform: rotate(360deg); /* Animation de rotation sur les icônes au survol */
}

/* Responsive design pour les petits écrans */
@media (max-width: 900px) {
    .p-m-section {
        flex-direction: column; /* Passe en colonne pour les petits écrans */
        align-items: center; /* Centre les sections */
        padding: 20px;
    }
    
    #contact-form-section, .info-contact {
        width: 100%; /* Prend toute la largeur disponible */
        margin-left: 0; /* Enlève la marge à gauche pour centrer les sections */
    }

    .info-contact img {
        width: 160px;
        height: 160px;
    }
}

/* Animation de secousse 
@keyframes shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}
*/

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-10px);
    }
    50% {
        transform: translateY(5px);
    }
    70% {
        transform: translateY(-5px);
    }
}

/* Responsive design */
@media (max-width: 900px) {
    #contact-form-section {
        max-width: 100%; /* La boîte prend la largeur totale de l'écran */
        padding: 20px; /* Réduit le padding pour s'adapter aux petits écrans */
    }
}