/* PRESENTATION */
#header-home {
   background-color: #fff !important;
   color: #000 !important;
   text-align: center !important;
   /*height: 65vh !important*/
   height: auto !important;
   padding-bottom: 50px;
}

#header-home-container {
   background: 0 0 !important;
   color: #000 !important;
   height: initial !important;
   padding-top: 180px !important;
}

.jantes-title {
   color: #000 !important;
   font-weight: 700 !important;
   font-family: 'Nunito Sans' !important;
   font-size: 30px !important;
   border: 0 !important;
   text-align: center !important;
   width: 100% !important;
   padding: 0 !important;
   margin: 0 !important
}

.jantes-content {
   font-size: 1.6em !important;
   line-height: 1.6em !important;
   font-weight: 400 !important;
   padding-top: 20px;
}

#engagements {
   background: #171A1D;
   color: #ffffff;
}
.strate-texte {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-top: 50px;
}
.strate-texte > div {
   max-width: 565px;
}
.strate-texte h4 {
   color: #ffffff;
   font-size: 22px !important;
   font-weight: 700;
}
.strate-texte > div > div {
   font-family: 'Nunito Sans';
   font-size: 18px;
   font-weight: 400;
   line-height: 21px;
   text-align: left;
   margin-top: 50px;
}
.strate-texte a {
   text-align: center;
   display: block;
   margin: 0 auto;
   background: #C6371A;
   border-radius: 50px;
   padding: 14px;
   font-weight: 700;
   text-transform: uppercase;
   margin-top: 50px;
   width: 60%;
   font-size: 15px;
   transition: all 0.3s ease-in-out;
}

.strate-texte a:hover {
   color: #fff;
   background: #a32f17;
}

/* NOS PRESTATIONS */

#prestations {
   background:#fff;
   padding: 80px 0px;
   text-align: center;
   color: #ffffff;
}

#container-slider {
   position: relative;
}

.gradient-left {
   position: absolute;
   top: 0; 
   left: 0; 
   height: 100%; 
   width: 150px; 
   background: linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0)); 
   z-index: 1;
}

.gradient-right {
   position: absolute;
   top: 0;
   right: 0;
   height: 100%;
   width: 150px;
   background: linear-gradient(to left, rgb(255, 255, 255), rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
   z-index: 1;
}

.block-section {
   display: flex;
   align-items: flex-start;
   margin: 20px;
   color: #000;
   margin: auto;
   text-align: left;
   margin-top: 50px;
}

.block-section-image img {
   height: 330px;
   object-fit: cover;
   width: 100%;
}

.block-section-title {
   text-shadow: 0 0 1em #000, 0 0 0.2em #000;
}

.block-section .vertical-bar {
   width: 10px;
   background-color: #D9534F;
   margin-right: 15px;
   align-self: stretch;
}

.block-section h2 {
   margin: 0;
   font-size: 20px;
   color: #171A1D;
}

.block-section h3 {
   font-size:16px;
}

.block-section p {
   margin: 10px 0;
   font-size: 16px;
   line-height: 1.5;
}

.block-section p strong {
   font-weight: bold;
}

.block-section-content {
   font-size: 14px !important;
   font-weight: normal !important;
   line-height: normal !important;
   text-transform: none !important;
   border: 0 !important;
   margin-top:0 !important;
   text-align:left !important;
   border-left: 6px solid #D9534F !important;
   padding-left: 25px !important;
}

.slick-slide {
   margin: 10px;
}

.slick-slide img {
   border: 2px solid #fff;
}

.slick-slide div {
   margin-top: -53px;
   font-weight: 900;
   text-transform: uppercase;
   border-bottom: 8px solid #C6371A;
   z-index: 8;
   position: relative;
   line-height: 45px;
}

.slick-prev {
   z-index: 2;
   left: 20px !important;
}

.slick-next {
   z-index: 3;
   right: 25px !important;
}

.slick-prev:before {
   content: "\f053" !important;
   color: #292B2C !important;
   font-size: 45px !important;
   font-family: 'FontAwesome' !important;
}

.slick-next:before {
   content: "\f054" !important;
   color: #292B2C !important;
   font-size: 45px !important;
   font-family: 'FontAwesome' !important;
}

.slick-dots li button:before {
   font-size: 10px !important;
}

.slick-dots li.slick-active button:before {
   color: #C6371A !important;
}

.slick-dots {
   display: contents !important;
}

/* LES TARIFS DES REPARATIONS JANTES ALU */
#tarifs {
   background:#171A1D;padding: 80px 30px;text-align: center;color: #ffffff;
}
#tarifs h2 {
   color:#fff;font-size: 26px;
}

#tarifs h3 {
   color:#fff;font-size: 16px
}

