/********** Template CSS **********/
:root {
    --primary: #1E60AA;
    --secondary: #FF4917;
    --light: #EDF1FC;
    --dark: #17224D;
}

/* poids de police utilitaire */
.fw-medium { font-weight: 600 !important; }

/* back to top */
.back-to-top {
    position: fixed;
    display: none;
    right: 45px;
    bottom: 45px;
    z-index: 99;
}

/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}
#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}

/*** Button ***/
.btn { font-weight: 600; transition: .5s; }
.btn.btn-primary, .btn.btn-secondary { color: #FFFFFF; }
.btn-square { width: 38px; height: 38px; }
.btn-sm-square { width: 32px; height: 32px; }
.btn-lg-square { width: 48px; height: 48px; }
.btn-square, .btn-sm-square, .btn-lg-square {
    padding: 0; display: flex; align-items: center; justify-content: center; font-weight: normal;
}

/*** Navbar ***/
.top-bar { height: 75px; padding: 0 4rem; }
.nav-bar {
    position: relative; padding: 0 4.75rem; transition: .5s; z-index: 9999;
}
.nav-bar.sticky-top { position: sticky; padding: 0; z-index: 9999; }
.navbar .dropdown-toggle::after{
    border: none; content:"\f107"; font-family:"Font Awesome 5 Free"; font-weight:900; vertical-align: middle; margin-left: 8px;
}
.navbar-light .navbar-nav .nav-link {
    margin-right: 30px; padding: 25px 0; color: var(--dark); font-size: 15px; font-weight: 600; text-transform: uppercase; outline: none;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active { color: var(--primary); }

@media (max-width: 991.98px){
    .nav-bar { padding: 0; }
    .navbar-light .navbar-nav .nav-link{ margin-right: 0; padding: 10px 0; }
    .navbar-light .navbar-nav{ margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #EEEEEE; }
}
@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%; visibility:visible; opacity:1; transition:.5s;
    }
}

/*** Header ***/
.header-carousel .container,
.page-header .container {
    position: relative;
    padding: 45px 0 45px 35px;
    border-left: 15px solid #FFFFFF;
}
.header-carousel .container::before,
.header-carousel .container::after,
.page-header .container::before,
.page-header .container::after {
    position: absolute; content:""; top:0; left:0; width:100px; height:15px; background:#FFFFFF;
}
.header-carousel .container::after,
.page-header .container::after { top:100%; margin-top: -15px; }

@media (max-width: 768px){
    .header-carousel .owl-carousel-item{ position:relative; min-height:500px; }
    .header-carousel .owl-carousel-item img{ position:absolute; width:100%; height:100%; object-fit:cover; }
    .header-carousel .owl-carousel-item h5,
    .header-carousel .owl-carousel-item p{ font-size:14px !important; font-weight:400 !important; }
    .header-carousel .owl-carousel-item h1{ font-size:30px; font-weight:600; }
}

.header-carousel .owl-nav{
    position:absolute; top:50%; right:8%; transform:translateY(-50%);
    display:flex; flex-direction:column;
}
.header-carousel .owl-nav .owl-prev,
.header-carousel .owl-nav .owl-next{
    margin:7px 0; width:45px; height:45px; display:flex; align-items:center; justify-content:center;
    color:#FFFFFF; background:transparent; border:1px solid #FFFFFF; border-radius:45px; font-size:22px; transition:.5s;
}
.header-carousel .owl-nav .owl-prev:hover,
.header-carousel .owl-nav .owl-next:hover{ background:var(--primary); border-color:var(--primary); }

/* arrière-plan par défaut des pages avec bandeau */
.page-header{
    background: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)), url(../img/bg.jpg) center center no-repeat;
    background-size: cover;
}
.breadcrumb-item + .breadcrumb-item::before { color: var(--light); }

/*** Facts ***/
.fact{
    background: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)), url(../img/bg.jpg) center center no-repeat;
    background-size: cover;
}

/*** Service ***/
.service-item-top img{ transition:.5s; }
.service-item-top:hover img{ transform: scale(1.1); }
.service-carousel .owl-dots{
    margin-top:24px; display:flex; align-items:flex-end; justify-content:center;
}
.service-carousel .owl-dot{
    position:relative; display:inline-block; margin:0 5px; width:15px; height:15px;
    background:var(--primary); border:5px solid var(--light); transition:.5s;
}
.service-carousel .owl-dot.active{ background:var(--light); border-color:var(--primary); }

