:root{
  --movalya-blue:#1E88E5;
  --movalya-green:#43A047;
  --movalya-dark:#0f172a;
}

/* ===== Layout global ===== */
html { scroll-behavior: smooth; }
body { padding-top:72px; }          /* compense la navbar fixed-top */
section[id] { scroll-margin-top: 84px; }  /* offset propre pour les ancres (#produits, etc.) */

/* Mise en avant du lien Recherche dans la navbar */
.nav-search-highlight{
  color:var(--movalya-blue) !important;
  font-weight:700;
  letter-spacing:.01em;
}
.nav-search-highlight .search-icon{
  font-size:1.05rem;
}
.nav-search-highlight:hover,
.nav-search-highlight:focus{
  color:#0b6fcc !important;
}

/* Barre de recherche intégrée à la navbar */
.nav-search{ min-width:360px; }
.nav-search .nav-search-bar{
  display:flex;
  flex-wrap:nowrap;
  align-items:stretch;
  width:100%;
  height:46px;
  border:1px solid #cfcfcf;
  border-radius:8px;
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65), 0 1px 1px rgba(0,0,0,.08);
  background:#f3f3f3;
}
.nav-search .nav-search-select-wrap{
  position:relative;
  display:flex;
  align-items:center;
  min-width:190px;
  background:#f3f3f3;
  border-right:1px solid #d5d5d5;
  padding-right:0.75rem;
}
.nav-search .nav-search-select{
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;
  background:transparent;
  border:0;
  width:100%;
  height:100%;
  padding:0 1.25rem 0 1rem;
  font-weight:600;
  font-size:.95rem;
  color:#111;
  box-shadow:none;
  line-height:1.2;
}
.nav-search .nav-search-select:focus{ outline:none; box-shadow:none; }
.nav-search .nav-search-caret{
  position:absolute;
  top:50%;
  right:0.9rem;
  transform:translateY(-50%);
  pointer-events:none;
  color:#555;
  font-size:.9rem;
}
.nav-search .nav-search-input{
  flex:1;
  min-width:220px;
  display:flex;
}
.nav-search .nav-search-input input{
  border:0;
  width:100%;
  padding:0 1rem;
  font-size:1rem;
  background:#fff;
  border-right:1px solid #d5d5d5;
}
.nav-search .nav-search-input input:focus{ outline:none; box-shadow:none; }
.nav-search .nav-search-btn{
  background:#1e90ff;
  border:0;
  min-width:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  padding:0 1.1rem;
  transition:background-color .15s ease;
}
.nav-search .nav-search-btn:hover{ background:#1475d4; }
.nav-search .nav-search-btn svg{
  width:20px;
  height:20px;
  display:block;
}
@media (max-width:991.98px){
  .nav-search{ width:100%; }
  .nav-search .nav-search-select-wrap{ min-width:160px; }
}

/* Réinitialisations douces */
img{max-width:100%;height:auto;display:block}

/* ===== HERO ===== */
.hero{
  position:relative;                /* au cas où la classe bootstrap est manquante */
  min-height:55vh;
  overflow:hidden;                  /* évite tout débordement visuel */
  color:#fff;
}
.hero .hero-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  object-position: center top;
  filter:brightness(0.85) saturate(1.1);
  z-index:0;
}
.hero .hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.3) 70%, rgba(0,0,0,.35) 100%);
  z-index:1;
}
/* assure que le contenu passe au-dessus du fond/overlay */
.hero .container{ position:relative; z-index:2; }
@media (max-width: 767.98px) {
  .hero {
    min-height: auto;
  }
  .hero .hero-bg {
    object-position: 70% center;   /* cadre sur le personnage à droite */
  }
  .hero .hero-row {
    min-height: 65vh;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .hero h1 {
    font-size: 1.65rem;            /* titre lisible sans écraser l'écran */
    line-height: 1.25;
  }
  .hero .lead {
    font-size: 0.95rem;
    line-height: 1.5;
  }
  .hero .hero-cta {
    flex-direction: column;        /* boutons empilés */
    gap: 0.6rem !important;
  }
  .hero .hero-cta .btn {
    width: 100%;                   /* boutons pleine largeur */
    font-size: 0.95rem;
    padding: 0.65rem 1.2rem;
  }
}

/* Petits mobiles (iPhone SE, etc.) */
@media (max-width: 374px) {
  .hero .hero-row {
    min-height: 55vh;
  }
  .hero h1 {
    font-size: 1.4rem;
  }
  .hero .lead {
    font-size: 0.875rem;
  }
}

/* ===== Badges d'icônes ===== */
.icon-badge{
  width:48px;height:48px;border-radius:12px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--movalya-blue),var(--movalya-green));
  color:#fff;font-weight:700;font-size:20px;
}

