/* ============================================================
   MINI BIKE PASSION — DARK RACING PREMIUM V4
   Refonte visuelle complète : premium garage / racing éditorial
   Override Baskerville 2 + Beaver Builder
   ============================================================ */

/* ============================================================
   0. PALETTE & VARIABLES
   ============================================================
   --mbp-gold:        #C8960C   jaune principal profond, chaud
   --mbp-gold-light:  #E8B420   jaune accent hover/focus
   --mbp-gold-glow:   #F5D040   jaune lumineux micro-détails
   --mbp-dark:        #000000   noir pur
   --mbp-surface:     #0C0C0C   surface principale
   --mbp-card:        #111111   fond cartes
   --mbp-card-hover:  #161616   fond cartes hover
   --mbp-border:      #1E1E1E   bordures discrètes
   --mbp-border-light:#2A2A2A   bordures secondaires
   --mbp-text:        #E8E8E8   texte principal
   --mbp-text-muted:  #888888   texte secondaire
   --mbp-text-dim:    #666666   texte tertiaire
   ============================================================ */

:root {
  --mbp-gold: #C8960C;
  --mbp-gold-light: #E8B420;
  --mbp-gold-glow: #F5D040;
  --mbp-dark: #000000;
  --mbp-surface: #0C0C0C;
  --mbp-card: #111111;
  --mbp-card-hover: #161616;
  --mbp-border: #1E1E1E;
  --mbp-border-light: #2A2A2A;
  --mbp-text: #E8E8E8;
  --mbp-text-muted: #888888;
  --mbp-text-dim: #666666;
}

.credits p { display: none; }

/* ============================================================
   1. GLOBAL
   ============================================================ */

body {
  background: var(--mbp-dark) !important;
  color: var(--mbp-text) !important;
  font-family: 'Roboto', -apple-system, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}

h1, h2, h3, h4, h5, h6,
.post-title, .post-title a,
.page-title, .widget-title,
.entry-title {
  font-family: 'Oswald', sans-serif !important;
  font-weight: 700 !important;
  color: var(--mbp-text) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

h1 { font-size: 2em !important; }
h2 { font-size: 1.5em !important; }
h3 { font-size: 1.15em !important; }

a {
  color: var(--mbp-gold-light) !important;
  transition: color 0.3s ease !important;
  text-decoration: none !important;
}
a:hover {
  color: #fff !important;
  text-decoration: none !important;
}

::selection { background: var(--mbp-gold); color: #000; }

/* ============================================================
   2. HEADER — LOGO CENTRÉ AU-DESSUS DU MENU
   ============================================================
   Structure Baskerville 2 :
   header.header = contient le logo (header-inner)
   div.navigation = contient le menu (navigation-inner)
   On empile : logo centre en haut, menu en dessous.
   ============================================================ */

header.header,
header.header.section,
header.header.bg-dark,
header.header.bg-dark.bg-image,
.header.section.small-padding {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 100000 !important;
  width: 100% !important;
  height: 160px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: rgba(0,0,0,0.95) !important;
  background-image: none !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}

header.header .cover,
header.header .site-description,
header.header .site-title,
header.header .jetpack-social-navigation {
  display: none !important;
}

header.header .header-inner {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  text-align: center !important;
}

header.header .custom-logo-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  float: none !important;
}

header.header .custom-logo-link img,
header.header img.custom-logo {
  max-height: 145px !important;
  width: auto !important;
  display: block !important;
  transition: transform 0.3s ease, filter 0.3s ease !important;
  filter: drop-shadow(0 0 6px rgba(200,150,12,0.2)) !important;
}

header.header .custom-logo-link img:hover {
  transform: scale(1.04) !important;
  filter: drop-shadow(0 0 12px rgba(200,150,12,0.35)) !important;
}

/* Cacher titre page — homepage + toutes les pages custom V4 */
body.home .entry-title,
body.home .post-title,
body.home .page-title,
body.home .post-header,
body.page-id-8688 .entry-title,
body.page-id-8688 .post-title,
body.page-id-8688 .post-header,
body.page > .wrapper article.type-page > .post-header {
  display: none !important;
}

/* Pages V4 : fond transparent comme la homepage, pas de bloc gris */
body.page article.type-page {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ============================================================
   3. NAVIGATION — PREMIUM STICKY
   ============================================================ */

.navigation,
.navigation.section,
.navigation.section.no-padding,
.navigation.section.no-padding.bg-dark {
  position: fixed !important;
  top: 160px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 99999 !important;
  padding: 0 !important;
  background: rgba(0,0,0,0.92) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid var(--mbp-border) !important;
  transition: box-shadow 0.4s ease !important;
}

.navigation-inner,
.navigation-inner.section-inner,
nav.navigation-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 48px !important;
  max-width: 1200px !important;
}

/* Menu principal */
.main-navigation,
.main-navigation .menu,
#primary-menu {
  text-align: center !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 0.88em !important;
  list-style: none !important;
}

.main-navigation .menu > li,
#primary-menu > li {
  float: none !important;
  display: inline-block !important;
}

.main-navigation .menu > li:before,
#primary-menu > li:before {
  display: none !important;
}

.main-navigation .menu > li > a,
#primary-menu > li > a {
  color: #999 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.8px !important;
  font-weight: 700 !important;
  padding: 13px 16px !important;
  text-decoration: none !important;
  position: relative !important;
  transition: color 0.35s ease !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 0.92em !important;
}

/* Underline slide premium */
.main-navigation .menu > li > a::after,
#primary-menu > li > a::after {
  content: '' !important;
  position: absolute !important;
  bottom: 8px !important;
  left: 16px !important;
  right: 16px !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--mbp-gold), var(--mbp-gold-light)) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.main-navigation .menu > li:hover > a,
.main-navigation .menu > li.current-menu-item > a,
.main-navigation .menu > li.current_page_item > a,
#primary-menu > li:hover > a,
#primary-menu > li.current-menu-item > a {
  color: var(--mbp-gold-light) !important;
}

.main-navigation .menu > li:hover > a::after,
.main-navigation .menu > li.current-menu-item > a::after,
#primary-menu > li:hover > a::after,
#primary-menu > li.current-menu-item > a::after {
  transform: scaleX(1) !important;
}

/* Sous-menus */
.main-navigation .sub-menu,
#primary-menu .sub-menu {
  background: #0A0A0A !important;
  border: 1px solid var(--mbp-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.7) !important;
}

.main-navigation .sub-menu li a,
#primary-menu .sub-menu li a {
  color: #999 !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 0.9em !important;
  padding: 10px 22px !important;
  transition: all 0.25s ease !important;
  text-decoration: none !important;
}

.main-navigation .sub-menu li a:hover,
#primary-menu .sub-menu li a:hover {
  color: var(--mbp-gold-light) !important;
  background: var(--mbp-card) !important;
  padding-left: 26px !important;
}

/* Bouton recherche */
.search-toggle,
button.search-toggle {
  color: #999 !important;
  transition: color 0.3s ease !important;
}
.search-toggle:hover { color: var(--mbp-gold-light) !important; }

.header-search-block {
  background: #0A0A0A !important;
}

/* Hamburger */
button.nav-toggle { color: var(--mbp-text) !important; }
button.nav-toggle .bar { background: var(--mbp-text) !important; }

.jetpack-social-navigation { display: none !important; }

/* Compenser header fixe (logo 160px + nav 48px = 208px + marge) */
.wrapper.section.medium-padding,
main.wrapper.section.medium-padding {
  padding-top: 220px !important;
}

/* ============================================================
   4. CONTENU PRINCIPAL
   ============================================================ */

.wrapper.section,
.wrapper.section.medium-padding,
main.wrapper {
  background: var(--mbp-dark) !important;
}

.content,
.content.fleft,
.content.section-inner {
  background: transparent !important;
}

.fl-row,
.fl-row .fl-row-content-wrap {
  background: transparent !important;
}

.fl-module-heading .fl-heading,
.fl-module-heading h1,
.fl-module-heading h2,
.fl-module-heading h3 {
  color: var(--mbp-text) !important;
}

.fl-module-rich-text,
.fl-module-rich-text p {
  color: var(--mbp-text) !important;
}

/* ============================================================
   5. CARTES ARTICLES (archives/catégories)
   ============================================================ */

.posts .post-container .post,
article.type-post,
article.type-page {
  background: var(--mbp-card) !important;
  border-radius: 12px !important;
  border: 1px solid var(--mbp-border) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25) !important;
  overflow: hidden !important;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.4s ease,
              border-color 0.4s ease !important;
}

.posts .post-container .post {
  display: flex !important;
  flex-direction: column !important;
}

.posts .post .post-header {
  order: 2 !important;
  padding: 6% 8% 2% !important;
  border-bottom: none !important;
  background: transparent !important;
}