/*** Booking / vidéo ***/
.video{
    position:relative; padding:8rem 0 12rem; background:linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)), url(../img/carousel-1.jpg) center/cover no-repeat;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.video .btn-play{
    position:relative; box-sizing:content-box; display:block; width:32px; height:44px; border-radius:50%;
    border:none; outline:none; padding:18px 20px 18px 28px; margin-bottom:4rem;
}
.video .btn-play:before{
    content:""; position:absolute; z-index:0; left:50%; top:50%; transform:translate(-50%,-50%);
    display:block; width:100px; height:100px; background:#FFFFFF; border-radius:50%; animation:pulse-border 1500ms ease-out infinite;
}
.video .btn-play:after{
    content:""; position:absolute; z-index:1; left:50%; top:50%; transform:translate(-50%,-50%);
    display:block; width:100px; height:100px; background:#FFFFFF; border-radius:50%; transition:all 200ms;
}
.video .btn-play img{ position:relative; z-index:3; max-width:100%; height:auto; }
.video .btn-play span{
    display:block; position:relative; z-index:3; width:0; height:0; border-left:32px solid var(--primary);
    border-top:22px solid transparent; border-bottom:22px solid transparent;
}
@keyframes pulse-border{
    0%{ transform:translate(-50%,-50%) scale(1); opacity:1; }
    100%{ transform:translate(-50%,-50%) scale(1.5); opacity:0; }
}
#videoModal{ z-index:99999; }
#videoModal .modal-dialog{ position:relative; max-width:800px; margin:60px auto 0; }
#videoModal .modal-body{ position:relative; padding:0; }
#videoModal .close{
    position:absolute; width:30px; height:30px; right:0; top:-30px; z-index:999;
    font-size:30px; font-weight:normal; color:#FFFFFF; background:#000; opacity:1;
}

/* datetimepicker */
.bootstrap-datetimepicker-widget.bottom{ top:auto !important; }
.bootstrap-datetimepicker-widget .table *{ border-bottom-width:0; }
.bootstrap-datetimepicker-widget .table th{ font-weight:500; }
.bootstrap-datetimepicker-widget.dropdown-menu{ padding:10px; border-radius:2px; }
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover{ background:var(--primary); }
.bootstrap-datetimepicker-widget table td.today::before{ border-bottom-color:var(--primary); }