.card-title {
   font-size: 18px;
   color: #fff;
   margin-bottom: 0px;
}
.some-page-wrapper {
margin: 15px;
padding: 0px 60px;
}

.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
border-bottom: 1px solid #fff !important;
padding-bottom: 20px;
padding-top: 20px;
}

.content-right-tarifs {
display: flex;
flex-direction: column;
justify-content: center;
align-items: end;
font-weight: 900;
}

.content-left-tarifs {
font-size: 14px;
}

.double-column {
display: flex;
flex-direction: column;
flex-basis: 100%;
text-align: left;
}

.btn-cta-white {
   color: #ffffff;
}

.btn-cta {
   text-align: center;
   display: block;
   margin: 0 auto;
   background: #C6371A;
   border-radius: 50px;
   padding: 14px;
   font-weight: 700;
   text-transform: uppercase;
   margin-top: 50px;
   width: 360px;
   font-size: 15px;
   transition: all 0.3s ease-in-out;
   cursor: pointer;
}

.btn-cta:hover {
   color: #fff;
   background: #a32f17;
}

@media screen and (min-width: 800px) {
   .content-right-tarifs {
      flex: 1
   }

   .double-column {
      flex: 4
   }

}

@media screen and (max-width: 640px) {
   .some-page-wrapper {
      margin: 15px 0px;
      padding: 0px 0px;
   }

   #tarifs .container {
      padding: 0px;
   }

   .btn-cta {
      width: 100%; 
      font-size: 13px;
   }
}

/* NOS REALISATIONS */
#nos-realisations {
   padding: 80px 30px;text-align: center;
}

#nos-realisations h3 {
   color:#000;
   font-size: 26px;
   text-transform: uppercase;
   margin-top: 50px;
   margin-bottom: 20px;
}

.masonry-with-columns {
   columns: 3 200px;
   column-gap: 1rem;
}

.masonry-with-columns > div {
   width: 150px;
   background: #C6371A;
   color: white;
   margin: 0 1rem 1rem 0;
   display: inline-block;
   width: 100%;
   text-align: center;
   font-family: system-ui;
   font-weight: 900;
   font-size: 2rem;
}

.masonry-with-columns > div:nth-child(1) {
   height: 339.46px;
   line-height: 339.46px;
}

.masonry-with-columns > div:nth-child(2) {
   height: 424.63px;
   line-height: 424.63px;
}

.masonry-with-columns > div:nth-child(3) {
   height: 214.2px;
   line-height: 214.2px;
}

.masonry-with-columns > div:nth-child(4) {
   height: 214.2px;
   line-height: 214.2px;
}

.masonry-with-columns > div:nth-child(5) {
   height: 319.65px;
   line-height: 319.65px;
}

.masonry-with-columns > div:nth-child(6) {
   height: 382.05px;
   line-height: 382.05px;
}

.masonry-with-columns > div:nth-child(7) {
   height: 382.05px;
   line-height: 382.05px;
}

@media (min-width: 768px) {
   
   .slider-realisation-mobile {
      display: none !important;
   }
}
@media (max-width: 767px) {
   .masonry-with-columns {
      display: none !important;
   }
   .slider-realisation-mobile {
      display: block !important;
   }
}

/* INFOS CARROSSIER */
#infos-carrossier h2{
   color:#292B2C;
   font-size: 32px;
   text-transform: uppercase;
   margin-bottom: 10px;
}

#infos-carrossier hr {
   width: 40px;
   height: 3px;
   background: #292B2C;
   margin: initial;
   margin-bottom: 45px;
}

.custom-container {
   display: flex;
   height: 450px;
}

@media screen and (max-width: 768px) {
   .custom-container {
      display: block;
      min-height: fit-content;
   }
}

.info-section {
   display: flex;
   /* flex-direction: column; */
   flex-direction: row;
   align-items: flex-end;
   background-color: #F0F0F0;
   width: 50%;
   padding: 20px;
   box-sizing: border-box;
   color: #292B2C;
}

@media screen and (max-width: 1230px) {
   .info-section {
     flex-direction: column;
   }
 }

@media screen and (max-width: 768px) {
   .info-section {
     width: 100%
   }
 }

.info-section h1 {
   margin-bottom: 20px;
}

.info-section p {
   margin: 10px 0;
}

.map-section {
   width: 50%;
   height: 100%;
}

@media screen and (max-width: 768px) {
   .map-section {
     width: 100%
   }
 }

#map {
   width: 100%;
   height: 100%;
}

.contact-section {
   max-width: 600px;
   margin: 50px auto;
}

.contact-section h1 {
   font-size: 24px;
   margin-bottom: 10px;
   border-bottom: 2px solid #fff;
   display: inline-block;
   padding-bottom: 5px;
}

