/* Sommaire des sections :
    SECTION HEADER
    SECTION FOOTER
    SECTION D'ACCUEIL
    SECTION TRAVAUX DE COUVERTURE
    SECTION A VOTRE SERVICE
    SECTION NOS CLIENTS NOUS FONT CONFIANCE
    SECTION AUTRES PRESTATIONS
    SECTION NOS PROJETS REALISES
    SECTION CONTACT
    SECTION CE QUE NOS CLIENTS DISENT
    SECTION NOS PRESTATIONS
    SECTION A PROPOS DE NOUS
    SECTION TRAVAUX
    SECTION POURQUOI NOUS CHOISIR
    SECTION NOTRE EQUIPE
    SECTION CONTACTEZ-NOUS
    SECTION CHEMIN
    SECTION CARTE
*/

/******************** SECTION HEADER ********************/
@media (max-width: 1024px) {
    .header-menu, .header-button {
        display: none; 
    }
    .mobile-menu-icon {
        display: block;
        cursor: pointer;
        position: absolute;
        top: 20px;
        right: 20px;
        z-index: 3;
    }
    .mobile-menu-icon img {
        width: 40px;
        height: 40px;
    }
    .mobile-nav {
        left: 50%;
        transform: translateX(15%);
        text-align: center;
        border: 1px solid rgba(34, 34, 34, 0.26);
        z-index: 100;
        background: rgba(199, 150, 76, 0.72);
        backdrop-filter: blur(10px);
        padding: 15px;
        border-radius: 10px;
        transition: all 0.3s ease-in-out;
    }
    .mobile-nav {
        text-align: center;
        border: 1px solid #22222242;
        width: 300px;
        position: absolute;
        z-index: 100;
        background: #c49143b8;
        backdrop-filter: blur(10px);
        padding: 10px;
        border-radius: 10px;
    }
    .contact-item a {
        font-size: 0.9em;
    }
    .mobile-nav ul {
        list-style: none;
        padding: 20px 0;
        margin: 0;
    }
    .mobile-nav li {
        margin: 20px 0;
    }
    .mobile-nav a {
        color: white;
        text-decoration: none;
        display: block;
    }
    .mobile-nav.active {
        display: block; 
    }
    .header-top {
        display: none;
    }
    .header-container {
        padding-top: 0;
    }
}
@media(max-width:767px) {
    .mobile-nav {
        transform: translateX(-15%);
    }
}
@media (max-width: 575px) {
    .mobile-nav.active {
      transform: translateX(0%);
      max-width: 540px;
      width: 96%;
      margin-left: auto;
      justify-content: center;
      display: flex !important;
      flex-direction: column;
      left: 10px;
      margin-right: auto;
    }
  }
/* Cacher le menu mobile*/
@media (min-width: 1025px) {
    .mobile-menu-icon, 
    .mobile-nav {
        display: none !important;
    }
}

