/* ==============================================
   1) Variables & bases
   ============================================== */
   :root{
    --primary: #FF5E14;
    --secondary: #5F656F;
    --light: #F5F5F5;
    --dark: #02245B;
  }
  

  body {
    font-family: "Inter", system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #1c2b3a;
  }
  
  /* Titres */
  h1, h2, h3, h4 {
    font-family: "Playfair Display", serif;
    letter-spacing: -0.015em;
  }
  
  /* Ajustements visuels */
  h1 { line-height: 1.15; }
  h2 { line-height: 1.2; }
  h3 { line-height: 1.25; }
  
  /* Paragraphes */
  p {
    font-size: 1rem;
    line-height: 1.65;
  }

  *,
  *::before,
  *::after{ box-sizing: border-box; }
  
  h1,h2,.h1,.h2,.fw-bold{ font-weight:700 !important; }
  h3,h4,.h3,.h4,.fw-medium{ font-weight:600 !important; }
  h5,h6,.h5,.h6,.fw-semi-bold{ font-weight:500 !important; }
  
  .back-to-top{
    position: fixed; right:30px; bottom:30px; display:none; z-index:99;
  }
  
  /* Spinner */
  #spinner{
    opacity:0; visibility:hidden; z-index:99999;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
  }
  #spinner.show{ opacity:1; visibility:visible; transition: opacity .5s ease-out, visibility 0s linear 0s; }
  
  /* ==============================================
     2) Utilitaires & boutons
     ============================================== */
  .btn{ transition:.3s; font-weight:500; }
  .btn-primary, .btn-outline-primary:hover{ color:#fff; }
  
  .btn-square,.btn-sm-square,.btn-lg-square{
    padding:0; display:flex; align-items:center; justify-content:center; font-weight:normal;
  }
  .btn-square{ width:38px; height:38px; }
  .btn-sm-square{ width:32px; height:32px; }
  .btn-lg-square{ width:48px; height:48px; }
  
  /* ==============================================
     3) Navbar / Topbar
     ============================================== */
  .topbar-right{ position:relative; background:var(--primary); }
  .topbar-right::before{
    content:""; position:absolute; inset:0 auto 0 -15px; width:30px; transform:skewX(-30deg); background:var(--primary);
  }
  
  .navbar.sticky-top{ top:-100px; transition:.5s; }
  .navbar .navbar-brand{
    position:relative; padding-right:50px; height:75px; display:flex; align-items:center; background:var(--primary);
  }
  .navbar .navbar-brand::after{
    content:""; position:absolute; top:0; right:-25px; width:50px; height:100%; transform:skewX(-30deg); background:var(--primary);
  }
  .navbar .navbar-nav .nav-link{
    margin-right:35px; padding:20px 0; color:var(--dark); font-size:18px; font-weight:500; outline:none;
  }
  .navbar .navbar-nav .nav-link:hover,
  .navbar .navbar-nav .nav-link.active{ color:var(--primary); }
  .navbar .dropdown-toggle::after{ border:none; content:"\f107"; font-family:"Font Awesome 5 Free"; font-weight:900; vertical-align:middle; margin-left:8px; }
  
  /* Burger / mobile */
  @media (max-width: 991.98px){
    .navbar .navbar-nav .nav-link{ margin-right:0; padding:10px 0; }
    .navbar .navbar-nav{ border-top:1px solid #eee; }
  }
  @media (min-width: 992px){
    .navbar .nav-item .dropdown-menu{
      display:block; border:none; margin-top:0; top:150%; opacity:0; visibility:hidden; transition:.5s;
    }
    .navbar .nav-item:hover .dropdown-menu{ top:100%; opacity:1; visibility:visible; }
  }
  
/* ================================
   HERO / CAROUSEL
================================ */

/* Structure */
#header-carousel,
#header-carousel .carousel-inner,
#header-carousel .carousel-item {
  height: clamp(540px, 75vh, 760px);
  position: relative;
}

/* Image */
#header-carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay lisibilité */
#header-carousel .carousel-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(2,36,91,0.85) 0%,
    rgba(2,36,91,0.6) 35%,
    rgba(2,36,91,0.3) 55%,
    rgba(2,36,91,0) 75%
  );
  z-index: 1;
}

