body {
        background-color: #f8f6f2; /* Couleur de fond pâle similaire à l'image */
        color: #333;
    }

    /* Section "À propos de nous" */
    .about-us-section {
        background-color: #f8f6f2; /* Assurer que la section a la bonne couleur de fond */
        overflow: hidden; /* Pour gérer les formes qui peuvent déborder */
    }

    .text-content h1 {
        font-family: 'Quicksand', sans-serif; /* Simuler la police serif du titre */
        font-weight: 700; /* Gras */
        color: #333;
        font-size: 3rem; /* Ajuster la taille si nécessaire */
        line-height: 1.2;
        text-align: center;
    }

    .text-content p.lead {
        font-family: 'Quicksand', sans-serif; /* Police sans-serif pour le paragraphe */
        font-size: 1rem; /* Taille du texte du paragraphe */
        line-height: 1.6;
        color: #555;
        text-align: center;
        font-weight: 600;
    }

/* Styles pour l'image et les formes décoratives */
    .image-content {
        position: relative;
        padding: 20px; /* Espace pour les formes oranges */
    }

    .image-content img {
        border-radius: 8px; /* Bords légèrement arrondis de l'image */
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* Légère ombre pour donner du relief */
    }

    /* Formes oranges décoratives */
    .shape {
        position: absolute;
        background-color:rgb(5, 24, 64); /* Orange HubSpot */
        border-radius: 50%; /* Rendre la forme circulaire ou ovale */
        z-index: 1; /* S'assurer qu'elles sont sous l'image mais au-dessus du fond */
        pointer-events: none; /* Pour ne pas bloquer les interactions */
    }

    .shape-top-right {
        width: 150px; /* Ajuster la taille */
        height: 150px;
        top: 0;
        right: 0;
        transform: translate(30%, -30%) rotate(45deg); /* Positionnement et rotation */
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; /* Forme organique */
        opacity: 0.8;
    }

    .shape-bottom-right {
        width: 200px;
        height: 200px;
        bottom: 0;
        right: 0;
        transform: translate(50%, 50%) rotate(-30deg); /* Positionnement et rotation */
        border-radius: 60% 40% 40% 60% / 60% 60% 40% 40%; /* Autre forme organique */
        opacity: 0.8;
    }

/* Bouton de chat flottant (Optionnel) */
    .floating-chat-btn {
        position: fixed;
        bottom: 30px;
        right: 30px;
        background-color: #ff5c35; /* Couleur orange */
        color: white;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.8rem;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        z-index: 1000;
        text-decoration: none; /* Enlever le soulignement du lien */
        transition: background-color 0.3s ease;
    }

    .floating-chat-btn:hover {
        background-color: #e64e2c; /* Légèrement plus foncé au survol */
    }

/* Styles spécifiques à la section de la mission */
    .mission-section {
        padding-top: 60px; /* Espace au-dessus de la section */
        padding-bottom: 60px; /* Espace en dessous de la section */
        background-color: #ffffff; /* S'assurer du fond blanc */
    }

/* Styles pour le titre de la mission */
    .mission-heading {
        font-family: 'Quicksand', sans-serif; /* Ou une autre police sans-serif nette */
        font-size: 2rem; /* Ajuster la taille du titre */
        font-weight: 700; /* Plus gras, comme sur l'image */
        line-height: 1.3; /* Espacement entre les lignes du titre */
        color: #333; /* Couleur du texte */
        text-align: center;
    }

/* Styles pour le paragraphe de texte de la mission */
    .mission-text {
        font-family: 'Quicksand', sans-serif; /* Ou une police sans-serif similaire */
        font-size: 1rem; /* Taille du texte du paragraphe */
        line-height: 1.6; /* Espacement entre les lignes du paragraphe */
        color: #555; /* Couleur du texte, légèrement plus claire */
        text-align: center; /* Centrer le texte */
        font-weight: 600; /* Légèrement gras pour le paragraphe */
    }

/* Ajustements pour les images (si nécessaire au-delà de img-fluid) */
    .mission-section img {
        border-radius: 8px; /* Léger arrondi des bords de l'image */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Légère ombre pour donner du relief */
    }

    .history-section {
        padding-top: 60px; /* Espace au-dessus de la section */
        padding-bottom: 60px; /* Espace en dessous de la section */
        background-color: #ffffff; /* S'assurer du fond blanc */
    }

/* Styles pour le titre de l'histoire */
    .history-heading {
        font-family: 'Quicksand', sans-serif; /* Ou une autre police sans-serif nette */
        font-size: 2rem; /* Ajuster la taille du titre */
        font-weight: 700; /* Plus gras, comme sur l'image */
        line-height: 1.3; /* Espacement entre les lignes du titre */
        color: #333; /* Couleur du texte */
        text-align: center; /* Centrer le titre */

    }

/* Styles pour les paragraphes de texte de l'histoire */
    .history-text {
        font-family: 'Quicksand', sans-serif; /* Ou une police sans-serif similaire */
        font-size: 1rem; /* Taille du texte du paragraphe */
        line-height: 1.6; /* Espacement entre les lignes du paragraphe */
        color: #555; /* Couleur du texte, légèrement plus claire */
        text-align: center;
        font-weight: 600; /* Légèrement gras pour le paragraphe */
    }

/* Ajustements pour les images (si nécessaire au-delà de img-fluid) */
    .history-section img {
        border-radius: 8px; /* Léger arrondi des bords de l'image */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Légère ombre pour donner du relief */
    }

    .stats-title{
        font-family: 'Quicksand', sans-serif; /* Ou une police sans-serif similaire */
        font-size: 2rem; /* Taille du titre */
        font-weight: 700; /* Plus gras */
        line-height: 1.3; /* Espacement entre les lignes */
        color: #333;
        text-align:center; /* Couleur du texte */
    }

    .contact-section {
        padding-top: 80px; /* Plus de padding pour cette section */
        padding-bottom: 80px;
        background-color:rgb(255, 255, 255); /* Assurer le fond beige clair */
    }

