/* ============================================================
   MANIAK BRAND OVERRIDES
   Surcharge la palette du thème delta avec le code couleur
   officiel Maniak.ch (violet livres + orange magazines).
   Charge ce fichier APRÈS css/style.css dans head.php.
   ============================================================ */

:root {
  /* Violet livres & BD */
  --m-violet-1: #4f46e5;
  --m-violet-2: #7c3aed;
  --m-violet-3: #a855f7;
  --m-violet-pastel: #faf5ff;
  --m-violet-dark: #4338ca;
  /* Orange magazines */
  --m-orange-1: #ea580c;
  --m-orange-2: #f97316;
  --m-orange-3: #fbbf24;
  --m-orange-pastel: #fff7ed;
  /* Gradient principal Maniak (violet — défaut) */
  --m-grad: linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #a855f7 100%);
  --m-grad-mags: linear-gradient(135deg, #ea580c 0%, #f97316 50%, #fbbf24 100%);
  --m-grad-hover: linear-gradient(135deg, #4338ca 0%, #6d28d9 55%, #9333ea 100%);
}

/* === Liens globaux : bleu cyan #0d9ecc → violet Maniak === */
a { color: var(--m-violet-2); }
a:hover { color: var(--m-violet-1); text-decoration: underline; }

/* === Boutons primaires OSclass === */
.btn:not(.btn-cancel):not(.btn-secondary):not(.no-brand),
button.btn:not(.btn-cancel):not(.btn-secondary):not(.no-brand),
input[type="submit"].btn,
.complete-contact,
.complete-publish,
.complete-edit,
.complete-search,
.complete-recover,
.complete-register,
.complete-login,
.complete-msg {
  background: var(--m-grad) !important;
  background-color: var(--m-violet-2) !important;
  border: none !important;
  color: #fff !important;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:not(.btn-cancel):not(.btn-secondary):not(.no-brand):hover,
button.btn:not(.btn-cancel):not(.btn-secondary):not(.no-brand):hover,
input[type="submit"].btn:hover,
.complete-contact:hover,
.complete-publish:hover,
.complete-edit:hover,
.complete-search:hover,
.complete-recover:hover,
.complete-register:hover,
.complete-login:hover,
.complete-msg:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(124, 58, 237, .25);
  color: #fff !important;
}

/* === Boutons secondaires (cancel, back) — restent neutres === */
.btn.btn-cancel, .btn.btn-secondary, .btn.no-brand {
  background: #f3f4f6 !important;
  color: #374151 !important;
  border: 1px solid #e5e7eb !important;
}
.btn.btn-cancel:hover, .btn.btn-secondary:hover {
  background: #e5e7eb !important;
}

/* === Search bar bouton "Rechercher" === */
#search-bar .wb .btn,
#search-bar input[type="submit"],
.searchbar-btn {
  background: var(--m-grad) !important;
  color: #fff !important;
  border: none !important;
}

/* === Form inputs focus en violet === */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  border-color: var(--m-violet-2) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .12) !important;
  outline: none;
}

/* === Footer .pub-box (bannière "Earn money") : passe en violet === */
footer .pub-box {
  background: var(--m-grad) !important;
  color: #fff !important;
}
footer .pub-box h3, footer .pub-box h4, footer .pub-box p {
  color: #fff !important;
}
footer .pub-box .button a {
  background: #fbbf24 !important;
  color: #fff !important;
}
footer .pub-box .button a:hover {
  background: #f59e0b !important;
}

/* === Footer principal : conserve la palette sombre mais accent violet === */
footer a:hover { color: var(--m-orange-3); }
footer .line3 ul li a:hover { color: var(--m-orange-3); }

/* === Pagination active === */
.pagination .active a,
.pagination li.active span,
.pagination li.active a {
  background: var(--m-grad) !important;
  color: #fff !important;
  border-color: var(--m-violet-2) !important;
}
.pagination a:hover {
  background: var(--m-violet-pastel) !important;
  color: var(--m-violet-2) !important;
  border-color: var(--m-violet-2) !important;
}

/* === Alert / message banners === */
.alert.alert-info, .alert-info,
.flashmessage-info {
  background: var(--m-violet-pastel) !important;
  border-left: 4px solid var(--m-violet-2) !important;
  color: var(--m-violet-dark) !important;
}
.flashmessage-ok, .alert.alert-success {
  background: #ecfdf5 !important;
  border-left: 4px solid #10b981 !important;
  color: #065f46 !important;
}
.flashmessage-error, .alert.alert-danger {
  background: #fef2f2 !important;
  border-left: 4px solid #ef4444 !important;
  color: #991b1b !important;
}

