/* Section Hero */
 .hero {
     background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../../public/header/index.jpg');
     background-size: cover;
     background-position: center;
     color: var(--blanc);
     padding: 100px 0;
     text-align: center;
     height: 600px;
 }

 .hero h2 {
     font-size: 2.5rem;
     margin-bottom: 20px;
 }

 .hero p {
     font-size: 1.2rem;
     max-width: 700px;
     margin: 0 auto 30px;
 }

 /* Sections générales */
 section {
     padding: 80px 0;
 }

 .section-title {
     text-align: center;
     margin-bottom: 50px;
     position: relative;
 }

 .section-title:after {
     content: '';
     display: block;
     width: 80px;
     height: 3px;
     background-color: orange;
     margin: 15px auto 0;
 }

 /* Section Services */
 .services {
     background-color: var(--gris-clair);
 }

 .services-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
     gap: 30px;
 }

 .service-card {
     background-color: var(--blanc);
     border-radius: 8px;
     overflow: hidden;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease;
 }

 .service-card:hover {
     transform: translateY(-10px);
 }

 .service-img {
     height: 200px;
     background-color: #ddd;
     background-size: cover;
     background-position: center;
 }

 .service-content {
     padding: 20px;
 }

 /* Section Projets */
 .projets-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
     gap: 30px;
 }

 .projet-card {
     border-radius: 8px;
     overflow: hidden;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }

 .projet-img {
     height: 250px;
     background-color: #ddd;
     background-size: cover;
     background-position: center;
 }

 .projet-info {
     padding: 20px;
     background-color: var(--blanc);
 }

 /* Section Témoignages */
 .temoignages {
     background-color: var(--gris-clair);
 }

 .carousel {
     position: relative;
     max-width: 800px;
     margin: 0 auto;
     overflow: hidden;
 }

 .carousel-inner {
     display: flex;
     transition: transform 0.5s ease;
 }

 .temoignage {
     min-width: 100%;
     padding: 30px;
     background-color: var(--blanc);
     border-radius: 8px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
     text-align: center;
 }

 .client-photo {
     width: 80px;
     height: 80px;
     border-radius: 50%;
     margin: 0 auto 20px;
     background-color: #ddd;
     background-size: cover;
     background-position: center;
 }

 /* Section Blog */
 .blog-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
     gap: 30px;
 }

 .article-card {
     border-radius: 8px;
     overflow: hidden;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }

 .article-img {
     height: 200px;
     background-color: #ddd;
     background-size: cover;
     background-position: center;
 }

 .article-content {
     padding: 20px;
     background-color: var(--blanc);
 }

 /* Section Contact */
 .contact {
     background-color: var(--gris-clair);
 }

 .contact-container {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 50px;
 }

 .contact-form {
     background-color: var(--blanc);
     padding: 30px;
     border-radius: 8px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }

 .form-group {
     margin-bottom: 20px;
 }

 .form-group label {
     display: block;
     margin-bottom: 8px;
     font-weight: 600;
 }

 .form-control {
     width: 100%;
     padding: 12px;
     border: 1px solid #ddd;
     border-radius: 4px;
     font-family: 'Open Sans', sans-serif;
 }

 textarea.form-control {
     min-height: 150px;
     resize: vertical;
 }

 .contact-info {
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .info-item {
     display: flex;
     align-items: center;
     margin-bottom: 20px;
 }

 .info-icon {
     width: 40px;
     height: 40px;
     background-color: var(--orange);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-right: 15px;
     color: var(--blanc);
 }

 .map-container {
     height: 300px;
     background-color: #ddd;
     margin-top: 30px;
     border-radius: 8px;
     overflow: hidden;
 }