/* === 🌅 HEADER + HOME-SEARCH SANS FONDU === */

/* --- HEADER (logo + menu) --- */
header {
  position: relative;
  background: url('https://www.occazmagique.com/oc-content/uploads/fond-header1.webp') no-repeat center top;
  background-size: cover;
  background-attachment: scroll;
  color: #fff;
  z-index: 10;
  overflow: visible;
  padding-top: 25px;
  padding-bottom: 20px;
}

/* --- ZONE DE RECHERCHE (home-search) --- */
.home-search {
  position: relative;
  background: url('https://www.occazmagique.com/oc-content/uploads/fond-header.webp') no-repeat center top;
  background-size: cover;
  background-attachment: scroll;
  color: #fff;
  z-index: 0;
  margin-top: 0;
}

/* === ✅ Texte blanc dans la zone de recherche === */
.home-search h1,
.home-search label,
.home-search input,
.home-search select,
.home-search span,
.home-search p {
  color: #fff !important;
}

.home-search input::placeholder {
  color: #fff !important;
  opacity: 0.8;
}

/* === ✅ Champs de recherche transparents et lisibles === */
.home-search input,
.home-search select {
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  background-color: rgba(0, 0, 0, 0.25) !important;
  color: #fff !important;
  height: 44px !important;
  line-height: 44px !important;
  padding: 0 10px !important;
  box-sizing: border-box;
}

/* === ✅ Bouton "Rechercher" bleu, même hauteur === */
.home-search button {
  background-color: #0d9ecc !important;
  color: #fff !important;
  border: none !important;
  height: 44px !important;
  line-height: 44px !important;
  padding: 0 25px !important;
  font-weight: bold;
  font-size: 15px !important;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.home-search button:hover {
  background-color: #0bb4e4 !important;
}

/* Garantit que le contenu reste au-dessus du fond */
header .wrapper,
.home-search .wrapper {
  position: relative;
  z-index: 2;
}

/* === ✅ Logo centré et visible === */
#logo {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 25px 0;
}

#logo img {
  max-height: 180px;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
  transition: all 0.3s ease;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4));
}

#logo img:hover {
  transform: scale(1.03);
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.5));
}

/* === 🌄 FOOTER === */
footer {
  position: relative;
  background: url('https://www.occazmagique.com/oc-content/uploads/fond-header1.webp') no-repeat center bottom;
  background-size: cover;
  color: #f5f5f5 !important;
  padding: 50px 0 25px 0;
  text-align: center;
}

footer a {
  color: #ffffff !important;
  text-decoration: none;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

footer a:hover {
  color: #ffd37b !important;
  text-shadow: 0 0 6px rgba(255, 211, 123, 0.7);
}

footer .copy {
  margin-top: 20px;
  color: #f1e3c4 !important;
  font-size: 0.9em;
}

footer .language a.active {
  color: #ffd37b !important;
  font-weight: bold;
}

/* === TABLETTE === */
@media screen and (max-width: 980px) {
  #logo img {
    max-height: 130px;
  }

  header,
  .home-search {
    background-position: center top;
    background-size: cover;
  }
}

/* === MOBILE === */
@media screen and (max-width: 767px) {
  /* --- Header ajusté pour mobile (option 2) --- */
  header {
    background: url('https://www.occazmagique.com/oc-content/uploads/fond-header1.webp') no-repeat center 15%;
    background-size: cover;
    height: 180px; /* 🔧 hauteur équilibrée */
  }

  .home-search {
    background: url('https://www.occazmagique.com/oc-content/uploads/fond-header.webp') no-repeat center top;
    background-size: cover;
    padding-bottom: 20px;
  }

  #logo img {
    max-height: 90px;
    margin: 8px auto;
  }

  footer {
    background: url('https://www.occazmagique.com/oc-content/uploads/fond-header1.webp') no-repeat center bottom;
    background-size: cover;
    padding: 40px 0 20px 0;
  }

  /* === ✅ Logo centré sur mobile === */
  #logo {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  #logo a {
    display: inline-block !important;
  }

  #logo img {
    display: block !important;
    margin: 0 auto !important;
  }

  /* === ✅ Bouton “Rechercher” adapté mobile === */
  .home-search button {
    width: 100%;
    margin-top: 8px;
    font-size: 13px !important;
    height: 42px !important;
    line-height: 42px !important;
  }
}

/* ========================================================= */
/* === RÈGLES ORIGINALES DU RESPONSIVE SIGMA =============== */
/* ========================================================= */

@media screen and (min-width: 981px) {
  .isMobile:not(.isDesktop), .isTablet:not(.isDesktop) {display:none!important;}
}

@media screen and (max-width: 980px) {
  body.home #main, body.search #main, body.user #main, body.item #main, body.user-public-profile #main {width:68%;}
  #sidebar, body.search #sidebar {width:30%;}
  body.user #sidebar {width:28%;margin-right:2%;} 
  .wrapper {width:100%;}
  .item-photos .main-photo {width:calc(100% - 92px);}
}

@media screen and (min-width: 768px) and (max-width: 980px) {
  .isDesktop:not(.isTablet), .isMobile:not(.isTablet) {display:none!important;}
  #sidebar .g-recaptcha {transform: scale(0.86); transform-origin: 0 0;}
}

@media screen and (min-width: 768px) {
  .resp-toogle, .fixed-layout .fixed-close {display: none;}
}

