/*
Theme Name: Rubix Child - Maschine 1
Theme URI: https://maschine1shop.com
Author: Maschine 1 GmbH
Template: rubix
Version: 1.2.0
Text Domain: rubix-child
*/

/* ============================================================
   GOOGLE FONTS — Outfit
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ============================================================
   PALETTE
   Acier industriel : fond ivoire cassé, accent cuivre/ambre,
   typographie ardoise profonde
   ============================================================ */
:root {
  --m1-slate:      #1C2330;   /* quasi-noir ardoise */
  --m1-slate-mid:  #3D4A5C;
  --m1-slate-soft: #64748B;
  --m1-copper:     #B87333;   /* cuivre / ambre industriel */
  --m1-copper-dk:  #96601F;
  --m1-copper-lt:  #F5E6D3;   /* cuivre très pâle */
  --m1-ivory:      #FAFAF8;   /* fond principal */
  --m1-white:      #FFFFFF;
  --m1-line:       #E2E5E9;
  --m1-line-dark:  rgba(28,35,48,.12);

  --m1-font-body:  'Outfit', -apple-system, 'Segoe UI', sans-serif;
  --m1-font-head:  'Outfit', -apple-system, 'Segoe UI', sans-serif;
}

/* ============================================================
   RESET GLOBAL POLICE
   ============================================================ */
body, input, button, select, textarea {
  font-family: var(--m1-font-body) !important;
}
h1, h2, h3, h4, .site-title,
.woocommerce-loop-product__title,
.entry-title {
  font-family: var(--m1-font-head) !important;
}

/* FIX : le parent force svg à 100% */
#m1-header svg, #m1-footer svg { display:block; flex:0 0 auto; max-width:none; height:auto; }

/* ============================================================
   CONTAINER
   ============================================================ */
.m1-con { max-width:1340px; margin:0 auto; padding:0 28px; }

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
#m1-announce {
  background: var(--m1-slate);
  color: rgba(255,255,255,.88);
  font-family: var(--m1-font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  text-align: center;
  padding: 9px 16px;
}
#m1-announce svg { width:15px; height:15px; fill:var(--m1-copper); display:inline-block; vertical-align:middle; margin-right:7px; }
#m1-announce strong { color:var(--m1-copper); font-weight:700; }

/* ============================================================
   HEADER v2 — Outfit + Lucide stroke icons
   Sticky : JS-based — aucune règle CSS position ne casse le layout
   ============================================================ */

/* Police globale Outfit */
body, input, button, select, textarea, a {
  font-family: 'Outfit', -apple-system, sans-serif !important;
}

/* ── Wrapper header : position static, pas de sticky CSS ── */
#m1-header {
  background: #fff;
  font-family: 'Outfit', sans-serif;
  /* PAS de position:sticky ici — géré par JS pour éviter
     les conflits avec le sticky Rubix parent */
}

/* ── Barre d'annonce — non sticky ── */
#m1-announce {
  background: var(--m1-slate);
  color: rgba(255,255,255,.82);
  font-size: 13px;
  font-weight: 400;
  text-align: center;
  padding: 9px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: .01em;
  position: relative;
  z-index: 9991;
}
#m1-announce svg { opacity:.7; flex-shrink:0; }
#m1-announce strong { color:var(--m1-copper); font-weight:600; }

/* ═══════════════════════════════════════════════════
   STICKY — Approche définitive
   
   Rubix injecte overflow-x:hidden sur html/body via
   son CSS, ce qui bloque position:fixed ET sticky.
   
   Solution :
   1. On neutralise overflow-x sur html et body
   2. #m1-header est position:sticky — MAIS on le sort
      du flux Rubix en le plaçant AVANT .main-wrapper
      (voir header.php : structure HTML réorganisée)
   3. #m1-main est le vrai sticky, dans le header
   ═══════════════════════════════════════════════════ */

/* Neutralise le overflow Rubix qui casse tout sticky/fixed */
html { overflow-x: clip !important; }
body { overflow-x: clip !important; }

/* Le wrapper complet du header */
#m1-header {
  background: #fff;
  font-family: 'Outfit', sans-serif;
  /* PAS de position ici — laisse Rubix tranquille */
}

