/* assets/css/themes.css */

/* =============================================================================
   Thème H2O — variables globales
   Objectif : centraliser les couleurs, polices et rayons pour tout le site
   ============================================================================= */
:root{
  /* Polices */
  --font-body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-head: Poppins, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Identité (charte) */
  --color-primary:#808080;        /* Gris principal */
  --color-primary-dark:#2F3A44;   /* Gris foncé (navbar/footer) */
  --color-primary-light:#6B7783;  /* Gris clair (kicker / accents) */

  --color-secondary:#e78103;      /* Couleur d’accent / CTA (orange) */
  --color-secondary-dark:#8C3826; /* Couleur d’accent foncée (hover) */
  --color-secondary-light:#D97A64;

  /* Neutres */
  --color-bg:#F4F6F8;             /* Fond doux */
  --color-text:#1F2937;           /* Texte principal */
  --color-border:#E5E7EB;         /* Bordures et séparateurs */

  /* Tokens Bootstrap (on mappe nos variables sur Bootstrap) */
  --bs-primary: var(--color-primary);
  --bs-secondary: var(--color-secondary);
  --bs-body-color: var(--color-text);
  --bs-body-bg: #fff;
  --bs-border-color: var(--color-border);

  /* Rayons */
  --radius-xl: 1rem;
}

/* =============================================================================
   Base typographique et liens
   ============================================================================= */