.contact-section p {
   margin: 10px 0;
   font-size: 16px;
   font-weight: 500;
}

.contact-section .icon {
   margin-right: 10px;
   vertical-align: middle;
}

.rating {
   margin-top: 20px;
   display: flex;
   align-items: center;
}

.stars {
   color: #FFD700;
   font-size: 25px;
   margin-right: 10px;
}

.google-rating {
   display: flex;
   align-items: center;
}

.google-rating span {
   margin-right: 10px;
   font-size: 30px;
   font-weight: 900;
}

.google-rating img {
   height: 30px;
}


.title_section_black {
   color:#000;
   font-size: 26px;
   text-transform: uppercase;
   margin-bottom: 20px;
}

.admin-bar .brk-header-mobile {
   top: 0px !important;
}




.wpcf7 [step2] {
   display: none;
}

#cf7-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.cf7-loading {
    background: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    font-size: 18px;
}

/* Restreindre le style au formulaire Contact Form 7 */
.formulaire-jantes {
   max-width: 500px;
   margin: auto;
   background: #f9f9f9;
   padding: 20px;
   border-radius: 10px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.formulaire-jantes h3 {
   text-align: center;
   color: #333;
   margin-top: 20px;
}

/* Style des labels et inputs dans le formulaire */
.formulaire-jantes label {
   font-weight: bold;
   display: block;   
   color: #555;
   padding-top: 10px;
   vertical-align: middle;
}


.formulaire-jantes label input {
   vertical-align: middle !important;
}

.formulaire-jantes input[type="text"],
.formulaire-jantes input[type="number"],
.formulaire-jantes input[type="email"],
.formulaire-jantes input[type="tel"],
.formulaire-jantes input[type="file"],
.formulaire-jantes select {
   width: 100%;
   padding: 8px;
   margin-top: 5px;
   border: 1px solid #ddd;
   border-radius: 5px;
   font-size: 16px;
   vertical-align: middle !important;
}

/* Style des boutons uniquement dans le formulaire */
.formulaire-jantes button, .wpcf7-submit {
   background: #c33623;
   color: white;
   border: none;
   padding: 10px 15px;
   font-size: 16px;
   cursor: pointer;
   border-radius: 5px;
   margin-top: 15px;
   width: 100%;
   display: block;
   font-weight: 800;
}

.formulaire-jantes button:hover {
   background: #962819;
}

/* Style du bouton retour */
.formulaire-jantes #prev-step {
   background: #333;
   color: #fff;
   width: 96px;
   text-transform: uppercase;
   font-size: 12px;
   box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
   padding: 7px;
}

.formulaire-jantes #prev-step:hover {
   background: #bbb;
}

/* Style de la case RGPD */
.formulaire-jantes input[type="checkbox"] {
   margin-right: 5px;
}

/* Transition entre les étapes */
.formulaire-jantes #step2 {
   display: none;
   animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
   from {
       opacity: 0;
       transform: translateY(10px);
   }
   to {
       opacity: 1;
       transform: translateY(0);
   }
}

/* popup */
.overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   background-color: rgba(0,0,0,0.5);
   display: none;
   z-index: 100;
}
.popup-content {
   overflow-y: auto;
   max-height: 90vh;
}
.popup {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background-color: #fff;
   padding: 1.25rem 1.25rem 0rem 1.25rem;
   border-radius: 0.625rem;
   display: none;
   z-index: 100;
   width: 90%;
   max-width: 37.5rem;
   overflow-y: auto;
   height: auto !important;
}
.popup .close {
   position: absolute;
   top: 13px;
   right: 10px;
   cursor: pointer;
   font-size: 2.2rem;
   box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
   opacity: 1;
   background-color: #f9f9f9;
   border-radius: 20px;
   padding: 3px 10px;
}

.row {
   border-bottom: 0px;
}

/* Texte accordéon */
hr {                                   
   background-color: #fff;
   width: 50px;
}
.readmore-btn-description, .readmore-btn-seo  {                                  
   text-align: center;
   font-weight: 800;
   margin-top: 20px;
   color: #ffffff;
}
@media (min-width: 768px) {
   .strate-description-desktop {
      display: block !important;
   }
   .content-strate-description-mobile {
      display: none !important;
   }
}
@media (max-width: 767px) {
   .strate-description-desktop {
      display: none !important;
   }
   .content-strate-description-mobile {
      display: block !important;
   }
}


@media screen and (max-width: 780px) {
   #header-home {
      height: auto !important;
   }
   #header-home:after {
      background: none;
   }
   #header-home #header-home-container span {
      padding-left: 0px;
   }
   #header-home-container {
      padding-top: 150px !important;
      padding-bottom: 30px;
   }
   #header-home #header-home-container .container {
      padding-bottom: 30px;
      justify-content: center;
 
   }
}