html {
    scroll-behavior: smooth;
}

body {
font-family: 'Poppins'; 
overflow-x: hidden;
}

header {
    text-align:  center ;
    padding-bottom : 10px;
    padding-top: 10px;
    background-color: white;
    margin: -10px;
}

header a {
    text-decoration: none;
    margin :  10px;
    text-transform: uppercase;
    color: black;
}

header a:hover {
    text-decoration: underline;
    color : rgb(90, 0, 0) ease-in-out;
    margin: 10px;
}
header a strong {
    color: #0B2559;
}


.taches {
    background-color: white;
    margin : -10px;
    margin-top: -20px;
    padding-top: 20px;

}
.taches strong {
    color : #0B2559;
}

.content strong {
    color: #2c8799;
}


.honoraires {
    margin : -10px;
    margin-top: -20px;
    padding-top: 20px;
}

.titre-cover {
    text-align: center;
    padding-top: 150px;
    font-size: 2em;
    color: white;
    opacity: 0; /* L'élément commence invisible */
    transform: translateY(20px); /* Commence légèrement en dessous */
    animation: slideIn 3s ease-out forwards; /* Animation de 1.5s */
    animation-delay: 0.5s; /* Attente de 0.5s avant de commencer */
}

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


.titre-cover h1 {
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.692);
    margin-bottom: 304px;    
    margin-top: 110px;

}

.intro {
    background-color: white;
    margin : -10px;
    margin-bottom: -250px;
}

.intro p {
    padding: 20px;
    text-align: left;

}

h2 {
    text-align: center;
    color :  #0B2559;
    text-transform: uppercase;
    margin-bottom: -20px;
}
h3 {
    text-align: center;
    color : grey;
}
.texte { 
    padding: 20px;
    color: gray;
    padding-bottom: 52px;
    
}
.texte h1 {
    margin-left : 20px;
    color: #0B2559;
    opacity: 0; /* L'élément commence invisible */
    transform: translateY(20px); /* Commence légèrement en dessous */
    animation: slideIn 3s ease-out forwards; /* Animation de 1.5s */
    animation-delay: 0.5s; /* Attente de 0.5s avant de commencer */
}

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

.admin {
    padding: 10px;
    color : gray; 
    transition: transform 0.5s ease-in-out, background-color 0.5s ease-in-out;
    text-align: center;
    border-radius: 15px;
    background-color: white;
}