/* Barre principale : sticky pure */
#m1-main {
  background: #fff;
  border-bottom: 1px solid var(--m1-line);
  position: sticky;
  top: 0;
  z-index: 9990;
  box-shadow: 0 1px 12px rgba(28,35,48,.06);
  /* Crée un contexte de rendu indépendant */
  will-change: transform;
}
.admin-bar #m1-main { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar #m1-main { top: 46px; }
}

/* Forcer la visibilité — protection contre le JS Rubix */
#m1-main .m1-search,
#m1-main .m1-actions,
#m1-main .m1-logo {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Spacer : n'est plus nécessaire avec sticky pur,
   mais on le garde au cas où JS le réactive */
#m1-spacer { display: none; }

/* ── Navigation (non sticky) ────────────────────────────────── */
#m1-nav {
  border-top: 1px solid var(--m1-line);
  background: #fff;
}
.m1-nav-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
}
#m1-nav-scroll {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#m1-nav-scroll::-webkit-scrollbar { display: none; }

.m1-nav-menu {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0; padding: 0;
  width: max-content;
}
.m1-nav-menu > li > a {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 14px;
  color: var(--m1-slate-mid);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  transition: color .18s;
}
.m1-nav-menu > li:first-child > a { padding-left: 0; }
.m1-nav-menu > li > a::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 0;
  height: 2px;
  background: var(--m1-copper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s;
}
.m1-nav-menu > li:first-child > a::after { left: 0; }
.m1-nav-menu > li > a:hover,
.m1-nav-menu > li.current-menu-item > a { color: var(--m1-slate); }
.m1-nav-menu > li > a:hover::after,
.m1-nav-menu > li.current-menu-item > a::after { transform: scaleX(1); }

#m1-nav-cta-wrap {
  flex: 0 0 auto;
  padding-left: 18px;
  border-left: 1px solid var(--m1-line);
}
.m1-nav-cta { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.m1-nav-cta-ico {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--m1-copper-lt);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.m1-nav-cta-ico svg { color: var(--m1-copper); }
.m1-nav-cta-txt small { display: block; font-size: 9.5px; color: var(--m1-slate-soft); text-transform: uppercase; letter-spacing: .1em; font-weight: 500; }
.m1-nav-cta-txt a { display: block; font-size: 13.5px; font-weight: 700; color: var(--m1-slate); text-decoration: none; white-space: nowrap; letter-spacing: -.01em; }
.m1-nav-cta-txt a:hover { color: var(--m1-copper); }

/* ── Menu mobile ────────────────────────────────────────────── */
#m1-mobile { display: none; border-top: 1px solid var(--m1-line); background: #fff; padding: 14px 0 20px; }
#m1-mobile.is-open { display: block; }
form.m1-search-mobile { max-width: none !important; }
.m1-mob-links { list-style: none; margin: 0; padding: 0; }
.m1-mob-links a {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid var(--m1-line);
  color: var(--m1-slate);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: color .15s;
}
.m1-mob-links a:hover { color: var(--m1-copper); }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .m1-act-txt { display: none; }
  .m1-act { padding: 8px 9px; }
  #m1-nav-cta-wrap { display: none; }
}
@media (max-width: 900px) {
  form.m1-search { max-width: 320px; }
}
@media (max-width: 768px) {
  .m1-main-inner { gap: 16px; height: 62px; }
  #m1-nav { display: none; }
  .m1-burger { display: flex; }
  .m1-logo img { height: 36px; }
}
@media (max-width: 480px) {
  .m1-con { padding: 0 16px; }
}

/* ============================================================
   FOOTER
   ============================================================ */
#m1-footer {
  background:var(--m1-slate); color:rgba(255,255,255,.6);
  font-family:var(--m1-font-body); font-size:14px; margin-top:72px;
}
.m1-ft-top { padding:60px 0 44px; border-bottom:1px solid rgba(255,255,255,.08); }
.m1-ft-grid {
  display:grid; grid-template-columns:2.2fr 1fr 1fr 1.3fr; gap:48px;
}
.m1-ft-col h4 {
  color:#fff; font-family:var(--m1-font-body);
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.14em; margin:0 0 22px;
  padding-bottom:11px; border-bottom:2px solid var(--m1-copper);
  display:inline-block;
}
/* Logo footer */
#m1-footer .m1-logo img { filter:brightness(0) invert(1); height:40px; }
.m1-ft-brand .m1-logo { margin-bottom:18px; }
.m1-ft-brand p { font-size:13.5px; line-height:1.75; color:rgba(255,255,255,.48); margin:0 0 22px; max-width:360px; }

