:root {
    --color-primary: #F774D4;
    --color-secondary: #74F7F7;
    --color-tertiary: #F7E274;
} 

body {
    font-family: 'Montserrat', sans-serif;
    margin: 0 auto; /* Centre le contenu */
}

/* First section */

/* Hero section */
.hero-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5% 6%; /* Espacement autour de la section */
    min-height: calc(100vh - 60px); /* Réduit la hauteur disponible en fonction de la hauteur du menu (60px) */
    box-sizing: border-box;
    margin-top: 60px; /* Ajoute un espace pour que le contenu commence en dessous du menu */
}

/* Bloc gauche */
.hero-left {
    flex: 1; /* Le texte occupe la moitié de l'espace */
    margin-right: 20px; /* Espace entre les deux blocs */
}

/* Petit bandeau avec images et texte */
.expert-banner {
    display: flex;
    align-items: center;
    background-color: #FFF1FB; /* Fond gris clair */
    border-radius: 30px;
    padding: 5px 10px; /* Garde un bon espacement interne */
    margin-bottom: 20px;
    width: fit-content;
}

.expert-images {
    display: flex;
    margin-right: 20px; /* Espace entre les images et le texte */
}

.expert-image {
    width: clamp(30px, 2vw,50px);
    height: auto;
    border-radius: 50%; /* Images circulaires */
    margin-right: -10px; /* Superpose légèrement les images */
}

.expert-text {
    font-size: clamp(0.6rem, 0.8vw, 1rem);
    font-weight: 500;
    color: #000; /* Couleur noire pour le texte */
}
.text_bold {
    font-weight: bold;
}

/* Titre */
h1, h2 {
    font-family: "Lato", sans-serif;
    font-weight: 900;
    font-style: normal;
    line-height: 1;
}

h1 {
    font-size: clamp(2rem, 5vw, 4rem);
    margin-bottom: 5%;
}

.highlight {
    color: #FE41C4; /* Couleur rose pour "oui" */
}

/* Description */
.description-section {
    font-size: clamp(0.6rem, 2vw, 1rem);
    line-height: 1.2;
    margin-bottom: 30px;
    color: #595959;
}

/* CTA */
.cta-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FE41C4; /* Rose */
    color: white;
    font-weight: 500;
    font-size: 14px;
    border: none;
    border-radius: 30px;
    padding: 10px 20px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.cta-button:hover {
    background-color: black; /* Noir au survol */
}

.cta-icon {
    width: 16px;
    height: 16px;
    margin-right: 8px;
}

/* Bloc droit */
.hero-right {
    flex: 1; /* L'image occupe la moitié de l'espace */
    display: flex;
    justify-content: flex-end; /* Centre l'image horizontalement */
    align-items: center; /* Centre l'image verticalement */
}

.hero-image {
    max-width: clamp(200px, 70vh, 700px); 
}


/* Brand section */

.brand-scroll{
    grid-column-gap: 2rem;
    display: flex;
    overflow: hidden;
}

.scroll {
    animation: scroll 25s linear infinite;
}

.brand-section {
    height: 120px;
    width: 100%;
    background-color: #FE41C4;
    text-align: center;
    padding: 20px 0;
}

.brand-section p {
    color: white;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 500; 
    margin-bottom: 20px;
}

.brand-logo {
    min-width: 100%;
    grid-column-gap: 2rem;
    flex: none;
    justify-content: space-around;
    margin-left: 0;
    display: flex;
}

.brand-container {
    min-width: 100%;
    grid-column-gap: 2rem;
    flex: none;
    justify-content: space-around;
    margin-left: 0;
    display: flex;
}

.brand-container img {
    height: 50px; /* Adjust based on your preference */
    width: auto;
    display: inline-block;
    margin: 0px 20px 0px 20px;
    filter: grayscale(100%) brightness(10);
}

/* Animation brand */
@keyframes scroll {
    0% {transform: translateX(0);}
    100% {transform: translateX(calc(-100% - 2rem));}
}

/* Value proposition section */

.moli-section {
    background-color: white;
    padding: 100px;
    text-align: center;
    position: relative;
    overflow-x: hidden; 
}

.problem-title {
    font-size: 3rem;
}