/* Afficher le menu desktop seulement */
@media (max-width: 1024px) {
    .header-menu, .header-button {
        display: none !important; 
    }

    .mobile-menu-icon {
        display: block;
        cursor: pointer;
        position: absolute;
        top: 20px;
        right: 20px;
        z-index: 10;
    }

    .mobile-menu-icon img {
        width: 40px;
        height: 40px;
    }

    .mobile-nav {
        display: none;
        position: absolute;
        transition: transform 0.3s ease-in-out;
    }

    .mobile-nav.active {
        display: block;
    }
    .mobile-header-top {
        background: #000000ab;
        border-radius: 4px;
    }
}
/**** Taille max section ****/
@media (max-width: 1200px) {
    .travaux-grid {
        max-width: 800px;
    }
    
}
@media (max-width: 1024px) {

    .trust-card {
        max-width: 800px;
    }
    .a-votre-service-img {
        max-width: 450px;
    }
}
/******************** FOOTER ********************/
@media(max-width:768px){
    .footer-bloc{
        gap:5em;
    }
}
@media (max-width: 900px) {
    .footer-container {
        flex-direction: column; 
        align-items: center; 
        text-align: center; 
        max-width: 300px;
    }
    .footer-column {
        width: 100%; 
        padding: 20px 0; 
    }
    .horaires-item {
        justify-content: center; 
    }
    .footer-column .line {
        margin: auto;
    }
    .contact-us-right {
        width: 90%;
    }
    .contact-us {
        display: flex;
        flex-direction: column;
    }
    .footer-column .contact-item {
        justify-content: center;
    }
}
@media (max-width: 600px) {
    .footer-column {
        width: 100%;
    }
    .horaires-item {
        justify-content: center;
        gap: 20px;
    }
}
@media (max-width: 800px) {
    .reviews-section {
        flex-direction: column;
        align-items: center;
    }

    .review-company {
        width: 100%;
        text-align: center;
    }

    .review-card {
        width: 100%;
    }
}
/******************** SECTION D'ACCCUEIL ********************/
@media (max-width: 768px) {
    .hero-section {
        padding-top: 80px;
    }
    .hero-title {
        font-size: 80px; 
    }
    .hero-section h2 {
        font-size: 24px;
        max-width: 80%;
    }
    .hero-contact {
        flex-direction: column;
        align-items: flex-start;
    }
}
@media (max-width: 992px) {
    .hero-section {
        margin-bottom: 50px;
    }
}
@media (max-width: 768px) {
    .hero-section {
        margin-bottom: 0px;
    }
}
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(195, 144, 73, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(195, 144, 73, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(195, 144, 73, 0);
    }
}
/******************** SECTION TRAVAUX DE COUVERTURE ********************/
@media(max-width:800px) {
    .services-section {
        flex-direction: column;
    }
    .team-grid {
        flex-direction: column;
        max-width: 400px;
    }
}
/******************** SECTION A VOTRE SERVICE ********************/
@media (max-width: 900px) {
    .a-votre-service {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .a-votre-service-img {
        position: static;
        width: 90%;
        max-width: 400px;
    }
    .a-votre-service-right {
        width: 100%;
        align-items: center;
        text-align: center;
    }
    .check-container {
        justify-content: center;
    }
}
@media (max-width: 991px) {
    .a-votre-service-background {
        width: 0; 
        height: 0; 
    }
    .a-votre-service-wrapper .col-lg-6.text-center.text-lg-end{
        padding: 3em 0;
        border-radius: 1%;
        
    }
    .a-votre-service-img{
        height: 400px !important;
        object-fit: cover;
        width: 90%;
        border-radius: 10px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    }
}
/******************** SECTION A VOTRE SERVICE ********************/
@media (max-width:900px) {
    .a-votre-service-right {
        max-width: 800px;
        padding-top: 5em;
    }
}
@media (max-width:480px) {
    .a-votre-service-wrapper::before {
    width: 50% ;
    height: 45% ;
    }
}
@media (max-width: 991px) {
    .section-other-services::before {
        width: 100%; 
        height: 47%;
        top: auto;
        bottom: 0;
    }
    .section-other-services::before{
        background: none;
    }
    .other-services-text,
    .other-services-content {
        text-align: center;
    }
    .other-services-image img {
        box-shadow: none; 
    }
}
@media (max-width: 991px) {
    .other-services-content p{
        color:black !important;
    }
}
/******************** SECTION NOS CLIENTS NOUS FONT CONFIANCE ********************/
@media (max-width: 900px) {
    .trust-banner {
        flex-direction: column;
        text-align: center;
    }
    .trust-card {
        width: 100%;
    }
    .trust-card-2 {
        width: 100% !important;
        width: auto;
    }
}
@media (max-width: 480px) {
    .section-other-services {
        margin-top:100px
    }
}
/******************** SECTION AUTRES PRESTATIONS ********************/
@media (max-width: 1024px) {
    .other-services {
        flex-direction: column;
        text-align: center;
    }
    .other-services-left,
    .other-services-right {
        width: 100%;
    }
    .other-services-right {
        justify-content: center;
    }
    .service-item {
        text-align: center;
    }
    .other-services-image {
        margin: 0 auto 5em auto;
    }
}
/******************** SECTION NOS PROJETS REALISES ********************/
@media (max-width: 1024px) {
    .projects-grid {
        grid-template-columns: repeat(2, 1fr); 
    }
}
@media (max-width: 600px) {
    .projects-grid {
        grid-template-columns: repeat(1, 1fr); 
    }
}
/******************** SECTION CONTACT ********************/
@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
    }
    .form-row .form-group {
        width: 100%;
    }
}
/******************** SECTION CE QUE NOS CLIENTS DISENT ********************/
@media(max-width:1024px){

    .groupe-avis{
        gap:5em;
    }
    .avis-1{
        margin:auto;
    }
}
@media(max-width:992px){
    .groupe-avis-2{
        flex-wrap: wrap;
    }
}

/******************** SECTION NOS PRESTATIONS ********************/

/******************** SECTION A PROPOS DE NOUS ********************/
@media (max-width: 768px) {
    .checklist-row {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    .qui-sommes-nous-background-1{
        display: none;
    }
    .qui-sommes-nous-background{
        display: none;
    }
    .qui-sommes-nous-wrapper .row.align-items-center{
        gap:5em;
    }
}
@media(max-width:800px) {
    .qui-sommes-nous-right {
        width: 90%;
    }
    .qui-sommes-nous {
        display: flex;
        flex-direction: column;
    }
    .checklist-row {
        align-items: start;
    }
    .checklist-row.center {
        padding-top:20px
    }
    .checklist-container {
        display: inline;
    }
}
/******************** SECTION TRAVAUX ********************/

/******************** SECTION POURQUOI NOUS CHOISIR ********************/

/******************** SECTION NOTRE EQUIPE ********************/

/******************** SECTION CONTACTEZ-NOUS ********************/

@media (min-width: 576px) {
    .container-sm, .container {
      max-width: 540px;
    }
}
@media (min-width: 992px) {
    .container-lg, .container-md, .container-sm, .container {
        max-width: 960px;
    }
    .contact-us .row {
        text-align: center;
    }
}
@media (min-width: 768px) {
    .container-md, .container-sm, .container {
        max-width: 720px;
    }
}
@media (min-width: 1200px) {
    .container-xl, .container-lg, .container-md, .container-sm, .container {
      max-width: 1140px;
    }
}
@media (min-width: 1400px) {
    .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 1320px;
    }
}
/******************** SECTION CHEMIN ********************/
@media(max-width:768px){
    .breadcrumb {
        justify-content: flex-start;
    }
}
/******************** SECTION CARTE ********************/