/*
Theme Name: netclic-child
Template: netclic
Description: Entreprise spécialisée dans la rénovation intérieure & extérieure, cloison sèche, peinture, revêtement de sol, aménagement salle de bain & cuisine.
Author URI: https://agence-netclic.com/

Version: 1.0.0
*/



@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Epilogue:ital,wght@0,100..900;1,100..900&display=swap');


:root {
  --color-bg: #F5F3F2;
  --color-text: #747474;
  --color-primary: #E30C12;
  --color-secondary: #202020;
  --color-title: #202020;
  --color-block: #F5F3F2;
  --color-border: #535353;
    --title-font: "Epilogue", sans-serif;
    --text-font: "DM Sans", sans-serif;
}



* {font-family: var(--text-font); box-sizing: border-box; -webkit-box-sizing: border-box;}
body {margin: 0; color: var(--color-text); font-size: 15px; line-height: 1.6em; letter-spacing: 0px;}
#container {background-color: var(--color-bg) !important; padding-top: 88px;}
#content {margin: 0 !important;}
.container {margin: auto; padding-left: 15px; padding-right: 15px; width: 100%; max-width: 748px;}
a {text-decoration: none; transition: 0.4s; color: var(--color-primary); cursor: pointer;}
.button, input[type=button] {cursor: pointer; transition: 0.4s;}
input, textarea, select {font-size: 16px !important;}
p, li {color: var(--color-text); font-size: 16px; line-height: 1.5;}
.btn1 {background: var(--color-primary); display: inline-block; color: white; padding: 10px 25px; border-radius: 50px; font-weight: bold; font-size: 16px;}
.btn2 {background: var(--color-secondary); display: inline-block; color: white; padding: 10px 25px; border-radius: 50px; font-weight: bold; font-size: 16px;}
.btn3 {display: block; background: white; text-align: center; color: var(--color-title); font-weight: bold; padding: 10px 30px; border-radius: 50px;}
.double-btn {display: flex; column-gap: 25px; align-items: center;}
.pos-rel {position: relative;}
.align-center {align-items: center;}
.justify-center {justify-content: center;}
.disp-flex {display: flex;}
.disp-flex .col33 {width: 33.33%;}
.disp-flex .col66 {width: 66.66%;}
.disp-flex .col50 {width: 50%;}
.disp-flex .col25 {width: 25%;}
.disp-flex .col20 {width: 20%;}
.disp-flex .col75 {width: 75%;}
.flex-wrap {flex-wrap: wrap;}
.align-item-center {align-items: center;}
.align-item-start {align-items: flex-start;}
.gap30 {gap:30px;}
.gap50 {gap:50px;}
.gap15 {gap:15px;}
body header .builder-item--button_base .button {padding: 10px 30px !important;}
select {outline: none !important;}
div#container, div#primary {margin-top: 0 !important;}
h1 {font-family: var(--title-font); font-size: 46px; line-height: 1.2; margin-top: 0; font-weight: bold; color: var(--color-title);}
h2 {font-family: var(--title-font); font-size: 38px; line-height: 1.2; letter-spacing: 0px; font-weight: bold; color: var(--color-title);}
h3 {font-family: var(--title-font); font-size: 22px; color: var(--color-title); line-height: 1.2; font-weight: 300;}
h4 {font-family: var(--title-font); font-size: 18px; color: var(--color-title);}
img {max-width: 100%;}
fieldset {border: none; margin: 0; padding: 0;}
:focus {outline: none !important;}
.surtitre {color: #01C5BD; margin-top: 0; margin-bottom: -25px;}
input[type="text"], input[type="email"], input[type="tel"] {height: 50px !important; border-color: #d8d8d8 !important; box-shadow: none !important; border-radius: 10px !important; padding: 10px 16px !important;}
textarea {border-color: #d8d8d8 !important; box-shadow: none !important; border-radius: 10px !important; padding: 20px 16px !important;}
.gform_fields {row-gap: 20px !important; column-gap: 12px !important;} 
.gform_wrapper input[type="submit"] {background: var(--color-primary) !important; display: inline-block !important; color: white !important; padding: 10px 25px !important; border-radius: 50px !important; font-weight: bold !important; font-size: 16px !important; line-height: 1.5 !important;}
input::placeholder, textarea::placeholder {color: var(--color-text) !important;}
hr {margin: 40px 0;}


/* START HEADER */
#header {padding: 10px 20px; margin: 20px !important; border-radius: 20px;  max-width: calc(100% - 40px); position: fixed; z-index: 10; width: 100%; background: transparent; transition: .4s;}
#header.scrolled {box-shadow: 0px 5px 20px 0px rgb(12 12 12 / 11%); margin-top: 0px; background: rgb(32 32 32 / 71%); backdrop-filter: blur(10px);}
#header .container-header {display: flex; align-items: center; column-gap: 60px;}
.menu-link li a {font-weight: bold; color: white; font-size: 16px;}
.menu-link li a:hover {color: var(--color-primary);}
.menu-link ul {display: flex; list-style: none; padding: 0; column-gap: 25px;}
#site-logo img {display: block;}
.menu-burger {display: none;}
.menu-burger i {color: var(--color-title);}
.menu-btn {margin-left: auto; display: flex; gap: 12px; align-items: center;}
.menu-tel {display: flex; border-radius: 50px; padding: 5px 18px 5px 5px; background: white; align-items: center; color: var(--color-title); font-weight: 600;}
.menu-tel i {width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50px; font-weight: 400;}
.menu-btn-mobile {display: none;}

@media screen and (max-width: 1150px) {
    #header #site-logo img {max-width: 200px; height: 100%;}
    
}

@media screen and (min-width: 960px) {
    .sub-menu {background: white !important; border-radius: 10px; padding: 20px 40px; box-shadow: none;}
}

@media screen and (max-width: 960px) {
    .menu-toggle {display: block;}
    .menu-btn-mobile {gap: 18px; display: flex; flex-direction: column;}
    .menu-link {display: none; position: fixed; top: 0px; left: 0; width: 100%; height: 100%; background: rgb(30 30 30 / 90%); display: flex; justify-content: center; align-items: center; flex-direction: column; z-index: -1; opacity: 0; transform: translateY(-100%); transition: opacity 0.3s ease, transform 0.3s ease; backdrop-filter: blur(3px);}
    .menu-btn .btn2, .menu-btn .menu-tel span {display: none;}
    .menu-btn .menu-tel {padding: 0; border: none;}
    .menu-btn .menu-tel i {background: var(--color-block); width: 40px; height: 40px;}
    .menu-link ul {list-style: none; padding: 0; text-align: center; flex-direction: column; margin: 0 auto; gap: 18px;}
    .menu-link ul li {margin: 0;}
    .menu-link ul li a {font-size: 22px !important; text-decoration: none !important; line-height: 32px; font-weight: 600 !important;}
    .nav-btn {margin-top: 30px !important; border-top: solid 1px #d4d4d4; padding-top: 30px !important;}
    .menu-burger {display: block; background: var(--color-block); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50px;}
    #header .container-header {column-gap: 10px;}
    .navbar {display: flex; align-items: center; padding: 10px 0;}
    .navbar .logo img {max-height: 35px; width: auto; display: block;}
    .navbar .burger-menu i {font-size: 26px; color: #070c27;}
    .no-scroll {overflow: hidden;}
    .menu-link.active {opacity: 1; transform: translateY(0); display: flex; gap: 18px;}
    .menu-burger.open i:before {content:"\f00d";}
    .no-mobile {display: none !important;}
    #header.scrolled {backdrop-filter: none !important; background: rgb(32 32 32 / 90%);}
}
/* END HEADER */



/* START HOME */
.top-home {background-image: url(/wp-content/uploads/2025/11/entreprise-lgrenovation85.webp); margin: 20px; border-radius: 20px; background-size: cover; background-position: center; padding: 170px 0 100px 0; position: relative; overflow: hidden; margin-top: -70px;}
.top-home:before {content: ""; position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; background: linear-gradient(140deg, hsl(0deg 0% 12.55% / 69%), transparent);}
.content-top-home {position: relative; max-width: 50%;}
.content-top-home h1, .content-top-home p, .content-top-home li {color: white;}
.content-top-home li {font-size: 18px; font-weight: 500;}
.content-top-home li i {color: var(--color-primary); font-size: 20px; padding-right: 10px;}
.content-top-home ul {list-style: none; margin-bottom: 30px;}
.reassurance-top-home {margin-top: 5px; font-size: 14px;}
.reassurance-top-home img {max-width: 190px;}
.about-home {padding: 100px 0;}
.about-home h2 {margin-top: 0;}
.about-home .disp-flex {gap: 40px;}
.about-home .disp-flex img {border-radius: 20px;}
.btn-contact {display: flex; align-items: center; gap: 12px;}
.btn-contact > span {display: flex; flex-direction: column;}
.btn-contact > span > span:first-child {color: var(--color-secondary); font-weight: bold; font-size: 18px;}
.btn-contact > span > span:last-child {color: var(--color-text);}
.services-home {background: white; padding: 100px 0;}
.services-home .disp-flex {gap: 25px;}
.services-home .col-service {width: calc(33.33% - 17px); background: var(--color-bg); padding: 25px; border-radius: 25px;}
.services-home h2 {text-align: center; margin-top: 0;}
.services-home .col-service h3 {margin-bottom: 0; font-weight: bold; font-size: 20px;}
.services-home .col-service p {margin-top: 8px; margin-bottom: 0;}
.services-home .col-service i {font-size: 40px; color: var(--color-primary);}
.cta-service {width: 100% !important; text-align: center; background-image: url(/wp-content/uploads/2025/11/lg-renovation-exterieur.webp) !important; background-attachment: fixed !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; position: relative; overflow: hidden; padding-top: 40px !important; padding-bottom: 40px !important;}
.cta-service::before {content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.7);}
.cta-service h3, .cta-service p {color: white;}
.cta-service h3, .cta-service p, .cta-service a {position: relative; z-index: 1;}
.cta-service p {max-width: 800px; margin: 20px auto !important;}
.cta-service h3 {font-size: 26px !important; margin-top: 0;}
.why-home {padding: 100px 0;}
.why-home .disp-flex {gap: 40px;}
.why-home .disp-flex img {display: block; object-fit: cover; overflow: hidden; width: 100%; height: 100%; border-radius: 20px;}
.why-home h2 {margin-bottom: 0; margin-top: 0;}
.why-home .disp-flex .col33 h3 {padding-top: 0px; font-size: 18px; font-weight: 600; margin-bottom: 0; margin-top: 0px;}
.why-home .disp-flex .col33 h3:not(:first-child) {border-top: solid 1px #d0d0d0; padding-top: 20px; margin-top: 20px;}
.why-home .disp-flex .col33 p {margin-top: 4px;}
.why-home .disp-flex .col33 h3 i {font-size: 22px; padding-right: 5px;}
.realisations-home {padding: 100px 0; background: white;}
.realisations-home .more-real {text-align: center; padding-top: 60px;}
.realisations-home .more-real p {font-size: 20px; color: var(--color-title); font-weight: 600;margin: 0;}
.realisations-home .more-real .listing-rs-real {display: flex; column-gap: 8px; justify-content: center; padding-top: 10px;}
.realisations-home .more-real .listing-rs-real .fa-square-facebook {font-size: 30px; color: #395599;}
.realisations-home .more-real .listing-rs-real .fa-instagram {font-size: 30px; color: #CC2C8D;}
.realisations-home h2 {text-align: center; margin: 0 auto 40px auto; max-width: 600px;}
.portfolio-masonry {column-count: 3; column-gap: 15px;}
.portfolio-masonry > * {width: 100%; margin-bottom: 15px; border-radius: 8px; display: block; break-inside: avoid; transition: .3s; overflow: hidden;}
.video-section {position: relative; width: 100%; overflow: hidden;}
.video-bg {width: 100%; height: 100%; display: block; object-fit: cover;}
.contact-home {padding: 100px 0 160px 0; background: white;}
.contact-home h2 {margin: 0;}
.contact-home .disp-flex {background: var(--color-bg); border-radius: 20px; overflow: hidden;}
.contact-home .disp-flex .col50:last-child {padding: 40px;}
.contact-home .disp-flex img {display: block; object-fit: cover; overflow: hidden; width: 100%; height: 100%; border-radius: 20px;}
/* END HOME */

/* START AVIS */
.avis-home {padding: 100px 0;}
.avis-home h2 {margin: 0;}
.avis-home .ncgr-wrapper {background: none; border: none; padding: 0; width: 100%; max-width: 100%;}
.avis-home .ncgr-reviews {display: flex; gap: 40px;}
.avis-home .ncgr-reviews .ncgr-review {background: white; padding: 40px; border-radius: 20px; width: 33.33% !important;}
.avis-home .btn1 {margin-top: 30px;}
/* END AVIS */


/* START PAGE */
.top-page {margin: 20px; border-radius: 20px; padding: 170px 0 100px 0; position: relative; overflow: hidden; margin-top: -70px; background: var(--color-secondary); margin-bottom: 50px;}
.top-page h1 {color: white;}
.txt-legal {padding-bottom: 60px;}
.txt-legal h2 {font-size: 30px;}
/* END PAGE */


/* START FOOTER */
footer {background-color: var(--color-secondary); z-index: 3; clear: both; position: relative; margin: 20px; border-radius: 20px;}
footer img {max-width: 100%;}
footer .title {font-size: 20px; color: white !important;}
.content-footer > .disp-flex > .col33:last-child {background: var(--color-primary); padding: 40px; border-radius: 20px; margin-top: -60px;}
.content-footer > .disp-flex > .col33:last-child .title {margin-top: 0;}
.content-footer > .disp-flex > .col33:last-child i {padding-right: 8px;}
.content-footer > .disp-flex > .footer-logos {display: flex; gap: 20px; align-items: center;}
.content-footer {padding: 20px 0;}
.content-footer p, .content-footer a:not(.btn2), .content-footer li {color: var(--color-block);}
.cop-footer {margin: 0; padding: 20px 0; display: flex; align-items: center; border-top: solid 1px var(--color-border); color: #acacac;}
.cop-footer span {margin-left: auto;}
.cop-footer span:last-child {margin-left: 20px;}
.cop-footer span:first-child {margin-left: 0px;}

@media screen and (max-width: 767px) {
    footer .disp-flex {flex-direction: column; padding: 30px 10px;}
    footer .disp-flex .col33 {width: 100%; margin: 10px 0;}
    footer .bottom-footer span {margin: 0;}
    .footer-link {padding-bottom: 20px;}    
    .footer-link a {padding: 5px 0; display: block; position: relative;}
    .footer-rs {gap: 15px; display: flex;}
}
/* END FOOTER */



/* START 404 */
.slide-404 {padding: 60px 0;}
.slide-404 h1 {text-align: center; margin-bottom: 40px;}
.slide-404 .btn1 {margin: 0 auto 60px auto; display: table;}
.slide-404 img {margin: auto; display: block; max-width: 1000px; margin-bottom: 50px;}
.error404 main {padding: 100px 0;}
/* END 404 */




/* START MEDIA QUERY */
@media (min-width: 850px){
    .container {max-width: 810px;}
}

@media (min-width: 992px){
    .container {max-width: 960px;}
}

@media (min-width: 1200px){
    .container {max-width: 1140px;}
}

@media (min-width: 1400px){
    .container {max-width: 1420px;}
}

@media (max-width: 968px){
    .listing-pdts > .produit {width: calc(50% - 15px);}
}
@media (max-width: 768px){
    h1 {font-size: 30px;}
    h2 {font-size: 30px;}
    h3 {font-size: 20px;}
    .about-home .disp-flex, .services-home .disp-flex, .why-home .disp-flex, .double-btn, .ncgr-reviews, .contact-home .disp-flex {flex-direction: column;}
    .about-home .disp-flex > div, .services-home .disp-flex > div, .why-home .disp-flex > div, .avis-home .ncgr-reviews .ncgr-review, .contact-home .disp-flex > div {width: 100% !important;}
    .content-top-home {max-width: 100% !important;}
    .double-btn {gap: 15px; align-items: flex-start;}
    .content-footer > .disp-flex > .col33:last-child {margin-top: 0;}
    .cop-footer {flex-direction: column-reverse; justify-content: center; text-align: center;}
    .content-footer {padding: 30px 0;}
    .faq-home .disp-flex {gap: 15px;}
    #container {padding-top: 70px;}
    .portfolio-masonry { column-count: 2;}
    .top-home, .top-page {margin: -55px 15px 15px 15px; padding: 115px 0 50px 0;}
    .about-home, .services-home, .why-home, .realisations-home, .avis-home, .contact-home {padding: 50px 0;}
    .services-home h2, .realisations-home h2, .cta-service {text-align: left;}
    .contact-home .disp-flex .col50:last-child {padding: 40px 25px;}
    footer {margin: 15px;}
    footer img {max-width: 100px; height: auto;}
    .realisations-home .more-real {padding-top: 40px;}
    .btn1, .btn2 {display: block; width: 100%; text-align: center; padding: 12px 20px;}
    .gform_wrapper input[type="submit"] {display: block !important; width: 100% !important; text-align: center !important; padding: 12px 20px !important;}
    .content-top-home ul {padding-left: 15px;}
    .top-home:before {background: linear-gradient(140deg, hsl(0deg 0% 12.55% / 69%), hsl(0deg 0% 12.55% / 45%));}
    #header {margin: 15px !important; max-width: calc(100% - 30px);}
    .about-home .double-btn {padding-top: 20px;}
    .txt-legal h2 {font-size: 25px;}
    .cta-service {background-image: none !important; background-color: var(--color-secondary) !important;}
    .cta-service::before {display: none;}
}

@media (max-width: 480px) {
    .portfolio-masonry {column-count: 1;}
}
/* END MEDIA QUERY */