.cta-button-problem {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #FE41C4; /* Rose */
    color: white;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 20px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    margin: 10px auto; /* Ajoute un peu d'espace entre les boutons */
    transition: background-color 0.3s ease;
}

.cta-button-problem:hover {
    background-color: black; /* Change la couleur en noir au survol */
}

.cta-icon {
    width: 16px;
    height: 16px;
    margin-right: 8px; /* Espace entre l'icône et le texte */
}

.carousel-container {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 100px;
    box-sizing: border-box;
    overflow-x: auto; /* Active le défilement horizontal seulement pour le carousel */
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
}

/* Carrousel */
.carousel {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    padding: 100px 0 50px 0;
    width: max-content;
}

.carousel::-webkit-scrollbar {
    display: none;
}

.carousel-track {
    display: flex;
    gap: 20px;
}

.carousel-item {
    flex: 0 0 90vw; 
    max-width: 300px;
    aspect-ratio: 1 / 1; /* Assure que les blocs restent carrés */
    height: auto; 
    background-color: #1A1A1A; /* Fond noir */
    border-radius: 16px;
    color: white;
    padding: 1.25rem;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.carousel-item img {
    max-width: 70%; /* Contrôle la taille des images */
    height: auto;
    object-fit: contain;
    margin: 1.25rem 0;
}

.item-title {
    font-size: 1rem; /* Taille légèrement plus petite pour correspondre à la nouvelle dimension */
    margin-bottom: 5px; /* Réduit l'écart entre le titre et la description */
    font-weight: 500;
}

.item-description {
    font-size: 0.8rem;
    color: #CCCCCC;
    line-height: 1.2; /* Gère l'espacement des lignes */
    text-align: center;
    overflow: hidden; /* Évite le débordement */
    text-overflow: ellipsis; /* Ajoute des points de suspension si nécessaire */
    max-height: 2.4em; /* Limite la description à 2 lignes */
    max-width: 16rem;
    margin-top: 10px; /* Proche du titre */
    position: relative;
    z-index: 2;
    padding: 0 5%;
}

.carousel.dragging {
    cursor: grabbing;
    cursor: -webkit-grabbing;
}

/* People section */
.people-section {
    background-color: #F3ABE0;
    padding: 2% 7%;
    border-radius: 16px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    margin: 0 100px;
    min-height: 60vh;
}

.people-content {
    max-width: 600px;
    z-index: 1;
    margin: 0% 0% 5% 0%
}

.people-title {
    font-family: "Lato", sans-serif;
    font-weight: 900;
    font-size: 4rem;
    line-height: 1.1;
    color: white;
    margin-bottom: 5%;
}

.people-description {
    color: #F1F1F1;
    font-size: 1rem;
    line-height: 1.2;
    margin-bottom: 30px;
}

.people-cta.cta-button, .projects-cta.cta-button {
    background-color: white;
    color: #000000;
}

.people-cta.cta-button .cta-icon, .projects-cta.cta-button .cta-icon {
    filter: brightness(0); /* Rend l'image noire */
}

.people-cta.cta-button:hover {
    background-color: #000;
    color: white;
}

.people-cta.cta-button:hover .cta-icon, .projects-cta.cta-button:hover .cta-icon {
    filter: brightness(100); /* Rend l'image blanche au survol */
}

.people-image {
    position: absolute;
    right: -5%;
    top: 0;
    width: 45%;
    height: -webkit-fill-available;
    display: block;
}

.people-image img {
    width: 80%;
    height: auto;
    object-fit: contain;
    display: block;
    margin-bottom: 0;
}

/* Project section */
.container {
    padding: 0 100px;
    margin: 40px 0;
}

.projects-section {
    background-color: black;
    padding: 50px 0;
    color: white;
    text-align: center;
    overflow: hidden;
    border-radius: 16px;
    position: relative;
}

.projects-content {
    margin-bottom: 60px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.projects-title {
    font-family: "Lato", sans-serif;
    font-weight: 900;
    font-size: 4rem;
    line-height: 1.1;
    margin-bottom: 24px;
    color: white;
}

.projects-description {
    font-size: 1rem;
    line-height: 1.2;
    max-width: 900px;
    margin: 0 auto 32px;
    color: #CCCCCC;
}

.projects-cta.cta-button:hover {
    background-color: #FE41C4;
    color: white;
}

/* Slider styles */
.projects-slider {
    width: 100%;
    overflow: hidden;
    margin-top: 60px;
}

.slider-track {
    display: flex;
    animation: scroll 40s linear infinite;
    gap: 10px;
    /* Ajoutez cette ligne pour que le deuxième set d'images soit initialement hors écran */
    width: calc(300px * 8 + 10px * 7);
}

.slider-item {
    position: relative;
    flex: 0 0 300px; /* Réduit de 400px à 300px */
    border-radius: 10px;
    overflow: hidden;
}

.slider-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slider-label {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: rgba(220, 220, 220, 0.4); /* Fond gris clair avec opacité */
    backdrop-filter: blur(10px); /* Ajoute l'effet de flou */
    padding: 8px 16px;
    border-radius: 5px;
    color: #000;
    font-size: 14px;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-300px * 4 - 10px * 3)); /* déplacement = -(largeur d'un item * nombre d'items dans un set) - (gap * (nombre d'items dans un set - 1)) */
    }
}