.posts .post .featured-media { order: 1 !important; }
.posts .post .post-content { order: 3 !important; padding: 0 8% 4% !important; }
.posts .post .post-meta { order: 4 !important; }

.posts .post-header .post-title,
.posts .post-header .entry-title {
  font-size: 1.05em !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

.posts .post-header .post-title a,
.posts .post-header .entry-title a {
  color: var(--mbp-text) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  transition: color 0.3s ease !important;
}

.posts .post-header .post-title a:hover {
  color: var(--mbp-gold-light) !important;
}

.posts .post .post-content,
.posts .post .post-content p {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: 0.85em !important;
  line-height: 1.5 !important;
  color: var(--mbp-text-muted) !important;
  margin: 0 !important;
}

.posts .post .featured-media img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Hover premium avec glow subtil */
.posts .post:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(200,150,12,0.2) !important;
  box-shadow: 0 12px 35px rgba(0,0,0,0.45),
              0 0 30px rgba(200,150,12,0.04) !important;
}

.posts .post:hover .featured-media img {
  transform: scale(1.04) !important;
}

.posts .post-meta {
  background: rgba(255,255,255,0.015) !important;
  border-top: 1px solid var(--mbp-border) !important;
  padding: 8px 8% !important;
}

.posts .post-meta a {
  color: var(--mbp-text-dim) !important;
  font-size: 0.75em !important;
  letter-spacing: 0.5px !important;
}
.posts .post-meta a:hover { color: var(--mbp-gold-light) !important; }

.post-container {
  padding: 0 12px 24px 12px !important;
}

/* Animation fade-in */
@keyframes mbp-fadeInUp {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

.post-container {
  opacity: 0 !important;
  animation: mbp-fadeInUp 0.5s ease forwards !important;
}
.post-container:nth-child(1) { animation-delay: 0.05s !important; }
.post-container:nth-child(2) { animation-delay: 0.1s !important; }
.post-container:nth-child(3) { animation-delay: 0.15s !important; }
.post-container:nth-child(4) { animation-delay: 0.2s !important; }
.post-container:nth-child(5) { animation-delay: 0.25s !important; }
.post-container:nth-child(6) { animation-delay: 0.3s !important; }
.post-container:nth-child(7) { animation-delay: 0.35s !important; }
.post-container:nth-child(8) { animation-delay: 0.4s !important; }
.post-container:nth-child(9) { animation-delay: 0.45s !important; }

/* ============================================================
   6. TITRE DE PAGES + LIGNE ACCENT
   ============================================================ */

.page-title,
header.page-header {
  text-align: center !important;
  padding-bottom: 25px !important;
  margin-bottom: 30px !important;
  border-bottom: none !important;
}

.page-title::after,
.page-header .page-title::after {
  content: '' !important;
  display: block !important;
  width: 50px !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--mbp-gold), var(--mbp-gold-light)) !important;
  margin: 15px auto 0 !important;
  border-radius: 2px !important;
}

.page-title span {
  color: var(--mbp-gold-light) !important;
}

.post-content h2::after,
.entry-content h2::after {
  content: '' !important;
  display: block !important;
  width: 40px !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--mbp-gold), transparent) !important;
  margin-top: 8px !important;
  border-radius: 2px !important;
}

/* ============================================================
   7. ARTICLE SINGLE
   ============================================================ */

body.single article.type-post,
body.page article.type-page {
  background: var(--mbp-card) !important;
  border: none !important;
  border-radius: 12px !important;
}

body.single .post-header,
body.page .post-header {
  padding: 8% 8% 4% !important;
  border-bottom: 1px solid var(--mbp-border) !important;
}

body.single .post-title,
body.page .post-title {
  font-size: 1.7em !important;
  line-height: 1.2 !important;
  color: var(--mbp-text) !important;
}

.post-content,
.post-content p,
.entry-content p {
  color: var(--mbp-text) !important;
  font-size: 17px !important;
  line-height: 1.8 !important;
}

.post-content h2,
.post-content h3,
.entry-content h2,
.entry-content h3 {
  color: var(--mbp-gold-light) !important;
  margin-top: 1.8em !important;
}

.post-content a,
.entry-content a {
  color: var(--mbp-gold-light) !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent !important;
  transition: border-color 0.3s ease !important;
}
.post-content a:hover,
.entry-content a:hover {
  border-bottom-color: var(--mbp-gold-light) !important;
}