.m1-socials { display:flex; gap:9px; }
.m1-socials a { width:34px; height:34px; border-radius:3px; background:rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center; transition:background .18s; }
.m1-socials a:hover { background:var(--m1-copper); }
.m1-socials svg { width:14px; height:14px; fill:rgba(255,255,255,.7); }

.m1-ft-links { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.m1-ft-links a { color:rgba(255,255,255,.52); text-decoration:none; font-size:13.5px; display:inline-flex; align-items:center; gap:8px; transition:color .18s, transform .18s; }
.m1-ft-links a::before { content:'›'; color:var(--m1-copper); font-weight:700; }
.m1-ft-links a:hover { color:#fff; transform:translateX(2px); }

.m1-ft-contact { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.m1-ft-contact li { display:flex; align-items:flex-start; gap:11px; font-size:13.5px; color:rgba(255,255,255,.52); line-height:1.6; }
.m1-ft-contact svg { width:14px; height:14px; fill:var(--m1-copper); margin-top:3px; flex-shrink:0; }
.m1-ft-contact a { color:rgba(255,255,255,.52); text-decoration:none; transition:color .18s; }
.m1-ft-contact a:hover { color:#fff; }

.m1-ft-bottom { padding:18px 0; }
.m1-ft-bottom .m1-con { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.m1-ft-copy { font-size:12px; color:rgba(255,255,255,.33); margin:0; }
.m1-ft-legal { display:flex; gap:20px; }
.m1-ft-legal a { font-size:12px; color:rgba(255,255,255,.33); text-decoration:none; transition:color .18s; }
.m1-ft-legal a:hover { color:rgba(255,255,255,.8); }

/* ============================================================
   WOO OVERRIDES — palette cuivre
   ============================================================ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce-page a.button,
.woocommerce-page button.button {
  background:var(--m1-slate) !important;
  color:#fff !important;
  font-family:var(--m1-font-body) !important;
  font-weight:600 !important;
  border-radius:4px !important;
  transition:background .2s !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover { background:var(--m1-copper) !important; }
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background:var(--m1-copper) !important;
}
.woocommerce a.button.alt:hover { background:var(--m1-copper-dk) !important; }
.woocommerce span.onsale { background:var(--m1-copper) !important; }
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before { color:var(--m1-copper) !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1180px){
  .m1-nav-cta { display:none; }
  .m1-act-txt { display:none; }
  .m1-act { padding:9px 10px; }
}
@media(max-width:1024px){
  .m1-ft-grid { grid-template-columns:1fr 1fr; gap:38px; }
  .m1-search { max-width:360px; }
}
@media(max-width:782px){
  #m1-nav { display:none; }
  .m1-burger { display:flex; }
  .m1-logo img { height:38px; }
}
@media(max-width:640px){
  .m1-con { padding:0 18px; }
  .m1-ft-grid { grid-template-columns:1fr; gap:32px; }
  .m1-ft-bottom .m1-con { flex-direction:column; text-align:center; }
  .m1-ft-legal { justify-content:center; flex-wrap:wrap; gap:14px; }
}


/* ══════════════════════════════════════════
   PROTECTION — search, actions, logo toujours visibles
   Écrase toute règle précédente dans ce fichier
   ══════════════════════════════════════════ */
#m1-main .m1-search {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  max-width: 560px !important;
}
#m1-main .m1-actions {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#m1-main .m1-logo {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
@media (max-width: 640px) {
  #m1-main .m1-search { max-width: 100% !important; }
}

/* ── Police Outfit ── */
html, body,
h1, h2, h3, h4, h5, h6,
p, a, span, div, li,
input, button, select, textarea,
.widget-title, .product_title,
.entry-title, .woocommerce-loop-product__title {
  font-family: 'Outfit', -apple-system, 'Segoe UI', sans-serif !important;
}