/* Explanation tool section */

.message-received {
    animation: popIn 0.5s forwards;
}

/* Animation message */ 
@keyframes popIn {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
        visibility: visible;
    }
    70% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.9;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        visibility: visible;
    }
}

.simulation-section {
    display: flex;
    align-items: center;
    background-color: white;
    padding: 20px;
    margin: 100px 100px;
    flex-direction: row; /* Par défaut pour les écrans plus larges */
}

.image-container {
    position: relative;
    flex-basis: 50%;
    display: flex;
    justify-content: center;
}

.marble-image {
    width: 60%;
    border-radius: 20px;
    object-fit: cover;
    height: 400px;
    z-index: 1;
}

.overlay-content { /* Modification from .overlay-text to encompass all new elements */
    position: absolute;
    top: 40%; /* Décale le rectangle vers le haut */
    right: 10%; /* Décale le rectangle vers la droite */
    left: 40%;
    transform: translate(-50%, -50%);
    padding: 20px;
    border-radius: 15px;
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* Les autres styles restent inchangés */
    backdrop-filter: blur(10px);
    border: 1px solid #F5F5F5;
    text-align: center;
    width: auto;
    transition: all 0.5s ease;
    visibility: hidden; /* Initial state hidden, show when in viewport */
    z-index: 2; /* Plus élevé que celui de marble-image pour s'assurer qu'il s'affiche devant */
}

.logo-container {
    display: flex;
    align-items: center; /* Centre les éléments verticalement */
    justify-content: flex-start; /* Aligner les éléments à gauche */
}

.site-logo {
    height: auto; /* Ajustez ceci pour réduire la taille du logo */
    width: 10%; /* Cela maintiendra les proportions du logo */
    margin-right: 10px; /* Espacement entre le logo et le texte */
}

.notification-banner {
    background-color: #FE41C4;
    color: white;
    padding: 5px;
    border-radius: 20px;
    margin-bottom: 20px;
    font-size: 12px; /* Adjust based on design */
    margin-top: 60px; /* Augmentez cet espacement pour pousser le texte vers le bas */
    /* Autres styles comme avant */
}

.encouragement-text {
    font-weight: 700;
    font-size: 20px;
    line-height: 1.2;
    color: black;
    border-radius: 5px;
    text-align: left; /* Alignez le texte à gauche */
    padding: 0px 30px 0px 5px;
}

.simulation-texte-container {
    width: 100%;
    margin-left: 100px;
}

.text-container {
    flex-basis: 50%;
    display: flex;
    justify-content: center;
    position: relative;
}

.value-title {
    font-size: 3rem;
}


/* New section */
.new-section {
    display: flex;
    align-items: center;
    background-color: white; /* ou toute autre couleur de fond */
    padding: 20px;
    margin: 200px 100px;
    flex-direction: row; /* Orientation par défaut pour les grands écrans */
}

.new-text-container {
    flex-basis: 50%;
    display: flex;
    justify-content: center;
    position: relative;
}

.new-text-content {
    margin-right: 50px; /* Espacement entre le texte et l'image, ajustez selon vos besoins */
}

.new-image-container {
    flex-basis: 50%;
    display: flex;
    justify-content: flex-end; /* Centre l'image dans son conteneur */
}

