body{
    background-color: var(--couleurBody);
}

.accueil {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    text-shadow: 0 0 2px #000000;
    overflow: hidden; /* Important pour éviter que le pseudo-élément dépasse */
}

.accueil div{
    margin-left: 10%;
}

.accueil::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../../images/accueil/fond4.webp) center no-repeat;
    background-size: cover;
    filter: brightness(0.6);
    z-index: -1;
}

.image-3d {
    filter: drop-shadow(7px 7px 4px rgba(0, 0, 0, 0.4));
    transform: rotate(10deg);
    transition: var(--time);
}

.image-3d:hover {
    transform: rotate(-10deg) scale(1.1);
    transition: var(--time);
}

.info p,.info a,.info h2,.info h3{
    color: var(--couleurText);
}

.info{
    height: auto;
    box-shadow: var(--couleurText) 0 -100px 100px 20px;
    padding-top: 50px;
}

.bouton:hover {
    box-shadow: inset var(--couleurBouton) 200px 0 0 0;
    color: white;
    transition: 400ms;
    transform: scale(1.1);
}

.bouton {
    min-width: auto;
    padding: 13px;
    border: 2px solid var(--couleurBody);
    border-radius: 8px;
    width: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 20px 10px 0;
    box-shadow: inset var(--couleurBody) 0 0 0 0;
    background: var(--couleurBody);
    color: black;
    text-shadow: none;
    transition: var(--time);
}

.bloc-info {
    border-radius: 15px;
    max-width: 1600px;
    width: auto;
    margin: 0 20px 80px 20px;
    text-align: left;
    display: flex; /* Utilisation de flexbox pour aligner les éléments */
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Permet de gérer les blocs qui ne tiennent pas sur une seule ligne */
}

.text-info {
    max-width: 600px;
    margin: 0 40px 0 40px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--time), transform 0.3s;
}

/* Animation pour rendre le texte visible */
.text-info.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Pour les images */
.image-info img {
    border-radius: var(--borderRadius);
    transition: transform var(--time) ease-in-out;
}

/* Style de la div image */
.image-info {
    border-radius: 20px;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    width: 545px;
    height: 400px;
    overflow: hidden;
    display: inline-block;
}

/* Zoom de l'image au survol */
.image-info:hover img {
    transform: scale(var(--scale));
}

/* Alterner les positions des images et textes */
.bloc-info:nth-child(odd) .image-info {
    order: 1; /* Image à gauche pour les éléments impairs */
}

.bloc-info:nth-child(odd) .text-info {
    order: 2; /* Texte à droite pour les éléments impairs */
}

.bloc-info:nth-child(even) .image-info {
    order: 2; /* Image à droite pour les éléments pairs */
}

.bloc-info:nth-child(even) .text-info {
    order: 1; /* Texte à gauche pour les éléments pairs */
}

.service{
    background: var(--couleurFond);
    padding: 30px;
}

.bloc-service{
    border-radius: var(--borderRadius);
    background: var(--couleurBody);
    width: 300px;
    height: 320px;
    padding: 20px;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    margin: 10px 30px 30px 30px;
    transition: transform var(--time) ease-in-out;
}

.bloc-service p{
    color: var(--couleurText)!important;
}

.service-titre{
    margin: 20px 0;
}

.bloc-service:hover{
    transform: scale(var(--scale));
}