/*** Team ***/
.team-item img{ transition:.5s; }
.team-item:hover img{ transform: scale(1.1); }
.team-item .team-text{ height:90px; overflow:hidden; }
.team-item .team-text .bg-light,
.team-item .team-text .bg-primary{
    position:relative; height:90px; display:flex; align-items:center; justify-content:center; flex-direction:column; transition:.5s;
}
.team-item .team-text .bg-primary{ flex-direction:row; }
.team-item:hover .team-text .bg-light{ margin-top:-90px; }
.team-item .team-text .bg-primary .btn{ color:var(--primary); background:#FFFFFF; }
.team-item .team-text .bg-primary .btn:hover{ color:#FFFFFF; background:var(--secondary); }

/*** Testimonial ***/
.testimonial-carousel .owl-item .testimonial-text,
.testimonial-carousel .owl-item.center .testimonial-text *{ position:relative; transition:.5s; }
.testimonial-carousel .owl-item.center .testimonial-text{ background:var(--primary) !important; }
.testimonial-carousel .owl-item.center .testimonial-text *{ color:#FFFFFF !important; }
.testimonial-carousel .owl-item .testimonial-text::after{
    position:absolute; content:""; width:0; height:0; left:50%; bottom:-30px; transform:translateX(-50%);
    border:15px solid; border-color:var(--light) transparent transparent transparent; transition:.5s;
}
.testimonial-carousel .owl-item.center .testimonial-text::after{ border-color:var(--primary) transparent transparent transparent; }
.testimonial-carousel .owl-nav{
    position:absolute; width:350px; bottom:100px; left:50%; transform:translateX(-50%);
    display:flex; justify-content:space-between; opacity:0; transition:.5s; z-index:1;
}
.testimonial-carousel:hover .owl-nav{ width:300px; opacity:1; }
.testimonial-carousel .owl-nav .owl-prev,
.testimonial-carousel .owl-nav .owl-next{ font-size:30px; color:var(--primary); }
.testimonial-carousel .owl-nav .owl-prev:hover,
.testimonial-carousel .owl-nav .owl-next:hover{ color:var(--dark); }

/*** Footer ***/
.footer .btn.btn-social{
    margin-right:5px; width:35px; height:35px; display:flex; align-items:center; justify-content:center;
    color:var(--light); border:1px solid #FFFFFF; border-radius:35px; transition:.3s;
}
.footer .btn.btn-social:hover{ color:var(--primary); }
.footer .btn.btn-link{
    display:block; margin-bottom:5px; padding:0; text-align:left; color:#FFFFFF; font-size:15px; font-weight:normal;
    text-transform:capitalize; transition:.3s;
}
.footer .btn.btn-link::before{
    position:relative; content:"\f105"; font-family:"Font Awesome 5 Free"; font-weight:900; margin-right:10px;
}
.footer .btn.btn-link:hover{ letter-spacing:1px; box-shadow:none; }
.footer .copyright{ padding:25px 0; font-size:15px; border-top:1px solid rgba(255,255,255,.1); }
.footer .copyright a{ color: var(--light); }

/* ================== AJOUTS PERSO ================== */

/* Bannière “hero” générique avec léger overlay + titre lisible */
.hero-banner{ position:relative; overflow:hidden; border-radius:8px; }
.hero-banner img{
  width:100%; display:block; object-fit:cover; object-position:center 35%; max-height:450px;
}
.hero-banner .overlay{ position:absolute; inset:0; background:rgba(0,0,0,.25); }
.hero-banner .title-box{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background:rgba(0,0,0,.4); padding:1rem 1.5rem; border-radius:6px; text-align:center; color:#fff; max-width:90%;
  backdrop-filter: blur(3px);
}
.hero-banner .title-box h1{ margin:0; font-size:clamp(1.8rem,2.5vw,2.8rem); color:#fff; line-height:1.1; }
.hero-banner .title-box p{ margin:.5rem 0 0; font-size:1rem; color:#fff; }

/* Bloc “À propos” (bannière image + texte au centre) */
.about-hero{
  position:relative; margin:1rem auto 2rem; max-width:1200px; border-radius:12px; overflow:hidden; color:#fff;
}
.about-hero img{ width:100%; display:block; object-fit:cover; aspect-ratio:4/1; }
.about-hero .hero-text{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background:none; padding:0; color:#fff; text-align:center; max-width:90%; line-height:1.1;
}
.about-hero .hero-text h1, .about-hero .hero-text p{
  text-shadow:0 3px 12px rgba(0,0,0,.6); margin:0;
}
@keyframes slideInDownCustom{ 0%{opacity:0; transform:translateY(-30px);} 100%{opacity:1; transform:translateY(0);} }
.animated-title{ animation: slideInDownCustom 1s ease-out forwards; }
.animated-subtitle{ animation: slideInDownCustom 1.2s ease-out forwards; }

/* Nav homogène (légère amélioration) */
.navbar .navbar-nav .nav-link{ font-size:1rem; font-weight:600; padding:.5rem 1rem; }

/* Bouton flottant “Appeler maintenant” (affiché surtout sur mobile) */
.call-fab{
  position:fixed; right:16px; bottom:16px; z-index:1055;
}
.call-fab a{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 16px; border-radius:999px;
  background:#0d6efd; color:#fff; text-decoration:none;
  box-shadow:0 10px 24px rgba(0,0,0,.25); font-weight:600;
}
@media (min-width: 992px){ .call-fab{ display:none; } }

/* Bannière commune pour A PROPOS / AVIS / GALERIE / CONTACT */
@supports selector(body:has(.navbar)) {
  body:has(.navbar .nav-link.active[href$="apropos.html"]) .page-header,
  body:has(.navbar .nav-link.active[href$="avis.html"]) .page-header,
  body:has(.navbar .nav-link.active[href$="testimonial.html"]) .page-header, /* si la page s'appelle encore testimonial.html */
  body:has(.navbar .nav-link.active[href$="galerie.html"]) .page-header,
  body:has(.navbar .nav-link.active[href$="contact.html"]) .page-header {
    background:
      linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
      url('../img/jp-service-hero.jpg') center 20% / cover no-repeat !important;
  }

  /* Texte lisible sur ces bannières */
  body:has(.navbar .nav-link.active[href$="apropos.html"]) .page-header *,
  body:has(.navbar .nav-link.active[href$="avis.html"]) .page-header *,
  body:has(.navbar .nav-link.active[href$="testimonial.html"]) .page-header *,
  body:has(.navbar .nav-link.active[href$="galerie.html"]) .page-header *,
  body:has(.navbar .nav-link.active[href$="contact.html"]) .page-header * {
    color:#fff !important;
    text-shadow:0 3px 12px rgba(0,0,0,.55);
  }
}
/* --- Afficher le nom de marque à côté du logo sur mobile --- */
.navbar-brand .brand-name{
  display:inline-block;
  margin-left:8px;
  font-weight:600;
}

@media (max-width: 992px){
  .navbar-brand { display:flex; align-items:center; }
  .navbar-brand .brand-logo{ height:28px; } /* ajuste si nécessaire */
  .navbar-brand .brand-name{
    display:inline-block !important;
    font-size:16px;
    white-space:nowrap;         /* évite le retour à la ligne */
    color:#0d2149;              /* adapte à ta charte */
  }
}@media (max-width: 768px) {
  .navbar-brand {
    justify-content: flex-start !important;
    text-align: left !important;
  }
}