/* ═══════════════════════════════════════════════════════════════
   FRONT PAGE — Maschine 1
   À coller à la fin de style.css (ou charger comme fichier séparé)
   Réutilise les variables --m1-* définies en haut de style.css
   ═══════════════════════════════════════════════════════════════ */

#m1-home {
  font-family: var(--m1-font-body);
  color: var(--m1-slate);
}
#m1-home img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── Boutons ────────────────────────────────────────────────── */
.m1-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 26px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  border-radius: 3px;
  border: 1.5px solid transparent;
  transition: background .2s, color .2s, border-color .2s;
}
.m1-btn svg { fill: currentColor; flex: 0 0 auto; }
.m1-btn-solid          { background: var(--m1-slate); color: #fff; }
.m1-btn-solid:hover    { background: var(--m1-copper); color: #fff; }
.m1-btn-ghost          { background: transparent; color: var(--m1-slate); border-color: rgba(28,35,48,.22); }
.m1-btn-ghost:hover    { border-color: var(--m1-slate); background: rgba(28,35,48,.04); }
.m1-btn-copper         { background: var(--m1-copper); color: #fff; font-size: 17px; letter-spacing: .01em; }
.m1-btn-copper:hover   { background: #C9853F; }
.m1-btn-outline-light  { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.m1-btn-outline-light:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* ── En-tête de section ─────────────────────────────────────── */
.m1-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 34px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--m1-line);
}
.m1-sec-head h2 {
  font-family: var(--m1-font-head);
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.15;
  color: var(--m1-slate);
  margin: 0;
}
.m1-sec-link {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--m1-copper);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.m1-sec-link:hover { border-bottom-color: var(--m1-copper); }

/* ═══════════ HERO ═══════════ */
.m1-hero { background: var(--m1-ivory); border-bottom: 1px solid var(--m1-line); }
.m1-hero-grid {
  max-width: 1340px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: stretch;
  gap: 0;
}
.m1-hero-text {
  padding: 76px 60px 76px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.m1-hero-kicker {
  font-size: 13px;
  font-weight: 600;
  color: var(--m1-copper);
  margin: 0 0 18px;
  padding-left: 44px;
  position: relative;
}
.m1-hero-kicker::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 32px; height: 2px;
  background: var(--m1-copper);
}
.m1-hero-text h1 {
  font-family: var(--m1-font-head);
  font-size: clamp(38px, 4.6vw, 62px);
  line-height: 1.06;
  letter-spacing: -.015em;
  color: var(--m1-slate);
  margin: 0 0 22px;
}
.m1-hero-lead {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--m1-slate-mid);
  max-width: 52ch;
  margin: 0 0 32px;
}
.m1-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 44px; }

.m1-hero-facts {
  display: flex;
  gap: 0;
  margin: 0;
  padding-top: 28px;
  border-top: 1px solid var(--m1-line);
}
.m1-hero-facts > div { padding-right: 38px; margin-right: 38px; border-right: 1px solid var(--m1-line); }
.m1-hero-facts > div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.m1-hero-facts dt {
  font-size: 12.5px;
  color: var(--m1-slate-soft);
  margin-bottom: 6px;
}
.m1-hero-facts dd {
  font-family: var(--m1-font-head);
  font-size: 30px;
  line-height: 1;
  color: var(--m1-slate);
  margin: 0;
}
.m1-hero-media { position: relative; min-height: 540px; }
.m1-hero-media img { position: absolute; inset: 0; }

/* ═══════════ RÉASSURANCE ═══════════ */
.m1-trust { background: var(--m1-slate); }
.m1-trust-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.m1-trust-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 26px 30px 26px 0;
  margin-right: 30px;
  border-right: 1px solid rgba(255,255,255,.11);
}
.m1-trust-item:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.m1-trust-item svg { fill: var(--m1-copper); flex: 0 0 auto; }
.m1-trust-item strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 3px;
}
.m1-trust-item span {
  display: block;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(255,255,255,.55);
}

/* ═══════════ CATÉGORIES ═══════════ */
.m1-cats { padding: 84px 0; background: #fff; }
.m1-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.m1-cat {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 3px;
  min-height: 250px;
  text-decoration: none;
  background: var(--m1-slate);
}
.m1-cat--big   { grid-column: span 2; min-height: 320px; }
.m1-cat--small { grid-column: span 1; }
.m1-cat img {
  position: absolute; inset: 0;
  transition: transform .5s ease;
}
.m1-cat:hover img { transform: scale(1.04); }
.m1-cat::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,26,36,.92) 0%, rgba(20,26,36,.45) 45%, rgba(20,26,36,.12) 100%);
}
.m1-cat-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 22px 24px;
}
.m1-cat-body h3 {
  font-family: var(--m1-font-head);
  font-size: 22px;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 6px;
}
.m1-cat--big .m1-cat-body h3 { font-size: 27px; }
.m1-cat-body p {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,.72);
  margin: 0;
}
.m1-cat-count {
  display: inline-block;
  margin-top: 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--m1-copper);
  padding-top: 9px;
  border-top: 1px solid rgba(255,255,255,.2);
}