.new-section-image {
    width: 80%; /* Ajustez selon la taille de votre image */
    border-radius: 20px; /* Ajustez si vous voulez des coins arrondis */
    height: auto; /* Ajustez si vous avez une hauteur spécifique en tête */
    object-fit: cover; /* Garantit que l'image couvre bien l'espace sans se déformer */
}


/* MADE BY MOLI SECTION */
.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Couleur noire semi-transparente */
    border-radius: 20px; /* Adaptez si nécessaire pour correspondre aux bords arrondis de votre image */
}

.made-by-moli-section {
    display: flex;
    justify-content: center;
}

.black-block {
    background-color: black;
    padding: 100px 50px; /* Espace autour du contenu dans le bloc noir */
    width: 100%; /* ou une autre largeur selon vos préférences */
    color: white; /* Texte blanc pour le contraste avec le fond noir */
    text-align: center; /* Centrer le titre et le contenu */
}

.image-blocks {
    display: flex;
    justify-content: space-around; /* Maintient un espacement entre les deux blocs d'images */
    margin-top: 40px; /* Espace sous le titre */
    width: 75%; /* Définit la largeur du bloc à 80% de son conteneur */
    margin-left: auto; /* Centrage horizontal */
    margin-right: auto; /* Centrage horizontal */
    margin-bottom: 100px;
}

.image-container-half {
    position: relative;
    display: flex;
    justify-content: center;
    transition: transform 0.3s ease; /* Animation douce pour le déplacement */
    width: calc(50% - 10px);
}

.image-container-half:hover {
    transform: translateY(-5px); /* Déplace le bloc vers le haut de 5 pixels */
}

.block-image {
    width: 90%;
    border-radius: 20px;
    height: auto;
}

.white-title {
    color: white;
    margin-bottom: 100px;
    margin-top: 60px;
}

.location-info {
    position: absolute;
    top: 5%;
    left: 8%;
    background-color: #FE41C4;
    color: black;
    padding: 5px 20px 5px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.additional-info {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 15px 15px 80px 15px;
    display: flex;
    justify-content: space-between;
    width: 80%;
    align-items: center; /* Assure que les éléments à l'intérieur sont alignés au centre */
}

.project-info, .type-info, .size-info {
    text-align: left;

}
.info-title {
    font-size: 10px;
    font-weight: 300;
    margin: 0;
}

.info-value {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.type-info, .size-info, .profit-info {
    font-size: 12px;
    font-weight: 600;
}

.type-info, .size-info {
    background-color: var(--color-secondary);
    color: black;
    padding: 5px 30px;
    border-radius: 20px;
}

.profit-info {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Garde le "12,6%" à droite */
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 50px;
    padding: 5px 10px 5px 10px;
    backdrop-filter: blur(10px);
    position: absolute; /* Positionnement relatif à son parent */
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%; /* Ajustement de la largeur pour correspondre aux autres blocs */
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); /* Ajoute une ombre interne */
    margin-right: auto; 
}

.size-info {
    background-color: white; /* Blanc pour size-info */
}

.size-info sup {
    font-size: 75%; /* Réduit la taille du "2" pour mieux s'adapter à votre design */
    line-height: 0; /* Ajuste l'espacement vertical si nécessaire */
    position: relative;
    vertical-align: baseline; /* Ajuste l'alignement vertical si nécessaire */
    top: -0.5em; /* Ajuste la position verticale si nécessaire */
}

.rentability-text { /* Assurez-vous d'avoir cette classe pour "Rentabilité brute" */
    margin: 0;
    padding-left: 15px;
    font-weight: 300;
}

.profit-value {
    margin-right: 10px;
    margin-left: auto; /* Cela pousse tout ce qui précède vers la gauche */
}

.pictogram {
    width: 15px; /* Ajustez selon la taille originale */
    height: auto;
    margin-left: 10px; 
}

.info-group {
    display: flex;
    gap: 10px; /* Espacement entre type-info et size-info */
}

/* FAQ section */
.faq-section {
    background-color: white;
    padding: 100px;
    display: flex;
    justify-content: center; /* Centre le .faq-content à l'intérieur de .faq-section */
    align-items: center; /* Centrer verticalement si nécessaire */
}

.faq-content {
    display: flex;
    width: 100%; /* Réduit la largeur de 100% à 80% */
    justify-content: space-between; /* Garde cela si vous voulez de l'espace entre les deux parties */
    align-items: flex-start; /* Alignez les éléments en haut si les hauteurs diffèrent */
    padding: 20px;
    border-radius: 15px; /* Optionnel: Ajoute des bords arrondis au contenu FAQ */
}

h3 {
    font-weight: 400;
}

.left-part, .right-part {
    padding: 20px;
}

.left-part {
    width: 40%;
}

.right-part {
    width: 60%;
}

.faq-item {
    margin-bottom: 20px; /* Espacement entre chaque item de FAQ */
}

.question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    text-transform: uppercase;
}

.answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
    line-height: 1.5;
}

button {
    cursor: pointer;
    /* Stylisez votre bouton ici */
}

.divider {
    transition: transform 0.5s ease;
    width: 100%; /* Assurez-vous que le diviseur prend toute la largeur */
    height: 1px; /* Ou la hauteur que vous souhaitez pour votre liseret */
    background-color: black; /* Ou toute autre couleur que vous préférez */
    margin-top: 5px; /* Ajustez selon l'espacement souhaité */
    margin-bottom: 5px; /* Ajustez selon l'espacement souhaité */
}

.faq-toggle {
    background-color: transparent; /* Supprimez le fond pour une apparence propre */
    border: none; /* Supprimez la bordure du bouton */
    cursor: pointer; /* Change le curseur en main pour indiquer qu'il est cliquable */
    font-size: 24px; /* Ajustez la taille comme vous le souhaitez */
    color: black; /* Couleur du texte */
    transition: transform 0.3s; /* Animation douce lors du changement */
    display: flex; /* Centre le contenu (+ ou -) */
    align-items: center; /* Centre verticalement le contenu dans le bouton */
    justify-content: center; /* Centre horizontalement le contenu dans le bouton */
}

.faq-toggle.open {
    transform: rotate(180deg); /* Fait pivoter le '+' pour qu'il ressemble à un '-' */
}


/* Footer section */
.site-footer {
    background-color: white;
    width: 100%;
    margin: 0 auto; /* Centre le pied de page horizontalement */
    padding: 10% 20%;
    display: flex;
    flex-direction: column; /* Change la direction des éléments enfants de ligne à colonne */
    align-items: center; /* Centre les enfants verticalement */
    box-sizing: border-box;
}

.footer-content {
    width: 100%; /* Prend la pleine largeur du pied de page */
    display: flex;
    justify-content: space-between; /* Assure que le logo et les droits sont sur les côtés opposés */
    align-items: center; 
}

.footer-logo {
    display: flex;
    align-items: center;
}

.footer-logo-image {
    height: 30px;
    margin-right: 10px;
    margin-right: 10px; /* Espace entre le logo et le texte */
}

.footer-logo-text {
    font-weight: 800;
    font-size: 16px;
    color: black;
}

.footer-rights {
    font-size: 12px;
}




