.img-pages {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .header h1 {
            font-size: 50px;
            font-weight: 700;
        }

        body {
            padding-top: 55px;
        }

        .info-block {
            background-color: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .info-block:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }

        .icon-box {
            font-size: 24px;
            color: #007bff;
            margin-bottom: 20px;
        }

        .section-background-1 {
            background-color: #f0f4f8;
            /* Couleur de fond pour le premier bloc */
            padding: 20px 0;
        }

        .section-background-2 {
            background-color: #ffffff;
            /* Couleur de fond blanche pour le deuxième bloc */
            padding: 20px 0;
        }

        .section-background-3 {
            background-color: #eef2f5;
            /* Une autre couleur de fond pour le troisième bloc */
            padding: 20px 0;
        }

        .row {
            margin: 0;
            /* Élimine les marges par défaut pour les lignes */
        }

        .col-md-8 {
            padding: 20px;
            /* Espacement à l'intérieur de chaque colonne */
        }

        .text-box,
        .image-box {
            background-color: #ffffff;
            /* Fond blanc pour le texte et les images */
            border-radius: 10px;
            /* Bords arrondis pour les boîtes */
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
            /* Ombre douce pour un effet de profondeur */
            padding: 0px;
            /* Espacement à l'intérieur des boîtes */
            margin-bottom: 20px;
            /* Espacement entre les éléments */
        }

        .image-box img {
            width: 90%;
            /* Assure que l'image s'adapte à la largeur de la boîte */
            height: auto;
            /* Garde le ratio de l'image */
            border-radius: 5px;
            /* Bords arrondis pour l'image */
        }

        .colonne-blanche {
            background-color: #ffffff;
            /* Fond blanc */
        }

        .colonne-couleur {
            background-color: #d3e9ffa1 !important;
            /* Une belle couleur teal, vous pouvez changer la couleur selon vos préférences */
        }

        /* Autres styles... */

        .info-block {
            background-color: #dce9f6a1;
            /* Couleur de fond des blocs d'info */
            /* Autres propriétés */
            margin: 0;
            /* Enlève les marges extérieures pour que le bloc puisse s'étendre */
            border-radius: 0;
            /* Optionnel: retire les bordures arrondies si vous voulez que le fond s'étende de façon uniforme */
        }

        .row {
            margin-right: 0;
            /* Assurez-vous que les rangées n'ont pas de marge à droite */
            margin-left: 0;
            /* Assurez-vous que les rangées n'ont pas de marge à gauche */
        }

        /* Ajoutez ceci pour que les colonnes prennent toute la hauteur de leur conteneur */
        .col-md-3,
        .col-md-7 {
            
            height: 100%;
            padding-right: 0;
            /* Enlève le padding à droite */
            padding-left: 0;
            /* Enlève le padding à gauche */
            display: flex;
            /* Active flexbox pour les colonnes */
            flex-direction: column;
            /* Stack les items verticalement */
            justify-content: center;
            /* Centre les items verticalement */
            padding: 0;
        }
        .info-block {
            margin-bottom: 50px; /* Augmentez la valeur selon vos besoins */
            margin: 20px;
        }
        .text{
            font-size: 14; /* Rend le texte plus petit; ajustez cette valeur selon vos besoins */
            margin: auto;
        }

        .colonne-couleur2 {
            background-color: #d3e9ffa1;
            padding-top: 2rem;
            padding-bottom: 2rem;
            /* Une belle couleur teal, vous pouvez changer la couleur selon vos préférences */
        }
        .img-large {
            border-radius: 30px; /* Ajoute des bords arrondis à l'image */
            box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1); /* Ajoute une ombre douce autour de l'image */
            padding: 10px;
            /*centrer image */
            display: flex;
            float: left !important;
        }
        .img-large-end {
            border-radius: 30px; /* Ajoute des bords arrondis à l'image */
            box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1); /* Ajoute une ombre douce autour de l'image */
            padding: 10px;
            /*centrer image */
            display: flex;
            justify-content: flex-end !important;
        }
        .bordered-text span {
            padding: 1px; /* Facultatif : ajout de rembourrage pour créer un espace entre les lettres et la bordure */
            margin-right: 1px; /* Facultatif : ajoute un espace horizontal entre les lettres */
            color: black; /* Couleur du texte */
        }
        .navbar{
         --bs-navbar-brand-padding-y: 0.17rem !important;

        }
        @media (max-width: 768px){
            p{
                margin-top: 45px!important;
                margin-bottom: 45px!important;
            }
        }