/* Titre "Contactez l'un de nos bureaux" */
    .contact-heading {
        font-family: 'Quicksand', sans-serif; /* Police sans-serif nette */
        font-size: 2rem; /* Ajuster la taille */
        font-weight: 700; /* Gras */
        color: #333;
        margin-bottom: 25px; /* Espacement après le titre */
    }

/* Lignes d'informations (adresse, ouverture, téléphone) */
    .contact-info-line {
        font-family: 'Quicksand', sans-serif;
        font-size: 1rem;
        line-height: 1.5;
        color: #555;
        margin-bottom: 8px; /* Espacement entre les lignes d'info */
        font-weight: 600;
    }

/* Bouton/Lien "Nous contacter" */
    .btn-contact-us {
        font-family: 'Quicksand', sans-serif;
        font-size: 1.5rem;
        font-weight: 600; /* Légèrement gras */
        color: #e64e2c; /* Couleur orange distinctive (HubSpot orange) */
        text-decoration: none; /* Enlève le soulignement par défaut */
        position: relative;
        padding-bottom: 5px; /* Espace pour la ligne orange */

    }

    .btn-contact-us::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%; /* La ligne s'étend sur toute la largeur du texte */
        height: 2px; /* Épaisseur de la ligne */
        background-color: #e64e2c; /* Couleur orange de la ligne */
        transform: scaleX(1); /* Par défaut, la ligne est visible */
        transform-origin: bottom;
        transition: transform 0.3s ease-out; /* Animation au survol */
    }

    .btn-contact-us:hover {
        color: #03294a; /* Couleur légèrement plus foncée au survol */
    }


/* Styles pour l'illustration (timbre) */
    .contact-illustration {
        max-width: 80%; /* Ajuste la taille maximale de l'image pour qu'elle ne soit pas trop grande */
        height: auto;
        display: block; /* S'assurer que les marges automatiques fonctionnent */
        margin: 0 auto; /* Centrer l'image dans sa colonne */
    }

    #stats-text {
        font-family: 'Quicksand', sans-serif; /* Police serif pour le texte */
        font-size: 0.9rem; /* Taille du texte */
        color: #535252; /* Couleur du texte */

    }


/* Responsive adjustments */
@media (max-width: 991.98px) { /* Pour les écrans plus petits que les ordinateurs portables */
    .text-content, .imafont-family-content {
        text-align: center; /* centrer le texte et l'image */
    }
    .image-content {
        margin-top: 40px; /* Espacement entre le texte et l'image */
        padding: 0; /* Supprimer le padding pour les formes sur petits écrans */
    }
    .image-content img {
        width: 90%; /* Ajuster la largeur de l'image */
        height: auto;
    }
    .shape {
        display: none; /* Cacher les formes sur les petits écrans pour éviter l'encombrement */
    }

    .mission-heading {
        font-size: 2rem; /* Réduire la taille du titre */
        text-align: center; /* Centrer le titre sur les petits écrans */
    }
    .mission-text {
        font-size: 1rem; /* Réduire la taille du texte */
        text-align: justify; /* Centrer le paragraphe sur les petits écrans */
    }
    .col-lg-6.mb-4.mb-lg-0 {
        text-align: center; /* Pour centrer l'image si elle n'est pas pleine largeur */
    }

    .col-lg-6.order-lg-first {
        order: 2 !important; /* Force le texte à apparaître après l'image sur les petits écrans */
    }
    .col-lg-6.order-lg-last {
        order: 1 !important; /* Force l'image à apparaître avant le texte sur les petits écrans */
    }

    .history-heading, .history-text {
        text-align: center; /* Centrer le texte sur les petits écrans */
    }
    .history-heading {
        font-size: 2rem; /* Réduire la taille du titre */
    }
    .history-text {
        font-size: 1rem; /* Réduire la taille du texte */
    }
    .col-lg-6.mb-4.mb-lg-0 { /* Ajustement de la marge pour les petits écrans */
        margin-bottom: 24px !important;
    }
    .contact-heading,
    .contact-info-line,
    .btn-contact-us {
        text-align: center; /* Centrer le texte sur les petits écrans */
    }
    .col-lg-6.mb-4.mb-lg-0 { /* Pour la colonne de texte, s'assurer que la marge du bas est appliquée */
        margin-bottom: 40px !important;
    }
    .btn-contact-us {
        display: flex; /* Pour centrer le lien */
        justify-content: center; /* Centrer le texte du lien */
        align-items: center; /* Centrer verticalement */
    }
    .btn-contact-us::after {
        left: 50%;
        transform: translateX(-50%) scaleX(1); /* Centrer la ligne pour le texte centré */
        transform-origin: center;
    }
    .btn-contact-us:hover::after {
        transform: translateX(-50%) scaleX(0); /* Gérer l'animation de la ligne centrée */
    }

    .btn-contact-us:hover {
        color: #061674; /* Gérer l'animation de la ligne centrée */
    }
}

@media (max-width: 767.98px) { /* Pour les tablettes et mobiles */
    .text-content h1 {
        font-size: 2rem;
    }
    .text-content p.lead {
        font-size: 1rem;
    }

    .mission-section {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .mission-heading {
        font-size: 1.5rem;
    }
    .history-section {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .history-heading {
        font-size: 1.5rem;
    }
    .contact-section {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .contact-heading {
        font-size: 1.8rem;
    }
    .contact-info-line {
        font-size: 1rem;
    }

    .btn-contact-us {
        font-size: 1.5rem;
    }
}