body {
    background-color: var(--color-fond);
    margin: var(--header-height) 0 0 0;
    padding: 0;
    font-family: "Poppins", sans-serif;
    color: var(--color-2);
}

/* Header Styling */
header {
    background-color: var(--color-0);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    padding: 10px 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

header .container-fluid {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    height: 80px;
}

/* Centering the Menu */
.menu ul {
    display: inline-flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu ul li {
    margin: 0 10px;
}

.menu ul li a {
    text-decoration: none;
    color: var(--color-fond);
    font-weight: bold;
    font-size: 16px;
}

.menu ul li a:hover, .menu ul li a.active {
    color: var(--color-4) !important;
}

.paint-btn {
    display: flex; /* Pour utiliser le centrage flexbox */
    align-items: center; /* Centre verticalement */
    justify-content: center; /* Centre horizontalement */
    text-align: center; /* Centre le texte */
    color: white;
    text-decoration: none;
    /*font-size: 16px;*/
    font-weight: bold;
    padding: 0; /* Pas de padding pour éviter l'espace autour */
    background-size: 100%; /* L'image couvre tout l'arrière-plan */
    background-repeat: no-repeat;
    background-position: center;
    height: 50px; /* Limite la hauteur à 80 pixels */
    width: 150px; /* Limite la largeur à 180 pixels */
}

.nav-item:nth-of-type(1) .paint-btn{
    background-image: url('img/tache1.svg'); /* Assurez-vous que ce chemin est correct */
}
.nav-item:nth-of-type(2) .paint-btn{
    background-image: url('img/tache-longue.svg'); /* Assurez-vous que ce chemin est correct */
}
.nav-item:nth-of-type(3) .paint-btn{
    background-image: url('img/tache-longue2.svg'); /* Assurez-vous que ce chemin est correct */
}
.nav-item:nth-of-type(4) .paint-btn{
    background-image: url('img/tachecentre.svg'); /* Assurez-vous que ce chemin est correct */
}
.nav-item:nth-of-type(5) .paint-btn{
    background-image: url('img/tache-longue3.svg'); /* Assurez-vous que ce chemin est correct */
}
.nav-item:nth-of-type(6) .paint-btn{
    background-image: url('img/tache-longue4.svg'); /* Assurez-vous que ce chemin est correct */
}
.nav-item:nth-of-type(7) .paint-btn{
    background-image: url('img/tache2.svg'); /* Assurez-vous que ce chemin est correct */
}


.paint-btn:hover, .paint-btn.active {
    transform: scale(1.05); /* Légère animation au survol */
}

/* Contact info on the right */
.contact-info {
    display: flex;
    align-items: center;
}

.phone-number a{
    margin-right: 15px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none; /* Enlève la décoration par défaut */
}

.phone-number a:hover {
    color: var(--color-2); /* Change la couleur au survol */
}


.contact-info a {
    color: #fff;
    margin-left: 10px;
    font-size: 20px;
}

.contact-info a:hover {
    color: var(--color-1);
}

/* Section Styles */
.section-1 {
    height: calc(100vh - var(--header-height)); /* Full height minus header */
    /*display: flex;*/
    margin: 0;
}

.section-1 .left-box {
    /*width: 40%;*/
    background-color: var(--color-2);
    /*display: flex;*/
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.title-contener{
    color: var(--color-0);
    margin: 30% 0 0 14%;
}

.title-img{
    /*background-color: var(--color-5);*/
    background-image: url('img/carre-accueil.jpg');
    background-size: cover;
    background-position: 50% 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.title-txt{
    position: relative;
    z-index: 1;
    width: 75%;
    margin-bottom: 0;
}

.fun-title h2 {
    font-size: 65px;
    position: relative;
    z-index: 1;
    font-weight: 200;
    font-style: normal;
}

h2.fun-bold {
    font-weight: 600;
    font-style: normal;
}

.section-1 .right-box {
    /*width: 60%;*/
    background-image: url('img/carre-accueil.jpg');
    background-size: cover;
    background-position: 50% 50%;
}

/* SVG shapes for left-box */
svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
}

/* Section padding and styling */
.section-2 {
    text-align: center;
    padding: 100px 0;
}

.section-3 {
    padding: 50px 0;
}

.img-fluid {
    max-width: 70%;
    height: auto;
}

.fond-rose{
    background-color: var(--color-3);
}

.section-testimonial{
    padding: 75px 0;
}

.card-container .card{
    border: none;
    background-color: var(--color-fond);
}

footer {
    background-color: var(--color-0);
    color: white;
    text-align: center;
    padding: 20px;
}
footer a{
    color: white;
    font-weight: bold;
}

footer H4{
    padding-bottom: 0.5rem;
    border-bottom: 1px solid white;
}

footer .pages ul{
    padding: 0;
}

footer .pages li{
    list-style-type: none;
    height: 2rem;
}

footer .right-reserved{
    padding-top: 1rem;
    border-top: 1px solid white;
}

.btn-outline-custom {
    color: var(--color-2); /* Couleur du texte */
    border: 3px solid var(--color-2); /* Bordure plus large */
    border-radius: 0; /* Coins carrés */
}

.btn-outline-custom:hover {
    background-color: var(--color-2); /* Couleur de fond au survol */
    color: white; /* Couleur du texte au survol */
}

.testimonial {
    padding: 20px; /* Espacement interne pour le confort visuel */
    margin: 10px 0; /* Marges externes */
}

.testimonial p {
    font-style: italic; /* Texte en italique pour le témoignage */
    font-size: 1.1rem; /* Taille de police légèrement augmentée */
    line-height: 1.6; /* Espacement entre les lignes pour améliorer la lisibilité */
}

.testimonial .author {
    font-weight: bold; /* Nom en gras */
    margin-top: 15px; /* Espace au-dessus du nom */
    font-size: 1.1rem; /* Taille de police pour l'auteur */
}

.testimonial .position {
    color: #6c757d; /* Couleur grise pour la position de l'auteur */
    font-size: 0.9rem; /* Taille de police plus petite pour la position */
}

.gallery-section {
    padding: 20px; /* Pour espacer la galerie du reste du contenu */
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 colonnes de largeur égale */
    gap: 10px; /* Espacement entre les images */
}

.gallery-item {
    position: relative;
    height: 300px; /* Hauteur fixe pour chaque item */
    overflow: hidden; /* Masquer le débordement */
    background-size: cover; /* Assure que l'image remplit l'item */
    background-position: center; /* Centre l'image dans l'item */
}

.overlay {
    position: absolute; /* Positionnement absolu pour couvrir l'item */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(100, 40, 25, 0.6); /* Fond semi-transparent */
    opacity: 0; /* Masquer l'overlay par défaut */
    transition: opacity 0.3s ease; /* Transition douce */
}

.gallery-item:hover .overlay {
    opacity: 1; /* Afficher l'overlay au survol */
}

.text-overlay {
    position: relative; /* Pour le centrage */
    z-index: 1; /* Au-dessus de l'overlay */
    color: white; /* Couleur du texte */
    font-weight: bold; /* Épaisseur de la police */
    font-size: 24px; /* Taille de la police */
    text-align: center; /* Alignement du texte */
}

/* ----------------------------------------------------- */
/* --------------------- PRODUIT ----------------------- */
/* ----------------------------------------------------- */
.produit {
    padding-bottom: 40px;
    background-color: #f9f9f9;
}

.produit-content {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.image img {
    width: 80%;
    height: auto;
    border-radius: 8px;
}

.details {
    flex: 1;
}

.details h2 {
    font-size: 24px;
    margin-bottom: 10px;
}

.details p {
    font-size: 16px;
    margin-bottom: 20px;
}

.details h3 {
    font-size: 20px;
    margin-bottom: 10px;
}

.specifications {
    list-style: none;
    padding: 0;
}

.specifications li {
    margin-bottom: 10px;
    font-size: 16px;
}

.specifications i {
    font-size: 25px;
    margin-right: 10px;
    color: var(--color-1); /* Couleur des icônes */
}

/* -------------------- wrapper pointu -------------------- */
.wrapper-container{
    filter: drop-shadow(-1px 6px 3px rgba(50, 50, 0, 0.5));
}
.wrapper {
    height: calc(var(--sp-cards-inside-height) + (2 * var(--sp-cards-padding)));
    box-sizing: border-box;
    padding: var(--sp-cards-padding);
    clip-path: polygon(0px 0px,
    0 calc(var(--sp-cards-inside-height) + (2 * var(--sp-cards-padding))),
    calc(100% - var(--sp-cards-decalage)) calc(var(--sp-cards-inside-height) + (2 * var(--sp-cards-padding))),
    calc(100% - 0px) 0px);
}

.wrapper-inside {
    box-shadow: inset -2em -0.25em 1em lightgray, inset 0.25em 0.25em 1em lightgray;
    height: var(--sp-cards-inside-height);
    box-sizing: border-box;
    padding: var(--sp-cards-padding);
    background-color: white;
    clip-path: polygon(0px 0px,
    0 var(--sp-cards-inside-height),
    calc(100% - calc(var(--sp-cards-decalage) + (0.5 * var(--sp-cards-padding)))) var(--sp-cards-inside-height),
    calc(100% - (1.5 * var(--sp-cards-padding))) 0px);
}

.text-block {
    width: 100%;
}

.text-block h3 {
    padding-left: 70px;
    text-transform: uppercase;
}

.losange-90 {
    width: 0;
    height: 0;
    position: absolute;
    top: -65px;
    left: 25px;
    border: 35px solid transparent;
    color: white;
}

.losange-90 .txt {
    position: absolute;
    top: 15px;
    left: -5px;
    font-size: 25px;
    font-weight: bold;
    z-index: 500;
}

.losange-90::after {
    width: 0;
    height: 0;
    content: '';
    position: absolute;
    left: -35px;
    top: 35px;
    border: 35px solid transparent;
}

.wrapper-container:nth-of-type(1) .wrapper {
    background-color: var(--color-1);
}
.wrapper-container:nth-of-type(1) .losange-90 {
    border-bottom-color: var(--color-1-1);
}
.wrapper-container:nth-of-type(1) .losange-90 .txt {
    left: -6px;
}
.wrapper-container:nth-of-type(1) .losange-90::after {
    border-top-color: var(--color-1-1);
}
.wrapper-container:nth-of-type(1) .text-block h3 {
    color: var(--color-1-1);
}

.wrapper-container:nth-of-type(2) .wrapper {
    background-color: var(--color-2);
}
.wrapper-container:nth-of-type(2) .losange-90 {
    border-bottom-color: var(--color-2-1);
}
.wrapper-container:nth-of-type(2) .losange-90 .txt {
    left: -7px;
}
.wrapper-container:nth-of-type(2) .losange-90::after {
    border-top-color: var(--color-2-1);
}
.wrapper-container:nth-of-type(2) .text-block h3 {
    color: var(--color-2);
}

.wrapper-container:nth-of-type(3) .wrapper {
    background-color: var(--color-0);
}
.wrapper-container:nth-of-type(3) .losange-90 {
    border-bottom-color: var(--color-0-1);
}
.wrapper-container:nth-of-type(3) .losange-90 .txt {
    left: -7px;
}
.wrapper-container:nth-of-type(3) .losange-90::after {
    border-top-color: var(--color-0-1);
}
.wrapper-container:nth-of-type(3) .text-block h3 {
    color: var(--color-0);
}

.wrapper-container:nth-of-type(4) .wrapper {
    background-color: var(--color-5);
}
.wrapper-container:nth-of-type(4) .losange-90 {
    border-bottom-color: var(--color-5-1);
}
.wrapper-container:nth-of-type(4) .losange-90 .txt {
    left: -9px;
}
.wrapper-container:nth-of-type(4) .losange-90::after {
    border-top-color: var(--color-5-1);
}
.wrapper-container:nth-of-type(4) .text-block h3 {
    color: var(--color-5);
}

/* ---------------------------- price card ----------------------*/

 .row.pricing .col-md-6:nth-of-type(1) .pricing-table .pricing-table-title .pricing-title,
 .row.pricing .col-md-6:nth-of-type(1) .pricing-table .pricing-table-title div  {
     background-color: var(--color-1-1);
 }
.row.pricing .col-md-6:nth-of-type(1) .pricing-table .pricing-table-price {
    background-color: var(--color-1);
}

.row.pricing .col-md-6:nth-of-type(2) .pricing-table .pricing-table-title .pricing-title,
.row.pricing .col-md-6:nth-of-type(2) .pricing-table .pricing-table-title div  {
    background-color: var(--color-2-1);
}
.row.pricing .col-md-6:nth-of-type(2) .pricing-table .pricing-table-price {
    background-color: var(--color-2);
}

.row.pricing {
    padding-top: 50px;
}

.pricing-table {
    background-color: #e9f0f4;

}
.pricing-table:hover {
    transform: scale(1.05);
}

.pricing-table-title, .pricing-table-price{
    color: white;
}

.row.pricing .col-md-6 .pricing-table{
    text-align: center;
}

.pricing-title {
    font-size: 1.3rem;
    font-weight: 700;
    padding: 5px 30px 0px 30px;
    margin-bottom: 0;
}
.pricing-price{
    font-size: 3rem;
    font-weight: 700;
}

.pricing-table-price{
    font-weight: 700;
    padding: 0px;
}

.title-font{
    margin-bottom: 0;
}

.pricing-table-content{
    padding: 1rem;
    font-size: 14px;
    /*text-align: left;*/
}

.pricing-table ul{
    margin-bottom: 0;
    list-style: none;
    padding: 0;
}
.pricing-table-content li {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-2-3);
}

.title-wrapper{
    background-image: url("img/bg-accueil.svg");
}

/* ------------------------ FAQ --------------------------- */

.accordion-item{
    border-color: var(--color-2-3);
}

.accordion-button, .accordion-button:not(.collapsed), .accordion-item {
    color: var(--color-2);
}

.accordion-button:not(.collapsed) {
    background-color: var(--color-5_rgba);
}

.accordion-button:focus {
    z-index: 3 !important;
    border-color: var(--color-5_rgba) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0.25rem var(--color-5_rgba) !important;
}

.faq h3{
    border-bottom: 1px solid var(--color-2-3);
}

.faq section.faq-section{
    padding-bottom: 40px;
}

h2.titre-page{
    text-align: center;
    padding: 30px 0;
}

/* Styles responsifs */


/*
@media only screen
and (min-device-width : 800px)
and (max-device-width : 1280px)
and (orientation : landscape) {

*/

@media (max-width: 600px) {
    .logo img {
        content: url('img/logo-mobile.png'); /* Remplacez par le chemin du logo mobile */
        height: 40px; /* Ajustez la taille du logo si nécessaire */
    }

    body{
        margin: 66px 0 0 0;
    }

    .section-1 {
        height: inherit;
    }

}
@media (max-width: 1280px) {

    body{
        margin: 66px 0 0 0;
    }

    .section-1 {
        height: inherit;
    }

    .logo img {
        height: 40px; /* Ajustez la taille du logo si nécessaire */
    }

    .menu {
        display: block;
        position: absolute;
        top: 60px; /* Ajustez en fonction de la hauteur du header */
        left: 0;
        /*width: 100%;*/
        background-color: var(--color-0);
        padding: 15px;
    }

    .menu ul {
        flex-direction: column;
        text-align: left;
    }

    .menu ul li {
        margin-bottom: 15px;
    }

    .fun-title h2 {
        font-size: 40px;
    }

    .title-txt{
        width: 100%;
    }

}


/* Mobile menu styles */
@media (max-width: 768px) {

    .produit-content {
        flex-direction: column; /* Change la disposition en colonne */
        align-items: center; /* Centre le contenu */
    }

    .image {
        margin-bottom: 20px; /* Ajoute un espacement en bas de l'image */
    }

    .details {
        text-align: center; /* Centre le texte des détails */
    }

    .wrapper {
        height: auto;
        clip-path: none;
    }

    .wrapper-inside {
        height: auto;
        clip-path: none;
        box-shadow: inset -0.25em -0.25em 1em lightgray, inset 0.25em 0.25em 1em lightgray;
    }

    .xs-center-img{
        text-align: center;
    }

    .title-wrapper{
        height: 50vh;
    }

    .title-contener{
        margin: 18% 0 0 5%
    }

    .title-img{
        height: 50vh;
    }

    svg{
        width: 100%;
        height: 57%;
    }

    .col-img-illu{
        margin-bottom: 1rem;
    }
}

@media (min-width: 768px) {
    .h-md-100 {
        height: 100% !important;
    }
}