@media screen and (max-width: 767px) {
  .isDesktop:not(.isMobile), .isTablet:not(.isMobile) {display:none!important;}
  footer #subdomains-list a {max-width:50%;}
  body.subdomain-navigation {padding-top:0;}
  body.subdomain-navigation header {position:relative;height:auto;top:auto;left:auto;}
  body.subdomain-navigation.sd-with-icon #subdomains-list {padding-left:0px;padding-right:0px;}
  body.subdomain-navigation.sd-with-icon #subdomains-list a {max-width:104px;}
  body.item.item-post #main {width:100%;}
  body.item-post #error_list {width:100%;margin-left:0;}
  #home-regs .wrap > div:nth-of-type(1n+10) {display: block;}
  header {height:auto;padding-top:5px;padding-bottom:5px;position:relative;top:0;left:0;z-index:9;}
  body {padding-top:0;}
  header #logo img {height:auto;margin:5px 0;}
  .menu-icon {width:40px;height:40px;position:absolute;right:0px;top:3px;padding:11px 8px;border-radius:4px;border:1px solid transparent;transition:0.2s;}
  .menu-icon:active, .menu-icon:focus {border-color:#0d9ecc;}
  .menu-icon > div {display:inline-block;position:relative;width:24px;height:18px;}
  .menu-icon span {position:absolute;left:0;width:100%;height:2px;border-radius:100px;background:#000;top:0;transition:0.2s;}
  .menu-icon span.l2 {top:50%;margin-top:-1px;}
  .menu-icon span.l3 {bottom:0;top:auto;}
  .menu-icon.opened span.l1 {top:8px;transform:rotate(45deg);}
  .menu-icon.opened span.l2 {opacity:0;}
  .menu-icon.opened span.l3 {top:8px;transform:rotate(-45deg);}
  header .nav {display:none;position:fixed;top:60px;left:0;right:0;bottom:0;background:#fff;z-index:9;height:initial;overflow-y:auto;}
  header .nav a:hover, header .nav a.active, header .nav a.publish, header .nav a.publish:hover {box-shadow:none;background:#fff;color:#000;border-color:transparent;}
  header .nav a, header .nav a.active, body.user #sidebar a {clear:both;width:100%;text-align:center;margin:0;padding:16px 25px;border-bottom:1px solid rgba(0,0,0,0.1);border-radius:0;color:#000;height:auto;}
  body.user #sidebar a {float:left;}
  body.user #sidebar {background:#fff;padding:0;}
  .show-menu-btn {width:100%;margin:0 0 15px 0;}
  #item-content .price {display:inline-block;margin:0 0 20px 0;font-weight:bold;font-size:32px;line-height:34px;color:#000;background:#f7ffb8;padding:15px;}
  #sidebar .filters {background:transparent;padding:0;}
  .refine {padding:0;}
  .alert_form {padding:20px;}
  .fixed-layout {display:none;position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;z-index:50;background:#fff;padding:20px;overflow-y:auto;}
  .fixed-layout .fixed-close {position:fixed;top:10px;z-index:51;right:15px;cursor:pointer;background:#000;width:36px;height:36px;text-align:center;font-size:20px;color:#fff;border-radius:100px;}
  .fixed-layout .fixed-close i {line-height:36px;}
  .fixed-layout .fixed-close:hover, .fixed-layout .fixed-close:active {background:#222;}
  .fixed-layout .btn {width:auto!important;padding-left:25px!important;padding-right:25px!important;}
  .resp-toogle {display:block;}
  .listing-card-list.listing-grid {width:calc(100% + 16px);margin-left:-8px;margin-right:-8px;}
  .listing-grid .listing-card, .similar_ads .listing-grid .listing-card {width:calc(33.33% - 16px);margin:0 8px 16px 8px;}
  .main-search > .cell.c2 {display:none;}
  .main-search > .cell.c1 {width:65%;}
  .main-search > .cell.c3 {width:35%;}
  #sidebar .btn.show-contact-btn {margin-top:15px;}
  body.home #main, #main, body.search #main, body.user #main, body.item #main, body.user-public-profile #main {width:100%;}
  body.home #sidebar, #sidebar, body.search #sidebar, body.user #sidebar {width:100%;}
  #home-regs .wrap > div {width:50%;clear:none;padding-right:15px;}
  footer .box {text-align:center;}
  footer .box > a {float:none;margin:0 5px 8px 5px;}
  footer .copy, footer .language {margin:10px 0 0 0;width:100%;text-align:center;}
  .home-latest {margin:0 0 10px 0;}
  .form-container-box {padding:10px 0 0 0;}
  #related-searches {margin-top:10px;}
  .counter-search {margin:0 0 10px 0;}
  body.search .list-header .actions {float:left;width:100%;}
  .show-filters-btn {float:left;padding:8px 10px;height:40px;}
  .btn.see_by {clear:none;}
  .see_by ul a {width:100%;white-space:initial;}
  .item #comments {margin-bottom:15px;}
  #useful_info {margin-bottom:0;}
  section {padding-bottom:20px;}
  body.item-post #content {text-align:center;}
  body.item-post #content #main {max-width:520px;text-align:left;float:none;display:inline-block;}
  .item.item-post .form-horizontal label:not(.osp-chk) {padding:0;margin:0 0 3px 0;text-align:left;width:100%;}
}

/* === ✅ MENU HAMBURGER BLANC === */
.menu-icon span { background: #fff !important; }
.menu-icon.opened span.l1,
.menu-icon.opened span.l3 { background: #fff !important; }
.menu-icon { border-color: rgba(255,255,255,0.45) !important; z-index: 11; }
.menu-icon:active, .menu-icon:focus { border-color: #fff !important; }