/* ===== Cartes produit ===== */
.product-card{
  border:1px solid rgba(0,0,0,.06);
  transition:transform .2s ease, box-shadow .2s ease;
}
.product-card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.product-card .card-img-top{
  aspect-ratio: 16/9;               /* ratio homogène */
  object-fit:cover;                 /* recadrage propre */
}
.price{font-size:1.1rem}

/* ===== Footer ===== */
footer .footer-link{ 
  color:rgba(255,255,255,.8); text-decoration:none;
}
footer .footer-link:hover{ color:#fff; text-decoration:underline; }
footer{ background:linear-gradient(180deg,#0b1320,#0a0f19 60%); }
footer .footer-link.btn-link{
  background:transparent;
  border:0;
  color:rgba(255,255,255,.8);
}
footer .footer-link.btn-link:hover,
footer .footer-link.btn-link:focus{
  color:#fff;
  text-decoration:underline;
}
footer .footer-link.btn-link:focus-visible{
  outline:2px solid rgba(255,255,255,.65);
  outline-offset:2px;
}

/* ===== Cookie banner ===== */
.cookie-banner{
  position:fixed;
  bottom:1.5rem;
  left:50%;
  transform:translateX(-50%);
  width:min(560px, calc(100% - 2.5rem));
  background:#fff;
  border-radius:1rem;
  border:1px solid rgba(15,23,42,.12);
  padding:1.5rem;
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  z-index:1080;
}

.cookie-banner__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  align-items:center;
}

.cookie-banner__actions .btn-link{
  padding-left:0;
  padding-right:0;
}

@media (max-width: 575.98px){
  .cookie-banner{
    width:calc(100% - 1.5rem);
    bottom:1rem;
    padding:1.25rem;
  }
  .cookie-banner__actions{
    flex-direction:column;
    align-items:stretch;
  }
  .cookie-banner__actions .btn{
    width:100%;
  }
}

/* ===== Recherche ===== */
.search-page .search-hero{
  position:relative;
  overflow:hidden;
}
.search-page .search-box .form-control{
  box-shadow:none;
}
.search-page .search-box .form-control:focus{
  box-shadow:0 0 0 .25rem rgba(30,136,229,.2);
}
.search-page .search-combobox .form-select{
  max-width:220px;
  min-width:180px;
  border-top-right-radius:0;
  border-bottom-right-radius:0;
}
.search-page .search-combobox .form-control{
  border-radius:0;
}
.search-page .search-combobox .btn{
  border-top-left-radius:0;
  border-bottom-left-radius:0;
}
.search-page .badge.text-bg-light{
  background-color:#f4f7fb;
  color:#0f172a;
  border:1px solid rgba(15,23,42,.08);
}
.search-page .product-card .badge.text-bg-light{
  border-color:rgba(15,23,42,.05);
}

/* Logo navbar */
.navbar-brand img { height: 85px !important; width: auto !important; max-width: none !important; }

/* Compacter le header pour tout faire tenir */
header.navbar .container { max-width: 1540px; }
.nav-search { min-width: 280px; }
.nav-search .nav-search-select-wrap { min-width: 150px; }
header.navbar .navbar-nav .nav-link { padding-left: .4rem; padding-right: .4rem; font-size: .9rem; }

/* ===== Avis Expert Exoleton ===== */
.expert-badge{
  width:48px;height:48px;border-radius:12px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,#1565c0,#0d47a1);
  color:#fff;font-size:1.25rem;
  flex-shrink:0;
}
#avis-exoleton .card{
  transition:transform .15s ease;
}
#avis-exoleton .card:hover{
  transform:translateY(-2px);
}

/* ===== Tests Terrain ===== */
#tests-terrain .card{
  transition:transform .2s ease, box-shadow .2s ease;
}
#tests-terrain .card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 25px rgba(0,0,0,.08);
}

/* ===== Pages Métiers ===== */
.icon-badge-sm{
  width:36px;height:36px;border-radius:10px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--movalya-blue),var(--movalya-green));
  color:#fff;font-size:.9rem;
  flex-shrink:0;
}
.metier-card{
  transition:transform .2s ease, box-shadow .2s ease;
}
.metier-card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}