/* responsive */
/* Responsive adjustments */
@media (max-width: 1024px) {

     /* Section 1 */
    .hero-section {
        flex-direction: column; /* Empile les deux blocs verticalement */
        justify-content: center; /* Centre le contenu verticalement */
        padding: 20px 5%; /* Réduit l'espacement général */
    }

    .hero-left {
        margin-right: 0; /* Retire l'espace latéral */
        margin-bottom: 20px; /* Ajoute un espace sous le bloc texte */
        text-align: center; /* Centre le texte */
    }

    .expert-banner {
        margin: 50px auto 20px auto; /* Centre la bannière horizontalement */
    }

    h1 {
        font-size: 3rem; /* Réduit la taille du titre */
    }

    .hero-right {
        margin-top: 0; /* Supprime toute marge supplémentaire au-dessus de l'image */
        justify-content: center;
    }

    .cta-button {
        margin: 0 auto; /* Centre le bouton horizontalement */
        display: inline-flex; /* Permet une meilleure gestion des éléments internes */
    }

    /* Carousel */
    .carousel-item {
        flex: 0 0 250px;
        height: auto;
    }

    /* People section */
    .people-section {
        margin: 0 50px;
    }

    .people-title {
        font-size: 2.5rem;
    }

    .people-description {
        font-size: 1.2rem;
        line-height: 1;
    }

    .people-image img {
        width: 80%;
        height: auto;
        object-fit: contain;
        display: block;
        margin-bottom: 0;
    }

    .people-image {
        right: -45%;
        height: auto;
        width: 90%;
    }

    .people-cta {
        margin: initial;
    }

    /* Project section */
    .container {
        padding: 0 50px;
        margin: 30px 0;
    }

    .projects-title {
        font-size: 45px;
    }

    .slider-track {
        width: calc(250px * 8 + 10px * 7); /* Ajustement pour les items plus petits */
    }

    .slider-item {
        flex: 0 0 250px;
    }

    @keyframes scroll {
        100% {
            transform: translateX(calc(-250px * 4 - 10px * 3));
        }
    }

    /* Similation */
    .simulation-section {
        flex-direction: column; /* Change la direction pour les écrans plus petits */
        margin: 100px 20px; /* Ajustez les marges pour les petits écrans */
        margin: 70px 0px 70px 0px;
    }
    .image-container, .text-container {
        flex-basis: auto; /* Permet aux blocs de remplir l'espace disponible */
        width: 100%; /* Ajuste la largeur pour occuper tout l'espace disponible */
    }
    .marble-image {
        width: 80%; /* Ajustez la largeur de l'image pour les écrans plus petits */
        height: 350px;
        margin: 0 auto; /* Centre l'image */
    }
    .overlay-content {
        top: 40%; /* Ajuste la position de l'overlay pour qu'il soit centré verticalement par rapport à l'image */
        right: -20%;
        left: 45%;
        max-width: 90vw; /* Assure que l'overlay ne dépasse pas la largeur de l'écran */
        width: auto; /* S'adapte à la largeur du contenu */
        padding: 15px; /* Ajoutez un padding pour le contenu */
    }

    .simulation-texte-container {
        width: 80%;
        margin: 50px 0px 0px 0px;
    }

    .simulation-texte-container p {
        margin: 30px 0px 30px 0px;
    }

    /* NEW SECTION */
    .new-section {
        flex-direction: column-reverse; /* Inverse l'ordre des éléments pour les petits écrans */
        margin: 0px 0px 70px 0px; /* Ajustez les marges pour les petits écrans */
        padding: 20px;
    }

    .new-image-container {
        display: flex;
        justify-content: center; /* Centre horizontalement */
        width: 100%; /* Prend toute la largeur disponible */
    }

    .new-text-container {
        width: 80%; 
        margin: 50px 0;
    }

    .new-text-content {
        margin-right: 0; /* Ajuste ou supprime le margin droit pour le texte */
    }

    .new-section-image {
        width: 80%; /* Garde la largeur à 80% */
        margin: -60px auto -40px; /* Centre verticalement avec les marges négatives existantes */
    }

    .new-text-content p {
        margin: 30px 0px 30px 0px;
    }

    /* made by moli */
    .image-blocks {
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-bottom: 10%;
    }

    .block-image {
        width: 100%;
    }

    .image-container-half {
        width: 100%; /* Prend toute la largeur sur les petits écrans */
        margin-bottom: 20px; /* Ajoute un peu d'espace entre chaque bloc d'image */
    }

    .overlay-info, .image-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    
    .additional-info {
        /* Pour un meilleur affichage sur mobile, vous pourriez vouloir ajuster ou simplifier l'affichage des informations */
        flex-direction: row;
        padding: 10px;
    }

    .project-info, .type-info, .size-info, .profit-info {
        text-align: center;
        margin: 0 0; /* Ajoute de l'espacement autour pour une meilleure lisibilité */
        font-size: 10px;
        padding: 5px 10px;
    }

    .profit-info {
        justify-content: center; /* Centre les éléments à l'intérieur du bloc .profit-info */
    }

    .mobile {
        display: none;
    }

    /* FAQ */
    .faq-section {
        padding: 50px 20px; /* Réduit le padding pour les écrans plus petits */
    }

    .faq-content {
        flex-direction: column; /* Change la disposition des éléments pour qu'ils soient empilés verticalement */
    }

    .left-part, .right-part {
        width: 100%; /* Fait que chaque partie prenne toute la largeur disponible */
        padding: 0 0px;
    }

    .left-part {
        margin-bottom: 30px; /* Ajoute un espacement entre le texte et les questions/réponses */
    }

    .right-part .faq-item .question span {
        justify-content: center; /* Centre le texte des questions */
    }

    .right-part {
        padding-top: 0; /* Supprime le padding supérieur inutile */
    }

    .faq-item {
        text-align: left; /* Aline le texte des questions/réponses à gauche */
    }

    /* FOOTER */
    .site-footer {
        background-color: white;
        width: 100%;
        margin: 0 auto; /* Centre le pied de page horizontalement */
        padding: 30% 10%; /* Ajusté pour une marge standard, ajustez selon vos besoins */
        display: flex;
        flex-direction: column; /* Change la direction des éléments enfants de ligne à colonne */
        align-items: center; /* Centre les enfants verticalement */
        box-sizing: border-box;
        z-index: 1001; /* Plus élevé que le z-index du bouton pour le couvrir lors du défilement */
        position: relative; /* Nécessaire pour que z-index fonctionne correctement */
    }    

    .footer-content {
        flex-direction: column; /* Change la disposition des éléments pour qu'ils soient empilés verticalement */
        text-align: center; /* Centre le texte */
        justify-content: center; /* Centre les éléments verticalement dans le conteneur */
    }

    .footer-logo {
        margin-bottom: 50px; /* Ajoute un espacement entre le logo et le texte des droits */
    }

    .footer-logo-image, .footer-logo-text {
        margin: 0 auto; /* Centre le logo et le texte du logo */
    }

    .footer-logo-text {
        margin: 0px 0px 0px 10px;
    }

    .footer-rights {
        font-size: 12px; /* Vous pouvez ajuster la taille de la police si nécessaire */
    }
}