body{
  color:var(--color-text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased; /* rendu plus net sur WebKit */
  text-rendering: optimizeLegibility;
}

a{ color:var(--color-secondary); }
a:hover{ color:var(--color-secondary-dark); }

h1,h2,h3,h4,.navbar-brand{
  font-family: var(--font-head);
}


/* Helpers */
.bg-soft{ background:var(--color-bg); }
.rounded-xl{ border-radius:var(--radius-xl)!important; }

/* =============================================================================
   Boutons (styles globaux)
   ============================================================================= */
.btn{
  border-radius:0.5rem;
  padding:.65rem 1rem;
  font-weight:600;
}

/* CTA principal */
.btn-primary{
  background:var(--color-secondary);
  border-color:var(--color-secondary);
  color:#000000;
}
.btn-primary:hover,
.btn-primary:focus{
  background:var(--color-secondary-dark);
  border-color:var(--color-secondary-dark);
  color:#fff;
}

/* Variante outline (contour) */
.btn-outline-primary{
  color:var(--color-secondary);
  border-color:var(--color-secondary);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus{
  background:var(--color-secondary);
  border-color:var(--color-secondary);
  color:#fff;
}

/* =============================================================================
   Navbar (H2O) — version premium, stable, accessible
   Objectifs :
   - ouverture dropdown au clic (Bootstrap standard)
   - soulignement orange animé sur l’item actif (et hover)
   - ne JAMAIS casser la flèche (caret) Bootstrap (qui est en ::after)
   - sous-menus : état actif/hover/clic cohérent (pas de bleu Bootstrap)
   ============================================================================= */

.navbar-h2o{
  background: var(--color-primary-dark);
}

/* Liens du menu */
.navbar-h2o .navbar-brand,
.navbar-h2o .nav-link{
  color: rgba(255,255,255,.85);
  font-weight: 500;
}

/* Hover / focus : texte blanc */
.navbar-h2o .nav-link:hover,
.navbar-h2o .nav-link:focus{
  color:#fff;
}

/* On prépare la place pour le soulignement */
.navbar-h2o .nav-link{
  position: relative;
  padding-bottom: 1.1rem; /* espace pour l’underline */
}

/* Soulignement animé (hover + actif)
   IMPORTANT : ::after est réservé à Bootstrap pour la flèche dropdown.
   Donc on utilise ::before pour l’underline. */
.navbar-h2o .nav-link::before{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:100%;
  height:3px;
  background: var(--color-secondary);
  border-radius:2px;

  /* animation */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}

/* Hover : on affiche l’underline */
.navbar-h2o .nav-link:hover::before{
  transform: scaleX(1);
}

/* Actif : underline + texte plus affirmé */
.navbar-h2o .nav-link.active{
  color:#fff !important;
  font-weight:700;
  text-decoration:none;
}
.navbar-h2o .nav-link.active::before{
  transform: scaleX(1);
}

/* Correction overflow dropdown (évite le menu coupé) */
.navbar-h2o .nav-item,
.navbar-h2o .nav-item.dropdown{
  overflow: visible;
}

/* Burger (toggler) */
.navbar-toggler-h2o{ border:0; }
.navbar-toggler-h2o .navbar-toggler-icon{ filter: invert(1); }

/* =============================================================================
   Dropdown (sous-menus) — animation + états cohérents
   ============================================================================= */

.dropdown-menu-h2o{
  border-radius: 0.6rem;
  border: 1px solid var(--color-border);
  box-shadow: 0 12px 30px rgba(0,0,0,.12);

  /* animation d’apparition */
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .14s ease, transform .14s ease;
}

/* Quand Bootstrap ouvre le dropdown, il met .show sur le menu */
.dropdown-menu-h2o.show{
  opacity: 1;
  transform: translateY(0);
}

/* Items */
.dropdown-menu-h2o .dropdown-item{
  font-weight: 500;
}

/* Hover normal */
.dropdown-menu-h2o .dropdown-item:hover{
  background: rgba(68,82,95,.08);
  color: var(--color-text);
}

/* Item actif (page courante) */
.dropdown-menu-h2o .dropdown-item.active{
  background: var(--color-secondary) !important;
  color:#000 !important;
  font-weight:700;
}

/* Quand on clique (état navigateur) */
.dropdown-menu-h2o .dropdown-item:active{
  background: var(--color-secondary-dark) !important;
  color:#fff !important;
}

/* Actif + hover : foncé */
.dropdown-menu-h2o .dropdown-item.active:hover{
  background: var(--color-secondary-dark) !important;
  color:#fff !important;
}

/* =============================================================================
   Dropdown au SURVOL (PC) — stable
   - On garde le clic actif (pas de pointer-events:none)
   - On utilise les mêmes classes que Bootstrap (.show)
   ============================================================================= */
@media (min-width: 992px){
  /* Quand on survole un dropdown, on “simule” l’ouverture Bootstrap */
  .navbar-h2o .dropdown:hover > .dropdown-menu{
    display: block;   /* nécessaire pour afficher le menu */
  }

  /* On force l'apparence ouverte (utile pour les animations ci-dessous) */
  .navbar-h2o .dropdown:hover > .dropdown-menu{
    opacity: 1;
    transform: translateY(0);
  }
}



/* Lien “Urgence” */
.dropdown-urgent{
  color: var(--color-secondary);
  font-weight: 800;
}
.dropdown-urgent:hover{
  background: rgba(172,70,48,.12);
}


/* Lien “Urgence” plus visible */
.dropdown-urgent{
  color:var(--color-secondary);
  font-weight:700;
}
.dropdown-urgent:hover{
  background:rgba(172,70,48,.12);
}

/* =============================================================================
   Logo
   ============================================================================= */
.logo-h2o{
  height:64px; /* plus impactant */
  width:auto;
  display:block;
}

/* Aligne le logo avec le menu */
.navbar-brand{
  padding:0;
  margin-right:1.5rem;
}

@media (max-width: 991px){
  .logo-h2o{ height:44px; }
}

/* =============================================================================
   Bouton téléphone (spécifique)
   ============================================================================= */
.btn-phone{
  background: var(--color-secondary);
  color:#000000;
  font-weight:700;
  border-radius:0.50rem;
  padding:.6rem 1rem;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  transition: background-color .2s ease, color .2s ease;
}

/* Icônes dans le bouton téléphone */
.btn-phone i,
.btn-phone svg{
  color:#000000;
  fill:#000000;
  transition: color .2s ease, fill .2s ease;
}

.btn-phone:hover{
  background: var(--color-secondary-dark);
  color:#ffffff;
}
.btn-phone:hover i,
.btn-phone:hover svg{
  color:#ffffff;
  fill:#ffffff;
}

/* Bouton flottant mobile */
.floating-phone{
  position:fixed;
  bottom:1rem;
  right:1rem;
  z-index:1050;
}

/* =============================================================================
   Cards / Badges / Alerts
   ============================================================================= */
.card{
  border:1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

.card .card-header{
  background:transparent;
  border-bottom:1px solid var(--color-border);
  font-weight:700;
}

/* Badges */
.badge-urgent{ background:var(--color-secondary); }
.badge-soft{
  background:rgba(68,82,95,.10);
  color:var(--color-primary);
}

/* Alert urgence */
.alert-urgent{
  background:rgba(172,70,48,.10);
  border:1px solid rgba(172,70,48,.25);
  color:var(--color-secondary-dark);
}

/* =============================================================================
   Formulaires
   ============================================================================= */
.form-control, .form-select{
  border-radius:0.50rem;
  border-color:var(--color-border);
  padding:.7rem .9rem;
}

.form-control:focus, .form-select:focus{
  border-color: rgba(172,70,48,.45);
  box-shadow: 0 0 0 .2rem rgba(172,70,48,.18);
}

/* =============================================================================
   Titres & éléments marketing
   ============================================================================= */
.kicker{
  color:var(--color-primary-light);
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:700;
  font-size:.8rem;
}

.h2o-title{
  color:var(--color-primary);
  font-weight:800;
}

/* Bande CTA */
.cta-strip{
  background: var(--color-primary);
  color:#000000;
  border-radius: var(--radius-xl);
  padding: 1.25rem;
}
.cta-strip .cta-btn{ white-space:nowrap; }

/* Bande “urgence” */
.emergency-bar{
  background: var(--color-secondary);
  color:#000000;
  font-weight:700;
}
.emergency-bar a{
  color:#000000;
  text-decoration:none;
}
.emergency-bar a:hover{
  text-decoration:underline;
  text-underline-offset:.25rem;
}

/* =============================================================================
   Footer
   ============================================================================= */
.footer-h2o{
  background: var(--color-primary-dark);
  color: rgba(255,255,255,.9);
}

.footer-link{
  color: rgba(255,255,255,.9);
  text-decoration:none;
  font-weight:500;
}
.footer-link:hover{
  color:#fff;
  text-decoration:underline;
  text-underline-offset:.25rem;
}

/* =============================================================================
   Checklist hero (icônes bootstrap)
   ============================================================================= */
.hero-checklist{
  list-style:none;
  padding-left:0;
  margin: 1rem 0 1.25rem;
}

.hero-checklist li{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  margin:.45rem 0;
  color: rgba(31,41,55,.92);
}

.hero-checklist i{
  color: var(--color-secondary);
  font-size: 1.05rem;
  line-height: 1.35;
  margin-top: .1rem;
}

/* =============================================================================
   CTA spécifiques
   ============================================================================= */
/* Bouton “Appeler maintenant” */
.btn-cta-call{
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color:#000000;
  font-weight:800;
  border-radius:0.50rem;
  padding:.8rem 1.15rem;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}
.btn-cta-call:hover{
  background: var(--color-secondary-dark);
  border-color: var(--color-secondary-dark);
  color:#fff;
}

/* Bouton “Devis” (outline) */
.btn-cta-quote{
  background: transparent;
  border: 1.5px solid rgba(172,70,48,.55);
  color: var(--color-secondary);
  font-weight:800;
  border-radius:0.50rem;
  padding:.8rem 1.15rem;
}
.btn-cta-quote:hover{
  background: rgba(172,70,48,.10);
  border-color: var(--color-secondary);
  color: var(--color-secondary-dark);
}

/* =============================================================================
   Leaflet (carte zones) — clusters + fixes
   ============================================================================= */
/* Couleurs de cluster (charte) */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large{
  background: rgba(172,70,48,.25) !important;
}
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div{
  background:#AC4630 !important;
  color:#fff !important;
  font-weight:800;
}

/* Fix Leaflet : empêcher des styles globaux d’impacter les tuiles */
.zone-map img,
.leaflet-container img{
  max-width:none !important;
  height:auto;
}

.leaflet-container{
  font: inherit; /* évite des surprises */
}

/* =============================================================================
   Lightbox (galerie)
   ============================================================================= */
#lightboxModal .modal-dialog{
  max-width:95vw;
}
#lightboxModal .modal-content{
  background:transparent;
  border:0;
}
#lightboxModal .modal-body{
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative; /* pour gérer les z-index des boutons */
  overflow:hidden !important;
  padding:2rem; /* espace autour */
}

