/*******************************************************************************************************/
/*                                                                                                     */
/*      GÉNÉRAL                                                                                        */
/*                                                                                                     */
/*******************************************************************************************************/


:root {
  --fap-brown: #5c3b24;
  --fap-brown-dark: #3f2919;
  --fap-cream: #f5efe7;
  --fap-sand: #e9dccd;
  --fap-text: #2d241d;
}

body {font-family: Georgia, "Times New Roman", serif; color: var(--fap-text); background-color: #fff; line-height: 1.65;}
  
h1, h2, h3, h4, h5, .navbar-brand {font-family: "Helvetica Neue", Arial, sans-serif; letter-spacing: .02em;}

a { text-decoration: none; }

.btn-primary-custom {background: var(--fap-brown); border-color: var(--fap-brown); color: #fff; padding: .8rem 1.4rem; font-family: "Helvetica Neue", Arial, sans-serif; font-weight: 600;}
.btn-primary-custom:hover,.btn-primary-custom:focus {background: var(--fap-brown-dark); border-color: var(--fap-brown-dark); color: #fff;}
.btn-outline-custom {border: 2px solid var(--fap-brown); color: var(--fap-brown); padding: .8rem 1.4rem; font-family: "Helvetica Neue", Arial, sans-serif; font-weight: 600; background: transparent;}
.btn-outline-custom:hover,.btn-outline-custom:focus {background: var(--fap-brown); color: #fff;}

.site-header .navbar {background: rgba(63,41,25,.92); backdrop-filter: blur(5px);}

.navbar-brand,.navbar-nav .nav-link { color: #fff; }
.navbar-nav .nav-link:hover,.navbar-nav .nav-link:focus,.navbar-nav .nav-link.active { color: #f5d6b8; }

.hero {position: relative; min-height: 88vh; display: flex; align-items: center; color: #fff;}
.hero-content { max-width: 760px; padding: 6rem 0 3rem; }
.page-hero {padding: 9rem 0 4rem; color: #fff;}

#home .hero {background: linear-gradient(rgba(25,17,11,.55), rgba(25,17,11,.55)), url("../img/home-hero.jpg") center center / cover no-repeat;}
#page.apropos .page-hero {background: linear-gradient(rgba(25,17,11,.55), rgba(25,17,11,.55)), url("../img/home-hero.jpg") center center / cover no-repeat;}
#page.construction .page-hero {background: linear-gradient(rgba(25,17,11,.55), rgba(25,17,11,.55)), url("../img/home-hero.jpg") center center / cover no-repeat;}
#page.ateliers .page-hero {background: linear-gradient(rgba(25,17,11,.55), rgba(25,17,11,.55)), url("../img/home-hero.jpg") center center / cover no-repeat;}
#page.technique-materiaux .page-hero {background: linear-gradient(rgba(25,17,11,.55), rgba(25,17,11,.55)), url("../img/home-hero.jpg") center center / cover no-repeat;}
#page.realisations .page-hero {background: linear-gradient(rgba(25,17,11,.55), rgba(25,17,11,.55)), url("../img/home-hero.jpg") center center / cover no-repeat;}
#page.contact .page-hero {background: linear-gradient(rgba(25,17,11,.55), rgba(25,17,11,.55)), url("../img/home-hero.jpg") center center / cover no-repeat;}





.gallery-grid img{width:100%;height:260px;object-fit:cover;border-radius:1rem;box-shadow:0 12px 30px rgba(0,0,0,.08);} .gallery-section + .gallery-section{margin-top:4rem;}

.eyebrow,.page-hero .eyebrow {
  display: inline-block;
  margin-bottom: 1rem;
  padding: .35rem .8rem;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: .88rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.hero h1,.page-hero h1 {
  font-size: clamp(2.2rem, 4.8vw, 4rem);
  line-height: 1.08;
  margin-bottom: 1rem;
}
.hero p.lead,.page-hero .lead { font-size: 1.15rem; max-width: 760px; }
.section { padding: 5rem 0; }
.section-light { background: var(--fap-cream); }
.section-sand { background: var(--fap-sand); }
.section-title {
  font-size: clamp(1.8rem, 2.6vw, 2.6rem);
  margin-bottom: 1rem;
  color: var(--fap-brown-dark);
}
.section-intro {
  max-width: 800px;
  margin-bottom: 2rem;
  font-size: 1.05rem;
}
.card-soft,.step-card,.info-card {
  height: 100%;
  border: 0;
  border-radius: 1rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}
.card-soft img {
  width: 100%;
  height: 280px;
  object-fit: cover;
}
.card-soft .card-body,.step-card,.info-card { padding: 1.75rem; }
.card-soft h3,.step-card h3,.info-card h3 { font-size: 1.35rem; margin-bottom: .8rem; color: var(--fap-brown-dark); }
.quote-block {
  background: var(--fap-brown);
  color: #fff;
  padding: 3rem;
  border-radius: 1.5rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.14);
}
.gallery-preview img,.material-preview img,.image-block img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 1rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}
.image-block img { height: auto; }
.step-number {
  width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--fap-brown); color: #fff; font-family: "Helvetica Neue", Arial, sans-serif; font-weight: 700; margin-bottom: 1rem;
}
.feature-list,.simple-list { padding-left: 1.2rem; margin-bottom: 0; }
.feature-list li,.simple-list li { margin-bottom: .65rem; }
.cta-box {
  background: linear-gradient(135deg, var(--fap-brown-dark), var(--fap-brown));
  color: #fff;
  padding: 3rem;
  border-radius: 1.5rem;
}
.footer {
  background: #23170e;
  color: rgba(255,255,255,.85);
  padding: 2rem 0;
  font-size: .95rem;
}
.form-card {
  background:#fff; border-radius:1rem; box-shadow:0 12px 30px rgba(0,0,0,.08); padding:2rem;
}
.form-control, .form-control:focus {
  border-radius: .75rem;
  box-shadow:none;
}
@media (max-width: 991.98px) {
  .hero { min-height: auto; }
  .hero-content, .page-hero { padding-top: 8rem; }
  .quote-block,.cta-box { padding: 2rem; }
}
@media (max-width: 575.98px) {
  .section { padding: 4rem 0; }
  .card-soft img,.gallery-preview img,.material-preview img { height: 220px; }
}

.navbar-toggler { filter: invert(1); }


.video-construction { margin-bottom: 50px;}

.video-construction .ordre-texte {order: 1;}
.video-construction .ordre-video {order: 2;}

@media (min-width: 992px) {
  .video-construction .ordre-video {order: 1;}
  .video-construction .ordre-texte {order: 2;}
}