/* ==== Thème Bootstrap sobre ==== */
:root{
  --bs-primary:#264653;           /* bleu pétrole */
  --bs-primary-rgb:38,70,83;
  --bs-warning:#E76F51;           /* accent doux */
  --bs-warning-rgb:231,111,81;
  --bs-body-bg:#F4F4F4;
  --bs-body-color:#2A2A2A;
  --bs-link-color:var(--bs-primary);
}

/* fluidité scroll */
body{ scroll-behavior:smooth }

/* Navbar collante + léger blur */
.navbar.sticky-top{ backdrop-filter:saturate(140%) blur(6px) }

/* HERO avec image locale + overlay */
.hero{
  --hero: url("./assets/hero.jpg"); /* adapte si autre chemin */
  background-image:
    linear-gradient(rgba(var(--bs-primary-rgb),.70), rgba(var(--bs-primary-rgb),.70)),
    var(--hero);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #4f6b73; /* fallback couleur */
  min-height: 60vh;
  display: grid;
  place-items: center;
  text-align: center;
}
.hero .display-4, .hero .lead{ color:#F4F4F4 }

/* Icônes rondes */
.icon-circle{
  width:3.25rem;height:3.25rem;border-radius:50%;
  display:inline-grid;place-items:center;
  background:rgba(var(--bs-warning-rgb),.12);color:var(--bs-warning);
}
.border-accent{ border-color:rgba(var(--bs-warning-rgb),.5)!important }

/* Images ratio + crop propre */
.img-cover{ width:100%; height:100%; object-fit:cover; object-position:center }

/* Leaflet */
#map{ min-height:460px; border-radius:1rem }

/* Footer */
footer a{ color:#e9f1f3; text-decoration:underline }

/* Ancrage confortable sous la navbar pour #contact */
#contact{ scroll-margin-top: 80px; }

/* Bouton flottant Appeler (mobile) */
.call-fab{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 2000; /* au-dessus des overlays/backdrops */
  border-radius: 9999px;
  padding: .85rem 1rem;
  background: var(--bs-warning);
  color: #000;
  box-shadow: 0 10px 20px rgba(0,0,0,.25);
  text-decoration: none;
}
.call-fab i{ font-size: 1.25rem; vertical-align: middle; }
.call-fab:active{ transform: translateY(1px); }

/* ================================
   OFFCANVAS (mobile / < 992px)
   – à gauche, pleine hauteur,
   – largeur juste pour le contenu
   ================================ */
#navOffcanvas{
  height: 100vh; top: 0; bottom: 0;
  background-color: #1d3a44 !important; color:#fff;

  /* largeur auto en fonction du texte (avec bornes) */
  width: max-content !important;
  min-width: 260px;
  max-width: 420px;
}

/* très petit mobile : garde une marge latérale */
@media (max-width: 575.98px){
  #navOffcanvas{ max-width: 88vw; }
}

/* entête & corps du menu (mobile) */
#navOffcanvas .offcanvas-title{
  font-size:1.35rem; font-weight:700; margin:0;
}
#navOffcanvas .btn-close{
  filter: invert(1) grayscale(1); opacity:.9;
}
#navOffcanvas .offcanvas-body{
  display:flex; flex-direction:column; gap:.5rem;
  height: calc(100vh - 64px);
  overflow-y:auto;
  padding: 0 1rem 1rem;
}

/* liens du menu (mobile) */
#navOffcanvas .nav-link{
  white-space: nowrap;
  color:rgba(255,255,255,.9);
  font-size:1.25rem;
  padding:.75rem 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
#navOffcanvas .nav-link:hover,
#navOffcanvas .nav-link:focus,
#navOffcanvas .nav-link.active{
  color:#fff; text-decoration:none;
}

/* Backdrop plus opaque (mobile) */
.offcanvas-backdrop.show{ opacity:.75; }

/* =========================================
   RÉINITIALISATION NAVBAR (≥ 992px / desktop)
   – on annule les hauteurs/largeurs forcées
   – le menu redevient inline dans la navbar
   ========================================= */
@media (min-width: 992px){
  .navbar-expand-lg #navOffcanvas{
    height: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    top: auto; bottom: auto;
    background: transparent !important;
    color: inherit;
  }
  .navbar-expand-lg #navOffcanvas .offcanvas-header{ display: none; }
  .navbar-expand-lg #navOffcanvas .offcanvas-body{
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  .navbar-expand-lg #navOffcanvas .navbar-nav{
    flex-direction: row;
    gap: 1rem;
  }
  /* le backdrop n'est pas utilisé en desktop */
  .offcanvas-backdrop{ display: none !important; }
}