.post-content img,
.entry-content img {
  border-radius: 8px !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.post-meta.clear {
  background: #0a0a0a !important;
  padding: 15px 8% !important;
  border-top: 1px solid var(--mbp-border) !important;
}

.post-meta .post-date,
.post-meta time { color: var(--mbp-text-muted) !important; }
.post-meta i.fa { color: var(--mbp-gold) !important; }

.post-categories a,
.post-tags a {
  background: rgba(200,150,12,0.08) !important;
  color: var(--mbp-gold-light) !important;
  padding: 3px 10px !important;
  border-radius: 4px !important;
  font-size: 0.75em !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  transition: background 0.3s ease !important;
  border-bottom: none !important;
}
.post-categories a:hover,
.post-tags a:hover {
  background: rgba(200,150,12,0.2) !important;
  color: #fff !important;
}

.entry-author {
  background: #0a0a0a !important;
  border: 1px solid var(--mbp-border) !important;
  border-radius: 10px !important;
  padding: 25px !important;
  margin-top: 30px !important;
}

.author-title { color: #AAA !important; }
.author-name { color: var(--mbp-gold-light) !important; }

blockquote, .wp-block-quote {
  border-left: 3px solid var(--mbp-gold) !important;
  background: rgba(200,150,12,0.03) !important;
  padding: 20px 25px !important;
  border-radius: 0 8px 8px 0 !important;
  color: var(--mbp-text) !important;
}

pre, code {
  background: #0a0a0a !important;
  color: var(--mbp-gold-light) !important;
  border: 1px solid var(--mbp-border) !important;
  border-radius: 6px !important;
}

.post-navigation a { color: #AAA !important; }
.post-navigation a:hover { color: var(--mbp-gold-light) !important; }

/* ============================================================
   8. SIDEBAR — ÉDITORIAL PREMIUM
   ============================================================ */

aside.sidebar,
.sidebar.fright {
  background: var(--mbp-card) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.25) !important;
  border: 1px solid var(--mbp-border) !important;
  overflow: hidden !important;
}

.sidebar .widget {
  padding: 24px 25px !important;
  border-top: 1px solid var(--mbp-border) !important;
  position: relative !important;
}

.sidebar .widget:first-child { border-top: none !important; }

.sidebar .widget-title {
  color: var(--mbp-gold) !important;
  font-family: 'Oswald', sans-serif !important;
  text-transform: uppercase !important;
  font-size: 0.85em !important;
  letter-spacing: 2.5px !important;
  margin-bottom: 16px !important;
  padding-bottom: 11px !important;
  border-bottom: 1px solid var(--mbp-border) !important;
  position: relative !important;
}

/* Petite ligne dorée sous le titre widget */
.sidebar .widget-title::after {
  content: '' !important;
  position: absolute !important;
  bottom: -1px !important;
  left: 0 !important;
  width: 30px !important;
  height: 1px !important;
  background: var(--mbp-gold) !important;
}

.sidebar .widget-content { color: #AAA !important; }

.sidebar .widget-content a {
  color: #CCC !important;
  transition: color 0.3s ease, padding-left 0.3s ease !important;
}
.sidebar .widget-content a:hover { color: var(--mbp-gold-light) !important; }

/* Puces/guillemets widgets sidebar — FIX DÉFINITIF
   Baskerville 2 : li { position:relative; padding-left:15px }
                   li:before { content:"»"; position:absolute; left:0 }
   Probleme : le lien en block pousse le guillemet au-dessus.
   Solution : flexbox sur le li = force l'alignement horizontal. */

/* Reset générique des puces sidebar */
.sidebar .widget-content ul li:before {
  color: var(--mbp-gold) !important;
}

/* Articles récents sidebar — conteneur */
.sidebar .widget_recent_entries ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

/* Chaque li : flexbox horizontal = le :before et le lien sur la meme ligne */
.sidebar .widget_recent_entries ul li {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 0 !important;
  padding: 10px 0 10px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  transition: padding-left 0.3s ease, border-color 0.3s ease !important;
  position: relative !important;
  line-height: 1.5 !important;
}

/* Le guillemet » : sort du mode absolu, devient un flex-item */
.sidebar .widget_recent_entries ul li:before {
  position: static !important;
  display: block !important;
  flex-shrink: 0 !important;
  margin-right: 6px !important;
  color: var(--mbp-gold) !important;
  font-size: 0.85em !important;
  line-height: 1.5 !important;
  float: none !important;
  top: auto !important;
  left: auto !important;
}

/* Le lien : prend tout l'espace restant */
.sidebar .widget_recent_entries ul li a {
  color: #CCC !important;
  text-decoration: none !important;
  font-size: 0.95em !important;
  line-height: 1.5 !important;
  display: block !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.sidebar .widget_recent_entries ul li:hover {
  padding-left: 6px !important;
  border-bottom-color: rgba(200,150,12,0.15) !important;
}
.sidebar .widget_recent_entries ul li:last-child { border-bottom: none !important; }

.sidebar .widget_recent_entries ul li a:hover {
  color: var(--mbp-gold-light) !important;
}

/* Recherche — layout flex propre, pas de chevauchement */
.sidebar .search-form,
.sidebar .widget_search form {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  position: relative !important;
}

.sidebar .search-form input[type="search"],
.sidebar input.search-field {
  background: #0A0A0A !important;
  border: 1px solid var(--mbp-border-light) !important;
  border-right: none !important;
  color: var(--mbp-text) !important;
  border-radius: 8px 0 0 8px !important;
  padding: 10px 14px !important;
  flex: 1 !important;
  min-width: 0 !important;
  height: auto !important;
  box-sizing: border-box !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}
.sidebar .search-form input:focus {
  border-color: var(--mbp-gold) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(200,150,12,0.1) !important;
}

.sidebar .search-form .search-submit,
.sidebar .search-form button {
  background: var(--mbp-gold) !important;
  color: #000 !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 10px 16px !important;
  border: 1px solid var(--mbp-gold) !important;
  border-left: none !important;
  flex-shrink: 0 !important;
  height: auto !important;
  box-sizing: border-box !important;
  position: static !important;
  transform: none !important;
  margin: 0 !important;
  transition: background 0.3s ease !important;
}
.sidebar .search-form .search-submit:hover,
.sidebar .search-form button:hover {
  background: var(--mbp-gold-light) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Images sidebar */
.sidebar .widget_block img,
.sidebar .widget_media_image img {
  border-radius: 8px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.sidebar .widget_block img:hover,
.sidebar .widget_media_image img:hover {
  transform: scale(1.02) !important;
}

/* Tag cloud */
.sidebar .tagcloud a {
  background: var(--mbp-border) !important;
  color: var(--mbp-text) !important;
  border-radius: 6px !important;
  transition: all 0.3s ease !important;
}
.sidebar .tagcloud a:hover {
  background: var(--mbp-gold) !important;
  color: #000 !important;
}

/* ============================================================
   9. FOOTER
   ============================================================ */

.footer,
.footer.bg-graphite,
#footer {
  background: var(--mbp-dark) !important;
  border-top: 2px solid var(--mbp-gold) !important;
}

.footer .widget-title {
  color: var(--mbp-gold) !important;
  font-family: 'Oswald', sans-serif !important;
}
.footer .widget-content { color: var(--mbp-text-dim) !important; }
.footer .widget-content a { color: #CCC !important; }
.footer .widget-content a:hover { color: var(--mbp-gold-light) !important; }
.footer .widget { border-top-color: var(--mbp-border) !important; }

.credits,
.credits.section,
.credits.bg-dark {
  background: var(--mbp-dark) !important;
  border-top: 1px solid var(--mbp-border) !important;
}
.credits a { color: var(--mbp-text-dim) !important; }
.credits a:hover { color: var(--mbp-gold-light) !important; }

.tothetop {
  background: var(--mbp-card) !important;
  color: var(--mbp-gold) !important;
  border: 1px solid var(--mbp-border) !important;
  border-radius: 50% !important;
  transition: all 0.3s ease !important;
}
.tothetop:hover {
  background: var(--mbp-gold) !important;
  color: #000 !important;
  box-shadow: 0 4px 15px rgba(200,150,12,0.3) !important;
}

/* ============================================================
   10. FORMULAIRES & BOUTONS
   ============================================================ */

input[type="text"], input[type="email"], input[type="url"],
input[type="password"], input[type="search"], input[type="number"],
textarea, select {
  background: #0A0A0A !important;
  border: 1px solid var(--mbp-border-light) !important;
  color: var(--mbp-text) !important;
  border-radius: 8px !important;
  padding: 10px 15px !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}
input:focus, textarea:focus {
  border-color: var(--mbp-gold) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(200,150,12,0.08) !important;
}

button, input[type="submit"], .button, .wp-block-button__link {
  background: var(--mbp-gold) !important;
  color: #000 !important;
  border: none !important;
  border-radius: 8px !important;
  font-family: 'Oswald', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  padding: 12px 25px !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}
button:hover, input[type="submit"]:hover,
.button:hover, .wp-block-button__link:hover {
  background: var(--mbp-gold-light) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(200,150,12,0.25) !important;
}

/* ============================================================
   11. HOMEPAGE — STYLES SPÉCIFIQUES
   ============================================================ */

/* Hero section */
.mbp-hero {
  text-align: center;
  padding: 60px 20px 50px;
  max-width: 750px;
  margin: 0 auto;
  position: relative;
}

.mbp-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(200,150,12,0.04) 0%, transparent 70%);
  pointer-events: none;
}

.mbp-eyebrow {
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  font-size: 0.7em;
  color: var(--mbp-gold);
  text-transform: uppercase;
  letter-spacing: 4px;
  margin-bottom: 18px;
  padding: 4px 16px;
  border: 1px solid rgba(200,150,12,0.25);
  border-radius: 4px;
  background: rgba(200,150,12,0.04);
}

.mbp-hero-title {
  font-family: 'Oswald', sans-serif !important;
  font-size: 2.4em !important;
  color: var(--mbp-text) !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  margin: 0 0 8px !important;
  line-height: 1.15 !important;
}

.mbp-hero-title span {
  color: var(--mbp-gold-light);
}

.mbp-hero-sub {
  color: var(--mbp-text-muted);
  font-size: 1.05em;
  line-height: 1.65;
  margin: 0 0 35px;
  max-width: 550px;
  margin-left: auto;
  margin-right: auto;
}

/* CTA Buttons hero */
.mbp-cta-group {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.mbp-btn-primary {
  display: inline-block;
  background: var(--mbp-gold) !important;
  color: #000 !important;
  padding: 13px 32px;
  border-radius: 8px;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-decoration: none;
  font-size: 0.85em;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(200,150,12,0.15);
}
.mbp-btn-primary:hover {
  background: var(--mbp-gold-light) !important;
  color: #000 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(200,150,12,0.3);
}

.mbp-btn-outline {
  display: inline-block;
  background: transparent;
  color: var(--mbp-gold) !important;
  padding: 13px 32px;
  border-radius: 8px;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-decoration: none;
  font-size: 0.85em;
  border: 1px solid rgba(200,150,12,0.35);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mbp-btn-outline:hover {
  border-color: var(--mbp-gold-light) !important;
  color: var(--mbp-gold-light) !important;
  background: rgba(200,150,12,0.06);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(200,150,12,0.1);
}

/* Séparateur premium */
.mbp-sep {
  width: 50px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--mbp-gold), transparent);
  margin: 0 auto 45px;
  border-radius: 2px;
}

/* Section titles */
.mbp-section-title {
  text-align: center;
  font-family: 'Oswald', sans-serif !important;
  color: var(--mbp-text) !important;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 1.3em !important;
  margin-bottom: 8px;
  font-weight: 700;
}

.mbp-section-subtitle {
  text-align: center;
  color: var(--mbp-text-dim);
  font-size: 0.9em;
  margin-bottom: 30px;
  letter-spacing: 0.5px;
}

/* Grille cartes contenu */
.mbp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 800px;
  margin: 0 auto 50px;
  padding: 0 20px;
}

.mbp-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--mbp-card);
  border: 1px solid var(--mbp-border);
  border-radius: 12px;
  padding: 28px 22px;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

/* Ligne dorée en haut de la carte */
.mbp-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--mbp-gold), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.mbp-card:hover {
  border-color: rgba(200,150,12,0.15);
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.35),
              0 0 40px rgba(200,150,12,0.03);
  background: var(--mbp-card-hover);
}

.mbp-card:hover::before {
  opacity: 1;
}

.mbp-card-icon {
  font-size: 1.8em;
  margin-bottom: 12px;
  filter: grayscale(0.2);
  transition: transform 0.3s ease;
}

.mbp-card:hover .mbp-card-icon {
  transform: scale(1.1);
}

.mbp-card-title {
  font-family: 'Oswald', sans-serif;
  font-size: 0.95em;
  color: var(--mbp-text) !important;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
  font-weight: 700;
}

.mbp-card:hover .mbp-card-title {
  color: var(--mbp-gold-light) !important;
}

.mbp-card-desc {
  color: var(--mbp-text-dim);
  font-size: 0.82em;
  line-height: 1.45;
}

/* Cartes outils — style légèrement différent */
.mbp-tool-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--mbp-card);
  border: 1px solid var(--mbp-border);
  border-radius: 10px;
  padding: 22px 20px;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.mbp-tool-card::after {
  content: '→';
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--mbp-text-dim);
  font-size: 1.1em;
  opacity: 0;
  transition: all 0.3s ease;
}