@media (max-width: 768px) {
    .hero-section {
        margin-top: 50px; /* Ajoute un espace équivalent à la hauteur du menu sur mobile */
        min-height: calc(100vh - 50px); /* Ajuste la hauteur totale pour rester visible */
        padding: 20px 5%; /* Réduit l'espacement général autour des blocs */
    }

    .hero-left {
        text-align: center; /* Centre tout le texte */
        margin-bottom: 10px; /* Réduit l'espace entre le texte et l'image */
    }

    .expert-banner {
        text-align: center; /* Centre le texte */
        padding: 0px 15px; /* Garde un bon espacement interne */
    }

    .expert-images {
        margin: 10px 20px 10px 0px;
    }

    h1 {
        font-size: 2.5rem; /* Réduit encore la taille du titre */
    }

    .fixed-button {
        position: fixed; /* Fixe le bouton en bas de l'écran */
        bottom: 20px; /* Ajoute une marge de 10px entre le bas de l'écran et le bouton */
        left: 20px; /* Ajoute une marge de 10px à gauche */
        right: 20px; /* Ajoute une marge de 10px à droite */
        width: auto; /* Permet au bouton de s'adapter avec les marges */
        height: 50px; /* Augmente l'épaisseur */
        padding: 10px 20px; /* Ajoute des marges internes */
        font-size: 20px; /* Augmente légèrement la taille du texte */
        border-radius: 10px; /* Coins légèrement arrondis pour une meilleure esthétique */
        z-index: 10000; /* Assure que le bouton reste visible au-dessus du contenu */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Ajoute une ombre douce */
    }

    .cta-icon {
        width: 20px; /* Ajuste la taille de l'icône pour qu'elle reste proportionnée */
        height: 20px;
        margin-right: 10px; /* Espace entre l'icône et le texte */
    }

    /* Section 2: Problem */
    .moli-section {
        padding: 40px 5%; /* Réduit le padding sur mobile */
    }

    .problem-title {
        font-size: 2.5rem; /* Réduit la taille du titre */
    }

    .carousel-container {
        width: 100vw;
        padding: 0 40px;
        overflow-x: scroll; /* Active le scroll horizontal */
    }

    .carousel-item {
        min-height: auto;
        padding: 1rem;
        scroll-snap-align: center; /* Fait "snapper" les items au centre */
    }

    .item-title {
        font-size: 1.2rem; /* Augmente la taille du titre */
    }

    .item-description {
        font-size: 0.8rem; /* Augmente la taille de la description */
        max-width: 90%; /* Plus d'espace pour le texte */
        margin-bottom: 1rem;
    }

    .carousel {
        padding: 50px 0;
        gap: 15px;
        /* Supprimer ou désactiver l'animation infinie */
        animation: none;
    }

    .carousel-track {
        display: flex;
        gap: 15px;
        /* Supprimer la largeur fixe */
        width: auto;
        /* Arrêter l'animation */
        animation: none;
    }

    .carousel-item img {
        max-width: 60%;
        margin: 1rem 0;
    }

    /* People section */
    .people-section {
        margin: 0 20px;
        padding: 60px 40px 0;
        text-align: center;
        flex-direction: column;
    }

    .people-title {
        font-size: 35px;
    }

    .people-description {
        font-size: 18px;
    }

    .people-content {
        max-width: 100%;
    }

    .people-image {
        position: relative;
        right: 0;
        height: auto;
        margin-top: 40px;
        margin-bottom: 0;
        order: 2;
        display: flex;
        align-items: flex-end;
    }

    .people-image img {
        max-height: 400px;
        width: auto;
        display: block;
        margin-bottom: 0;
    }

    .people-cta.cta-button {
        margin: 0 auto; /* Centre le bouton */
    }

    /* Project section */
    .container {
        padding: 0 20px;
        margin: 20px 0;
    }

    .projects-section {
        padding: 40px 0;
    }

    .projects-title {
        font-size: 35px;
        padding: 0 10px;
    }

    .projects-description {
        font-size: 0.9rem;
        padding: 0 20px;
    }

    .projects-description br {
        display: none; /* Supprime les sauts de ligne sur mobile */
    }

    .slider-track {
        width: calc(200px * 8 + 10px * 7);
    }

    .slider-item {
        flex: 0 0 200px;
    }

    @keyframes scroll {
        100% {
            transform: translateX(calc(-200px * 4 - 10px * 3));
        }
    }

    .slider-label {
        padding: 6px 12px;
        font-size: 12px;
    }

    /* new section Iphone section */
    .new-image-container {
        justify-content: center;
        align-items: center; /* Ajoute un centrage vertical */
    }

    .new-section-image {
        width: 80%;
        margin: -60px auto -40px;
    }

}

