/* =========================
   THEME NAVY — CLEAN OVERRIDE
   ========================= */

/* Palette */
:root{
  --navy-900:#071425;
  --navy-800:#0b1e37;
  --navy-700:#102b4f;
  --navy-600:#163869;

  --ink-100:#e8f1ff;
  --muted:#a9bed8;

  /* Compat avec ton code existant */
  --brand-dark: var(--navy-900);
  --brand-mid:  var(--navy-700);
  --brand-accent: #00d4ff; /* si jamais tu veux un accent ponctuel */
}

/* Base */
html,body{height:100%;}
body{
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(123,233,255,.08), transparent 60%),
    radial-gradient(1000px 700px at 100% 0%, rgba(0,212,255,.06), transparent 55%),
    linear-gradient(180deg, var(--navy-900), var(--navy-800));
  color:#f3f7fb;
}

/* ================= NAVBAR (hoverglass unifié) ================ */
.navbar{
  background: linear-gradient(90deg, var(--navy-900), var(--navy-700));
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: saturate(120%) blur(6px);
  min-height:64px;
}
.navbar .container,
.navbar .navbar-collapse{ display:flex; align-items:center; }
.navbar .navbar-brand{ display:flex; align-items:center; gap:.5rem; padding:0; color:#fff; }
.navbar .navbar-nav{ display:flex; align-items:center; gap:.5rem; }
.navbar .navbar-nav .nav-item{ display:flex; }

/* Onglets = boutons pill, même style pour TOUS (dont « Devis ») */

.navbar .nav-link{
  display:inline-flex; align-items:center; justify-content:center;
  height:42px; padding:.45rem 1rem;
  border-radius:0; /* <- plus de coins arrondis */
  color:#eef6ff !important;
  background: rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:none !important;
  text-decoration:none !important;
  transition: transform .15s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus{
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.22) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.22) !important;
  transform: translateY(-1px);
  outline:none;
}
.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"]{
  background: rgba(255,255,255,.16) !important;
  border-color: rgba(255,255,255,.28) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.25) !important;
  color:#fff !important;
}
.navbar .nav-link:focus-visible{ outline:3px solid rgba(123,233,255,.4) !important; outline-offset:2px; }
.navbar-toggler{ border-color: rgba(255,255,255,.35); }
.navbar-toggler:focus{ box-shadow:0 0 0 .2rem rgba(123,233,255,.35); }

/* Mobile: onglets pleine largeur */
@media (max-width: 991.98px){
  .navbar .navbar-nav{ align-items:stretch; }
  .navbar .nav-link{ width:100%; }
}

/* ================= HERO ================= */
.hero{
  position:relative; min-height:55vh; display:grid; place-items:center; text-align:center; color:#fff; overflow:hidden; isolation:isolate;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:url('/images/installation.jpg') center/cover no-repeat;
  filter:brightness(.45) saturate(1.1);
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 110%, rgba(123,233,255,.20), transparent 60%),
    linear-gradient(180deg, rgba(7,20,37,0) 0%, rgba(7,20,37,.55) 100%);
  mix-blend-mode:screen;
}
.hero-inner{ position:relative; z-index:1; padding:120px 20px 100px; animation:fadeIn .7s ease-out; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

/* ================= SECTIONS / CARTES ================= */
.section-padding{ padding:60px 0; }
.text-muted{ color:var(--muted)!important; }

.icon-box{
  padding:24px; border-radius:16px;
  background: linear-gradient(180deg, rgba(22,56,105,.65), rgba(16,43,79,.9));
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 8px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  color:#f3f7fb; position:relative; overflow:hidden;
}
.icon-box:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(123,233,255,.18);
  border-color: rgba(123,233,255,.28);
}

/* ================= ZONE D’INTERVENTION ================= */
.bg-light{
  background:
    radial-gradient(800px 400px at 20% -20%, rgba(123,233,255,.10), transparent 60%),
    linear-gradient(180deg, var(--navy-800), var(--navy-700)) !important;
  color:#f3f7fb;
  border-block: 1px solid rgba(255,255,255,.06);
}

/* ================= FOOTER ================= */
footer{ background: linear-gradient(180deg, var(--navy-800), var(--navy-900)); color:#fff; }
footer a{ color:#bcd2f7; text-decoration:underline; }

/* ================= MODALS ================= */
.modal-content{
  background: linear-gradient(180deg, var(--navy-800), var(--navy-900));
  color:#eef6ff;
  border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(123,233,255,.08) inset;
  border-radius:14px;
}
.modal-header{ border-bottom:1px solid rgba(255,255,255,.08); }
.modal-title{ color:#fff; }
.modal-body, .modal-body p, .modal-body li, .modal-body label{ color:#e8f1ff; }
.btn-close{ filter: invert(1) hue-rotate(180deg) saturate(.7); opacity:.85; }
.btn-close:hover{ opacity:1; }

/* ================= BOUTONS — HOVERGLASS GLOBAL ================= */
/* Style de base (neutre) */
.btn{
  position:relative; overflow:hidden;
  border-radius:12px; border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:#eef6ff;
  transition: transform .15s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}
.btn:hover, .btn:focus{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 12px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.22);
  transform: translateY(-1px);
}
.btn:focus-visible{
  outline:3px solid rgba(123,233,255,.4);
  outline-offset:2px;
}

/* Variantes Bootstrap recolorisées en “glass” (pas de cyan flashy) */
.btn-warning, .btn-primary, .btn-dark, .btn-outline-light{
  background: rgba(255,255,255,.06) !important;
  color:#eef6ff !important;
  border-color: rgba(255,255,255,.18) !important;
  box-shadow:none;
}
.btn-outline-light{ border-color: rgba(255,255,255,.28) !important; }

/* ================= DIVERS ================= */
.section-padding .icon-box i{ color:#bcd2f7; } /* icônes plus douces */


/* === Fix lisibilité "Nos services" + cartes === */

/* Titre & sous-titre de la section */
.section-padding .text-center h2{
  color:#ffffff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.section-padding .text-center p{
  color: rgba(255,255,255,.82) !important; /* override de .text-muted */
}

/* Cartes */
.icon-box h3{
  color:#ffffff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.icon-box p{
  color: rgba(255,255,255,.90) !important;
}

/* Lien "Découvrir" dans les cartes */
.icon-box .btn.btn-link,
.icon-box .btn.btn-link:visited{
  color:#7be9ff !important;
  text-decoration: none;
}
.icon-box .btn.btn-link:hover,
.icon-box .btn.btn-link:focus{
  color:#b9f2ff !important;
  text-decoration: underline;
}

/* Option douceur : éclaircir un chouïa le fond des cartes pour plus de contraste */
.icon-box{
  background: linear-gradient(180deg, rgba(22,56,105,.58), rgba(16,43,79,.86)) !important;
}