/* === Item page : prix, badges, share buttons === */
.item-price, #item-summary .price {
  color: var(--m-violet-2) !important;
}
.item-tag, .item-badge {
  background: var(--m-grad) !important;
  color: #fff !important;
}

/* === Framework .cgu-page (CGU + 4 pages d'aide) === */
/* Passe l'accent bleu #4182c3 en violet Maniak */
.cgu-page .cgu-hero {
  background: var(--m-grad) !important;
  box-shadow: 0 4px 20px rgba(124, 58, 237, .2) !important;
}
.cgu-page .cgu-intro {
  border-left-color: var(--m-violet-2) !important;
}
.cgu-page .cgu-toc h2 { color: var(--m-violet-2) !important; }
.cgu-page .cgu-toc a:hover {
  background: var(--m-violet-pastel) !important;
  color: var(--m-violet-2) !important;
}
.cgu-page .cgu-toc a::before { color: var(--m-violet-2) !important; }
.cgu-page .cgu-section h3 .num {
  background: var(--m-violet-2) !important;
}
.cgu-page .cgu-callout.info {
  background: var(--m-violet-pastel) !important;
  border-left-color: var(--m-violet-2) !important;
}
.cgu-page .cgu-callout.info .body strong { color: var(--m-violet-2) !important; }
.cgu-page .cgu-defs .def dt { color: var(--m-violet-2) !important; }
.cgu-page .cgu-legal-ref {
  background: var(--m-violet-pastel) !important;
  color: var(--m-violet-2) !important;
}
.cgu-page .cgu-cta {
  background: linear-gradient(135deg, #f8fafc 0%, var(--m-violet-pastel) 100%) !important;
}
.cgu-page .cgu-cta a {
  background: var(--m-grad) !important;
  color: #fff !important;
}
.cgu-page .cgu-cta a:hover {
  filter: brightness(1.08);
  box-shadow: 0 4px 12px rgba(124, 58, 237, .3) !important;
  background: var(--m-grad) !important;
}

/* === User dashboard / mes annonces : icônes / accents === */
.user-top-menu .umenu a.active,
.user-top-menu .umenu a:hover {
  background: var(--m-violet-pastel) !important;
  color: var(--m-violet-2) !important;
}

/* === Login / register page === */
.login-form .btn.complete-login,
.register-form .btn.complete-register,
.recover-form .btn.complete-recover {
  background: var(--m-grad) !important;
}

/* === Estimer / Comparer / Sitemap : surcharges === */
/* (déjà violet inline dans inc.category.php — pas besoin) */

/* === Newsletter footer (déjà violet/jaune) — laisse === */

/* === Variant "magazines" pour zones spécifiques (à activer
       en ajoutant la classe .m-mags sur un container) === */
.m-mags .btn:not(.btn-cancel):not(.no-brand),
.m-mags button.btn:not(.btn-cancel):not(.no-brand),
.m-mags .pagination .active a,
.m-mags .item-tag {
  background: var(--m-grad-mags) !important;
}
.m-mags a { color: var(--m-orange-1); }
.m-mags a:hover { color: var(--m-orange-2); }

/* === Boutons de partage (item.php) — gardent leurs couleurs marque === */
.maniak-share-btn { /* WhatsApp/FB/X gardent leurs couleurs natives */ }

/* === Responsive : ombre boutons réduite sur mobile pour ne pas surcharger === */
@media (max-width: 720px) {
  .btn, button.btn { box-shadow: none; }
  .btn:hover, button.btn:hover {
    box-shadow: 0 3px 8px rgba(124, 58, 237, .2);
    transform: none;
  }
}

/* === Bouton 'Publier une annonce' du header — jaune (CTA pop) === */
header .right a.publish.btn,
header .right a.publish,
#home-pub a.publish,
#search-pub .subscribe {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
  border-radius: 100px !important;
  border: none !important;
  box-shadow: 0 3px 10px rgba(251, 191, 36, .35) !important;
  transition: transform .15s ease, box-shadow .2s ease, filter .15s ease !important;
  height: 40px !important;
}
header .right a.publish > span,
header .right a.publish:hover > span,
#home-pub a.publish > span,
#search-pub .subscribe > span {
  background: transparent !important;
  color: #fff !important;
  font-weight: 700 !important;
  border: none !important;
}
header .right a.publish:hover,
#home-pub a.publish:hover,
#search-pub .subscribe:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(251, 191, 36, .55) !important;
  filter: brightness(1.05);
  color: #fff !important;
}
header .right a.publish svg,
header .right a.publish svg path,
header .right a.publish .mbCl2,
#home-pub a.publish svg,
#home-pub a.publish svg path {
  fill: #fff !important;
  color: #fff !important;
}