/* Caption reset Bootstrap */
#header-carousel .carousel-caption {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  text-align: left;
  padding: 0;
}

/* Bloc texte */
.hero-content {
  max-width: 620px;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

/* Surtitre */
.hero-eyebrow {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #ff6a1a;
  line-height: 1.4;
}

/* Départements */
.hero-eyebrow-deps {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.7rem;
  letter-spacing: 0.35em;
  opacity: 0.85;
}

/* Titre principal */
.hero-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(2.6rem, 4.2vw, 3.4rem);
  line-height: 1.05;
  color: #fff;
  margin: 0;
  text-shadow: 0 12px 28px rgba(0,0,0,0.55);
}

/* Bouton */
.hero-btn {
  align-self: flex-start;
  padding: 14px 36px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* ===============================
   Flèches Carousel – Version Premium
   =============================== */

   .carousel-control-prev,
   .carousel-control-next {
     width: 64px;
     height: 64px;
     top: 50%;
     transform: translateY(-50%);
     z-index: 5;
     opacity: 1;
   }
   
   .carousel-control-prev {
     left: 24px;
   }
   
   .carousel-control-next {
     right: 24px;
   }
   
   .carousel-control-prev-icon,
   .carousel-control-next-icon {
     width: 48px;
     height: 48px;
     border-radius: 50%;
   
     background-color: rgba(255, 255, 255, 0.22);
     backdrop-filter: blur(6px);
   
     background-size: 50%;
     transition: all 0.3s ease;
   }
   
   /* Hover rassurant */
   .carousel-control-prev:hover .carousel-control-prev-icon,
   .carousel-control-next:hover .carousel-control-next-icon {
     background-color: rgba(255, 255, 255, 0.35);
     transform: scale(1.05);
   }

   @keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(255,122,0,0.6); }
    70% { box-shadow: 0 0 0 15px rgba(255,122,0,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,122,0,0); }
  }
  
  .btn-devis-fixe {
    animation: pulse 2.5s infinite;
  }
  
   .btn-devis-fixe {
    position: fixed;
    bottom: 20px;
    left: 20px;
  
    background-color: #ff7a00; /* ORANGE */
    color: #fff;
    padding: 14px 22px;
  
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
  
    border-radius: 50px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  
    z-index: 9999;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  
  .btn-devis-fixe:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.3);
  }
  
  
/* Responsive */
@media (max-width: 991px) {
  .hero-content {
    max-width: 90%;
  }

  .hero-title {
    font-size: 2.2rem;
  }
}