/* ═══════════ PRODUITS ═══════════ */
.m1-products { padding: 0 0 84px; background: #fff; }
.m1-products ul.products { margin: 0 !important; }

/* ═══════════ POURQUOI NOUS ═══════════ */
.m1-why { background: var(--m1-ivory); padding: 88px 0; }
.m1-why-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 64px;
  align-items: start;
}
.m1-why-media {
  margin: 0;
  border-radius: 3px;
  overflow: hidden;
  aspect-ratio: 10 / 11;
  position: relative;
}
.m1-why-text h2 {
  font-family: var(--m1-font-head);
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.14;
  letter-spacing: -.01em;
  margin: 0 0 20px;
  color: var(--m1-slate);
}
.m1-why-text > p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--m1-slate-mid);
  max-width: 62ch;
  margin: 0 0 34px;
}
.m1-why-list {
  list-style: none;
  margin: 0 0 36px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 32px;
}
.m1-why-list li {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--m1-slate-mid);
  padding-top: 15px;
  border-top: 2px solid var(--m1-copper);
}
.m1-why-list strong {
  display: block;
  font-size: 14.5px;
  color: var(--m1-slate);
  margin-bottom: 5px;
}

/* ═══════════ MARQUES ═══════════ */
.m1-brands { padding: 56px 0; background: #fff; border-top: 1px solid var(--m1-line); }
.m1-brands-title {
  font-family: var(--m1-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--m1-slate-soft);
  text-align: center;
  margin: 0 0 28px;
}
.m1-brand-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 44px;
}
.m1-brand-list li {
  font-family: var(--m1-font-head);
  font-size: 24px;
  color: var(--m1-slate);
  opacity: .38;
  transition: opacity .2s;
}
.m1-brand-list li:hover { opacity: .85; }

/* ═══════════ BANDEAU CTA ═══════════ */
.m1-cta { background: var(--m1-slate); padding: 62px 0; }
.m1-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 44px;
  flex-wrap: wrap;
}
.m1-cta-text h2 {
  font-family: var(--m1-font-head);
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.15;
  color: #fff;
  margin: 0 0 10px;
}
.m1-cta-text p {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255,255,255,.6);
  max-width: 56ch;
  margin: 0;
}
.m1-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Le footer suit directement le bandeau : on annule sa marge haute */
.m1-cta + #m1-footer,
#m1-home + #m1-footer { margin-top: 0; }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 1100px) {
  .m1-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .m1-cat--big { grid-column: span 2; }
  .m1-cat--small { grid-column: span 1; }
  .m1-why-grid { grid-template-columns: 1fr; gap: 40px; }
  .m1-why-media { aspect-ratio: 16 / 9; max-height: 420px; }
}
@media (max-width: 900px) {
  .m1-hero-grid { grid-template-columns: 1fr; }
  .m1-hero-text { padding: 56px 28px 48px; order: 2; }
  .m1-hero-media { order: 1; min-height: 320px; height: 46vw; max-height: 420px; }
  .m1-trust-row { grid-template-columns: 1fr 1fr; }
  .m1-trust-item:nth-child(2) { border-right: 0; margin-right: 0; padding-right: 0; }
  .m1-trust-item:nth-child(1),
  .m1-trust-item:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,.11); }
}
@media (max-width: 640px) {
  .m1-cats  { padding: 56px 0; }
  .m1-why   { padding: 56px 0; }
  .m1-cta   { padding: 46px 0; }
  .m1-cat-grid { grid-template-columns: 1fr; }
  .m1-cat--big, .m1-cat--small { grid-column: span 1; min-height: 230px; }
  .m1-trust-row { grid-template-columns: 1fr; }
  .m1-trust-item {
    border-right: 0; margin-right: 0; padding: 18px 0;
    border-bottom: 1px solid rgba(255,255,255,.11);
  }
  .m1-trust-item:last-child { border-bottom: 0; }
  .m1-why-list { grid-template-columns: 1fr; gap: 20px; }
  .m1-hero-facts { flex-wrap: wrap; gap: 20px 0; }
  .m1-hero-facts > div { padding-right: 24px; margin-right: 24px; }
  .m1-hero-text h1 { font-size: 34px; }
  .m1-btn { padding: 13px 22px; font-size: 13.5px; }
  .m1-cta-actions { width: 100%; }
  .m1-cta-actions .m1-btn { flex: 1 1 auto; justify-content: center; }
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
  .m1-cat img, .m1-btn, .m1-brand-list li { transition: none; }
  .m1-cat:hover img { transform: none; }
}
.m1-btn:focus-visible,
.m1-cat:focus-visible,
.m1-sec-link:focus-visible {
  outline: 2px solid var(--m1-copper);
  outline-offset: 3px;
}