.mbp-tool-card:hover {
  border-color: rgba(200,150,12,0.2);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  background: var(--mbp-card-hover);
}

.mbp-tool-card:hover::after {
  opacity: 1;
  right: 14px;
  color: var(--mbp-gold);
}

.mbp-tool-icon {
  font-size: 1.4em;
  flex-shrink: 0;
  margin-top: 2px;
}

.mbp-tool-title {
  font-family: 'Oswald', sans-serif;
  font-size: 0.9em;
  color: var(--mbp-text) !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 5px;
  font-weight: 700;
  transition: color 0.3s ease;
}

.mbp-tool-card:hover .mbp-tool-title {
  color: var(--mbp-gold-light) !important;
}

.mbp-tool-desc {
  color: var(--mbp-text-dim);
  font-size: 0.8em;
  line-height: 1.4;
}

/* Bloc Bonaparts premium */
.mbp-partner {
  display: block;
  max-width: 800px;
  margin: 0 auto 50px;
  padding: 0 20px;
}

.mbp-partner-inner {
  display: block;
  background: linear-gradient(135deg, #0D0B00 0%, var(--mbp-card) 50%, #0D0B00 100%);
  border: 1px solid rgba(200,150,12,0.15);
  border-radius: 14px;
  padding: 35px 30px;
  text-decoration: none;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.mbp-partner-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mbp-gold), transparent);
}

.mbp-partner-inner:hover {
  border-color: rgba(200,150,12,0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.3),
              0 0 30px rgba(200,150,12,0.05);
}

.mbp-partner-label {
  font-family: 'Oswald', sans-serif;
  font-size: 0.65em;
  color: var(--mbp-gold);
  text-transform: uppercase;
  letter-spacing: 4px;
  margin-bottom: 8px;
}

.mbp-partner-name {
  font-family: 'Oswald', sans-serif;
  font-size: 1.5em;
  color: var(--mbp-text) !important;
  text-transform: uppercase;
  letter-spacing: 5px;
  margin-bottom: 12px;
  font-weight: 700;
}

.mbp-partner-desc {
  color: var(--mbp-text-muted);
  font-size: 0.92em;
  line-height: 1.55;
  margin-bottom: 20px;
}

.mbp-partner-cta {
  display: inline-block;
  background: var(--mbp-gold);
  color: #000 !important;
  padding: 10px 28px;
  border-radius: 6px;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 0.8em;
  transition: all 0.3s ease;
}

.mbp-partner-inner:hover .mbp-partner-cta {
  background: var(--mbp-gold-light);
  box-shadow: 0 4px 15px rgba(200,150,12,0.3);
}

/* Section archives */
.mbp-archives-section {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 50px;
  padding: 0 20px;
}

/* Derniers articles section */
.mbp-latest-section {
  max-width: 800px;
  margin: 0 auto 30px;
  padding: 0 20px;
}

/* ============================================================
   12. ANIMATIONS & MICRO-INTERACTIONS
   ============================================================ */

@keyframes mbp-glow {
  0%, 100% { box-shadow: 0 0 5px rgba(200,150,12,0.1); }
  50% { box-shadow: 0 0 15px rgba(200,150,12,0.2); }
}

@keyframes mbp-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Glow subtil sur le partenaire */
.mbp-partner-inner {
  animation: mbp-glow 4s ease-in-out infinite;
}

.sticky-post {
  background: var(--mbp-gold) !important;
  color: #000 !important;
  font-family: 'Oswald', sans-serif !important;
}

/* ============================================================
   13. PAGINATION
   ============================================================ */

.pagination .page-numbers {
  background: var(--mbp-card) !important;
  color: var(--mbp-text) !important;
  border: 1px solid var(--mbp-border) !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
}
.pagination .page-numbers:hover,
.pagination .page-numbers.current {
  background: var(--mbp-gold) !important;
  color: #000 !important;
  border-color: var(--mbp-gold) !important;
}

/* ============================================================
   14. COMMENTAIRES
   ============================================================ */

.comments-wrapper, #comments {
  background: var(--mbp-card) !important;
  border-radius: 12px !important;
  padding: 30px !important;
  border: 1px solid var(--mbp-border) !important;
}

.comment, .comment-body { border-color: var(--mbp-border) !important; }
.comment-author, .comment-meta { color: #AAA !important; }
.comment-content p { color: var(--mbp-text) !important; }

/* ============================================================
   15. OVERRIDE ACCENT THEME
   ============================================================ */

.blog-title a:hover, .widget-content ul li:before,
.tagcloud a:hover, .post-nav a:hover,
.comment-author a:hover, .logged-in-as a:hover {
  color: var(--mbp-gold-light) !important;
}

#pmpro_colors { --accent: var(--mbp-gold) !important; }

/* ============================================================
   16. DIVERS
   ============================================================ */

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--mbp-dark); }
::-webkit-scrollbar-thumb { background: var(--mbp-border-light); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--mbp-gold); }

hr, .wp-block-separator { border-color: var(--mbp-border) !important; }