@media (max-width: 575px) {
  #header-carousel {
    height: 480px;
  }

  .hero-eyebrow {
    font-size: 0.75rem;
  }

  .hero-title {
    font-size: 1.9rem;
  }
}

  /* ==============================================
     5) Page header (bandeau interne)
     ============================================== */
  .page-header{
    background: linear-gradient(to right, rgba(2,36,91,1) 0%, rgba(2,36,91,0) 100%),
                url(../img/carousel-2.jpg) center center / cover no-repeat;
  }
  .page-header .breadcrumb-item+.breadcrumb-item::before{ color:var(--light); }
  .page-header .breadcrumb-item, .page-header .breadcrumb-item a{ font-size:18px; color:var(--light); }



  
  /* ==============================================
     6) Features (vidéo)
     ============================================== */
  .btn-play{
    position:absolute; top:50%; right:-30px; transform:translateY(-50%);
    width:16px; height:26px; border:none; border-radius:100%; padding:18px 20px 20px 28px; background:var(--primary);
  }
  @media (max-width: 992px){ .btn-play{ left:50%; right:auto; transform:translate(-50%, -50%); } }
  .btn-play:before, .btn-play:after{
    content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:60px; height:60px; background:var(--primary); border-radius:100%;
  }
  .btn-play:before{ z-index:0; animation:pulse-border 1500ms ease-out infinite; }
  .btn-play:after{ z-index:1; transition: all 200ms; }
  .btn-play span{
    position:relative; z-index:3; display:block; width:0; height:0; left:-1px;
    border-left:16px solid #fff; border-top:11px solid transparent; border-bottom:11px solid transparent;
  }
  @keyframes pulse-border{
    0%{ transform:translate(-50%,-50%) scale(1); opacity:1; }
    100%{ transform:translate(-50%,-50%) scale(2); opacity:0; }
  }
  .modal-video .modal-dialog{ position:relative; max-width:800px; margin:60px auto 0; }
  .modal-video .modal-body{ padding:0; }
  .modal-video .close{
    position:absolute; right:0; top:-30px; width:30px; height:30px; z-index:999;
    font-size:30px; color:#fff; background:#000; opacity:1;
  }
  
  /* ==============================================
     7) Services
     ============================================== */
  .service-item{
    position:relative; margin:65px 0 25px; box-shadow:0 0 45px rgba(0,0,0,.07);
  }
  .service-item .service-img{
    position:absolute; top:-65px; left:50%; transform:translateX(-50%);
    width:130px; height:130px; padding:12px; background:#fff; box-shadow:0 0 45px rgba(0,0,0,.09); z-index:2;
  }
  .service-item .service-detail{ position:absolute; inset:0; overflow:hidden; z-index:1; }
  .service-item .service-title{
    position:absolute; inset:0; padding:65px 30px 25px; display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; background:#fff; transition:.5s;
  }
  .service-item .service-text{
    position:absolute; inset:auto 0 0 0; top:100%; padding:65px 30px 25px; display:flex; align-items:center; text-align:center;
    background:rgba(2,36,91,.7); transition:.5s; overflow:hidden;
  }
  .service-item .service-text::before{
    content:""; position:absolute; left:0; top:-100%; width:100%; height:100px; transform:skewY(-12deg); background:#fff; transition:.5s;
  }
  .service-item:hover .service-title{ top:-100%; }
  .service-item:hover .service-text{ top:0; }
  .service-item:hover .service-text::before{ top:-55px; }
  .service-item .btn{
    position:absolute; left:50%; bottom:-25px; transform:translateX(-50%);
    width:130px; height:50px; display:flex; align-items:center; justify-content:center;
    color:var(--secondary); background:#fff; border:none; box-shadow:0 0 45px rgba(0,0,0,.09); z-index:2;
  }
  .service-item .btn:hover{ color:#fff; background:var(--primary); }
  
  /* ==============================================
     8) Project carousel (Owl)
     ============================================== */
  .project-carousel{ position:relative; background:var(--dark); }
  .project-item{ position:relative; display:block; }
  .project-item img{ transition:.5s; }
  .project-item:hover img, .project-carousel .owl-item.center img{ margin-top:-60px; }
  
  .project-item .project-title{
    position:absolute; left:0; bottom:-110px; width:100%; height:80px; padding:0 15px;
    display:flex; align-items:center; justify-content:center; text-align:center; background:var(--dark); transition:.5s;
  }
  .project-item .project-title::before{
    content:""; position:absolute; left:0; top:-15px; width:100%; height:30px; transform:skewY(-5deg); background:var(--dark); transition:.5s;
  }
  .project-item:hover .project-title, .project-carousel .owl-item.center .project-title{ bottom:-60px; }
  
  .project-carousel .owl-nav{
    position:absolute; inset:0; height:45px; margin:auto 0; transform:translateY(-50%); display:flex; justify-content:space-between;
    opacity:0; transition:.5s; z-index:1;
  }
  .project-carousel:hover .owl-nav{ opacity:1; }
  .project-carousel .owl-nav .owl-prev, .project-carousel .owl-nav .owl-next{
    margin:0 30px; width:45px; height:45px; display:flex; align-items:center; justify-content:center;
    color:#fff; background:var(--primary); border-radius:45px; font-size:22px; transition:.5s;
  }
  
  /* ==============================================
     9) Team
     ============================================== */
  .team-item .team-social{
    position:absolute; inset:0; left:-100%; display:flex; align-items:center; background:var(--primary); transition:.5s;
  }
  .team-item:hover .team-social{ left:0; }
  
  /* ==============================================
     10) Témoignages (Owl) – 1 carte centrée, propre
     ============================================== */
  /* Conteneur */
  .testimonial-carousel{ position:relative; padding:40px 0; }
  /* Empêche tout “fade” hérité */
  .testimonial-carousel::before,
  .testimonial-carousel::after,
  .testimonial-carousel .owl-stage-outer::before,
  .testimonial-carousel .owl-stage-outer::after{ display:none !important; content:none !important; }
  /* On masque horizontalement, on laisse respirer verticalement */
  .testimonial-carousel .owl-stage-outer{ overflow-x:hidden; overflow-y:visible; }
  /* Un seul item visible (même si Owl clone) */
  .testimonial-carousel .owl-stage{ display:block; transform:translate3d(0,0,0); }
  .testimonial-carousel .owl-item{ padding:0 !important; margin:0 !important; opacity:0; pointer-events:none; }
  .testimonial-carousel .owl-item.active{ opacity:1; pointer-events:auto; }
  /* Carte */
  .testimonial-carousel .testimonial-text{
    max-width:900px; margin:18px auto 0; background:#fff; border-radius:14px;
    padding:58px 26px 26px; /* place pour la pastille */
    box-shadow:0 10px 28px rgba(10,42,74,.08);
  }
  /* Pastille guillemet (à l’intérieur, plus de coupe) */
  .testimonial-item{ position:relative; }
  .testimonial-item .btn-square{
    position:absolute; top:16px; left:50%; transform:translateX(-50%);
    width:46px; height:46px; border-radius:999px; display:grid; place-items:center;
    background:#ff6a1a; color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.12); z-index:5;
  }
  /* Texte */
  .testimonial-item p{ color:#4a4f57; font-size:1.06rem; line-height:1.65; font-style:italic; margin:12px 0 0; }
  .testimonial-item h5{ margin-top:14px; font-weight:700; color:#ff6a1a; }
  /* Flèches */
  .testimonial-carousel .owl-nav{
    position:absolute; top:50%; left:0; width:100%; transform:translateY(-50%);
    display:flex; justify-content:space-between; pointer-events:none;
  }
  .testimonial-carousel .owl-prev, .testimonial-carousel .owl-next{
    width:44px; height:44px; border-radius:999px; background:#FFC107; color:#0a2a4a; font-weight:900; font-size:22px;
    display:grid; place-items:center; pointer-events:auto; box-shadow:0 10px 24px rgba(0,0,0,.16);
  }
  
/* ===== Correction couleur gris/blanc footer ===== */

.footer {
  color: #e6ece8 !important; /* blanc doux, lisible */
}

/* Texte courant */
.footer p,
.footer h6 {
  color: #e6ece8 !important;
}

/* Icônes */
.footer i {
  color: #e6ece8 !important;
}

/* Liens rapides */
.footer a {
  color: #ff7a00 !important;
}

/* Hover liens */
.footer a:hover {
  color: #ffa24c !important;
}

  
  /* ==============================================
     12) Breakpoints
     ============================================== */
  @media (min-width:1400px){
    #header-carousel .carousel-item{ height:68vh; }
  }
  
  @media (max-width:991.98px){
    #header-carousel .carousel-item{ height:min(55vh, 520px); min-height:420px; }
    #header-carousel .carousel-caption .col-lg-10{ max-width:90%; }
    #header-carousel .carousel-caption h1.display-1{ font-size: clamp(1.8rem, 6.4vw, 3rem) !important; }
    #header-carousel .carousel-item img{ object-position:40% center; }
  }
  
  @media (max-width:575.98px){
    #header-carousel .carousel-item{ height:min(48vh, 460px); min-height:340px; }
    .carousel-control-prev, .carousel-control-next{ width:18%; }
    #header-carousel .carousel-caption{ padding-left:16px; padding-right:16px; }
  }
  
  /* ---- Témoignages BTP ---- */
.object-fit-cover { object-fit: cover; }

/* Hauteur visuel sur desktop, s'adapte en mobile */
.btp-media { height: 340px; }
@media (min-width: 992px) { .btp-media { height: 420px; } }

/* Gradient lisibilité */
.btp-gradient {
  position: absolute; left: 0; right: 0; bottom: 0; height: 40%;
  background: linear-gradient(0deg, rgba(0,0,0,0.65), rgba(0,0,0,0));
}

/* Badge sur l'image */
.btp-badge {
  position: absolute; left: 16px; bottom: 96px;
  font-size: 13px; font-weight: 600;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

/* Meta (titre + sous-titre) sur l'image */
.btp-meta p { font-size: 18px; line-height: 1.2; }
.btp-meta small { font-size: 14px; }

/* Carte d'avis qui chevauche l'image comme PAP */
.btp-card {
  z-index: 20;
  max-width: 520px;
  margin-left: 0;             /* mobile */
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 12px 30px rgba(0,0,0,0.10);
}

/* Décalage (chevauchement) seulement desktop */
@media (min-width: 768px) {
  .btp-card { margin-left: -24px; }
}
@media (min-width: 992px) {
  .btp-card { margin-left: -40px; }
}

/* Grand guillemet gris translucide, décoratif */
.btp-card::before {
  content: "“";
  position: absolute; left: 24px; top: 18px;
  font-size: 88px; line-height: 1;
  color: rgba(108,117,125,0.18); /* gris Bootstrap + transparence */
  pointer-events: none;
  z-index: 0;
}
.btp-card h3, .btp-card p { position: relative; z-index: 1; }

/* Boutons Owl */
.btp-carousel .owl-nav button.owl-prev,
.btp-carousel .owl-nav button.owl-next {
  position: absolute; top: 45%; transform: translateY(-50%);
  background: transparent !important; /* plus de fond noir */
  color: #555 !important; /* gris neutre comme sur ta capture */
  width: 30px; height: 30px;
  display: grid; place-items: center;
  box-shadow: none !important;
}

.btp-carousel .owl-nav button i {
  font-size: 22px; /* plus grande taille */
  color: #555;
}

.btp-carousel .owl-nav button.owl-prev { left: 8px; }
.btp-carousel .owl-nav button.owl-next { right: 8px; }

.btp-carousel .owl-nav button span,
.btp-carousel .owl-nav button i { font-size: 18px; line-height: 1; }

.btp-carousel .owl-dots { margin-top: 16px; }
.btp-carousel .owl-dot span {
  width: 8px; height: 8px; background: #d1d5db; /* gris clair */
}
.btp-carousel .owl-dot.active span { background: #212529; } /* gris très foncé */

/* --- Dots OwlCarousel --- */
.btp-carousel .owl-dots {
    text-align: center;
    margin-top: 20px;
  }
  
  .btp-carousel .owl-dot {
    display: inline-block;
    margin: 0 5px;
  }
  
  .btp-carousel .owl-dot span {
    width: 10px;
    height: 10px;
    background: #d1d5db; /* gris clair */
    display: block;
    border-radius: 50%;
    transition: background 0.3s ease;
  }
  
  .btp-carousel .owl-dot.active span {
    background: #212529; /* gris foncé ou couleur principale */
  }