.admin img {
    width: 20%;
    height: auto;
    margin-bottom: 20px;
   
}
.finance img {
    width: 25%;
    height: auto;
    margin-bottom: 20px;
}
.juridique img {
    width: 25%;
    height: auto;
    margin-bottom: 20px;
}
.gestion img {
    width: 25%;
    height: auto;
    margin-bottom: 20px;
}
.admin:hover {
    transform: scale(1.02);
    padding:10px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

.finance {
    
    padding: 10px;
    color : gray; 
    transition: transform 0.5s ease-in-out, background-color 0.5s ease-in-out;
    text-align: center;
    border-radius: 15px;
    background-color: white;

}

.finance:hover {
    transform: scale(1.02);
    padding:10px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

.juridique {
  
    padding: 10px;
    color : gray; 
    transition: transform 0.5s ease-in-out, background-color 0.5s ease-in-out;
    text-align: center;
    border-radius: 15px;
    background-color: white;

}

.juridique:hover {
    transform: scale(1.02);
    padding:10px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}


.gestion {
    
    padding: 10px;
    color : gray; 
    transition: transform 0.5s ease-in-out, background-color 0.5s ease-in-out;
    text-align: center;
    border-radius: 15px;
    background-color: white;

}

.gestion:hover {
    transform: scale(1.02);
    padding:10px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

section p {
    padding: 10px;
    color: gray;
    text-align: center;
}

.contact {
    text-align: center;
    margin-top: -20px;
    padding-top: 20px;

}
.contact a {
    text-decoration: none;
    color: white;
    
}

.contact a:hover {
    text-decoration: none;
    color: white;
    background-color : #0B2559;
    border-radius: 10px;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
    padding : 5px;
    margin:10px;
}

.entree {
    border-radius: 15px;
    margin: 20px;
    text-align: center;
    background-color: white; 
}

.entree strong {
    margin-bottom : 10px;
}

.entree:hover {
    transform: scale(1.02);
    padding:20px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

.entree img {
    width : 20%;
    height: auto;
    margin: 20px;
    padding-top: 20px;
}

.suivi {
    border-radius: 15px;
    margin: 20px;
    text-align: center;
    background-color: white; 
}

.suivi strong {
    margin-bottom : 10px;
}

.suivi:hover {
    transform: scale(1.02);
    padding:20px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}
.suivi img {
    width : 15%;
    height: auto;
    margin: 20px;
    padding-top: 20px;
}

.sortie {
    border-radius: 15px;
    margin: 20px;
    text-align: center;
    background-color: white; 
}

ul {
    list-style-type: disc;
    text-align: left;
    color: gray;
}
.suivi strong {
    margin-bottom : 10px;
}

.sortie:hover {
    transform: scale(1.02);
    padding:20px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

.sortie img {
    width : 15%;
    height: auto;
    margin: 20px;
    padding-top: 20px;
}

.contact h1 {
    color: white;
    text-transform: uppercase;
}
.info-item p {
    color: white; 
}
.contact {
    margin-bottom : 50px; 
    margin : -10px;
    background-image: url('assets/img/footer.jpg'); /* Remplace par le chemin de ton image */
    background-size: cover; /* Pour couvrir toute la section */
    background-position: center; /* Pour centrer l'image */
    opacity: 1.0; /* Opacité pour rendre le fond noir translucide */
    padding-bottom: 50px;    
}
footer {
    background-color: white;
    margin : -10px;
    margin-bottom : -20px;
    padding-bottom: 10px;
    text-align: center;
    font-size: 70%;
}

.background-image {
    background-image: url('assets/img/cover.jpg'); /* Remplace par le chemin de ton image */
    background-size: cover; /* L'image couvre toute la zone */
    background-position: center; /* Centre l'image */
    background-repeat: no-repeat; /* Évite la répétition de l'image */
    width: 100%;
    height: 100vh; /* Hauteur de la fenêtre */
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1; /* Pour mettre l'image en arrière-plan */
}


/* Style du contenu qui sera au-dessus de la vidéo */
.content {
    position: relative;
    z-index: 1;
    text-align: center;
    color: white;
    font-family: Arial, sans-serif;
    top: 50%;
    transform: translateY(-50%);
}

.flex strong {
    color: #0B2559;
}
.honoraires .flex {
    background-color: #d6e6eb;
    padding: 10px;
}

.honoraires p {
    margin: auto 20px; /* Centre horizontalement le tableau */

}


.modern-table {
    width: 60%;
    border-collapse: collapse;
    background-color: #ffffff; /* Fond blanc */
    font-family: Arial, sans-serif;
    margin: 0 auto; /* Centre horizontalement le tableau */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre pour effet de flottement */
}
.modern-table th, .modern-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0; /* Ligne de séparation douce */
}
.modern-table th {
    background-color: #f2f2f2; /* Fond pour les entêtes */
    font-weight: bold;
}
.modern-table tr:hover {
    background-color: #f9f9f9; /* Effet de survol doux */
}

.contrat {
    background-color : #0B2559;
    padding:5px;
    margin-top: 20px;
    margin-bottom: 10px;
    border-radius: 10px;
    text-decoration: none;
    color: white; 
}

.contrat:hover {
    background-color : white;
    color: #0B2559; 
}

.contratdegestion {
    text-align: center;
}


/* Pour les écrans moyens : Tablettes (768px à 1024px) */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    /* Styles pour les écrans entre 768px et 1024px (tablettes) */


    .intro {
        display: flex;
        justify-content: space-between;
        margin-bottom : 20px;
    }
    .content {
        align-items: center;
        background-color: white;
        color: black;
        text-align: left;
    }
    .content strong {
        color: #2c8799;
    }
    .taches {
        margin-top: -200px;
        text-align: center;
        display: block;
    }

    .flex {
        display: flex;
        justify-content: space-evenly;
        margin: 10px;
    }
    .entree {
        margin:10px;
    }
    .suivi {
        margin:10px;
    }.sortie {
        margin:10px;
    }

    
    .titre-cover h1 {
        margin-bottom: 377px;
    }

}
@media only screen and (min-width: 1441px) {
    
    
    .intro {
        display: flex;
        justify-content: space-between;
    }
    .content {
        align-items: center;
        background-color: white;
        color: black;
        text-align: left;
    }
    .content strong {
        color: #2c8799;
    }
    .taches {
        margin-top: -140px;
        text-align: center;
        display: block;
    }

    .flex {
        display: flex;
        justify-content: space-evenly;
        margin: 10px;
    }
    .entree {
        margin:10px;
    }
    .suivi {
        margin:10px;
    }.sortie {
        margin:10px;
    }

    .titre-cover {
        padding-bottom: 59px;

    }
    .titre-cover h1 {
        margin-bottom: 525px;
    }
    .taches {
        margin-top: -250px;

    }
    .texte {
        padding: 200px;
    }
}


@media only screen and (min-width: 1025px) and (max-width: 1440px) {
    /* Styles pour les écrans d'ordinateurs entre 1025px et 1440px */
    
   
    
    .intro {
        display: flex;
        justify-content: space-between;
        margin-bottom : 20px;
    }
    .content {
        align-items: center;
        background-color: white;
        color: black;
        text-align: left;
    }
    .content strong {
        color: #2c8799;
    }
    .taches {
        margin-top: -140px;
        text-align: center;
        display: block;
    }

    .flex {
        display: flex;
        justify-content: space-evenly;
        margin: 10px;
    }
    .entree {
        margin:10px;
    }
    .suivi {
        margin:10px;
    }.sortie {
        margin:10px;
    }

    .titre-cover {
        padding-bottom: 59px;

    }
    .titre-cover h1 {
        margin-bottom: 365px;
    }
    .taches {
        margin-top: -250px;

    }
}

/* Pour les smartphones : largeur maximale de 767px */
@media only screen and (max-width: 767px) {
    /* Styles pour les écrans de smartphones */
    body {
        font-size: 14px;
     
    }
    
    .titre-cover h1 {
        text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.692);
        margin-bottom: 304px;
        margin-top: 20px;
    }
}

/* Pour les smartphones : largeur maximale de 767px */
@media only screen and (max-width: 400px) {
    /* Styles pour les écrans de smartphones */
    body {
        font-size: 14px;
     
    }
    
    .titre-cover h1 {
        text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.692);
        margin-bottom: 304px;
        margin-top: 20px;
    }
    .texte h1 {
       background-color: white;
       padding : 10px;
       margin-left: -10px;
       margin-right: -10px;

    }
}