table { border-color: var(--mbp-border) !important; }
table th { background: #141414 !important; color: var(--mbp-gold) !important; }
table td { background: var(--mbp-card) !important; color: var(--mbp-text) !important; border-color: var(--mbp-border) !important; }

.wp-block-newspack-blocks-homepage-articles .entry-title a {
  color: var(--mbp-text) !important;
  font-family: 'Oswald', sans-serif !important;
  text-decoration: none !important;
  border-bottom: none !important;
}
.wp-block-newspack-blocks-homepage-articles .entry-title a:hover {
  color: var(--mbp-gold-light) !important;
  text-decoration: none !important;
}
.wp-block-newspack-blocks-homepage-articles .entry-title {
  text-decoration: none !important;
  border-bottom: none !important;
}
.wp-block-newspack-blocks-homepage-articles .entry-wrapper {
  background: var(--mbp-card) !important;
}

.gt_switcher, .gtranslate_wrapper { opacity: 0.7; }

/* ============================================================
   19. BLOG LISTING — GRILLE FULL WIDTH
   ============================================================ */

body.category .content,
body.archive .content {
  width: 100% !important;
  float: none !important;
}

body.category .sidebar,
body.archive .sidebar {
  display: none !important;
}

.posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.posts .post-container {
  width: auto !important;
}

/* Badge catégorie visible sur les cartes listing */
.posts .post-container .post-categories a {
  display: inline-block;
}

@media (max-width: 900px) {
  .posts {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .posts {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   20. TEASER PAYWALL PREMIUM
   ============================================================ */

.pmpro_content_message {
  background: linear-gradient(135deg, #0D0B00, #111, #0D0B00);
  border: 1px solid rgba(200, 150, 12, 0.2);
  border-radius: 14px;
  padding: 35px 30px;
  text-align: center;
  margin: 30px 0;
  position: relative;
}

/* Fondu du contenu coupé avant le bloc paywall */
.pmpro_content_message::before {
  content: '';
  position: absolute;
  top: -80px;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(transparent, #111);
  pointer-events: none;
}

.pmpro_content_message p {
  color: #E8E8E8;
  font-size: 1.05em;
}

.pmpro_content_message a {
  display: inline-block;
  background: #C8960C;
  color: #000 !important;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  padding: 12px 30px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: background 0.3s ease, transform 0.2s ease;
}

.pmpro_content_message a:hover {
  background: #E0A80D;
  transform: translateY(-1px);
}

@media (max-width: 600px) {
  .pmpro_content_message {
    padding: 25px 18px;
  }

  .pmpro_content_message a {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
}

/* ============================================================
   17. RESPONSIVE
   ============================================================ */

@media (max-width: 1000px) {
  .navigation-inner, nav.navigation-inner { height: 44px !important; }
  header.header, header.header .header-inner { height: 110px !important; }
  .navigation, .navigation.section,
  .navigation.section.no-padding,
  .navigation.section.no-padding.bg-dark { top: 110px !important; }
  header.header .custom-logo-link img,
  header.header img.custom-logo { max-height: 90px !important; }
  .main-navigation .menu > li > a,
  #primary-menu > li > a {
    padding: 11px 10px !important;
    font-size: 0.8em !important;
    letter-spacing: 1.5px !important;
  }
  .wrapper.section.medium-padding,
  main.wrapper.section.medium-padding { padding-top: 170px !important; }
}

@media (max-width: 768px) {
  body { font-size: 17px !important; }

  /* Header : logo reduit, barre reduite */
  header.header, header.header .header-inner { height: 80px !important; }
  header.header .custom-logo-link img,
  header.header img.custom-logo { max-height: 60px !important; }

  /* Nav passe sous le header */
  .navigation, .navigation.section,
  .navigation.section.no-padding,
  .navigation.section.no-padding.bg-dark { top: 80px !important; }
  .navigation-inner, nav.navigation-inner { height: 44px !important; }

  .wrapper.section.medium-padding,
  main.wrapper.section.medium-padding { padding-top: 140px !important; }

  .post-container { width: 50% !important; }

  button.nav-toggle { display: block !important; }
  .main-navigation { display: none !important; }

  .mobile-navigation {
    background: var(--mbp-dark) !important;
    border-bottom: 1px solid var(--mbp-border) !important;
    margin-top: 124px !important;
  }
  .mobile-navigation .menu a,
  .mobile-menu a {
    color: var(--mbp-text) !important;
    font-family: 'Oswald', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
  }
  .mobile-navigation .menu a:hover,
  .mobile-menu .current-menu-item a { color: var(--mbp-gold-light) !important; }

  body.single .content.fleft,
  body.page .content.fleft {
    width: 100% !important;
    float: none !important;
  }
  aside.sidebar, .sidebar.fright {
    width: 100% !important;
    float: none !important;
    margin-top: 30px !important;
  }

  button, input[type="submit"], .button { min-height: 44px !important; }

  /* Homepage responsive */
  .mbp-hero { padding: 40px 20px 35px; }
  .mbp-hero-title { font-size: 1.8em !important; }
  .mbp-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .mbp-card { padding: 22px 18px; }
}

@media (max-width: 500px) {
  .post-container { width: 100% !important; }
  h1 { font-size: 1.5em !important; }
  h2 { font-size: 1.2em !important; }
  .posts .post .featured-media img { height: 180px !important; }

  .mbp-hero-title { font-size: 1.5em !important; letter-spacing: 1px !important; }
  .mbp-grid { grid-template-columns: 1fr; }
  .mbp-cta-group { flex-direction: column; align-items: center; }
}

/* ============================================================
   18. BARRE ADMIN WP
   ============================================================ */

body.admin-bar header.header { top: 32px !important; }
body.admin-bar .navigation,
body.admin-bar .navigation.section { top: 192px !important; }

@media (max-width: 782px) {
  body.admin-bar header.header { top: 46px !important; }
  body.admin-bar .navigation,
  body.admin-bar .navigation.section { top: 206px !important; }
}

/* ============================================================
   19. WOOCOMMERCE — /mon-compte/ et pages WC sur fond noir
   ============================================================ */

/* Texte de base WC en gris clair pour lisibilité */
.woocommerce,
.woocommerce p,
.woocommerce li,
.woocommerce td,
.woocommerce th,
.woocommerce dl,
.woocommerce label,
.woocommerce-page,
.woocommerce-page p,
.woocommerce-page li,
.woocommerce-MyAccount-content,
.woocommerce-MyAccount-content p,
.woocommerce-MyAccount-content li,
.woocommerce-MyAccount-content td,
.woocommerce-MyAccount-content th,
.woocommerce-account .entry-content,
.woocommerce-account .entry-content p,
.woocommerce-account .entry-content li {
  color: #d6d6d6 !important;
}

/* Titres WC en blanc */
.woocommerce h1, .woocommerce h2, .woocommerce h3, .woocommerce h4, .woocommerce h5, .woocommerce h6,
.woocommerce-MyAccount-content h1,
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3,
.woocommerce-account h1,
.woocommerce-account h2,
.woocommerce-account h3 {
  color: #ffffff !important;
}

/* Texte fort WC en blanc */
.woocommerce strong,
.woocommerce b,
.woocommerce-MyAccount-content strong,
.woocommerce-MyAccount-content b {
  color: #ffffff !important;
}

/* Liens WC en jaune */
.woocommerce a,
.woocommerce-MyAccount-content a,
.woocommerce-account a {
  color: #FFD700 !important;
  text-decoration: none;
}
.woocommerce a:hover,
.woocommerce-MyAccount-content a:hover,
.woocommerce-account a:hover {
  color: #E8B420 !important;
  text-decoration: underline;
}

/* Navigation "Mon compte" (sidebar) */
.woocommerce-MyAccount-navigation ul,
.woocommerce-MyAccount-navigation li {
  list-style: none !important;
}
.woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid #2a2a2a !important;
  padding: 10px 0 !important;
}
.woocommerce-MyAccount-navigation li a {
  color: #d6d6d6 !important;
  font-family: 'Oswald', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.95em;
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
  color: #FFD700 !important;
}

/* Notices (messages info/succès/erreur) */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
  background: #1a1a1a !important;
  color: #ffffff !important;
  border-left: 4px solid #FFD700 !important;
  padding: 14px 18px !important;
}
.woocommerce-error {
  border-left-color: #e74c3c !important;
}

/* Inputs et formulaires WC */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea {
  background: #0A0A0A !important;
  border: 1px solid #2A2A2A !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  padding: 12px 15px !important;
}
.woocommerce form .form-row label,
.woocommerce-page form .form-row label {
  color: #aaa !important;
  font-family: 'Oswald', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.85em;
}

/* Boutons WC */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background: #FFD700 !important;
  color: #0A0A0A !important;
  border: none !important;
  font-family: 'Oswald', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
  padding: 12px 24px !important;
  border-radius: 8px !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: #E8B420 !important;
  color: #0A0A0A !important;
}

/* Tableaux WC (commandes, téléchargements...) */
.woocommerce table.shop_table {
  background: #0A0A0A !important;
  border: 1px solid #2A2A2A !important;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  color: #d6d6d6 !important;
  border-color: #2A2A2A !important;
}
.woocommerce table.shop_table thead th {
  color: #ffffff !important;
  background: #1a1a1a !important;
}

/* Encarts statut membre MBP dans /mon-compte/ */
.woocommerce-MyAccount-content .mbp-member-status,
.mbp-member-box,
.mbp-status-box,
.mbp-download-limiter,
.mbp-download-limiter-box,
.mbp-dashboard-box {
  background: #1a1a1a !important;
  border: 1px solid #FFD700 !important;
  color: #ffffff !important;
  padding: 16px !important;
  border-radius: 8px !important;
}
.mbp-download-limiter *,
.mbp-download-limiter-box *,
.mbp-dashboard-box * {
  color: #ffffff !important;
}
.mbp-download-limiter a,
.mbp-download-limiter-box a,
.mbp-dashboard-box a {
  color: #FFD700 !important;
}

/* Placeholders WC lisibles (code promo, etc.) */
.woocommerce input::placeholder,
.woocommerce-page input::placeholder,
.woocommerce form .form-row input.input-text::placeholder,
.woocommerce-cart input[name="coupon_code"]::placeholder,
input[name="coupon_code"]::placeholder {
  color: #888 !important;
  opacity: 1 !important;
}

/* Champ coupon panier + bouton */
.woocommerce-cart .coupon input[name="coupon_code"],
form.checkout_coupon input.input-text,
.woocommerce-form-coupon input.input-text {
  background: #0A0A0A !important;
  border: 1px solid #2A2A2A !important;
  color: #ffffff !important;
  padding: 12px 15px !important;
  border-radius: 8px !important;
}

/* Liens "Modifier", "Retour au panier", etc. sur page commande reçue */
.woocommerce .woocommerce-order a,
.woocommerce-order-received a,
.woocommerce-thankyou-order-received,
.entry-content .post-edit-link,
a.post-edit-link {
  color: #FFD700 !important;
}
a.post-edit-link:hover,
.entry-content .post-edit-link:hover {
  color: #E8B420 !important;
}

/* Tableau détails commande (order details) */
.woocommerce table.woocommerce-table--order-details,
.woocommerce table.woocommerce-table--order-downloads,
.woocommerce-order-details table {
  background: #0A0A0A !important;
}
.woocommerce-order-details h2,
.woocommerce-column__title,
.woocommerce-customer-details h2 {
  color: #ffffff !important;
}

/* Adresse facturation (box grise par défaut) */
.woocommerce-customer-details address {
  background: #1a1a1a !important;
  border: 1px solid #2A2A2A !important;
  color: #d6d6d6 !important;
  padding: 14px !important;
  border-radius: 8px !important;
}

/* Notice "Merci. Votre commande a été reçue." */
.woocommerce-notice--success,
.woocommerce-thankyou-order-received {
  color: #ffffff !important;
  font-weight: 500;
}

/* ============================================================
   20. FIX AGRESSIFS — /mon-compte/ onglets
   ============================================================ */

/* MBP widgets (download-limiter, dashboard, status) — toute variante de classe */
.woocommerce-MyAccount-content [class*="mbp-download"],
.woocommerce-MyAccount-content [class*="mbp-limiter"],
.woocommerce-MyAccount-content [class*="mbp-dashboard"],
.woocommerce-MyAccount-content [class*="mbp-member"],
.woocommerce-MyAccount-content [class*="mbp-status"],
.woocommerce-MyAccount-content [class*="mbp-widget"],
.woocommerce-MyAccount-content [class*="mbp-card"],
.woocommerce-MyAccount-content [class*="mbp-box"] {
  background: #1a1a1a !important;
  color: #ffffff !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 8px !important;
  padding: 16px !important;
  margin-bottom: 16px !important;
}
.woocommerce-MyAccount-content [class*="mbp-download"] *,
.woocommerce-MyAccount-content [class*="mbp-limiter"] *,
.woocommerce-MyAccount-content [class*="mbp-dashboard"] *,
.woocommerce-MyAccount-content [class*="mbp-member"] *,
.woocommerce-MyAccount-content [class*="mbp-status"] *,
.woocommerce-MyAccount-content [class*="mbp-widget"] *,
.woocommerce-MyAccount-content [class*="mbp-card"] *,
.woocommerce-MyAccount-content [class*="mbp-box"] * {
  color: inherit !important;
  background-color: transparent !important;
}
/* Mais on garde le jaune pour les liens et les boutons à l'intérieur */
.woocommerce-MyAccount-content [class*="mbp-"] a:not(.button):not([class*="btn"]) {
  color: #FFD700 !important;
}
.woocommerce-MyAccount-content [class*="mbp-"] .button,
.woocommerce-MyAccount-content [class*="mbp-"] [class*="btn"],
.woocommerce-MyAccount-content [class*="mbp-"] a[class*="btn"],
.woocommerce-MyAccount-content [class*="mbp-"] .mbp-btn-premium {
  background: #FFD700 !important;
  color: #0A0A0A !important;
}

/* Cache icônes bugs/widgets parasites (dashicons admin qui fuient dans la page) */
.woocommerce-MyAccount-content .dashicons-admin-tools,
.woocommerce-MyAccount-content > .dashicons {
  display: none !important;
}

/* Onglet "Adresses" — boxes adresse blanches */
.woocommerce-MyAccount-content address,
.woocommerce-Address address,
.woocommerce .col-1 address,
.woocommerce .col-2 address {
  background: #1a1a1a !important;
  color: #ffffff !important;
  border: 1px solid #2a2a2a !important;
  padding: 14px 18px !important;
  border-radius: 8px !important;
  font-style: normal;
  line-height: 1.6;
}

/* Titres des onglets adresses */
.woocommerce-MyAccount-content .woocommerce-Address-title h3,
.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
  color: #ffffff !important;
}

/* Onglet "Moyens de paiement" — notice vide */
.woocommerce-MyAccount-paymentMethods-heading,
.woocommerce-Message,
.woocommerce-notice {
  background: #1a1a1a !important;
  color: #ffffff !important;
  border: 1px solid #2a2a2a !important;
  border-left: 4px solid #FFD700 !important;
  padding: 14px 18px !important;
  border-radius: 8px !important;
}

/* Onglet "Téléchargements" — notice vide idem */
.woocommerce-MyAccount-downloads .woocommerce-info,
.woocommerce-info {
  background: #1a1a1a !important;
  color: #ffffff !important;
  border-left: 4px solid #FFD700 !important;
}

/* Onglet "Détails du compte" — champs mot de passe jaunes (autofill Chrome) */
.woocommerce-MyAccount-content input[type="password"],
.woocommerce-EditAccountForm input[type="password"],
input[type="password"].woocommerce-Input {
  background: #0A0A0A !important;
  -webkit-box-shadow: 0 0 0 1000px #0A0A0A inset !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  caret-color: #ffffff !important;
  border: 1px solid #2a2a2a !important;
}
/* Override autofill navigateur sur TOUS les inputs WC */
.woocommerce input:-webkit-autofill,
.woocommerce-page input:-webkit-autofill,
.woocommerce-MyAccount-content input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #0A0A0A inset !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;
}

/* Fieldset "Changement de mot de passe" */
.woocommerce-EditAccountForm fieldset {
  background: transparent !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 8px !important;
  padding: 18px !important;
  margin-top: 20px !important;
}
.woocommerce-EditAccountForm fieldset legend {
  background: #FFD700 !important;
  color: #0A0A0A !important;
  padding: 4px 14px !important;
  font-family: 'Oswald', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 4px;
}

/* Texte d'aide des champs (span.description, em) */
.woocommerce form .form-row span.description,
.woocommerce-MyAccount-content em,
.woocommerce-MyAccount-content .description {
  color: #999 !important;
  font-style: italic;
}

/* ============================================================
   20. FIX BUGS MOBILE
   ============================================================
   - Widget Google Translate : masqué (rajoute 50-80px au header)
   - Hamburger : repositionné en haut-gauche, visible
   - Header overflow clippé pour éviter les débordements
   ============================================================ */

/* Masquer le widget de traduction (plugin gtranslate ET Google natif) */
#google_translate_element,
.goog-te-banner-frame,
.skiptranslate.goog-te-gadget,
.goog-te-gadget,
.gtranslate_wrapper,
[id^="gt-wrapper-"],
[id^="gt-container-"] {
  display: none !important;
}

/* Annuler l'offset top injecté par Google Translate sur body
   (on ne touche PAS à position: pour ne pas casser l'admin bar WP
   ni les plugins qui s'ancrent sur body) */
body {
  top: 0 !important;
}

/* Empêcher tout scroll horizontal sur mobile (cartes inline qui débordent) */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
}

