/* =========================================================
   ETS DAVID FLEIS — style.css
   Chauffage - Sanitaire - Pompe à chaleur
   ========================================================= */

:root{
  --orange: #E56237;
  --orange-dark: #C44E27;
  --bleu-noir: #2A363A;
  --bleu-noir-deep: #1A2125;
  --creme: #F5F2EE;
  --blanc: #FFFFFF;
  --gris-texte: #545B5D;

  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Inter", -apple-system, "Segoe UI", sans-serif;

  --radius: 4px;
  --shadow-soft: 0 10px 30px -10px rgba(26,33,37,.25);
}

html{ scroll-behavior:smooth; }

body{
  font-family: var(--font-body);
  color: var(--bleu-noir-deep);
  background: var(--blanc);
  line-height: 1.6;
}

h1,h2,h3,h4,.font-display{
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .02em;
  font-weight: 600;
  color: var(--bleu-noir-deep);
}

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

:focus-visible{
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

.text-orange{ color: var(--orange) !important; }
.bg-orange{ background-color: var(--orange) !important; }
.bg-bleu-noir{ background-color: var(--bleu-noir-deep) !important; }
.bg-creme{ background-color: var(--creme) !important; }

.btn-orange{
  background-color: var(--orange);
  border-color: var(--orange);
  color: #fff;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  padding: .75rem 1.75rem;
  border-radius: var(--radius);
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.btn-orange:hover{
  background-color: var(--orange-dark);
  border-color: var(--orange-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}
.btn-outline-light-custom{
  border: 2px solid rgba(255,255,255,.55);
  color: #fff;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  padding: .7rem 1.75rem;
  border-radius: var(--radius);
  transition: all .15s ease;
}
.btn-outline-light-custom:hover{
  border-color: #fff;
  background: rgba(255,255,255,.1);
  color: #fff;
}

.eyebrow{
  font-family: var(--font-display);
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .8rem;
  font-weight: 600;
}

.section-title{
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  margin-bottom: .5rem;
}

.section-pad{
  padding: 5rem 0;
}
@media (max-width: 767.98px){
  .section-pad{ padding: 3rem 0; }
}

/* ===================== NAVBAR ===================== */
.navbar-fleis{
  background-color: var(--blanc);
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.navbar-fleis .navbar-brand img{
  height: 40px;
  width: auto;
}
.navbar-fleis .nav-link{
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: .9rem;
  letter-spacing: .03em;
  color: var(--bleu-noir-deep);
  font-weight: 600;
  margin: 0 .4rem;
}
.navbar-fleis .nav-link:hover{ color: var(--orange); }
.navbar-fleis .btn-tel{
  background: var(--bleu-noir-deep);
  color: #fff;
  font-family: var(--font-display);
  letter-spacing: .03em;
  border-radius: var(--radius);
  padding: .5rem 1.1rem;
  font-weight: 600;
}
.navbar-fleis .btn-tel:hover{ background: var(--orange); color:#fff; }

/* ===================== HERO ===================== */
.hero{
  position: relative;
  background: linear-gradient(135deg, var(--bleu-noir-deep) 0%, var(--bleu-noir) 65%, #34433d 100%);
  color: #fff;
  overflow: hidden;
  padding: 7rem 0 6rem;
}
.hero::before{
  /* motif "rayons" évoquant le soleil du logo, en filigrane */
  content:"";
  position: absolute;
  top: -180px;
  right: -180px;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(229,98,55,.35) 0%, rgba(229,98,55,0) 70%);
  pointer-events: none;
}
.hero .badge-confiance{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background: rgba(229,98,55,.15);
  border: 1px solid rgba(229,98,55,.5);
  color: #fff;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .78rem;
  padding: .45rem .9rem;
  border-radius: 999px;
  margin-bottom: 1.2rem;
}
.hero h1{
  color: #fff;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.05;
  margin-bottom: 1.2rem;
}
.hero h1 span{ color: var(--orange); }
.hero p.lead{
  color: rgba(255,255,255,.82);
  font-size: 1.15rem;
  max-width: 540px;
}
.hero .hero-visual{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 6px solid rgba(255,255,255,.08);
}
.hero .hero-baseline{
  margin-top: 1rem;
  margin-bottom: 0;
  font-style: italic;
  font-size: 1rem;
  color: rgba(255,255,255,.7);
  text-align: center;
}

/* Slideshow en fondu croisé, 3 photos, cycle de 15s, en boucle infinie */
.hero-slideshow{
  position: relative;
  width: 100%;
  height: 420px;
}
.hero-slideshow img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: heroFade 15s infinite;
}
.hero-slideshow img:nth-child(1){ animation-delay: 0s; }
.hero-slideshow img:nth-child(2){ animation-delay: 5s; }
.hero-slideshow img:nth-child(3){ animation-delay: 10s; }

@keyframes heroFade{
  0%   { opacity: 0; }
  3%   { opacity: 1; }   /* fondu d'entrée ~0.5s */
  28%  { opacity: 1; }   /* reste visible jusqu'à ~4.2s sur son tour de 5s */
  33%  { opacity: 0; }   /* fondu de sortie ~0.5s */
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  .hero-slideshow img{
    animation: none;
    opacity: 0;
  }
  .hero-slideshow img:first-child{ opacity: 1; }
}
@media (max-width: 575.98px){
  .hero-slideshow{ height: 280px; }
}

/* bandeau réassurance sous le hero */
.bandeau-reassurance{
  background: var(--orange);
}
.bandeau-reassurance .item{
  display:flex;
  align-items:center;
  gap:.75rem;
  color:#fff;
  padding: 1.1rem 0;
}
.bandeau-reassurance .item i{
  font-size: 1.6rem;
  flex-shrink:0;
}
.bandeau-reassurance .item .label{
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: .85rem;
  letter-spacing: .03em;
  line-height:1.25;
}
.bandeau-reassurance .item .label small{
  display:block;
  font-family: var(--font-body);
  text-transform:none;
  letter-spacing:0;
  font-weight:400;
  opacity:.85;
}

/* ===================== SERVICES ===================== */
.card-service{
  background: #fff;
  border: 1px solid rgba(42,54,58,.08);
  border-radius: var(--radius);
  padding: 2.2rem 1.6rem;
  height: 100%;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card-service:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-soft);
  border-color: rgba(229,98,55,.4);
}
.card-service .icon-wrap{
  width: 58px;
  height: 58px;
  border-radius: var(--radius);
  background: rgba(229,98,55,.12);
  color: var(--orange);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 1.6rem;
  margin-bottom: 1.2rem;
}
.card-service h3{
  font-size: 1.15rem;
  margin-bottom: .6rem;
}
.card-service p{
  color: var(--gris-texte);
  font-size: .95rem;
  margin-bottom: 0;
}

/* ===================== GALERIES / SLIDERS ===================== */
.galerie-layout{
  align-items: stretch;
}

/* colonne de boutons verticale (desktop) */
.galerie-nav-vertical{
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.galerie-nav-vertical .nav-link{
  display: flex;
  align-items: center;
  gap: .7rem;
  text-align: left;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: .9rem;
  font-weight: 600;
  color: var(--bleu-noir-deep);
  border: 1px solid rgba(42,54,58,.15);
  border-radius: var(--radius);
  padding: .9rem 1.1rem;
  background: #fff;
  transition: all .15s ease;
}
.galerie-nav-vertical .nav-link i{
  font-size: 1.2rem;
  color: var(--orange);
  flex-shrink: 0;
}
.galerie-nav-vertical .nav-link:hover{
  border-color: rgba(229,98,55,.5);
  background: rgba(229,98,55,.06);
}
.galerie-nav-vertical .nav-link.active{
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}
.galerie-nav-vertical .nav-link.active i{
  color: #fff;
}

/* version mobile/tablette : pills horizontales scrollables */
@media (max-width: 991.98px){
  .galerie-nav-vertical{
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .5rem;
    margin-bottom: .5rem;
  }
  .galerie-nav-vertical .nav-link{
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

.carousel-fleis{
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: var(--bleu-noir-deep);
}

/* carousel format portrait, adapté aux photos prises au smartphone à la verticale */
.carousel-portrait{
  max-width: 420px;
  margin: 0 auto;
}
.carousel-portrait .carousel-item{
  height: 640px;
  background: var(--bleu-noir-deep);
  text-align: center;
}
.carousel-portrait .carousel-item img{
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  display: inline-block;
}
@media (max-width: 991.98px){
  .carousel-portrait .carousel-item{ height: 520px; }
}
@media (max-width: 575.98px){
  .carousel-portrait{ max-width: 100%; }
  .carousel-portrait .carousel-item{ height: 65vh; max-height: 520px; }
}

/* carousel format paysage (ex: chauffage au sol) : pleine largeur, ratio 16:9 */
.carousel-landscape{
  max-width: 100%;
}
.carousel-landscape .carousel-item img{
  width: 100%;
  height: 460px;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 575.98px){
  .carousel-landscape .carousel-item img{ height: 280px; }
}

.carousel-fleis .carousel-caption{
  background: linear-gradient(to top, rgba(26,33,37,.9), transparent);
  border-radius: 0 0 var(--radius) var(--radius);
  bottom: 0;
  text-align: left;
  padding: 2rem 1.5rem 1.2rem;
}
.carousel-fleis .carousel-caption h5{
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.carousel-fleis .carousel-control-prev,
.carousel-fleis .carousel-control-next{
  width: 12%;
}
.carousel-fleis .carousel-control-prev-icon,
.carousel-fleis .carousel-control-next-icon{
  background-color: rgba(229,98,55,.85);
  border-radius: 50%;
  padding: 1.1rem;
  background-size: 50%;
}

/* ===================== A PROPOS ===================== */
.bloc-patron{
  background: var(--creme);
  border-radius: var(--radius);
  padding: 2.5rem;
  border-left: 5px solid var(--orange);
}
.bloc-patron .signature-badge{
  width: 86px;
  height: 86px;
  border-radius: 50%;
  border: 3px solid var(--orange);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  color: var(--orange);
  font-size: 2rem;
}

/* ===================== CONTACT ===================== */
.contact-section{
  background: var(--bleu-noir-deep);
  color: #fff;
}
.contact-section .form-control,
.contact-section .form-select{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  border-radius: var(--radius);
  padding: .75rem 1rem;
}
.contact-section .form-control::placeholder{ color: rgba(255,255,255,.45); }
.contact-section .form-control:focus,
.contact-section .form-select:focus{
  background: rgba(255,255,255,.09);
  border-color: var(--orange);
  color: #fff;
  box-shadow: 0 0 0 .2rem rgba(229,98,55,.25);
}
.contact-section label{
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-family: var(--font-display);
  margin-bottom: .35rem;
  opacity: .85;
}
.contact-infos .info-line{
  display:flex;
  gap: .9rem;
  align-items:flex-start;
  margin-bottom: 1.4rem;
}
.contact-infos .info-line i{
  color: var(--orange);
  font-size: 1.3rem;
  margin-top: .15rem;
}
.contact-infos a{ color:#fff; text-decoration:none; }
.contact-infos a:hover{ color: var(--orange); }

/* alertes de confirmation/erreur du formulaire, habillées pour la section sombre */
.contact-section .alert{
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: .92rem;
}
.contact-section .alert-success{
  background: rgba(120,200,150,.12);
  border-color: rgba(120,200,150,.4);
  color: #b9e8c9;
}
.contact-section .alert-danger{
  background: rgba(229,98,55,.12);
  border-color: rgba(229,98,55,.45);
  color: #ffd2bf;
}
.contact-section .alert .btn-close{
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: .7;
}
.contact-section .alert .btn-close:hover{ opacity: 1; }

/* ===================== FOOTER ===================== */
footer.site-footer{
  background: #15191b;
  color: rgba(255,255,255,.65);
  font-size: .85rem;
  padding: 2.2rem 0;
}
footer.site-footer a{
  color: rgba(255,255,255,.75);
  text-decoration: none;
}
footer.site-footer a:hover{ color: var(--orange); }
footer.site-footer .footer-logo img{
  height: 28px;
  margin-bottom: .75rem;
}
footer.site-footer hr{
  border-color: rgba(255,255,255,.1);
  margin: 1.5rem 0;
}

/* back to top */
.btn-back-top{
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: var(--shadow-soft);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease, transform .15s ease;
  z-index: 1040;
}
.btn-back-top.show{ opacity:1; visibility:visible; }
.btn-back-top:hover{ transform: translateY(-3px); color:#fff; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
}