/* Image lightbox */
#lightboxImg{
  max-width:90vw;
  max-height:85vh;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
  transition: opacity .12s ease;
  position:relative;
  z-index:2;
}

#lightboxModal .btn-close{
  position:absolute;
  top:20px;
  right:20px;
  z-index:20; /* AU-DESSUS de l'image */
  background-color:var(--color-secondary);
  border-radius:50%;
  padding:.6rem;
  opacity:1;
}

/* Légende */
#lightboxCaption{
  background:rgba(0,0,0,0.55);
  color:#fff;
  padding:.5rem .75rem;
  border-radius:.6rem;
  margin-top:.5rem;
  max-width:95vw;
  position:relative;
  z-index:2;
}

/* Boutons prev/next au-dessus */
#lightboxModal #lightboxPrev,
#lightboxModal #lightboxNext{
  z-index:5;
  background-color:var(--color-secondary);
}

/* Supprime l’ombre bleue Bootstrap au focus */
#lightboxModal #lightboxPrev:focus,
#lightboxModal #lightboxNext:focus{
  outline:0;
  box-shadow:none !important;
}

/* Supprime le scroll interne de la modale */
#lightboxModal.modal,
#lightboxModal .modal-dialog,
#lightboxModal .modal-content{
  overflow-y:hidden !important;
  overflow:hidden !important;
}