/* Cacher la sidebar WP + footer thème + credits sur TOUTES les pages V4
   (les pages V4 — homepage, outils, premium, contact, etc. — ont leur propre
   footer custom ou structure dédiée, la sidebar fait doublon et perturbe
   la fin du site. On garde la sidebar visible sur les articles single du blog.) */
body.page aside.sidebar,
body.page .sidebar.fright,
body.page .footer.bg-graphite,
body.page #footer,
body.page .credits {
  display: none !important;
}

/* Forcer le contenu en pleine largeur sur toutes les pages V4 */
body.page .content.fleft,
body.page .content {
  width: 100% !important;
  float: none !important;
  max-width: 100% !important;
}

/* Forcer les grilles inline 2-cols à 1 colonne sur petit mobile (Outils etc.) */
@media (max-width: 500px) {
  div[style*="grid-template-columns:repeat(2"],
  div[style*="grid-template-columns: repeat(2"] {
    grid-template-columns: 1fr !important;
  }
}

/* Hamburger : SVG en background-image (compatible iOS Safari/Chrome où ::before sur les boutons est buggé) */
@media (max-width: 768px) {
  button.nav-toggle,
  .nav-toggle {
    display: inline-block !important;
    position: fixed !important; /* Fixed au viewport pour être au niveau du logo dans le header */
    left: 16px !important;
    top: 19px !important; /* Centré verticalement dans le header de 85px (85-44)/2 ≈ 19 */
    transform: none !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    cursor: pointer !important;
    z-index: 100005 !important; /* Au-dessus du header (100000) et du logo (100003) */
    /* Cache le texte "Menu" du bouton natif Baskerville */
    font-size: 0 !important;
    color: transparent !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    line-height: 0 !important;
    /* Hamburger sobre : pas de bordure, pas de fond, juste 3 barres blanches */
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    /* 3 barres blanches fines (3px) et compactes (22px) */
    background-image:
      linear-gradient(#FFFFFF, #FFFFFF),
      linear-gradient(#FFFFFF, #FFFFFF),
      linear-gradient(#FFFFFF, #FFFFFF) !important;
    background-size: 22px 3px, 22px 3px, 22px 3px !important;
    background-position: center 14px, center 21px, center 28px !important;
    background-repeat: no-repeat !important;
    transition: background-image 0.25s ease !important;
  }

  /* Hover : zone plus visible + barres claires */
  button.nav-toggle:hover,
  .nav-toggle:hover {
    background-color: rgba(200, 150, 12, 0.15) !important;
    background-image:
      linear-gradient(#FFFFFF, #FFFFFF),
      linear-gradient(#FFFFFF, #FFFFFF),
      linear-gradient(#FFFFFF, #FFFFFF) !important;
  }

  button.nav-toggle:focus-visible,
  .nav-toggle:focus-visible {
    outline: 2px solid var(--mbp-gold) !important;
    outline-offset: 2px !important;
  }

  /* Si le thème a aussi des .bar enfants (Baskerville variantes), les masquer */
  button.nav-toggle .bar,
  .nav-toggle .bar {
    display: none !important;
  }

  /* CACHER AGRESSIVEMENT toutes icônes parasites (jetpack social, site-title, search) sur mobile */
  header.header .jetpack-social-navigation,
  header.header nav.jetpack-social-navigation,
  header.header .site-title,
  header.header .site-description,
  header.header p.site-title,
  header.header p.site-description,
  header.header .menu-social-menu-container,
  .navigation .jetpack-social-navigation,
  .navigation .search-toggle,
  .navigation .search-icon,
  .navigation .header-search-block,
  .navigation #search-container,
  nav.navigation-inner > a:not(.nav-toggle),
  nav.navigation-inner > .search-toggle,
  nav.navigation-inner > .header-search-block,
  nav.navigation-inner > nav.jetpack-social-navigation {
    display: none !important;
    visibility: hidden !important;
  }

  /* Menu mobile : OVERLAY PLEIN ÉCRAN qui couvre tout sauf header+nav du haut */
  .main-navigation.mbp-menu-open {
    display: block !important;
    position: fixed !important;
    top: 85px !important; /* sous le header de 85px */
    bottom: 0 !important; /* couvre jusqu'en bas du viewport */
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: calc(100vh - 85px) !important; /* hauteur explicite pour couvrir tout l'espace restant */
    background-color: #000000 !important;
    background-image: none !important;
    opacity: 1 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-top: 1px solid var(--mbp-gold) !important;
    border-bottom: 1px solid var(--mbp-gold) !important;
    z-index: 100010 !important;
    padding: 0 !important;
    margin: 0 !important;
    max-height: calc(100vh - 85px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
  }

  /* Liste du menu en colonne, items pleine largeur, fond noir solide pour cacher contenu derrière */
  .main-navigation.mbp-menu-open .menu,
  .main-navigation.mbp-menu-open #primary-menu {
    display: flex !important;
    flex-direction: column !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    background-color: #000000 !important;
    opacity: 1 !important;
  }

  .main-navigation.mbp-menu-open .menu > li,
  .main-navigation.mbp-menu-open #primary-menu > li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid #1A1A1A !important;
    display: block !important;
    float: none !important;
    width: 100% !important;
  }

  .main-navigation.mbp-menu-open .menu > li:last-child,
  .main-navigation.mbp-menu-open #primary-menu > li:last-child {
    border-bottom: none !important;
  }

  .main-navigation.mbp-menu-open .menu > li > a,
  .main-navigation.mbp-menu-open #primary-menu > li > a {
    display: block !important;
    padding: 18px 25px !important;
    color: #E8E8E8 !important;
    font-family: 'Oswald', sans-serif !important;
    font-size: 1em !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    text-decoration: none !important;
    transition: background 0.2s ease, color 0.2s ease !important;
  }

  .main-navigation.mbp-menu-open .menu > li > a:hover,
  .main-navigation.mbp-menu-open .menu > li > a:active,
  .main-navigation.mbp-menu-open #primary-menu > li > a:hover,
  .main-navigation.mbp-menu-open #primary-menu > li > a:active {
    background: rgba(200, 150, 12, 0.1) !important;
    color: var(--mbp-gold) !important;
  }

  /* Cacher l'underline animé desktop */
  .main-navigation.mbp-menu-open .menu > li > a::after,
  .main-navigation.mbp-menu-open #primary-menu > li > a::after {
    display: none !important;
  }

  /* Sub-menus dans le menu mobile : afficher en indentation */
  .main-navigation.mbp-menu-open .sub-menu {
    display: block !important;
    background: rgba(255, 255, 255, 0.03) !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .main-navigation.mbp-menu-open .sub-menu li a {
    padding: 12px 25px 12px 45px !important;
    font-size: 0.9em !important;
    color: #999 !important;
  }

  /* Nav bar mobile : CACHÉE (le hamburger est désormais dans le header au niveau du logo)
     IMPORTANT : pas de backdrop-filter sinon ça casse le positionnement fixed du menu enfant */
  .navigation,
  .navigation.section,
  .navigation.section.no-padding,
  .navigation.section.no-padding.bg-dark {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 0 !important;
    overflow: visible !important;
    z-index: 100002 !important;
    background: transparent !important;
    border: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Header très compact (85px) — logo 55px centré
     IMPORTANT : reproduire EXACTEMENT les sélecteurs de la règle de base (ligne 89)
     pour battre la specificity 0,0,3,1 — sinon le mobile reste à 160px */
  header.header,
  header.header.section,
  header.header.bg-dark,
  header.header.bg-dark.bg-image,
  .header.section.small-padding,
  header.header .header-inner {
    height: 85px !important;
    padding: 0 !important;
    min-height: 85px !important;
    max-height: 85px !important;
  }
  header.header .custom-logo-link {
    position: relative !important;
    z-index: 100003 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
  }
  header.header .custom-logo-link img,
  header.header img.custom-logo {
    /* Dimensions explicites pour forcer le rendu correct
       (width="2130" height="1472" en HTML, ratio ~1.447) */
    width: 80px !important;
    height: 55px !important;
    max-width: 80px !important;
    max-height: 55px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: block !important;
    position: relative !important;
    z-index: 100003 !important;
    object-fit: contain !important;
    object-position: center !important;
    aspect-ratio: 2130 / 1472 !important;
    flex-shrink: 0 !important;
  }

  /* Header : overflow VISIBLE pour ne pas clipper le bas du logo
     (Google Translate widget qu'on cherchait à clipper est déjà caché par règle dédiée) */
  header.header,
  header.header.section,
  header.header.bg-dark,
  header.header.bg-dark.bg-image {
    overflow: visible !important;
  }

  /* Padding-top wrapper ajusté (header 85px seul, plus de nav bar à compenser) */
  .wrapper.section.medium-padding,
  main.wrapper.section.medium-padding {
    padding-top: 95px !important;
  }

}

/* ============================================================
   23. SEARCH MAGNIFIER (miroir du hamburger, à droite du logo)
   ============================================================
   On AFFICHE la loupe en haut-droite (au niveau du logo et du hamburger).
   On CACHE l'overlay (.header-search-block) qui est buggé sur mobile.
   La loupe reste cliquable et déclenche le toggle natif du thème.
   ============================================================ */

@media (max-width: 768px) {
  /* Loupe visible en haut-droite, fixed au viewport, miroir du hamburger */
  .search-toggle,
  .search-toggle.search-icon,
  .search-toggle.search-icon.fright {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: fixed !important;
    right: 16px !important;
    top: 19px !important;
    width: 44px !important;
    height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    z-index: 100005 !important;
    /* Loupe dessinée en CSS : cercle + manche */
    background-image:
      radial-gradient(circle at center, transparent 9px, #FFFFFF 9px, #FFFFFF 11px, transparent 11px),
      linear-gradient(135deg, transparent 50%, #FFFFFF 50%, #FFFFFF 60%, transparent 60%);
    background-size: 22px 22px, 10px 10px;
    background-position: center 8px, calc(50% + 8px) calc(50% + 8px);
    background-repeat: no-repeat;
  }

  /* Si le thème met du contenu texte dans le bouton, on le cache via text-indent + couleur */
  .search-toggle:not([class*="screen-reader"]) {
    color: transparent !important;
    font-size: 0 !important;
  }

  /* Search overlay caché par défaut (.hidden classe injectée par le thème) */
  .header-search-block.hidden,
  #search-container.hidden {
    display: none !important;
  }

  /* Search overlay AFFICHÉ uniquement quand pas .hidden : plein header, aligné avec hamburger/loupe */
  .header-search-block:not(.hidden),
  #search-container:not(.hidden) {
    z-index: 100015 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: 85px !important;
    padding: 19px 70px 19px 70px !important; /* 70px de padding pour laisser place au hamburger et à la loupe */
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    background: rgba(0, 0, 0, 0.95) !important;
  }

  /* Search FORM : prend tout l'espace dispo */
  .header-search-block .search-form,
  #search-container .search-form {
    width: 100% !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Search input : aligné dans le header, plus de margin négative */
  .header-search-block .search-field,
  .header-search-block input.search-field,
  #search-container .search-field,
  #search-container input.search-field {
    margin: 0 !important;
    padding: 8px 14px !important;
    height: 44px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: #0A0A0A !important;
    border: 1px solid var(--mbp-border-light) !important;
    border-radius: 8px !important;
    color: var(--mbp-text) !important;
    font-size: 0.95em !important;
    line-height: 1 !important;
  }

  /* Bouton submit search : visible et stylé en or, à droite de l'input */
  .header-search-block .search-submit,
  #search-container .search-submit,
  .header-search-block input.search-submit,
  #search-container input.search-submit {
    display: inline-block !important;
    visibility: visible !important;
    background: var(--mbp-gold) !important;
    color: #0A0A0A !important;
    border: none !important;
    border-radius: 0 8px 8px 0 !important;
    height: 44px !important;
    padding: 0 16px !important;
    margin-left: -8px !important; /* coller à l'input qui a border-radius 8px à droite */
    font-family: 'Oswald', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.85em !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }

  /* Input search : border-radius adapté pour coller proprement au submit à droite */
  .header-search-block:not(.hidden) .search-field,
  #search-container:not(.hidden) .search-field {
    border-radius: 8px 0 0 8px !important;
    border-right: none !important;
  }

  /* ----- 23b. FIX LAYOUT SEARCH (2026-04-28) -----
     - Cacher le bouton submit "RECHERCHER" : on tape Entrée pour valider
     - Le label englobe l'input — forcer flex:1 plein largeur sinon stack vertical buggé */
  .header-search-block .search-submit,
  #search-container .search-submit,
  .header-search-block input.search-submit,
  #search-container input.search-submit {
    display: none !important;
  }

  .header-search-block .search-form label,
  #search-container .search-form label {
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Sans submit, l'input reprend ses border-radius des deux côtés */
  .header-search-block:not(.hidden) .search-field,
  #search-container:not(.hidden) .search-field {
    border-radius: 8px !important;
    border-right: 1px solid var(--mbp-border-light) !important;
  }

  /* ----- 23c. FORM EN POSITION FIXED relative à la viewport (v3) -----
     position:absolute échouait → la form se retrouvait à y~150px au lieu de y=20.
     Le thème a sans doute un position:relative ou autre sur .search-form qui
     casse le containing block. En passant en fixed, on s'affranchit de tout
     ancêtre, l'origine est la viewport. Top: 20px aligne avec le hamburger
     (top: 19px). On force aussi position:relative sur label et input pour casser
     un éventuel positionnement absolu venu du thème. */
  .header-search-block:not(.hidden) .search-form,
  #search-container:not(.hidden) .search-form {
    position: fixed !important;
    left: 70px !important;
    right: 70px !important;
    top: 20px !important;
    height: 44px !important;
    z-index: 100020 !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    width: auto !important;
  }
  .header-search-block:not(.hidden) label,
  #search-container:not(.hidden) label {
    display: block !important;
    width: 100% !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
  }
  .header-search-block:not(.hidden) .search-field,
  #search-container:not(.hidden) .search-field {
    position: relative !important;
    top: auto !important;
    left: auto !important;
  }
}

