@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: #0d0d0d;
  color: white;
  font-family: "Inter", sans-serif;
}

h1,
h2,
h3 {
  font-family: "Playfair Display", serif;
  font-weight: 600;
}


/* HEADER */

.header {
  background-color: #0d0d0d;
  padding: 15px 20px;
  border-bottom: 1px solid #2a2a2a;
  position: relative;
  z-index: 100;
}

.header-ligne {
  max-width: 1200px;
  margin: auto;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo img {
  width: 250px;
  max-width: 100%;
  height: auto;

  display: block;

  mix-blend-mode: screen;

  filter:
    drop-shadow(0 0 4px rgba(201, 155, 91, 0.55))
    drop-shadow(0 0 10px rgba(201, 155, 91, 0.20));

  transition:
    filter 0.4s ease,
    transform 0.4s ease;
}
.logo img:hover {
  filter:
    drop-shadow(0 0 6px rgba(201, 155, 91, 0.75))
    drop-shadow(0 0 15px rgba(201, 155, 91, 0.30));

  transform: scale(1.02);
}


/* MENU PC */

.nav {
  display: flex;
  justify-content: center;
  gap: 25px;

  margin-top: 15px;
}

.nav a {
  color: #dddddd;
  text-decoration: none;

  font-size: 17px;

  padding: 10px 14px;

  border-radius: 8px;

  transition: 0.3s;
}

.nav a:hover {
  background-color: white;
  color: #111111;
}


/* BOUTON HAMBURGER */

.menu-toggle {
  display: none;

  width: 44px;
  height: 44px;

  background: none;
  border: none;

  position: relative;

  cursor: pointer;
}

.menu-toggle span {
  position: absolute;
  left: 9px;

  width: 26px;
  height: 2px;

  background-color: white;

  transition:
  transform 0.5s ease,
  top 0.5s ease,
  opacity 0.3s ease;
}

.menu-toggle span:nth-child(1) {
  top: 13px;
}

.menu-toggle span:nth-child(2) {
  top: 21px;
}

.menu-toggle span:nth-child(3) {
  top: 29px;
}


/* HERO */

.hero {
  min-height: 75vh;

  background-image:
    linear-gradient(
      rgba(0, 0, 0, 0.45),
      rgba(0, 0, 0, 0.85)
    ),
    url("chantier1.jpg");

  background-size: cover;
  background-position: center;

  display: flex;
  align-items: center;

  padding: 50px 25px;
}

.hero-contenu {
  max-width: 700px;
}

.hero-petit {
  color: #d0d0d0;
  font-size: 17px;
  margin-bottom: 10px;
}

.hero h1 {
  font-size: 52px;
  line-height: 1.05;

  margin: 0 0 20px 0;

  color: white;
}

.hero-texte {
  font-size: 21px;
  line-height: 1.6;

  color: #dddddd;

  max-width: 600px;
}


/* BOUTON DEVIS */

.bouton-devis {
  display: inline-block;

  margin-top: 20px;

  padding: 16px 25px;

  background-color: white;
  color: #111111;

  text-decoration: none;
  font-weight: bold;

  border-radius: 10px;

  transition: 0.3s;
}

.bouton-devis:hover {
  transform: translateY(-3px);
}


/* SECTIONS ACCUEIL */

.accueil-services,
.accueil-realisations,
.accueil-devis {
  padding: 70px 25px;
  text-align: center;
}

.accueil-services {
  background-color: #121212;
}

.accueil-realisations {
  background-color: #181818;
}

.accueil-devis {
  background-color: #101010;
}

.accueil-services h2,
.accueil-realisations h2,
.accueil-devis h2 {
  font-size: 34px;
  margin-top: 0;
}

.accueil-services p,
.accueil-realisations p,
.accueil-devis p {
  max-width: 700px;

  margin: 0 auto 25px auto;

  color: #cfcfcf;

  line-height: 1.6;

  font-size: 18px;
}

.accueil-services a,
.accueil-realisations a {
  color: white;

  text-decoration: none;

  border: 1px solid #555555;

  border-radius: 10px;

  padding: 13px 20px;

  display: inline-block;
}


/* FOOTER */

.footer {
  background-color: #080808;

  padding: 30px 20px;

  text-align: center;

  color: #888888;

  border-top: 1px solid #222222;
}


/* VERSION TELEPHONE */

@media (max-width: 700px) {

  .header {
    padding: 12px 16px;
  }

  .logo img {
    width: 190px;
  }

  .menu-toggle {
    display: block;
  }

  .nav {
  position: absolute;

  top: 100%;
  left: 0;
  right: 0;

  margin: 0;
  padding: 10px 0 20px 0;

  background-color: #0d0d0d;

  flex-direction: column;
  gap: 0;

  opacity: 0;
  visibility: hidden;

  transform: translateY(-12px);

  pointer-events: none;

  border-bottom: 1px solid #2a2a2a;

  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    visibility 0.3s ease;
}

  .nav a {
    width: 100%;

    text-align: center;

    padding: 15px;

    font-size: 17px;
  }

  .nav.ouvert {
  opacity: 1;
  visibility: visible;

  transform: translateY(0);

  pointer-events: auto;
}


  /* HAMBURGER → CROIX */

  .menu-toggle.ouvert span:nth-child(1) {
    top: 21px;
    transform: rotate(45deg);
  }

  .menu-toggle.ouvert span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle.ouvert span:nth-child(3) {
    top: 21px;
    transform: rotate(-45deg);
  }


  /* HERO MOBILE */

  .hero {
    min-height: 70vh;

    padding: 40px 20px;
  }

  .hero h1 {
    font-size: 42px;
  }

  .hero-texte {
    font-size: 18px;
  }


  /* SECTIONS MOBILE */

  .accueil-services,
  .accueil-realisations,
  .accueil-devis {
    padding: 55px 20px;
  }

  .accueil-services h2,
  .accueil-realisations h2,
  .accueil-devis h2 {
    font-size: 29px;
  }
}
/* CARTES SERVICES PREMIUM */

.accueil-services {
  background-color: #101010;
  padding: 90px 25px;
}

.section-label {
  color: #c99b5b !important;
  font-size: 13px !important;
  font-weight: bold;
  letter-spacing: 3px;
  margin-bottom: 15px !important;
}

.accueil-services h2 {
  font-size: 40px;
  line-height: 1.15;
  margin-bottom: 20px;
}

.section-intro {
  max-width: 650px !important;
  margin-bottom: 45px !important;
}

.cartes-services {
  max-width: 1100px;
  margin: auto;

  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: 18px;
}

.carte-service {
  background-color: #181818;

  border: 1px solid #2a2a2a;
  border-radius: 14px;

  padding: 30px 25px;

  text-align: left;

  transition: 0.3s;
}

.carte-service span {
  color: #c99b5b;

  font-size: 13px;
  font-weight: bold;

  letter-spacing: 2px;
}

.carte-service h3 {
  font-size: 22px;

  margin: 18px 0 12px 0;
}

.carte-service p {
  margin: 0 !important;

  color: #aaaaaa !important;

  font-size: 16px !important;

  line-height: 1.6;
}

.carte-service:hover {
  transform: translateY(-5px);

  border-color: #c99b5b;
}

.bouton-services {
  display: inline-block;

  margin-top: 40px;

  padding: 15px 24px;

  color: white;

  text-decoration: none;

  border: 1px solid #555555;
  border-radius: 10px;

  transition: 0.3s;
}

.bouton-services:hover {
  background-color: white;
  color: #111111;
}


/* CARTES SERVICES TELEPHONE */

@media (max-width: 700px) {

  .accueil-services {
    padding: 65px 20px;
  }

  .accueil-services h2 {
    font-size: 32px;
  }

  .cartes-services {
    grid-template-columns: 1fr;
  }

  .carte-service {
    padding: 25px 22px;
  }
}
/* REALISATIONS */

.accueil-realisations {
  background-color: #151515;
  padding: 90px 25px;
  text-align: center;
}

.grille-realisations {
  max-width: 1100px;
  margin: 45px auto 0 auto;

  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: 20px;
}

.realisation {
  background-color: #101010;

  border: 1px solid #292929;
  border-radius: 15px;

  overflow: hidden;

  text-align: left;
}

.realisation img {
  width: 100%;
  height: 260px;

  object-fit: cover;

  display: block;
}

.realisation-texte {
  padding: 22px;
}

.realisation-texte h3 {
  margin: 0 0 10px 0;

  font-size: 21px;
}

.realisation-texte p {
  margin: 0;

  color: #aaaaaa;

  line-height: 1.5;
}


/* REALISATIONS TELEPHONE */

@media (max-width: 700px) {

  .accueil-realisations {
    padding: 65px 20px;
  }

  .grille-realisations {
    grid-template-columns: 1fr;
  }

  .realisation img {
    height: 230px;
  }
}
/* BLOC DEVIS FINAL */

.accueil-devis {
  background-color: #0d0d0d;

  padding: 90px 25px;

  text-align: center;

  border-top: 1px solid #242424;
}

.accueil-devis h2 {
  font-size: 38px;

  margin-bottom: 20px;
}

.accueil-devis p {
  max-width: 650px;

  margin: 0 auto 25px auto;

  color: #bdbdbd;

  font-size: 18px;

  line-height: 1.6;
}

.actions-devis {
  display: flex;

  justify-content: center;

  gap: 15px;

  flex-wrap: wrap;
}

.bouton-contact {
  display: inline-block;

  margin-top: 20px;

  padding: 16px 25px;

  color: white;

  text-decoration: none;

  border: 1px solid #555555;

  border-radius: 10px;

  transition: 0.3s;
}

.bouton-contact:hover {
  background-color: white;
  color: #111111;
}


/* FOOTER PREMIUM */

.footer {
  background-color: #080808;

  border-top: 1px solid #222222;

  padding: 45px 20px;
}

.footer-contenu {
  max-width: 900px;

  margin: auto;

  text-align: center;
}

.footer img {
  width: 220px;

  max-width: 80%;

  margin-bottom: 20px;
}

.footer-contenu p {
  color: #888888;

  line-height: 1.6;
}

.footer-liens {
  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 20px;

  margin: 25px 0;
}

.footer-liens a {
  color: #cccccc;

  text-decoration: none;

  font-size: 15px;
}

.copyright {
  font-size: 13px;
}


/* BAS DU SITE SUR TELEPHONE */

@media (max-width: 700px) {

  .accueil-devis {
    padding: 65px 20px;
  }

  .accueil-devis h2 {
    font-size: 31px;
  }

  .actions-devis {
    flex-direction: column;

    align-items: center;
  }

  .bouton-devis,
  .bouton-contact {
    width: 100%;

    max-width: 320px;

    text-align: center;
  }

}
/* PAGE SERVICES */

.services-hero {
  padding: 100px 25px;

  text-align: center;

  background-color: #101010;

  border-bottom: 1px solid #252525;
}

.services-hero h1 {
  font-size: 55px;

  line-height: 1.05;

  margin: 15px 0 25px 0;
}

.services-hero > p:not(.section-label) {
  max-width: 700px;

  margin: auto;

  color: #bbbbbb;

  font-size: 19px;

  line-height: 1.7;
}


.services-page {
  max-width: 1100px;

  margin: auto;

  padding: 80px 25px;

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 20px;
}


.service-detail {
  background-color: #151515;

  border: 1px solid #292929;

  border-radius: 15px;

  padding: 35px;

  transition: 0.3s;
}

.service-detail span {
  color: #c99b5b;

  font-size: 13px;

  font-weight: bold;

  letter-spacing: 2px;
}

.service-detail h2 {
  font-size: 27px;

  margin: 18px 0 15px 0;
}

.service-detail p {
  margin: 0;

  color: #aaaaaa;

  font-size: 17px;

  line-height: 1.7;
}

.service-detail:hover {
  border-color: #c99b5b;

  transform: translateY(-4px);
}


.services-confiance {
  padding: 90px 25px;

  text-align: center;

  background-color: #171717;
}

.services-confiance h2 {
  max-width: 700px;

  margin: 15px auto 20px auto;

  font-size: 38px;
}

.services-confiance > p:not(.section-label) {
  max-width: 650px;

  margin: auto;

  color: #b5b5b5;

  font-size: 18px;

  line-height: 1.7;
}


/* PAGE SERVICES MOBILE */

@media (max-width: 700px) {

  .services-hero {
    padding: 70px 20px;
  }

  .services-hero h1 {
    font-size: 42px;
  }

  .services-hero > p:not(.section-label) {
    font-size: 17px;
  }

  .services-page {
    grid-template-columns: 1fr;

    padding: 55px 20px;
  }

  .service-detail {
    padding: 28px 23px;
  }

  .services-confiance {
    padding: 65px 20px;
  }

  .services-confiance h2 {
    font-size: 31px;
  }

}
/* PAGE REALISATIONS */

.realisations-hero {
  background-color: #101010;

  padding: 100px 25px;

  text-align: center;

  border-bottom: 1px solid #252525;
}

.realisations-hero h1 {
  font-size: 55px;

  margin: 15px 0 20px 0;
}

.realisations-hero > p:not(.section-label) {
  max-width: 700px;

  margin: auto;

  color: #bbbbbb;

  font-size: 19px;

  line-height: 1.7;
}


/* PROJETS */

.galerie-page {
  max-width: 1150px;

  margin: auto;

  padding: 80px 25px;

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 25px;
}

.projet {
  background-color: #151515;

  border: 1px solid #292929;

  border-radius: 16px;

  overflow: hidden;
}

.projet img {
  width: 100%;

  height: 320px;

  object-fit: cover;

  display: block;
}

.projet-contenu {
  padding: 28px;
}

.projet-contenu span {
  color: #c99b5b;

  font-size: 12px;

  font-weight: bold;

  letter-spacing: 2px;
}

.projet-contenu h2 {
  font-size: 26px;

  margin: 12px 0;
}

.projet-contenu p {
  color: #aaaaaa;

  line-height: 1.7;

  margin: 0;
}


/* AVANT / APRES */

.avant-apres {
  background-color: #161616;

  padding: 90px 25px;

  text-align: center;
}

.avant-apres h2 {
  font-size: 38px;

  margin: 15px 0;
}

.avant-apres > p:not(.section-label) {
  color: #aaaaaa;

  font-size: 18px;
}

.avant-apres-grille {
  max-width: 1000px;

  margin: 45px auto 0 auto;

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 20px;
}

.photo-comparaison {
  position: relative;

  border-radius: 15px;

  overflow: hidden;

  border: 1px solid #292929;
}

.photo-comparaison img {
  width: 100%;

  height: 400px;

  object-fit: cover;

  display: block;
}

.photo-comparaison span {
  position: absolute;

  top: 15px;
  left: 15px;

  background-color: rgba(0, 0, 0, 0.75);

  color: white;

  padding: 8px 12px;

  border-radius: 7px;

  font-size: 12px;

  font-weight: bold;

  letter-spacing: 2px;
}


/* REALISATIONS MOBILE */

@media (max-width: 700px) {

  .realisations-hero {
    padding: 70px 20px;
  }

  .realisations-hero h1 {
    font-size: 42px;
  }

  .galerie-page {
    grid-template-columns: 1fr;

    padding: 55px 20px;
  }

  .projet img {
    height: 250px;
  }

  .avant-apres {
    padding: 65px 20px;
  }

  .avant-apres h2 {
    font-size: 31px;
  }

  .avant-apres-grille {
    grid-template-columns: 1fr;
  }

  .photo-comparaison img {
    height: 280px;
  }
}
/* PAGE DEVIS */

.devis-hero {
  background-color: #101010;

  padding: 100px 25px;

  text-align: center;

  border-bottom: 1px solid #252525;
}

.devis-hero h1 {
  font-size: 55px;

  margin: 15px 0 20px 0;
}

.devis-hero > p:not(.section-label) {
  max-width: 700px;

  margin: auto;

  color: #bbbbbb;

  font-size: 19px;

  line-height: 1.7;
}


/* FORMULAIRE */

.devis-section {
  padding: 80px 20px;
}

.formulaire-devis {
  max-width: 850px;

  margin: auto;

  background-color: #151515;

  border: 1px solid #292929;

  border-radius: 18px;

  padding: 40px;
}

.formulaire-ligne {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 20px;
}

.champ {
  display: flex;

  flex-direction: column;

  margin-bottom: 22px;
}

.champ label {
  margin-bottom: 9px;

  color: #dddddd;

  font-size: 15px;
}

.champ input,
.champ select,
.champ textarea {
  width: 100%;

  background-color: #0e0e0e;

  color: white;

  border: 1px solid #363636;

  border-radius: 10px;

  padding: 15px;

  font-size: 16px;

  outline: none;
}

.champ textarea {
  resize: vertical;
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  border-color: #c99b5b;
}

.champ input[type="file"] {
  padding: 12px;
}

.bouton-envoyer {
  width: 100%;

  background-color: #c99b5b;

  color: #111111;

  border: none;

  border-radius: 10px;

  padding: 17px 25px;

  font-size: 17px;

  font-weight: bold;

  cursor: pointer;
}


/* INFO DEVIS */

.devis-info {
  background-color: #161616;

  padding: 80px 25px;

  text-align: center;
}

.devis-info h2 {
  font-size: 38px;

  margin: 15px 0;
}

.devis-info > p:not(.section-label) {
  max-width: 650px;

  margin: auto;

  color: #aaaaaa;

  font-size: 18px;

  line-height: 1.7;
}


/* DEVIS MOBILE */

@media (max-width: 700px) {

  .devis-hero {
    padding: 70px 20px;
  }

  .devis-hero h1 {
    font-size: 42px;
  }

  .devis-section {
    padding: 55px 15px;
  }

  .formulaire-devis {
    padding: 25px 18px;
  }

  .formulaire-ligne {
    grid-template-columns: 1fr;

    gap: 0;
  }

  .devis-info {
    padding: 65px 20px;
  }

  .devis-info h2 {
    font-size: 31px;
  }
}
/* PAGE CONTACT */

.contact-hero {
  background-color: #101010;

  padding: 100px 25px;

  text-align: center;

  border-bottom: 1px solid #252525;
}

.contact-hero h1 {
  font-size: 55px;

  margin: 15px 0 20px 0;
}

.contact-hero > p:not(.section-label) {
  max-width: 700px;

  margin: auto;

  color: #bbbbbb;

  font-size: 19px;

  line-height: 1.7;
}


/* CONTENU CONTACT */

.contact-page {
  max-width: 1100px;

  margin: auto;

  padding: 80px 25px;

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 30px;
}

.contact-infos,
.contact-formulaire {
  background-color: #151515;

  border: 1px solid #292929;

  border-radius: 18px;

  padding: 35px;
}

.contact-infos > h2,
.contact-formulaire > h2 {
  font-size: 32px;

  margin: 12px 0 18px 0;
}

.contact-infos > p:not(.section-label) {
  color: #aaaaaa;

  line-height: 1.7;

  margin-bottom: 30px;
}


/* CARTES CONTACT */

.contact-carte {
  background-color: #101010;

  border: 1px solid #292929;

  border-radius: 14px;

  padding: 25px;

  margin-top: 20px;
}

.contact-carte span {
  color: #c99b5b;

  font-size: 12px;

  font-weight: bold;

  letter-spacing: 2px;
}

.contact-carte h3 {
  font-size: 22px;

  margin: 12px 0;
}

.contact-carte h3 a {
  color: white;

  text-decoration: none;
}

.contact-carte p {
  color: #999999;

  line-height: 1.6;
}


/* RAPPEL */

.contact-rappel {
  background-color: #161616;

  padding: 80px 25px;

  text-align: center;
}

.contact-rappel h2 {
  font-size: 38px;

  margin: 15px 0;
}

.contact-rappel > p:not(.section-label) {
  max-width: 650px;

  margin: auto;

  color: #aaaaaa;

  font-size: 18px;

  line-height: 1.7;
}


/* CONTACT MOBILE */

@media (max-width: 700px) {

  .contact-hero {
    padding: 70px 20px;
  }

  .contact-hero h1 {
    font-size: 42px;
  }

  .contact-page {
    grid-template-columns: 1fr;

    padding: 55px 15px;
  }

  .contact-infos,
  .contact-formulaire {
    padding: 25px 20px;
  }

  .contact-rappel {
    padding: 65px 20px;
  }

  .contact-rappel h2 {
    font-size: 31px;
  }

}
/* ANIMATIONS AU DEFILEMENT */

.carte-service,
.realisation,
.service-detail,
.projet,
.photo-comparaison,
.contact-carte,
.services-confiance,
.accueil-devis,
.devis-info,
.contact-rappel {
  transform: translateY(45px) scale(0.97);

  transition:
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.carte-service.visible,
.realisation.visible,
.service-detail.visible,
.projet.visible,
.photo-comparaison.visible,
.contact-carte.visible,
.services-confiance.visible,
.accueil-devis.visible,
.devis-info.visible,
.contact-rappel.visible {
  transform: translateY(0) scale(1);
}
/* MENU PREMIUM */

.header {
  position: sticky;
  top: 0;

  background-color: rgba(13, 13, 13, 0.95);

  backdrop-filter: blur(12px);

  z-index: 1000;
}

.nav a.actif {
  color: #c99b5b;
}

.nav a.actif::after {
  content: "";

  display: block;

  width: 20px;
  height: 2px;

  margin: 6px auto 0 auto;

  background-color: #c99b5b;

  border-radius: 10px;
}
/* FINITIONS TYPOGRAPHIE */

h1,
h2,
h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}
@media (max-width: 400px) {

  .hero h1,
  .services-hero h1,
  .realisations-hero h1,
  .devis-hero h1,
  .contact-hero h1 {
    font-size: 37px;
  }

}
.info-photos {
  background-color: #101010;

  border: 1px solid #292929;
  border-radius: 10px;

  padding: 18px;

  margin-bottom: 22px;
}

.info-photos span {
  color: #c99b5b;

  font-size: 12px;
  font-weight: bold;

  letter-spacing: 2px;
}

.info-photos p {
  margin: 10px 0 0 0;

  color: #aaaaaa;

  line-height: 1.6;
}
/* MICRO-ANIMATIONS PREMIUM */

.bouton-devis,
.bouton-contact,
.bouton-services,
.bouton-envoyer {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background-color 0.3s ease;
}

.bouton-devis:hover,
.bouton-contact:hover,
.bouton-services:hover,
.bouton-envoyer:hover {
  transform: translateY(-3px);

  box-shadow:
    0 8px 25px rgba(201, 155, 91, 0.18);
}
/* TRANSITION ENTRE LES PAGES */

body {
  animation: page-entree 0.35s ease;
  transition: opacity 0.28s ease;
}

body.page-sortie {
  opacity: 0;
}

@keyframes page-entree {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }

}
/* ZONE D'INTERVENTION */

.zone-intervention {
  background-color: #101010;
  padding: 75px 25px;
  text-align: center;
  border-top: 1px solid #242424;
}

.zone-intervention h2 {
  font-size: 36px;
  margin: 15px 0 20px 0;
}

.zone-intervention > p:not(.section-label) {
  max-width: 700px;
  margin: auto;
  color: #aaaaaa;
  font-size: 18px;
  line-height: 1.7;
}

@media (max-width: 700px) {

  .zone-intervention {
    padding: 60px 20px;
  }

  .zone-intervention h2 {
    font-size: 30px;
  }

}