/*
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 — DM Sans (corps) + DM Serif Display (titres)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=DM+Serif+Display&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:  'DM Sans', -apple-system, 'Segoe UI', sans-serif;
  --m1-font-head:  'DM Serif Display', Georgia, 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 WRAPPER
   ============================================================ */
#m1-header {
  background: var(--m1-white);
  font-family: var(--m1-font-body);
  position: sticky;
  top: 0;
  z-index: 9990;
  box-shadow: 0 1px 0 var(--m1-line), 0 4px 20px rgba(28,35,48,.05);
}
.admin-bar #m1-header { top:32px; }
@media screen and (max-width:782px){ .admin-bar #m1-header { top:46px; } }

/* ---------- BARRE PRINCIPALE ---------- */
#m1-header-main { padding:18px 0; }
#m1-header-main .m1-con {
  display:flex; align-items:center; gap:36px;
}

/* LOGO */
.m1-logo {
  display:inline-flex; align-items:center; gap:12px;
  text-decoration:none; flex-shrink:0;
}
.m1-logo img {
  height:46px; width:auto; display:block;
}
/* Fallback texte si image absente */
.m1-logo-text strong {
  display:block; font-family:var(--m1-font-head);
  color:var(--m1-slate); font-size:22px; line-height:1.1;
}
.m1-logo-text span {
  display:block; font-size:9.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--m1-slate-soft); margin-top:2px;
}

/* RECHERCHE */
.m1-search { flex:1; max-width:580px; }
.m1-search form {
  display:flex; height:46px;
  border:1.5px solid var(--m1-line);
  border-radius:4px; overflow:hidden; background:#fff;
  transition:border-color .2s, box-shadow .2s;
}
.m1-search form:focus-within {
  border-color:var(--m1-slate);
  box-shadow:0 0 0 3px rgba(28,35,48,.07);
}
.m1-search input[type="search"],
.m1-search input[type="text"] {
  flex:1; border:0; outline:0; background:transparent;
  padding:0 16px; font-family:var(--m1-font-body);
  font-size:14px; color:var(--m1-slate); height:100%;
}
.m1-search input::placeholder { color:#9CA3AF; }
.m1-search button, .m1-search input[type="submit"] {
  border:0; background:var(--m1-slate); color:#fff;
  padding:0 22px; cursor:pointer; font-family:var(--m1-font-body);
  font-size:13.5px; font-weight:600;
  display:flex; align-items:center; justify-content:center; gap:7px;
  height:100%; transition:background .2s;
}
.m1-search button:hover,
.m1-search input[type="submit"]:hover { background:var(--m1-copper); }
.m1-search button svg { width:16px; height:16px; fill:#fff; }

/* ACTIONS */
.m1-actions { display:flex; align-items:center; gap:2px; margin-left:auto; flex-shrink:0; }
.m1-act {
  display:flex; align-items:center; gap:9px;
  padding:8px 13px; border-radius:4px;
  text-decoration:none; color:var(--m1-slate);
  transition:background .18s;
}
.m1-act:hover { background:var(--m1-ivory); }
.m1-act-ico { position:relative; display:flex; align-items:center; }
.m1-act svg { width:22px; height:22px; fill:var(--m1-slate); }
.m1-act-txt small { display:block; font-size:10.5px; color:var(--m1-slate-soft); font-weight:500; }
.m1-act-txt strong { display:block; font-size:13px; font-weight:600; letter-spacing:-.01em; }
.m1-badge {
  position:absolute; top:-7px; right:-9px;
  background:var(--m1-copper); color:#fff;
  font-size:10px; font-weight:700; min-width:17px; height:17px;
  padding:0 4px; border-radius:9px;
  display:flex; align-items:center; justify-content:center; line-height:1;
}

/* BURGER */
.m1-burger {
  display:none; background:none; border:1.5px solid var(--m1-line);
  border-radius:4px; padding:9px; cursor:pointer; margin-left:6px;
}
.m1-burger svg { width:20px; height:20px; fill:var(--m1-slate); }

/* ---------- NAVIGATION ---------- */
#m1-nav {
  border-top: 1px solid var(--m1-line);
  background: var(--m1-white);
}

/* Ligne nav : zone scrollable + CTA fixe à droite */
.m1-nav-wrap {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* Zone scrollable — flex:1 + min-width:0 = indispensable pour que
   le rétrécissement fonctionne dans un conteneur flex */
#m1-nav-scroll {
  position: relative;
  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; }

/* Dégradés indicateurs de scroll */
#m1-nav-scroll::before,
#m1-nav-scroll::after {
  content: '';
  position: sticky;
  top: 0;
  flex: 0 0 28px;
  height: 50px;
  pointer-events: none;
  z-index: 3;
  transition: opacity .25s;
}
#m1-nav-scroll::before {
  left: 0;
  margin-right: -28px;
  background: linear-gradient(to right, #fff 35%, rgba(255,255,255,0));
}
#m1-nav-scroll::after {
  right: 0;
  margin-left: -28px;
  background: linear-gradient(to left, #fff 35%, rgba(255,255,255,0));
}
#m1-nav-scroll.at-start::before { opacity: 0; }
#m1-nav-scroll.at-end::after    { opacity: 0; }

/* Le menu ne se comprime jamais */
.m1-nav-menu {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  width: max-content;
}
.m1-nav-menu > li { flex: 0 0 auto; }
.m1-nav-menu > li > a {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 15px;
  color: var(--m1-slate);
  font-size: 11.5px;
  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: 15px; right: 15px; bottom: 0;
  height: 2px;
  background: var(--m1-copper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s;
}
.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-copper); }
.m1-nav-menu > li > a:hover::after,
.m1-nav-menu > li.current-menu-item > a::after { transform: scaleX(1); }

/* CTA téléphone — hors du scroll, jamais comprimé */
#m1-nav-cta-wrap {
  flex: 0 0 auto;
  padding-left: 20px;
  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: 32px; height: 32px; border-radius: 50%;
  background: var(--m1-copper-lt);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.m1-nav-cta-ico svg { width: 14px; height: 14px; fill: 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: 600;
  white-space: nowrap;
}
.m1-nav-cta-txt a {
  display: block; font-size: 14px; font-weight: 700;
  color: var(--m1-slate); text-decoration: none; white-space: nowrap;
}
.m1-nav-cta-txt a:hover { color: var(--m1-copper); }

/* ---------- MOBILE ---------- */
#m1-mobile { display:none; border-top:1px solid var(--m1-line); background:#fff; padding:12px 0 20px; }
#m1-mobile.is-open { display:block; }
#m1-mobile .m1-search { max-width:none; margin-bottom:14px; }
#m1-mobile .m1-mob-links { list-style:none; margin:0; padding:0; }
#m1-mobile .m1-mob-links a {
  display:block; padding:13px 0; border-bottom:1px solid var(--m1-line);
  color:var(--m1-slate); font-size:14px; font-weight:600;
  text-decoration:none; transition:color .16s;
}
#m1-mobile .m1-mob-links a:hover { color:var(--m1-copper); }

/* ============================================================
   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-header-main .m1-con > .m1-search { display:none; }
  #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; }
}