/* ============================================================
   21. FIN DE HOMEPAGE — CTA PREMIUM + RÉSEAUX + FOOTER
   ============================================================
   Trois blocs empilés en fin de homepage :
   - .mbp-cta-premium : CTA final pour Premium
   - .mbp-social : 4 cartes réseaux sociaux
   - .mbp-footer-v4 : footer 3 colonnes avec signature
   ============================================================ */

/* ----- 21a. BLOC CTA PREMIUM ----- */

.mbp-cta-premium {
  max-width: 720px;
  margin: 0 auto;
  padding: 70px 20px 60px;
  text-align: center;
  background:
    radial-gradient(ellipse at center, rgba(200,150,12,0.06) 0%, transparent 60%),
    #0A0A0A;
  border-radius: 0;
  position: relative;
}

.mbp-cta-premium__title {
  font-family: 'Oswald', sans-serif;
  font-size: 1.7em;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-weight: 700;
  margin: 0 0 18px;
  line-height: 1.2;
}

.mbp-cta-premium__subtitle {
  font-size: 1em;
  color: #999999;
  line-height: 1.65;
  max-width: 540px;
  margin: 0 auto 32px;
}

.mbp-cta-premium__button {
  display: inline-block;
  background: var(--mbp-gold);
  color: #0A0A0A !important;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 0.95em;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 18px 36px;
  border-radius: 6px;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
  max-width: 380px;
  box-sizing: border-box;
}