/* === Profil public — mêmes styles d'inputs que la sidebar Mes annonces === */
form[name="user-public-profile-search"] {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr auto !important;
  gap: 14px !important;
  align-items: end !important;
  margin: 0 0 18px 0 !important;
  padding: 16px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  width: 100%;
}
form[name="user-public-profile-search"] .control-group {
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}
form[name="user-public-profile-search"] .control-group label {
  display: block !important;
  width: 100% !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  margin: 0 0 6px 0 !important;
  letter-spacing: .01em;
}
form[name="user-public-profile-search"] .control-group .controls {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
}
form[name="user-public-profile-search"] .control-group .controls select,
form[name="user-public-profile-search"] .control-group .controls input[type="text"],
form[name="user-public-profile-search"] .control-group .controls input[type="search"] {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 40px !important;
  padding: 0 12px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  background: #fff !important;
  font-size: 14px !important;
  color: #111827 !important;
  box-sizing: border-box !important;
  text-overflow: ellipsis !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
form[name="user-public-profile-search"] .control-group .controls select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%237c3aed' stroke-width='2' d='M1 1l5 5 5-5'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 36px !important;
}
form[name="user-public-profile-search"] .control-group .controls select:focus,
form[name="user-public-profile-search"] .control-group .controls input:focus {
  border-color: #7c3aed !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .12) !important;
  outline: none !important;
}
form[name="user-public-profile-search"] .actions {
  flex: 0 0 auto !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  float: none !important;
  display: flex;
  align-items: flex-end;
}
form[name="user-public-profile-search"] .actions button {
  width: auto !important;
  min-width: 110px !important;
  height: 40px !important;
  padding: 0 22px !important;
  font-weight: 700 !important;
}
@media (max-width: 720px) {
  form[name="user-public-profile-search"] .control-group { flex: 1 1 100% !important; }
  form[name="user-public-profile-search"] .actions { width: 100% !important; }
  form[name="user-public-profile-search"] .actions button { width: 100% !important; max-width: none !important; }
}

/* === Profil public — badges (Vérifié / Pro / X annonces) en horizontal === */
#seller .maniak-badges,
.user-box .maniak-badges {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 10px 0 6px !important;
  word-break: keep-all !important;
  width: 100% !important;
}
#seller .maniak-badge,
.user-box .maniak-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  flex-shrink: 0 !important;
  flex-direction: row !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  letter-spacing: .02em !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  text-transform: none !important;
  writing-mode: horizontal-tb !important;
}
#seller .maniak-badge.mb-verified {
  background: #dcfce7 !important;
  color: #166534 !important;
}
#seller .maniak-badge.mb-pro {
  background: #fef3c7 !important;
  color: #92400e !important;
}
#seller .maniak-badge.mb-stats {
  background: #ede9fe !important;
  color: #6d28d9 !important;
}