@media (max-width: 480px) {

    /* Cache tous les boutons avec ces classes */
    button:not(.fixed-button),
    .cta-button:not(.fixed-button),
    .button-form:not(.fixed-button) {
        display: none !important; /* !important pour s'assurer que la règle est appliquée */
    }

    /* Section 1 */
    .hero-section {
        margin-top: 40px; /* Ajuste pour un menu plus petit */
        min-height: calc(100vh - 40px); /* Ajuste la hauteur pour rester sous le menu */
    }

    .hero-image {
        max-width: 100%; 
    }

    /* Section 2 */
    h2 {
        font-size: 32px;
    }

    .moli-section {
        padding: 10%;
        text-align: left;
    }

    .carousel-item {
        flex: 0 0 100vw;
        max-width: 300px;
        min-height: 300px;
        padding: 0.75rem;
    }

    .item-description {
        font-size: 0.8rem;
        padding: 0 10%;
    }

    .carousel-item img {
        max-width: 60%;
        margin: 1rem 0;
    }

    /* People section */
    .people-section {
        min-height: 70vh;
        padding: 40px 20px 0;
        margin: 0 10px;
    }

    .people-image img {
        width: 100%;
        max-height: 300px;
        margin-bottom: 0;
    }

    .people-cta.cta-button {
        padding: 8px 16px; /* Réduit légèrement le padding du bouton */
        font-size: 13px; /* Réduit légèrement la taille du texte */
    }

    .cta-icon {
        width: 14px; /* Réduit la taille de l'icône */
        height: 14px;
    }

    /* Project section */
    .container {
        padding: 0 10px;
        margin: 15px 0;
    }

    .projects-section {
        padding: 30px 0;
    }

    .projects-content {
        margin-bottom: 40px;
    }

    .slider-track {
        width: calc(160px * 8 + 10px * 7);
    }

    @keyframes scroll {
        100% {
            transform: translateX(calc(-160px * 4 - 10px * 3));
        }
    }

    .slider-label {
        padding: 4px 8px;
        font-size: 11px;
        bottom: 8px;
        right: 8px;
    }
}