/* =============================================================================
   Cards photos (pages services) — version lien + version bouton
   Notes : on garde les deux variantes car certaines pages ouvrent une lightbox
   ============================================================================= */
.photo-card{
  display:block;
  text-decoration:none;
  color: inherit;
  border-radius: 1rem;
  overflow:hidden;
  background:#fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  transition: transform .15s ease, box-shadow .15s ease;
}
.photo-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}

/* Conteneur image (ratio fixe) */
.photo-thumb{
  aspect-ratio: 4 / 3;
  background:#f2f4f7;
  overflow:hidden;
  position:relative;
}

/* Image (recadrage propre) */
.photo-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition: transform .3s ease;
}

/* Zoom léger au hover */
.photo-card:hover .photo-thumb img{
  transform: scale(1.05);
}

/* Métadonnées sous l’image */
.photo-meta{
  padding: .75rem .9rem;
  text-align:center;
}
.photo-title{
  font-weight:700;
  line-height:1.2;
  text-align:center;
}
.photo-sub{
  font-size:.9rem;
  color: rgba(0,0,0,.6);
  margin-top:.15rem;
  text-align:center;
}

/* Overlay (bouton “zoom”) */
.photo-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,.05));
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition: opacity .25s ease;
  pointer-events:none; /* laisse le clic passer au parent */
}
.photo-card:hover .photo-overlay{ opacity:1; }

.photo-zoom-btn{
  font-weight:600;
  border-radius:50px;
  padding:.4rem .9rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.2);
  transition: transform .2s ease;
  pointer-events:none; /* c’est le parent qui gère le clic */
}
.photo-card:hover .photo-zoom-btn{
  transform: scale(1.05);
}

/* Variante “bouton” (utile si la card déclenche JS/lightbox) */
button.photo-card{
  display:block;
  text-decoration:none;
  color:inherit;
  border-radius:1rem;
  overflow:hidden;
  background:#fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  transition: transform .15s ease, box-shadow .15s ease;
  border:0;
}
button.photo-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}
button.photo-card:focus{
  outline:0;
  box-shadow:none;
}
button.photo-card:hover .photo-thumb img{
  transform: scale(1.05);
}
button.photo-card:hover .photo-overlay{
  opacity:1;
}


.photo-card-pair-front{
  display:block;
}
.photo-pair-front-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border-bottom:1px solid rgba(19,41,75,.08);
}
.photo-card-half{
  display:block;
  border:0;
  background:transparent;
  padding:0;
}
.photo-card-half + .photo-card-half{
  border-left:1px solid rgba(19,41,75,.08);
}
.photo-thumb-pair-front{
  aspect-ratio:4 / 3;
  min-height:0;
}
.photo-thumb-pair-front img{
  width:100%;
  height:100%;
  object-fit:contain;
  background:#f2f4f7;
}
.photo-pair-badge{
  position:absolute;
  right:12px;
  bottom:12px;
  padding:.4rem .75rem;
  border-radius:999px;
  background:rgba(19,41,75,.82);
  color:#fff;
  font-size:.8rem;
  font-weight:800;
  letter-spacing:.04em;
}
@media (max-width: 991.98px){
  .photo-pair-front-grid{
    grid-template-columns:1fr;
  }
  .photo-card-half + .photo-card-half{
    border-left:0;
    border-top:1px solid rgba(19,41,75,.08);
  }
}