/* === Mes annonces (page Boutique de l'annonceur) — même grid que profil public === */
form[name="user-items-search"] {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr auto !important;
  gap: 14px !important;
  align-items: end !important;
  margin: 0 0 18px 0 !important;
  padding: 16px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  width: 100%;
}
form[name="user-items-search"] .control-group {
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}
form[name="user-items-search"] .control-group label {
  display: block !important;
  width: 100% !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  margin: 0 0 6px 0 !important;
  letter-spacing: .01em;
}
form[name="user-items-search"] .control-group .controls {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
}
form[name="user-items-search"] .control-group .controls select,
form[name="user-items-search"] .control-group .controls input[type="text"],
form[name="user-items-search"] .control-group .controls input[type="search"] {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 40px !important;
  padding: 0 12px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  background: #fff !important;
  font-size: 14px !important;
  color: #111827 !important;
  box-sizing: border-box !important;
  text-overflow: ellipsis !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
form[name="user-items-search"] .control-group .controls select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%237c3aed' stroke-width='2' d='M1 1l5 5 5-5'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 36px !important;
}
form[name="user-items-search"] .control-group .controls select:focus,
form[name="user-items-search"] .control-group .controls input:focus {
  border-color: #7c3aed !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .12) !important;
  outline: none !important;
}
form[name="user-items-search"] .actions {
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  display: flex;
  align-items: end;
}
form[name="user-items-search"] .actions button {
  width: auto !important;
  min-width: 110px !important;
  height: 40px !important;
  padding: 0 22px !important;
  font-weight: 700 !important;
  white-space: nowrap;
}
@media (max-width: 720px) {
  form[name="user-items-search"] {
    grid-template-columns: 1fr !important;
  }
  form[name="user-items-search"] .actions { width: 100% !important; }
  form[name="user-items-search"] .actions button { width: 100% !important; }
}

/* === reCAPTCHA v3 — masque le badge (mention dans la CGU) === */
.grecaptcha-badge { visibility: hidden !important; }

/* === Bloc Partager — sidebar sous Soyez prudents (2026-05-05) === */
/* Sidebar du theme delta : .side est float:left, et chaque .wbox dedans doit
   etre float:left;clear:both;width:100% pour s'empiler verticalement (cf. la
   regle ligne 1458 qui le fait pour .safe-block). Sans ces declarations le
   .wbox flotte aleatoirement et son contenu deborde. On reproduit donc
   exactement la mise en boite du .safe-block. */
#listing .side .wbox.share-block {
  float: left !important;
  clear: both !important;
  width: 100% !important;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 15%);
  border-radius: 3px;
  margin: 0 0 20px 0;
  padding: 0 0 20px 0 !important;
  text-align: center;
}
/* Le h2 herite deja du theme (#listing .side h2 ligne 1332) — on ne touche pas. */
.wbox.share-block .share-buttons {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 20px !important;
  margin: 0 !important;
  width: auto !important;
  float: none !important;
  clear: none !important;
}
.wbox.share-block .share-buttons .sb {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  flex: 0 0 42px !important;
  border-radius: 50% !important;
  border: 0 !important;
  cursor: pointer;
  color: #fff !important;
  font-size: 17px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: transform .12s, box-shadow .12s, filter .12s;
  background: #6b7280;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
}
.wbox.share-block .share-buttons .sb i {
  color: #fff !important;
  line-height: 1 !important;
  margin: 0 !important;
  font-size: 17px !important;
}
.wbox.share-block .share-buttons .sb:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  filter: brightness(1.05);
  text-decoration: none !important;
  color: #fff !important;
}
.wbox.share-block .share-buttons .sb-wa { background: #25d366; }
.wbox.share-block .share-buttons .sb-fb { background: #1877f2; }
.wbox.share-block .share-buttons .sb-x  { background: #000; }
.wbox.share-block .share-buttons .sb-pn { background: #e60023; }
.wbox.share-block .share-buttons .sb-cp { background: linear-gradient(135deg, #4f46e5, #7c3aed); }
.wbox.share-block .share-buttons .sb-qr { background: linear-gradient(135deg, #ea580c, #fbbf24); }
.wbox.share-block .ms-copied {
  display: inline-block;
  margin-top: 12px;
  color: #10b981;
  font-size: 12px;
  font-weight: 600;
  width: 100%;
  text-align: center;
}

/* QR modal (deplace depuis l'ancien bloc Phase 8) */
#maniak-qr-modal {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(15,23,42,.7);
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
#maniak-qr-modal.is-open { display: flex; }
#maniak-qr-modal .mq-card {
  background: #fff; border-radius: 18px; padding: 28px;
  max-width: 360px; width: 100%; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
#maniak-qr-modal h3 { margin: 0 0 8px; font-size: 18px; color: #0f172a; }
#maniak-qr-modal p { margin: 0 0 18px; font-size: 13px; color: #6b7280; }
#maniak-qr-img { max-width: 100%; height: auto; border-radius: 8px; }
#maniak-qr-modal .mq-close {
  background: linear-gradient(135deg,#4f46e5,#7c3aed); color: #fff;
  border: 0; padding: 10px 22px; border-radius: 999px;
  font-weight: 700; cursor: pointer; margin-top: 16px; font-size: 13px;
}