.mbp-cta-premium__button:hover,
.mbp-cta-premium__button:focus-visible {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 32px rgba(200,150,12,0.35);
  color: #0A0A0A !important;
}

.mbp-cta-premium__button:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 4px;
}

.mbp-cta-premium__button:active {
  transform: translateY(0) scale(0.99);
  transition: transform 0.1s ease;
}

.mbp-cta-premium__reassurance {
  font-size: 0.8em;
  color: #666666;
  margin-top: 16px;
  letter-spacing: 0.5px;
}

@media (max-width: 768px) {
  .mbp-cta-premium {
    padding: 50px 18px 45px;
  }
  .mbp-cta-premium__title {
    font-size: 1.4em;
    letter-spacing: 3px;
  }
  .mbp-cta-premium__subtitle {
    font-size: 0.95em;
  }
  .mbp-cta-premium__button {
    width: 100%;
    max-width: none;
    padding: 16px 24px;
    font-size: 0.9em;
  }
}

/* ----- 21b. BLOC RÉSEAUX SOCIAUX ----- */

.mbp-social {
  max-width: 1100px;
  margin: 0 auto;
  padding: 50px 20px 60px;
  text-align: center;
}

.mbp-social__title {
  font-family: 'Oswald', sans-serif;
  font-size: 1.35em;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 700;
  margin: 0;
}

.mbp-social__subtitle {
  font-size: 0.92em;
  color: #888888;
  margin: 12px auto 36px;
  max-width: 520px;
  line-height: 1.6;
}

.mbp-social__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.mbp-social__item {
  list-style: none;
}

.mbp-social__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 18px;
  background: #0E0E0E;
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
  box-sizing: border-box;
}

.mbp-social__card:hover,
.mbp-social__card:focus-visible {
  border-color: var(--mbp-gold);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}

.mbp-social__card:focus-visible {
  outline: 2px solid var(--mbp-gold);
  outline-offset: 3px;
}

.mbp-social__card:active {
  transform: translateY(-2px);
  transition: transform 0.1s ease;
}

.mbp-social__icon-wrap {
  width: 56px;
  height: 56px;
  background: rgba(200,150,12,0.08);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  transition: background 0.3s ease;
}

.mbp-social__card:hover .mbp-social__icon-wrap,
.mbp-social__card:focus-visible .mbp-social__icon-wrap {
  background: rgba(200,150,12,0.15);
}

.mbp-social__icon {
  width: 28px;
  height: 28px;
  color: var(--mbp-gold);
  display: block;
}

.mbp-social__name {
  font-family: 'Oswald', sans-serif;
  font-size: 0.95em;
  color: #E8E8E8;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  font-weight: 700;
  margin: 0;
}

.mbp-social__desc {
  font-size: 0.82em;
  color: #888888;
  line-height: 1.5;
  margin: 8px 0 0;
}

.mbp-social__count {
  font-size: 0.72em;
  color: var(--mbp-gold);
  margin-top: 10px;
  letter-spacing: 1px;
  font-weight: 600;
}

@media (max-width: 899px) {
  .mbp-social__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 479px) {
  .mbp-social__grid {
    grid-template-columns: 1fr;
  }
  .mbp-social {
    padding: 40px 18px 50px;
  }
}

/* ----- 21c. FOOTER V4 ----- */

.mbp-footer-v4 {
  background: #040404;
  padding: 60px 20px 30px;
  border-top: 1px solid rgba(200,150,12,0.12);
  margin-top: 0;
}

.mbp-footer-v4__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 50px;
}

.mbp-footer-v4__col-title {
  font-family: 'Oswald', sans-serif;
  font-size: 0.78em;
  color: var(--mbp-gold);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 700;
  margin: 0 0 20px;
}

.mbp-footer-v4__brand-logo {
  max-width: 130px;
  margin-bottom: 18px;
  display: block;
}

.mbp-footer-v4__tagline {
  font-size: 0.88em;
  color: #888888;
  line-height: 1.6;
  max-width: 260px;
  margin: 0;
}

.mbp-footer-v4__subtagline {
  font-size: 0.72em;
  color: #555555;
  margin-top: 10px;
  letter-spacing: 0.5px;
  line-height: 1.6;
}

.mbp-footer-v4__nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mbp-footer-v4__nav li {
  list-style: none;
  margin: 0;
}

.mbp-footer-v4__nav a {
  font-size: 0.92em;
  color: #AAAAAA;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  text-decoration: none;
  display: block;
  padding: 7px 0;
  transition: color 0.2s ease;
}

.mbp-footer-v4__nav a:hover,
.mbp-footer-v4__nav a:focus {
  color: var(--mbp-gold-light);
}

.mbp-footer-v4__bottom {
  border-top: 1px solid #161616;
  margin-top: 50px;
  padding-top: 25px;
  text-align: center;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.mbp-footer-v4__signature {
  font-size: 0.82em;
  color: #777777;
  margin: 0 0 10px;
  font-style: normal;
}

.mbp-footer-v4__copyright {
  font-size: 0.78em;
  color: #555555;
  margin: 0 0 15px;
}

.mbp-footer-v4__top-link {
  font-size: 0.75em;
  color: #555555;
  text-decoration: none;
  transition: color 0.2s ease;
}

.mbp-footer-v4__top-link:hover,
.mbp-footer-v4__top-link:focus {
  color: var(--mbp-gold);
}

@media (max-width: 768px) {
  .mbp-footer-v4__inner {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .mbp-footer-v4 {
    padding: 45px 18px 25px;
  }
  .mbp-footer-v4__bottom {
    margin-top: 35px;
  }
}

/* ============================================================
   22. GLOBAL TWEAKS — applique à tout le site
   ============================================================ */

/* Smooth scroll pour les ancres (#top du footer, etc.)
   On respecte la préférence "réduire les animations" */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}