body {
                background-color: white;
            }
            
            nav {
                height: 95px;
                box-shadow: 10px 5px 5px #c8c8c8;
            }
            
            .search-results {
                top: 100%;
                left: 0;
                right: 0;
                z-index: 2000;
                max-height: 300px;
                overflow-y: auto;
            }
            /* CSS personnalisé */
            
            .hero-section {
                position: relative;
                height: 600px;
                width: 100%;
                background-color: #e6f3e6;
                /* Vert clair pour la nature */
                margin-bottom: 30px;
                margin-left: auto;
                margin-right: auto;
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center -80px;
                /* <-- Ici on décale l’image de 70px vers le bas */
                box-shadow: 10px 5px 10px #c8c8c8;
                /* adapte à la hauteur de ton header */
            }
            
            .fixedtoi {
                position: fixed;
                z-index: 100;
                width: 100vw;
                top: 0;
            }
            
            .news-card {
                display: block;
                position: relative;
                width: 100%;
                padding-bottom: 100%;
                /* carré légèrement vertical pour faire plus premium */
                border-radius: 18px;
                overflow: hidden;
                text-decoration: none;
                box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
                transition: transform 0.25s ease, box-shadow 0.25s ease;
            }
            
            .news-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
            }
            
            .news-card-bg {
                position: absolute;
                inset: 0;
                background-size: cover;
                background-position: center;
                filter: brightness(0.8);
                transition: transform 0.4s ease;
            }
            
            .news-card:hover .news-card-bg {
                transform: scale(1.07);
            }
            
            .news-card-gradient {
                position: absolute;
                inset: 0;
                background: linear-gradient( to bottom, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.5) 100%);
            }
            
            .news-card-title {
                position: absolute;
                bottom: 15px;
                left: 0;
                right: 0;
                padding: 0 12px;
                text-align: center;
                color: #fff;
                font-size: 1.15rem;
                font-weight: 700;
                text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
            }
            
            .slider-container {
                padding: 20px 0;
                width: 75%;
                margin-left: auto !important;
                margin-right: auto !important;
            }
            
            .dog-card {
                background: white;
                border-radius: 18px;
                overflow: hidden;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
                text-align: center;
                transition: transform 0.25s ease, box-shadow 0.25s ease;
            }
            
            .dog-card:hover {
                transform: translateY(-6px);
                box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
            }
            
            .dog-image {
                width: 100%;
                height: 220px;
                background: #eee;
                overflow: hidden;
            }
            
            .dog-image img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            
            .dog-info {
                padding: 15px 10px;
            }
            
            .dog-name {
                font-size: 1.3rem;
                font-weight: 700;
                margin-bottom: 5px;
                color: #2c3e50;
            }
            
            .dog-info hr {
                width: 40%;
                margin: 8px auto;
                opacity: 0.5;
            }
            
            .dog-detail {
                margin: 3px 0;
                font-size: 0.95rem;
                color: #444;
            }
            
            .margin20 {
                margin-top: 50px;
            }
            
            .downside {
                margin-top: -100px;
            }
            
            .hero-text {
                position: absolute;
                top: 30%;
                left: 60%;
                font-size: 46px;
                text-align: center;
                color: white;
                font-weight: bold;
                width: 600px;
                text-shadow: 5px 5px 5px black;
            }
            
            .hero-text h1 {
                font-size: 3rem;
                font-weight: bold;
            }
            
            .hrstyle {
                width: 5%;
                display: block;
                margin-left: auto;
                margin-right: auto;
                border: 1px solid #bd983a;
                margin-top: -1px;
            }
            
            .hero-text p {
                font-size: 1.2rem;
                color: #666;
            }
            
            .hero-text .btn {
                background-color: #4CAF50;
                color: white;
                border: none;
                padding: 10px 20px;
                font-size: 1.1rem;
            }
            
            .hero-text .btn:hover {
                background-color: black;
            }
            
            .navbar-brand {
                margin-left: 50px;
                font-weight: bold;
                font-size: 1.4rem;
                color: black;
            }
            
            .navbar-nav {
                margin-left: auto;
                /* Pousse les liens à droite */
                margin-right: 20px;
                /* Petite marge à droite */
            }
            
            .navbar-nav .nav-link {
                font-weight: 500;
                margin-left: 15px;
                font-weight: bold;
            }
            
            .navbar-nav .nav-link:hover {
                color: black;
            }
            
            .value-title {
                font-size: 2rem;
                white-space: 10px;
                margin-bottom: 15px;
                color: black;
            }
            
            .value-subtitle {
                font-size: 18px;
                color: #757575;
                /* Gris doux */
                width: 77%;
                display: block;
                margin-left: auto;
                margin-right: auto;
                text-align: center;
                line-height: 30px;
            }
            
            .container-75 {
                width: 85%;
                margin-left: auto;
                margin-right: auto;
            }
            
            .center {
                text-align: center;
            }
            
            .tour-card div {
                height: 300px;
                background-color: #e6f3e6;
                /* Vert clair */
                border: 2px solid #4CAF50;
                border-radius: 10px;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            }
            
            .btn-outline-dark {
                color: #2E7D32;
                border-color: #4CAF50;
            }
            
            .btn-outline-dark:hover {
                background-color: #4CAF50;
                color: white;
            }
            
            .value-icon {
                font-size: 2.5rem;
                margin-bottom: 10px;
                color: black;
            }
            
            .value-boxes {
                position: relative;
                top: 0px;
                /* Déplace les boîtes pour qu'elles chevauchent l'image */
                z-index: 1;
            }
            
            .value-box {
                background-color: white;
                border-radius: 10px;
                padding: 20px;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                text-align: center;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }
            
            .reductop {
                margin-top: -80px;
            }
            
            .site {
                height: auto;
                display: flex;
                align-items: center;
                justify-content: center;
                overflow: hidden;
                border: 1px solid black;
                margin-bottom: 30px;
                border-radius: 10px;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            }
            
            .site img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
            
            body {
                color: black;
            }
            
            .faq-item {
                margin-bottom: 15px;
                background-color: #fff;
                border-radius: 8px;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            }
            
            .faq-question {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 15px 20px;
                cursor: pointer;
                font-weight: bold;
                color: #333;
            }
            
            .faq-answer {
                max-height: 0;
                opacity: 0;
                overflow: hidden;
                padding: 0 20px;
                color: #555;
                background-color: #fff;
                border-radius: 0 0 8px 8px;
                transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
            }
            
            .faq-answer.active {
                max-height: 200px;
                /* Ajustez selon le contenu */
                opacity: 1;
                padding: 15px 20px;
            }
            
            .faq-toggle {
                color: black;
                transition: transform 0.3s ease;
            }
            
            .faq-toggle.active {
                transform: rotate(180deg);
            }
            
            .list-section {
                flex: 1;
                padding-right: 20px;
            }
            
            .list-section ul {
                list-style: none;
                padding: 0;
            }
            
            .list-section li {
                margin-bottom: 15px;
                font-size: 18px;
                color: #333;
            }
            
            .list-section .fa-paw {
                margin-right: 10px;
                color: black;
            }
            
            .carousel-section {
                flex: 1;
                position: relative;
                overflow: hidden;
            }
            
            .carousel {
                display: flex;
                transition: transform 0.5s ease;
            }
            
            .site {
                flex: 0 0 100%;
                width: 100%;
            }
            
            .site img {
                width: 100%;
                height: auto;
                object-fit: cover;
            }
            
            .carousel-nav {
                position: absolute;
                top: 50%;
                width: 100%;
                display: flex;
                justify-content: space-between;
                transform: translateY(-50%);
                padding: 0 10px;
            }
            
            .carousel-nav button {
                background: rgba(0, 0, 0, 0.5);
                color: white;
                border: none;
                padding: 10px;
                cursor: pointer;
                font-size: 18px;
            }
            
            .carousel-nav button:hover {
                background: rgba(0, 0, 0, 0.8);
            }
            
            .carousel-dots {
                position: absolute;
                bottom: 10px;
                left: 50%;
                transform: translateX(-50%);
                display: flex;
                gap: 10px;
            }
            
            .carousel-dots button {
                background: #ccc;
                border: none;
                width: 12px;
                height: 12px;
                border-radius: 50%;
                cursor: pointer;
            }
            
            .carousel-dots button.active {
                background: #f5a623;
            }
            
            .center {
                text-align: center;
            }
            
            .bold {
                font-weight: bold;
            }
            
            hr {
                border: 3px solid rgb(208, 202, 202)
            }
            
            i {}
            
            .pate {
                text-align: center;
                font-size: 46px;
                margin-top: -40px;
                color: #0069a5;
            }
            
            .coolored {
                color: #0069a5;
            }
            
            .coologreen {
                color: #99CC33;
            }
            
            header {
                text-align: right;
                height: 50px;
                line-height: 50px;
                background-color: #0069a5;
                color: white;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                gap: 20px;
                padding-right: 50px;
            }
            
            .search-results .list-group-item {
                padding: 14px 12px;
                font-size: 12px;
                line-height: 20px;
            }
            
            @media (max-width: 1300px) {
                .navbar-brand {
                    margin-left: 20px;
                    font-size: 1rem;
                }
                .navbar-nav .nav-link {
                    font-size: 12px !important;
                }
            }
            
            @media (max-width: 768px) {
                .search-results {
                    max-height: 60vh;
                    font-size: 16px;
                }
                .search-results .list-group-item {
                    padding: 14px 12px;
                    font-size: 12px;
                    line-height: 20px;
                }
                .navbar-collapse {
                    background-color: white;
                }
            }