/* =========================================================
   HOME PRIME — Industrial / Carhartt
   Single-file CSS, organized with @layer
   ========================================================= */

@layer tokens, reset, base, layout, components, utilities, pages, woocommerce;

/* ---------- TOKENS ------------------------------------- */
@layer tokens {
  :root {
    /* Neutrals — warm-tinted, never pure black/white */
    --ink:        oklch(0.16 0.008 60);
    --ink-soft:   oklch(0.25 0.007 62);
    --graphite:  oklch(0.34 0.006 65);
    --steel:     oklch(0.55 0.005 70);
    --concrete:  oklch(0.78 0.004 80);
    --mist:      oklch(0.92 0.004 85);
    --paper:     oklch(0.97 0.005 85);
    --bone:      oklch(0.99 0.004 85);

    /* Signal — orange used at ~10-25% of surface */
    --signal:       oklch(0.73 0.162 128);
    --signal-deep:  oklch(0.60 0.148 128);
    --signal-glow:  oklch(0.84 0.138 128);

    /* Semantic */
    --bg:          var(--paper);
    --bg-elevated: var(--bone);
    --bg-inverse:  var(--ink);
    --fg:          var(--ink);
    --fg-soft:     var(--graphite);
    --fg-muted:    var(--steel);
    --fg-inverse:  var(--paper);
    --line:        var(--concrete);
    --line-strong: var(--ink);
    --accent:      var(--signal);

    /* Type families */
    --font-display: "Archivo Black", "Arial Black", system-ui, sans-serif;
    --font-sans:    "Archivo", system-ui, -apple-system, sans-serif;
    --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

    /* Type scale (1.333 — perfect fourth) */
    --fs-xs:    0.75rem;     /* 12 */
    --fs-sm:    0.875rem;    /* 14 */
    --fs-base:  1rem;        /* 16 */
    --fs-md:    1.125rem;    /* 18 */
    --fs-lg:    1.5rem;      /* 24 */
    --fs-xl:    2rem;        /* 32 */
    --fs-2xl:   2.625rem;    /* 42 */
    --fs-3xl:   3.5rem;      /* 56 */
    --fs-4xl:   4.625rem;    /* 74 */
    --fs-5xl:   6.125rem;    /* 98 */
    --fs-mono:  0.75rem;

    /* Tracking */
    --track-tight:  -0.03em;
    --track-snug:   -0.015em;
    --track-normal:  0;
    --track-wide:   0.08em;
    --track-mono:   0.04em;

    /* Spacing (4px base) */
    --sp-1:   0.25rem;   /* 4  */
    --sp-2:   0.5rem;    /* 8  */
    --sp-3:   0.75rem;   /* 12 */
    --sp-4:   1rem;      /* 16 */
    --sp-5:   1.5rem;    /* 24 */
    --sp-6:   2rem;      /* 32 */
    --sp-7:   3rem;      /* 48 */
    --sp-8:   4rem;      /* 64 */
    --sp-9:   6rem;      /* 96 */
    --sp-10:  8rem;      /* 128 */
    --sp-11:  12rem;     /* 192 */

    /* Layout */
    --container: 1440px;
    --gutter:    clamp(1rem, 3vw, 2rem);

    /* Motion */
    --ease:        cubic-bezier(0.16, 1, 0.3, 1);  /* ease-out-expo */
    --dur-fast:    160ms;
    --dur-base:    280ms;
    --dur-slow:    520ms;

    /* Radii (industrial: minimal/zero) */
    --r-0: 0;
    --r-1: 2px;
    --r-2: 4px;

    /* Elevation (industrial uses borders, not shadows) */
    --border-hair: 1px solid var(--line);
    --border-strong: 1px solid var(--line-strong);
    --border-double: 3px double var(--line-strong);
  }

  /* Optional dark mode — kept for parity, not default */
  @media (prefers-color-scheme: dark) {
    :root.theme-auto {
      --bg:          var(--ink);
      --bg-elevated: var(--ink-soft);
      --bg-inverse:  var(--paper);
      --fg:          var(--paper);
      --fg-soft:     var(--concrete);
      --fg-muted:    var(--steel);
      --fg-inverse:  var(--ink);
      --line:        var(--graphite);
      --line-strong: var(--paper);
    }
  }
}

/* ---------- RESET -------------------------------------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; tab-size: 4; }
  body {
    min-height: 100svh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  img, picture, svg, video { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  ul, ol { list-style: none; }
  table { border-collapse: collapse; width: 100%; }
  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  ::selection { background: var(--ink); color: var(--paper); }
}

/* ---------- BASE --------------------------------------- */
@layer base {
  html {
    font-family: var(--font-sans);
    font-size: 16px;
    color: var(--fg);
    background: var(--bg);
  }
  body {
    font-size: var(--fs-base);
    line-height: 1.55;
    overflow-x: hidden;
  }

  h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    font-weight: 900;
    line-height: 0.92;
    letter-spacing: var(--track-tight);
    text-transform: uppercase;
  }

  h1 { font-size: clamp(2.5rem, 8vw, var(--fs-5xl)); }
  h2 { font-size: clamp(2rem, 5vw, var(--fs-3xl)); }
  h3 { font-size: clamp(1.5rem, 3vw, var(--fs-xl)); letter-spacing: var(--track-snug); }
  h4 { font-size: var(--fs-lg); }
  h5 { font-size: var(--fs-md); }

  p { max-width: 65ch; }

  .mono, code, kbd {
    font-family: var(--font-mono);
    font-size: 0.85em;
    letter-spacing: var(--track-mono);
  }

  .label {
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--fg-muted);
  }

  hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: var(--sp-6) 0;
  }
}

/* ---------- LAYOUT ------------------------------------- */
@layer layout {
  .wrap {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .stack > * + * { margin-block-start: var(--sp-4); }
  .stack-lg > * + * { margin-block-start: var(--sp-6); }
  .stack-xl > * + * { margin-block-start: var(--sp-8); }

  .section {
    padding-block: clamp(3rem, 8vw, var(--sp-10));
  }
  .section--tight { padding-block: clamp(2rem, 5vw, var(--sp-8)); }
  .section--hero  { padding-block: clamp(2rem, 4vw, var(--sp-7)); }

  .grid {
    display: grid;
    gap: var(--sp-5);
  }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .grid-12 { grid-template-columns: repeat(12, 1fr); }

  @media (max-width: 900px) {
    .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-12 { grid-template-columns: repeat(6, 1fr); }
  }
  @media (max-width: 560px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .grid-12 { grid-template-columns: repeat(2, 1fr); }
  }

  /* Marquee container */
  .strip {
    background: var(--ink);
    color: var(--paper);
    overflow: hidden;
    border-block: 1px solid var(--ink);
  }
}

/* ---------- COMPONENTS --------------------------------- */
@layer components {

  /* ---- Buttons ---- */
  .btn {
    --bg: var(--ink);
    --fg: var(--paper);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-5);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--bg);
    border-radius: var(--r-0);
    transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
    white-space: nowrap;
  }
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: translateY(0); }
  .btn--signal { --bg: var(--signal); --fg: var(--paper); border-color: var(--signal); }
  .btn--signal:hover { --bg: var(--signal-deep); border-color: var(--signal-deep); }
  .btn--ghost   { --bg: transparent; --fg: var(--ink); border: 1px solid var(--ink); }
  .btn--ghost:hover { --bg: var(--ink); --fg: var(--paper); }
  .btn--inverse { --bg: var(--paper); --fg: var(--ink); border-color: var(--paper); }
  .btn--lg { padding: var(--sp-4) var(--sp-6); font-size: var(--fs-base); }
  .btn--sm { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); }
  .btn--full { width: 100%; justify-content: center; }
  .btn .arrow { display: inline-block; transition: transform var(--dur-base) var(--ease); }
  .btn:hover .arrow { transform: translateX(4px); }

  /* ---- Tag / Pill ---- */
  .tag {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 2px var(--sp-2);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    background: var(--mist);
    color: var(--ink);
    border: 1px solid var(--line);
  }
  .tag--signal { background: var(--signal); color: var(--paper); border-color: var(--signal); }
  .tag--ink    { background: var(--ink); color: var(--paper); border-color: var(--ink); }

  .tag::before {
    content: "";
    width: 6px; height: 6px;
    background: currentColor;
    border-radius: 50%;
  }
  .tag.no-dot::before { display: none; }

  /* ---- Top strip / marquee ---- */
  

  /* ---- Header ---- */
  .site-header {
    position: sticky; top: 0; z-index: 50;
    background: var(--paper);
    border-bottom: 1px solid var(--line-strong);
  }
  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-6);
    padding-block: var(--sp-4);
  }
  .brand {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    font-family: var(--font-display);
    font-size: 1.125rem;
    letter-spacing: var(--track-tight);
    text-transform: uppercase;
    color: var(--ink);
  }
  .brand__mark {
    width: 28px; height: 28px;
    background: var(--ink);
    color: var(--signal);
    display: grid;
    place-items: center;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
  }
  .nav {
    display: flex;
    gap: var(--sp-6);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
  }
  .nav a { position: relative; padding-block: 4px; }
  .nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 2px;
    background: var(--signal);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-base) var(--ease);
  }
  .nav a:hover::after,
  .nav a[aria-current="page"]::after { transform: scaleX(1); }

  .site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
  }
  .cart-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--ink);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
    background: var(--paper);
  }
  .cart-pill__count {
    background: var(--signal);
    color: var(--paper);
    padding: 0 6px;
    min-width: 18px;
    text-align: center;
  }
  @media (max-width: 480px) {
    .brand span:not(.brand__mark) { display: none; }
    .cart-pill > span:first-child { display: none; }
    .site-header__inner { gap: var(--sp-3); }
    .top-strip { font-size: 10px; }
  }

  .menu-toggle {
    display: none;
    width: 40px; height: 40px;
    border: 1px solid var(--ink);
    place-items: center;
  }
  .menu-toggle span,
  .menu-toggle span::before,
  .menu-toggle span::after {
    content: "";
    display: block;
    width: 18px; height: 2px;
    background: var(--ink);
    position: relative;
    transition: transform var(--dur-fast) var(--ease);
  }
  .menu-toggle span::before { position: absolute; top: -6px; }
  .menu-toggle span::after  { position: absolute; top: 6px; }
  [data-menu-open] .menu-toggle span { background: transparent; }
  [data-menu-open] .menu-toggle span::before { transform: translateY(6px) rotate(45deg); }
  [data-menu-open] .menu-toggle span::after  { transform: translateY(-6px) rotate(-45deg); }

  @media (max-width: 860px) {
    .menu-toggle { display: grid; }
    .site-header { position: sticky; }
    .nav {
      position: absolute;
      top: 100%;
      left: 0; right: 0;
      flex-direction: column;
      gap: 0;
      background: var(--paper);
      border-bottom: 1px solid var(--ink);
      padding: var(--sp-4);
      transform: translateY(-110%);
      transition: transform var(--dur-base) var(--ease);
      font-size: var(--fs-base);
      pointer-events: none;
      max-height: calc(100svh - 64px);
      overflow-y: auto;
    }
    .nav a {
      padding-block: var(--sp-3);
      border-bottom: 1px solid var(--mist);
    }
    .nav a:last-child { border-bottom: 0; }
    [data-menu-open] .nav {
      transform: translateY(0);
      pointer-events: all;
    }
  }

  /* ---- Hero ---- */
  .hero {
    position: relative;
    background: var(--ink);
    color: var(--paper);
    overflow: hidden;
  }
  .hero::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
      linear-gradient(var(--graphite) 1px, transparent 1px),
      linear-gradient(90deg, var(--graphite) 1px, transparent 1px);
    background-size: 80px 80px;
    opacity: 0.18;
    pointer-events: none;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  }
  .hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--sp-7);
    align-items: end;
    padding-block: clamp(3rem, 9vw, var(--sp-10));
  }
  .hero__meta {
    display: flex; gap: var(--sp-4); flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--concrete);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    margin-bottom: var(--sp-5);
  }
  .hero h1 {
    font-size: clamp(2.75rem, 11vw, 9rem);
    line-height: 0.88;
    letter-spacing: -0.04em;
  }
  .hero h1 .signal { color: var(--signal); }
  .hero__lede {
    margin-top: var(--sp-5);
    max-width: 50ch;
    color: var(--concrete);
    font-size: clamp(1rem, 1.6vw, 1.25rem);
  }
  .hero__cta {
    margin-top: var(--sp-6);
    display: flex; gap: var(--sp-3); flex-wrap: wrap;
  }
  .hero__panel {
    background: var(--graphite);
    border: 1px solid var(--ink-soft);
    padding: var(--sp-5);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--concrete);
    letter-spacing: var(--track-mono);
  }
  .hero__panel dl {
    display: grid; grid-template-columns: max-content 1fr;
    column-gap: var(--sp-5); row-gap: var(--sp-2);
    margin-top: var(--sp-3);
  }
  .hero__panel dt { color: var(--steel); text-transform: uppercase; }
  .hero__panel dd { color: var(--paper); text-align: right; }
  .hero__panel-title {
    color: var(--signal);
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
    border-bottom: 1px solid var(--graphite);
    padding-bottom: var(--sp-2);
  }

  @media (max-width: 900px) {
    .hero__grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  }

  /* ---- Product card ---- */
  .product-card {
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--line);
    transition: border-color var(--dur-base) var(--ease);
  }
  .product-card:hover { border-color: var(--ink); }
  .product-card__media {
    aspect-ratio: 4 / 3;
    background: var(--mist);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
  }
  .product-card__media img,
  .product-card__media svg {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease);
  }
  .product-card:hover .product-card__media img,
  .product-card:hover .product-card__media svg {
    transform: scale(1.04);
  }
  .product-card__badges {
    position: absolute; top: var(--sp-3); left: var(--sp-3);
    display: flex; gap: var(--sp-2); flex-wrap: wrap;
  }
  .product-card__body {
    padding: var(--sp-4);
    display: flex; flex-direction: column;
    gap: var(--sp-3);
    flex: 1;
  }
  .product-card__title {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: var(--fs-md);
    line-height: 1.05;
    letter-spacing: var(--track-snug);
  }
  .product-card__specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: var(--track-mono);
    padding-block: var(--sp-3);
    border-block: 1px solid var(--line);
  }
  .product-card__specs span {
    display: flex; justify-content: space-between; gap: var(--sp-2);
  }
  .product-card__specs span b {
    color: var(--ink);
    font-weight: 700;
  }
  .product-card__foot {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--sp-3);
    margin-top: auto;
  }
  .price {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    letter-spacing: var(--track-snug);
    line-height: 1;
  }
  .price small {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-muted);
    letter-spacing: var(--track-mono);
    text-transform: uppercase;
    display: block;
    margin-bottom: 4px;
  }

  /* ---- Section heading ---- */
  .section-head {
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    gap: var(--sp-5);
    align-items: end;
    padding-bottom: var(--sp-5);
    border-bottom: 1px solid var(--ink);
    margin-bottom: var(--sp-6);
  }
  .section-head__num {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--track-wide);
    color: var(--signal);
    text-transform: uppercase;
  }
  .section-head__title {
    font-size: clamp(1.75rem, 5vw, var(--fs-2xl));
    letter-spacing: var(--track-tight);
  }
  .section-head__action a {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
    color: var(--ink);
    border-bottom: 1px solid var(--ink);
    padding-bottom: 2px;
  }
  @media (max-width: 720px) {
    .section-head {
      grid-template-columns: 1fr;
      gap: var(--sp-3);
    }
  }

  /* ---- USP / Feature row ---- */
  .feature {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-5);
    border: 1px solid var(--line);
    background: var(--bone);
    position: relative;
  }
  .feature__num {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--track-wide);
    color: var(--signal);
    text-transform: uppercase;
  }
  .feature__title {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: var(--fs-md);
    letter-spacing: var(--track-snug);
    line-height: 1.05;
  }
  .feature__desc {
    color: var(--fg-soft);
    font-size: var(--fs-sm);
    line-height: 1.5;
  }
  .feature::after {
    content: "";
    position: absolute;
    bottom: 0; right: 0;
    width: 32px; height: 32px;
    background: var(--signal);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease);
  }
  .feature:hover::after { opacity: 1; }

  /* ---- Stat bar ---- */
  
  
  
  
  
  @media (max-width: 720px) {
    
    
    
  }

  /* ---- FAQ ---- */
  .faq-item {
    border-bottom: 1px solid var(--line);
  }
  .faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: var(--sp-5) 0;
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    align-items: center;
    gap: var(--sp-4);
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: var(--fs-md);
    letter-spacing: var(--track-snug);
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item .num {
    font-family: var(--font-mono);
    color: var(--signal);
    font-size: var(--fs-xs);
    letter-spacing: var(--track-wide);
  }
  .faq-item .sign {
    width: 24px; height: 24px;
    position: relative;
  }
  .faq-item .sign::before,
  .faq-item .sign::after {
    content: "";
    position: absolute;
    background: var(--ink);
    transition: transform var(--dur-base) var(--ease);
  }
  .faq-item .sign::before { left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); }
  .faq-item .sign::after  { top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); }
  .faq-item[open] .sign::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
  .faq-item__body {
    padding-bottom: var(--sp-5);
    color: var(--fg-soft);
    max-width: 70ch;
    line-height: 1.6;
  }

  /* ---- Footer ---- */
  .site-footer {
    background: var(--ink);
    color: var(--paper);
    padding-block: var(--sp-8) var(--sp-5);
    margin-top: var(--sp-9);
  }
  .site-footer h4 {
    font-size: var(--fs-sm);
    color: var(--signal);
    margin-bottom: var(--sp-4);
    font-family: var(--font-mono);
    letter-spacing: var(--track-wide);
    font-weight: 400;
  }
  .site-footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--sp-6);
    padding-bottom: var(--sp-7);
    border-bottom: 1px solid var(--graphite);
  }
  .site-footer ul li {
    padding-block: 6px;
    font-size: var(--fs-sm);
    color: var(--concrete);
  }
  .site-footer ul a:hover { color: var(--signal); }
  .site-footer__bottom {
    display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
    padding-top: var(--sp-5);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--steel);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
  }
  .site-footer__wordmark {
    font-family: var(--font-display);
    font-size: clamp(4rem, 14vw, 12rem);
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--graphite);
    margin-block: var(--sp-7) var(--sp-4);
    -webkit-text-stroke: 1px var(--paper);
    color: transparent;
    user-select: none;
  }
  @media (max-width: 900px) {
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 560px) {
    .site-footer__grid { grid-template-columns: 1fr; gap: var(--sp-5); }
    .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  }

  /* ---- Filters bar (catalogue) ---- */
  .filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4);
    background: var(--bone);
    border: 1px solid var(--line);
    margin-bottom: var(--sp-6);
  }
  .filter-bar__label {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
    color: var(--fg-muted);
    margin-right: var(--sp-2);
  }
  .chip {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--line-strong);
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  }
  .chip:hover { background: var(--mist); }
  .chip[aria-pressed="true"] {
    background: var(--ink);
    color: var(--paper);
  }
  .chip[data-key="signal"][aria-pressed="true"] { background: var(--signal); border-color: var(--signal); }
  .filter-bar__count {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-muted);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
  }

  /* ---- Cart drawer ---- */
  .drawer-backdrop {
    position: fixed; inset: 0;
    background: oklch(0.16 0.008 60 / 0.6);
    opacity: 0; pointer-events: none;
    transition: opacity var(--dur-base) var(--ease);
    z-index: 80;
  }
  .drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(420px, 100vw);
    background: var(--paper);
    border-left: 1px solid var(--ink);
    transform: translateX(105%);
    transition: transform var(--dur-base) var(--ease);
    z-index: 90;
    display: flex; flex-direction: column;
  }
  [data-cart-open] .drawer-backdrop { opacity: 1; pointer-events: all; }
  [data-cart-open] .drawer { transform: translateX(0); }
  .drawer__head {
    padding: var(--sp-5);
    border-bottom: 1px solid var(--ink);
    display: flex; align-items: center; justify-content: space-between;
  }
  .drawer__title {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: var(--fs-lg);
    letter-spacing: var(--track-snug);
  }
  .drawer__close {
    width: 36px; height: 36px;
    border: 1px solid var(--ink);
    display: grid; place-items: center;
    font-family: var(--font-mono);
    font-size: 18px;
  }
  .drawer__body {
    flex: 1; overflow-y: auto;
    padding: var(--sp-4);
  }
  .drawer__empty {
    text-align: center;
    padding: var(--sp-7) var(--sp-4);
    color: var(--fg-muted);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
    font-size: var(--fs-xs);
  }
  .cart-line {
    display: grid;
    grid-template-columns: 64px 1fr max-content;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--line);
  }
  .cart-line__media {
    width: 64px; height: 64px;
    background: var(--mist);
    border: 1px solid var(--line);
  }
  .cart-line__title {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: var(--fs-sm);
    letter-spacing: var(--track-snug);
    line-height: 1.05;
  }
  .cart-line__meta {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: var(--track-mono);
    margin-top: 4px;
  }
  .qty {
    display: inline-flex;
    border: 1px solid var(--ink);
    align-items: stretch;
    margin-top: var(--sp-2);
  }
  .qty button {
    width: 24px; height: 24px;
    display: grid; place-items: center;
    font-family: var(--font-mono);
    color: var(--ink);
  }
  .qty button:hover { background: var(--mist); }
  .qty span {
    min-width: 30px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    align-self: center;
  }
  .cart-line__price {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--track-mono);
    text-align: right;
    align-self: start;
  }
  .cart-line__remove {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
    color: var(--fg-muted);
    margin-top: var(--sp-2);
    border-bottom: 1px solid var(--line);
    align-self: end;
  }
  .cart-line__remove:hover { color: var(--signal); border-color: var(--signal); }
  .drawer__foot {
    padding: var(--sp-5);
    border-top: 1px solid var(--ink);
    display: grid; gap: var(--sp-4);
  }
  .drawer__total {
    display: flex; justify-content: space-between; align-items: baseline;
  }
  .drawer__total .l {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
    color: var(--fg-muted);
  }
  .drawer__total .v {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    letter-spacing: var(--track-tight);
  }

  /* ---- Form ---- */
  .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
  }
  .form-grid label {
    display: flex; flex-direction: column; gap: 6px;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
    color: var(--fg-soft);
  }
  .form-grid .full { grid-column: 1 / -1; }
  .form-grid input, .form-grid textarea, .form-grid select {
    padding: var(--sp-3);
    border: 1px solid var(--ink);
    background: var(--paper);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink);
  }
  .form-grid input:focus,
  .form-grid textarea:focus,
  .form-grid select:focus {
    border-color: var(--signal);
    outline-color: var(--signal);
  }
  @media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }

  /* ---- Checkout layout ---- */
  .checkout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--sp-7);
    align-items: start;
  }
  @media (max-width: 900px) { .checkout { grid-template-columns: 1fr; } }

  /* Stepper */
  .stepper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--ink);
    margin-bottom: var(--sp-6);
  }
  .stepper__item {
    padding: var(--sp-4);
    border-right: 1px solid var(--line);
    display: flex; gap: var(--sp-3); align-items: center;
    background: var(--paper);
  }
  .stepper__item:last-child { border-right: 0; }
  .stepper__num {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    background: var(--mist);
    border: 1px solid var(--line-strong);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-muted);
    flex-shrink: 0;
  }
  .stepper__item[data-state="active"] .stepper__num {
    background: var(--signal);
    border-color: var(--signal);
    color: var(--paper);
  }
  .stepper__item[data-state="done"] .stepper__num {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
  }
  .stepper__item[data-state="done"] .stepper__num::after { content: "✓"; }
  .stepper__item[data-state="done"] .stepper__num span { display: none; }
  .stepper__label {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
  }
  .stepper__label small {
    display: block;
    color: var(--fg-muted);
    font-size: 10px;
    margin-top: 2px;
  }
  @media (max-width: 720px) {
    .stepper { grid-template-columns: 1fr; }
    .stepper__item { border-right: 0; border-bottom: 1px solid var(--line); }
    .stepper__item:last-child { border-bottom: 0; }
  }

  /* Section panel (form blocks) */
  .panel {
    border: 1px solid var(--ink);
    background: var(--paper);
    margin-bottom: var(--sp-5);
  }
  .panel__head {
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--line);
    background: var(--bone);
    display: flex; align-items: baseline; gap: var(--sp-3); justify-content: space-between;
  }
  .panel__step {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
    color: var(--signal);
  }
  .panel__title {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    text-transform: uppercase;
    letter-spacing: var(--track-snug);
    line-height: 1;
  }
  .panel__body { padding: var(--sp-5); }

  /* Delivery & payment tiles */
  .tile-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
  }
  @media (max-width: 560px) { .tile-group { grid-template-columns: 1fr; } }

  .tile {
    position: relative;
    border: 1px solid var(--line);
    padding: var(--sp-4);
    cursor: pointer;
    background: var(--paper);
    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
    display: block;
  }
  .tile:hover { border-color: var(--ink); }
  .tile input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
  .tile:has(input:checked) {
    border-color: var(--ink);
    background: var(--bone);
    box-shadow: inset 0 0 0 1px var(--ink);
  }
  .tile__head {
    display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3);
    margin-bottom: var(--sp-2);
  }
  .tile__name {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: var(--fs-sm);
    letter-spacing: var(--track-snug);
  }
  .tile__price {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--track-mono);
  }
  .tile__desc {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-muted);
    letter-spacing: var(--track-mono);
    text-transform: uppercase;
    line-height: 1.5;
  }
  .tile__radio {
    position: absolute;
    top: var(--sp-3); right: var(--sp-3);
    width: 14px; height: 14px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    display: grid; place-items: center;
  }
  .tile:has(input:checked) .tile__radio::after {
    content: "";
    width: 6px; height: 6px;
    background: var(--signal);
    border-radius: 50%;
  }

  /* Order summary card */
  .summary {
    position: sticky;
    top: 90px;
    border: 1px solid var(--ink);
    background: var(--paper);
    align-self: start;
  }
  .summary__head {
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--ink);
    background: var(--ink);
    color: var(--paper);
  }
  .summary__head-title {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: var(--fs-md);
    letter-spacing: var(--track-snug);
    line-height: 1;
  }
  .summary__head-meta {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--concrete);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    margin-top: 4px;
  }
  .summary__lines { padding: var(--sp-4) var(--sp-5); }
  .summary-line {
    display: grid;
    grid-template-columns: 48px 1fr max-content;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--line);
    align-items: center;
  }
  .summary-line:last-of-type { border-bottom: 0; }
  .summary-line__media {
    width: 48px; height: 48px;
    background: var(--mist);
    border: 1px solid var(--line);
  }
  .summary-line__name {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: var(--fs-xs);
    letter-spacing: var(--track-snug);
    line-height: 1.1;
  }
  .summary-line__qty {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--fg-muted);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    margin-top: 2px;
  }
  .summary-line__price {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--track-mono);
    text-align: right;
  }
  .summary__totals {
    padding: var(--sp-4) var(--sp-5);
    border-top: 1px solid var(--ink);
    background: var(--bone);
    display: grid; gap: var(--sp-2);
  }
  .summary__row {
    display: flex; justify-content: space-between; align-items: baseline;
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
  }
  .summary__row .l {
    color: var(--fg-soft);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    font-size: var(--fs-xs);
  }
  .summary__row--grand {
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--ink);
  }
  .summary__row--grand .l {
    font-family: var(--font-display);
    color: var(--ink);
    font-size: var(--fs-md);
    letter-spacing: var(--track-snug);
  }
  .summary__row--grand .v {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    letter-spacing: var(--track-tight);
  }
  .summary__foot {
    padding: var(--sp-4) var(--sp-5);
    border-top: 1px solid var(--ink);
    display: grid; gap: var(--sp-3);
  }

  /* Promo code */
  .promo {
    display: flex; gap: 0;
    border: 1px solid var(--ink);
    margin: var(--sp-3) 0 0;
  }
  .promo input {
    flex: 1;
    padding: var(--sp-3);
    border: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--track-mono);
    background: var(--paper);
    color: var(--ink);
  }
  .promo input:focus { outline: 0; background: var(--bone); }
  .promo button {
    padding: 0 var(--sp-4);
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
  }

  /* Cart full page table */
  .cart-table {
    width: 100%;
    border: 1px solid var(--ink);
    background: var(--paper);
  }
  .cart-table__head {
    display: grid;
    grid-template-columns: 96px 1fr 120px 110px 90px 40px;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-5);
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
  }
  .cart-row {
    display: grid;
    grid-template-columns: 96px 1fr 120px 110px 90px 40px;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--line);
    align-items: center;
  }
  .cart-row:last-child { border-bottom: 0; }
  .cart-row__media {
    width: 96px; aspect-ratio: 4/3;
    background: var(--mist);
    border: 1px solid var(--line);
    overflow: hidden;
  }
  .cart-row__name {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: var(--fs-sm);
    letter-spacing: var(--track-snug);
    line-height: 1.1;
  }
  .cart-row__meta {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-muted);
    letter-spacing: var(--track-mono);
    text-transform: uppercase;
    margin-top: 4px;
  }
  .cart-row__unit, .cart-row__total {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    letter-spacing: var(--track-mono);
    text-align: right;
  }
  .cart-row__total { font-weight: 500; }
  .cart-row__remove {
    width: 32px; height: 32px;
    border: 1px solid var(--line);
    display: grid; place-items: center;
    font-family: var(--font-mono);
  }
  .cart-row__remove:hover {
    border-color: var(--signal);
    color: var(--signal);
  }
  @media (max-width: 720px) {
    .cart-table__head { display: none; }
    .cart-row {
      grid-template-columns: 80px 1fr 40px;
      gap: var(--sp-3);
      align-items: start;
    }
    .cart-row__media { width: 80px; }
    .cart-row__unit { display: none; }
    .cart-row__total {
      grid-column: 2 / 3;
      text-align: left;
      font-family: var(--font-display);
      font-size: var(--fs-md);
    }
    .cart-row > .qty { grid-column: 2 / 3; margin-top: var(--sp-2); }
  }

  /* Empty state */
  .empty-state {
    text-align: center;
    padding: var(--sp-9) var(--sp-5);
    border: 1px solid var(--line);
    background: var(--bone);
  }
  .empty-state__icon {
    font-family: var(--font-mono);
    font-size: 64px;
    color: var(--line);
    letter-spacing: -0.05em;
    margin-bottom: var(--sp-4);
  }
  .empty-state__title {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: var(--fs-xl);
    letter-spacing: var(--track-tight);
    line-height: 0.95;
  }
  .empty-state__desc {
    color: var(--fg-soft);
    margin-top: var(--sp-3) auto var(--sp-5);
    max-width: 40ch;
    margin-inline: auto;
  }

  /* Confirmation hero */
  .confirm {
    background: var(--ink);
    color: var(--paper);
    padding-block: clamp(3rem, 8vw, var(--sp-10));
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--ink);
  }
  .confirm::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
      linear-gradient(var(--graphite) 1px, transparent 1px),
      linear-gradient(90deg, var(--graphite) 1px, transparent 1px);
    background-size: 80px 80px;
    opacity: 0.18;
    pointer-events: none;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
  }
  .confirm__check {
    width: 80px; height: 80px;
    display: grid; place-items: center;
    background: var(--signal);
    color: var(--paper);
    font-family: var(--font-display);
    font-size: 40px;
    margin-bottom: var(--sp-5);
  }
  .confirm h1 {
    font-size: clamp(3rem, 10vw, var(--fs-5xl));
    line-height: 0.88;
    letter-spacing: -0.04em;
  }
  .confirm__meta {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--concrete);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    margin-top: var(--sp-4);
  }
  .confirm__ref {
    color: var(--signal);
    font-size: var(--fs-md);
    margin-top: var(--sp-2);
    display: inline-block;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--signal);
  }

  /* Timeline */
  .timeline {
    display: grid;
    gap: 0;
    border: 1px solid var(--ink);
    margin-top: var(--sp-7);
  }
  .timeline__item {
    display: grid;
    grid-template-columns: 80px 1fr max-content;
    gap: var(--sp-4);
    padding: var(--sp-5);
    border-bottom: 1px solid var(--line);
    align-items: center;
    background: var(--paper);
  }
  .timeline__item:last-child { border-bottom: 0; }
  .timeline__item[data-state="done"] { background: var(--bone); }
  .timeline__item[data-state="active"] { background: var(--paper); box-shadow: inset 4px 0 0 var(--signal); }
  .timeline__num {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    color: var(--line);
    letter-spacing: var(--track-tight);
    line-height: 1;
  }
  .timeline__item[data-state="done"] .timeline__num { color: var(--ink); }
  .timeline__item[data-state="active"] .timeline__num { color: var(--signal); }
  .timeline__name {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: var(--fs-md);
    letter-spacing: var(--track-snug);
    line-height: 1.1;
  }
  .timeline__desc {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-muted);
    letter-spacing: var(--track-mono);
    text-transform: uppercase;
    margin-top: 4px;
  }
  .timeline__when {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-soft);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
  }
  @media (max-width: 720px) {
    .timeline__item {
      grid-template-columns: 56px 1fr;
      gap: var(--sp-3);
    }
    .timeline__when { grid-column: 2 / 3; margin-top: 4px; }
  }

  /* ---- Breadcrumb ---- */
  .crumbs {
    display: flex; gap: var(--sp-2); flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--fg-muted);
    padding-block: var(--sp-4);
  }
  .crumbs a { color: var(--fg-soft); border-bottom: 1px solid transparent; }
  .crumbs a:hover { border-color: var(--ink); color: var(--ink); }
  .crumbs span[aria-current="page"] { color: var(--ink); }

  /* ---- Product detail layout ---- */
  .product {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--sp-7);
    align-items: start;
  }
  .product__gallery {
    background: var(--mist);
    border: 1px solid var(--line);
    aspect-ratio: 4 / 3;
    position: relative;
    overflow: hidden;
  }
  .product__gallery svg, .product__gallery img {
    width: 100%; height: 100%;
    object-fit: cover;
  }
  .product__thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-3);
    margin-top: var(--sp-3);
  }
  .product__thumbs button {
    aspect-ratio: 1;
    border: 1px solid var(--line);
    background: var(--mist);
    overflow: hidden;
  }
  .product__thumbs button[aria-pressed="true"] { border-color: var(--ink); }
  .product__title {
    font-size: clamp(2rem, 4.5vw, var(--fs-2xl));
    line-height: 0.95;
  }
  .product__price {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    letter-spacing: var(--track-tight);
    line-height: 1;
  }
  .product__price-meta {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-muted);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
  }
  .product__specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-block: 1px solid var(--ink);
    margin-block: var(--sp-5);
  }
  .product__specs .row {
    display: flex; justify-content: space-between;
    padding: var(--sp-3);
    border-bottom: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--track-mono);
  }
  .product__specs .row:nth-child(odd) { border-right: 1px solid var(--line); }
  .product__specs .row b { color: var(--fg-muted); font-weight: 400; }
  .product__color-picker {
    display: flex; gap: var(--sp-2); flex-wrap: wrap;
    margin-top: var(--sp-3);
  }
  .swatch {
    width: 32px; height: 32px;
    border: 2px solid var(--paper);
    box-shadow: 0 0 0 1px var(--line);
    cursor: pointer;
  }
  .swatch[aria-pressed="true"] {
    box-shadow: 0 0 0 1px var(--ink), 0 0 0 4px var(--paper), 0 0 0 5px var(--ink);
  }
  @media (max-width: 900px) { .product { grid-template-columns: 1fr; } }

  /* ---- Page hero (interior) ---- */
  .page-hero {
    padding-block: clamp(2rem, 5vw, var(--sp-8));
    border-bottom: 1px solid var(--ink);
  }
  .page-hero__num {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
    color: var(--signal);
  }
  .page-hero h1 {
    font-size: clamp(2.5rem, 8vw, var(--fs-4xl));
    line-height: 0.9;
    margin-top: var(--sp-3);
  }
  .page-hero p {
    margin-top: var(--sp-4);
    color: var(--fg-soft);
    max-width: 60ch;
    font-size: var(--fs-md);
  }
}

/* ---------- UTILITIES ---------------------------------- */
@layer utilities {
  .signal { color: var(--signal); }
  .ink    { color: var(--ink); }
  .muted  { color: var(--fg-muted); }
  .center { text-align: center; }
  .right  { text-align: right; }
  .upper  { text-transform: uppercase; letter-spacing: var(--track-wide); }
  .hidden { display: none !important; }
  .visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
  .bg-ink     { background: var(--ink); color: var(--paper); }
  .bg-paper   { background: var(--paper); }
  .bg-signal  { background: var(--signal); color: var(--paper); }
  .bg-mist    { background: var(--mist); }
  .mt-0 { margin-top: 0; }
  .mt-2 { margin-top: var(--sp-2); }
  .mt-4 { margin-top: var(--sp-4); }
  .mt-6 { margin-top: var(--sp-6); }
  .mt-8 { margin-top: var(--sp-8); }

  /* Reveal-on-scroll (set initial via JS to avoid FOUC if disabled) */
  [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  }
  [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    [data-reveal] { opacity: 1; transform: none; }
    .top-strip .track { animation: none; }
  }
}

/* ---------- PAGES (page-specific overrides) ------------ */
@layer pages {
  /* Home — category showcase */
  .categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid var(--ink);
  }
  .cat-card {
    padding: var(--sp-6);
    border-right: 1px solid var(--line);
    background: var(--paper);
    position: relative;
    overflow: hidden;
    min-height: 280px;
    display: flex; flex-direction: column; justify-content: space-between;
    transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
  }
  .cat-card:last-child { border-right: 0; }
  .cat-card__num {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--track-wide);
    color: var(--signal);
    text-transform: uppercase;
  }
  .cat-card__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, var(--fs-2xl));
    line-height: 0.92;
    letter-spacing: var(--track-tight);
    text-transform: uppercase;
    margin-top: var(--sp-7);
  }
  .cat-card__meta {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-muted);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    margin-top: var(--sp-3);
  }
  .cat-card__arrow {
    position: absolute;
    bottom: var(--sp-5); right: var(--sp-5);
    width: 44px; height: 44px;
    border: 1px solid var(--ink);
    display: grid; place-items: center;
    transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
  }
  .cat-card:hover { background: var(--ink); color: var(--paper); }
  .cat-card:hover .cat-card__arrow { background: var(--signal); border-color: var(--signal); color: var(--paper); }
  .cat-card:hover .cat-card__num { color: var(--signal-glow); }
  .cat-card:hover .cat-card__meta { color: var(--concrete); }

  @media (max-width: 720px) {
    .categories { grid-template-columns: 1fr; }
    .cat-card { border-right: 0; border-bottom: 1px solid var(--line); min-height: 220px; }
    .cat-card:last-child { border-bottom: 0; }
  }

  /* Big editorial block */
  .editorial {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid var(--ink);
  }
  .editorial__visual {
    background: var(--ink);
    color: var(--paper);
    padding: var(--sp-7);
    min-height: 420px;
    position: relative;
    overflow: hidden;
  }
  .editorial__visual::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
      repeating-linear-gradient(45deg, transparent 0 18px, oklch(0.22 0.005 60) 18px 19px);
    opacity: 0.6;
  }
  .editorial__visual-content {
    position: relative;
    height: 100%;
    display: flex; flex-direction: column; justify-content: space-between;
  }
  .editorial__caption {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--signal);
  }
  .editorial__big {
    font-family: var(--font-display);
    font-size: clamp(3rem, 8vw, 6.5rem);
    line-height: 0.9;
    letter-spacing: -0.04em;
    text-transform: uppercase;
  }
  .editorial__body {
    padding: var(--sp-7);
    background: var(--paper);
    display: flex; flex-direction: column; justify-content: center;
    gap: var(--sp-4);
  }
  @media (max-width: 900px) {
    .editorial { grid-template-columns: 1fr; }
    .editorial__visual { min-height: 280px; }
  }

  /* Catalogue grid */
  .cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-4);
  }
  @media (max-width: 900px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { .cat-grid { grid-template-columns: 1fr; } }
}

/* ---------- WOOCOMMERCE OVERRIDES ----------------------- */
@layer woocommerce {

  /* Notices */
  .woocommerce-message,
  .woocommerce-info,
  .woocommerce-error,
  .woocommerce-notices-wrapper > .woocommerce-message {
    background: var(--bone);
    border: 1px solid var(--ink);
    border-left: 4px solid var(--signal);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-5);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
    color: var(--ink);
    list-style: none;
    border-radius: 0;
  }
  .woocommerce-message::before,
  .woocommerce-info::before,
  .woocommerce-error::before { display: none; }
  .woocommerce-message a, .woocommerce-info a, .woocommerce-error a {
    color: var(--signal);
    border-bottom: 1px solid var(--signal);
  }

  /* Cart page table */
  .woocommerce-cart .shop_table {
    border: 1px solid var(--ink);
    border-collapse: separate;
    width: 100%;
    background: var(--paper);
  }
  .woocommerce-cart .shop_table thead {
    background: var(--ink);
    color: var(--paper);
  }
  .woocommerce-cart .shop_table th {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
    padding: var(--sp-3) var(--sp-4);
    text-align: left;
    border: 0;
  }
  .woocommerce-cart .shop_table td {
    padding: var(--sp-4);
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
    font-family: var(--font-sans);
  }
  .woocommerce-cart .shop_table tr:last-child td { border-bottom: 0; }
  .woocommerce-cart .product-thumbnail img { width: 80px; height: auto; border: 1px solid var(--line); }
  .woocommerce-cart .product-name a {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: var(--fs-sm);
    letter-spacing: var(--track-snug);
    color: var(--ink);
    line-height: 1.1;
  }
  .woocommerce-cart .product-price,
  .woocommerce-cart .product-subtotal {
    font-family: var(--font-mono);
    letter-spacing: var(--track-mono);
  }
  .woocommerce-cart .product-quantity input {
    width: 80px;
    padding: var(--sp-2);
    border: 1px solid var(--ink);
    background: var(--paper);
    text-align: center;
    font-family: var(--font-mono);
  }
  .woocommerce-cart .product-remove a {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border: 1px solid var(--line);
    font-family: var(--font-mono);
    color: var(--ink);
    border-radius: 0;
    background: transparent;
  }
  .woocommerce-cart .product-remove a:hover {
    border-color: var(--signal);
    color: var(--signal);
    background: transparent;
  }

  /* Coupon row */
  .woocommerce-cart .coupon {
    display: flex; gap: 0;
    border: 1px solid var(--ink);
  }
  .woocommerce-cart .coupon input[type="text"] {
    flex: 1;
    padding: var(--sp-3);
    border: 0;
    background: var(--paper);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--track-mono);
  }
  .woocommerce-cart .coupon .button {
    border: 0;
    padding: 0 var(--sp-4);
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
    cursor: pointer;
  }

  /* Buttons (WC adds .button class everywhere) */
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .woocommerce #respond input#submit {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-5);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
    background: var(--ink);
    color: var(--paper);
    border: 1px solid var(--ink);
    border-radius: 0;
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease);
    text-shadow: none;
    box-shadow: none;
    line-height: 1;
  }
  .woocommerce a.button.alt,
  .woocommerce button.button.alt,
  .woocommerce input.button.alt,
  .woocommerce .checkout-button {
    background: var(--signal);
    border-color: var(--signal);
  }
  .woocommerce a.button:hover,
  .woocommerce button.button:hover,
  .woocommerce input.button:hover {
    transform: translateY(-1px);
    background: var(--ink);
    color: var(--paper);
  }
  .woocommerce a.button.alt:hover,
  .woocommerce button.button.alt:hover {
    background: var(--signal-deep);
    border-color: var(--signal-deep);
  }

  /* Cart totals card */
  .cart_totals h2,
  .cross-sells h2 {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    text-transform: uppercase;
    letter-spacing: var(--track-tight);
    margin-bottom: var(--sp-4);
  }
  .cart_totals table {
    border: 1px solid var(--ink);
    background: var(--paper);
    width: 100%;
  }
  .cart_totals table th {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
    color: var(--fg-muted);
    padding: var(--sp-3) var(--sp-4);
    text-align: left;
    border-bottom: 1px solid var(--line);
    background: var(--bone);
  }
  .cart_totals table td {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--line);
    text-align: right;
    font-family: var(--font-mono);
  }
  .cart_totals .order-total td,
  .cart_totals .order-total th {
    font-family: var(--font-display);
    font-size: var(--fs-md);
    text-transform: uppercase;
    background: var(--ink);
    color: var(--paper);
    border-bottom: 0;
  }
  .wc-proceed-to-checkout { margin-top: var(--sp-4); display: flex; }
  .wc-proceed-to-checkout .checkout-button {
    width: 100%;
    justify-content: center;
    padding: var(--sp-4) var(--sp-5);
    font-size: var(--fs-base);
  }

  /* Checkout form */
  .woocommerce-checkout .col-1,
  .woocommerce-checkout .col-2 {
    width: 100% !important;
    float: none !important;
  }
  .woocommerce form.checkout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--sp-7);
    align-items: start;
  }
  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout #order_review { grid-column: 2; }
  .woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / 3; }
  @media (max-width: 900px) {
    .woocommerce form.checkout { grid-template-columns: 1fr; }
    .woocommerce-checkout #order_review_heading,
    .woocommerce-checkout #order_review,
    .woocommerce-checkout #customer_details { grid-column: 1; grid-row: auto; }
  }

  .woocommerce-checkout h3 {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    text-transform: uppercase;
    letter-spacing: var(--track-snug);
    padding: var(--sp-4) var(--sp-5);
    background: var(--bone);
    border: 1px solid var(--ink);
    border-bottom: 0;
    margin: var(--sp-5) 0 0;
  }
  .woocommerce-checkout .woocommerce-billing-fields,
  .woocommerce-checkout .woocommerce-shipping-fields,
  .woocommerce-checkout .woocommerce-additional-fields {
    padding: var(--sp-5);
    border: 1px solid var(--ink);
    background: var(--paper);
    margin-bottom: var(--sp-5);
  }
  .woocommerce-checkout .form-row {
    margin-bottom: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
  }
  .woocommerce-checkout .form-row label {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
    color: var(--fg-soft);
  }
  .woocommerce-checkout .form-row input,
  .woocommerce-checkout .form-row textarea,
  .woocommerce-checkout .form-row select,
  .woocommerce-checkout .select2-selection,
  .woocommerce-checkout .select2-selection__rendered {
    padding: var(--sp-3) !important;
    border: 1px solid var(--ink) !important;
    background: var(--paper) !important;
    font-family: var(--font-sans) !important;
    font-size: var(--fs-base) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--ink) !important;
    border-radius: 0 !important;
    height: auto !important;
    line-height: 1.4 !important;
  }
  .select2-container--default .select2-selection--single {
    height: auto !important;
    min-height: 45px;
  }

  /* Two-column form rows */
  .woocommerce-checkout .form-row-first { width: calc(50% - 8px); float: left; clear: both; }
  .woocommerce-checkout .form-row-last { width: calc(50% - 8px); float: right; clear: none; }
  .woocommerce-checkout .form-row-wide { width: 100%; clear: both; }

  /* Order review */
  #order_review {
    position: sticky;
    top: 90px;
    border: 1px solid var(--ink);
    background: var(--paper);
  }
  #order_review_heading {
    font-family: var(--font-display);
    font-size: var(--fs-md);
    text-transform: uppercase;
    letter-spacing: var(--track-snug);
    padding: var(--sp-4) var(--sp-5);
    background: var(--ink);
    color: var(--paper);
    margin: 0;
    border: 0;
  }
  #order_review .shop_table {
    border: 0;
    background: var(--paper);
  }
  #order_review .shop_table th {
    background: transparent;
    color: var(--fg-soft);
    border-bottom: 1px solid var(--line);
    padding: var(--sp-3) var(--sp-4);
  }
  #order_review .shop_table tfoot th {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
    color: var(--fg-muted);
    background: var(--bone);
  }
  #order_review .order-total th,
  #order_review .order-total td {
    font-family: var(--font-display);
    font-size: var(--fs-md);
    text-transform: uppercase;
    background: var(--ink);
    color: var(--paper);
  }
  .woocommerce-checkout-payment {
    background: var(--bone);
    border: 1px solid var(--ink);
    border-top: 0;
    padding: var(--sp-5);
  }
  .woocommerce-checkout-payment ul.payment_methods {
    list-style: none;
    padding: 0; margin: 0;
    display: grid; gap: var(--sp-3);
  }
  .woocommerce-checkout-payment ul.payment_methods li {
    border: 1px solid var(--line);
    background: var(--paper);
    padding: var(--sp-3) var(--sp-4);
  }
  .woocommerce-checkout-payment ul.payment_methods li label {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: var(--fs-sm);
    letter-spacing: var(--track-snug);
    margin-left: var(--sp-2);
  }
  .woocommerce-checkout-payment #place_order {
    width: 100%;
    margin-top: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    font-size: var(--fs-base);
    justify-content: center;
  }

  /* Thank-you / order received */
  .woocommerce-order {
    display: grid;
    gap: var(--sp-6);
  }
  .woocommerce-order .woocommerce-thankyou-order-received {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, var(--fs-2xl));
    text-transform: uppercase;
    letter-spacing: var(--track-tight);
    line-height: 1;
    margin-bottom: var(--sp-5);
  }
  .woocommerce-order .woocommerce-order-overview {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--ink);
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .woocommerce-order .woocommerce-order-overview li {
    padding: var(--sp-4) var(--sp-5);
    border-right: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
    color: var(--fg-muted);
  }
  .woocommerce-order .woocommerce-order-overview li:last-child { border-right: 0; }
  .woocommerce-order .woocommerce-order-overview li strong {
    display: block;
    margin-top: 4px;
    font-family: var(--font-display);
    font-size: var(--fs-md);
    color: var(--ink);
    letter-spacing: var(--track-snug);
  }
  @media (max-width: 720px) {
    .woocommerce-order .woocommerce-order-overview { grid-template-columns: repeat(2, 1fr); }
    .woocommerce-order .woocommerce-order-overview li:nth-child(2) { border-right: 0; }
    .woocommerce-order .woocommerce-order-overview li:nth-child(1),
    .woocommerce-order .woocommerce-order-overview li:nth-child(2) { border-bottom: 1px solid var(--line); }
  }

  /* My-account */
  .woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    border: 1px solid var(--ink);
    background: var(--paper);
  }
  .woocommerce-MyAccount-navigation ul li {
    border-bottom: 1px solid var(--line);
  }
  .woocommerce-MyAccount-navigation ul li:last-child { border-bottom: 0; }
  .woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: var(--sp-3) var(--sp-4);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
    color: var(--ink);
  }
  .woocommerce-MyAccount-navigation ul li.is-active a,
  .woocommerce-MyAccount-navigation ul li a:hover {
    background: var(--ink);
    color: var(--paper);
  }
  .woocommerce-account .woocommerce {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--sp-5);
  }
  @media (max-width: 720px) {
    .woocommerce-account .woocommerce { grid-template-columns: 1fr; }
  }

  /* Quantity input on single product */
  .woocommerce .quantity .qty {
    width: 80px;
    padding: var(--sp-3);
    border: 1px solid var(--ink);
    background: var(--paper);
    text-align: center;
    font-family: var(--font-mono);
    border-radius: 0;
  }

  /* Price (WC outputs .woocommerce-Price-amount) */
  .woocommerce-Price-amount,
  .woocommerce-Price-amount bdi {
    font-family: inherit;
  }

  /* Single product summary */
  .woocommerce div.product .product_meta,
  .woocommerce div.product form.cart {
    margin-top: var(--sp-5);
  }
  .woocommerce div.product .product_meta {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-muted);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    border-top: 1px solid var(--line);
    padding-top: var(--sp-4);
  }
  .woocommerce div.product form.cart {
    display: flex;
    gap: var(--sp-3);
    align-items: center;
    flex-wrap: wrap;
  }
  .woocommerce div.product form.cart .quantity { margin: 0; }
  .woocommerce div.product form.cart .button {
    background: var(--signal);
    border-color: var(--signal);
    padding: var(--sp-3) var(--sp-5);
  }
  .woocommerce div.product form.cart .button:hover {
    background: var(--signal-deep);
    border-color: var(--signal-deep);
  }

  /* Stock availability */
  .woocommerce div.product p.stock {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
  }
  .woocommerce div.product .stock.in-stock { color: var(--signal); }
  .woocommerce div.product .stock.out-of-stock { color: var(--fg-muted); }

  /* Pagination */
  .woocommerce-pagination ul.page-numbers {
    border: 0;
    display: flex;
    gap: 0;
    justify-content: center;
    margin-top: var(--sp-7);
    padding: 0;
    list-style: none;
  }
  .woocommerce-pagination ul.page-numbers li {
    border: 0;
  }
  .woocommerce-pagination .page-numbers {
    border: 1px solid var(--ink);
    border-right: 0;
    padding: var(--sp-3) var(--sp-4);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
    color: var(--ink);
    background: var(--paper);
    border-radius: 0;
  }
  .woocommerce-pagination ul.page-numbers li:last-child .page-numbers {
    border-right: 1px solid var(--ink);
  }
  .woocommerce-pagination .page-numbers.current,
  .woocommerce-pagination .page-numbers:hover {
    background: var(--ink);
    color: var(--paper);
  }

  /* Related products section header */
  .related h2,
  .upsells h2,
  .cross-sells h2,
  .woocommerce-grouped-product-list-item__label {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: var(--track-tight);
  }

  /* Suppress radius/shadow on WC default elements */
  .woocommerce input,
  .woocommerce select,
  .woocommerce textarea,
  .woocommerce .form-row input.input-text,
  .woocommerce .form-row textarea {
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}
/* === Hero background + taille optimisee === */
.hero {
  background-image: url('https://containermsc.com/wp-content/uploads/2026/05/conteneurs-colores-hero-scaled.jpg') !important;
  background-size: cover !important;
  background-position: center 35% !important;
  background-repeat: no-repeat !important;
  min-height: 55vh !important;
  max-height: 72vh !important;
  overflow: hidden !important;
}

/* Panneau specs masque — colonne droite vide pour pousser le texte a gauche */
.hero__panel,
.hero__panel-title,
.hero__panel dl {
  display: none !important;
}

/* Grille 2 colonnes conservee : contenu a gauche, espace vide a droite */
.hero__grid {
  grid-template-columns: 0.55fr 0.45fr !important;
  max-width: 100% !important;
  padding-block: clamp(1.5rem, 3.5vw, 2.75rem) !important;
  align-items: center !important;
}

.hero h1 {
  font-size: clamp(2rem, 5.5vw, 4.25rem) !important;
  line-height: 1 !important;
}

.hero__lede {
  font-size: clamp(0.875rem, 1.2vw, 1rem) !important;
  margin-top: var(--sp-3) !important;
}

.hero__cta {
  margin-top: var(--sp-4) !important;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(10, 10, 15, 0.72) 0%,
    rgba(10, 10, 15, 0.45) 55%,
    rgba(10, 10, 15, 0.12) 100%
  );
  z-index: 0;
  pointer-events: none;
}

.hero .wrap,
.hero h1,
.hero p,
.hero .hero__cta,
.hero .hero__meta,
.hero .hero__lede,
.hero .signal {
  position: relative;
  z-index: 1;
}

















/* Responsive mobile */
@media (max-width: 640px) {
  
  
  
}

/* === Section categories masquee (demande client) === */
section.section.wrap:has(.categories) {
  display: none !important;
} display: none !important;
}

/* ═══════════════════════════════════════════════════════
   SHOP HERO — Header immersif Nos Produits
   ═══════════════════════════════════════════════════════ */

/* Animations */
@keyframes shopSlideUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes shopFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Section principale */
.shop-hero {
  position: relative;
  background: var(--ink);
  overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  border-bottom: 3px solid var(--signal);
}

/* Image de fond avec overlay */
.shop-hero__bg {
  position: absolute;
  inset: 0;
  background-image: url('https://containermsc.com/wp-content/uploads/2026/05/conteneurs-colores-hero-scaled.jpg');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.18;
  z-index: 0;
}
.shop-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10,10,15,0.55) 0%,
    rgba(10,10,15,0.85) 100%
  );
}

/* Grille pattern subtil */
.shop-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  z-index: 0;
  pointer-events: none;
}

/* Contenu centré */
.shop-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.5rem);
}

/* Fil d'Ariane */
.shop-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  animation: shopFadeIn 0.5s ease both;
}
.shop-hero__breadcrumb a {
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  transition: color 0.2s;
}
.shop-hero__breadcrumb a:hover { color: var(--signal); }
.shop-hero__breadcrumb span:last-child { color: var(--signal); }

/* Titre principal */
.shop-hero__title {
  font-size: clamp(2.25rem, 6vw, 4.5rem) !important;
  font-weight: 900 !important;
  line-height: 0.95 !important;
  letter-spacing: -0.03em !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  animation: shopSlideUp 0.6s cubic-bezier(0.22,1,0.36,1) 0.1s both;
}

/* Zone contrôles (recherche + filtres) */
.shop-hero__controls {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  animation: shopFadeIn 0.6s ease 0.3s both;
}

/* ── Barre de recherche ── */
.shop-search {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 520px;
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  transition: border-color 0.2s, background 0.2s;
}
.shop-search:focus-within {
  border-color: var(--signal);
  background: rgba(255,255,255,0.1);
}
.shop-search__icon {
  position: absolute;
  left: 14px;
  color: rgba(255,255,255,0.4);
  pointer-events: none;
  flex-shrink: 0;
}
.shop-search__input {
  width: 100%;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  padding: 0.7rem 1rem 0.7rem 2.75rem !important;
  font-size: 0.9rem !important;
  color: #fff !important;
  font-family: var(--font-body) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.shop-search__input::placeholder { color: rgba(255,255,255,0.35); }

/* ── Filtres rapides ── */
.shop-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
}
.shop-filters__group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.shop-filters__label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  white-space: nowrap;
}
.shop-filters__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.shop-filters__count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.05em;
}
.shop-filters__count strong {
  color: var(--signal);
  font-weight: 700;
}

/* Chips ghost (dans le hero) */
.chip--ghost {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.75rem;
  font-size: 0.75rem;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.65);
  background: transparent;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap;
}
.chip--ghost:hover {
  border-color: var(--signal);
  color: var(--signal);
  background: rgba(146,189,40,0.08);
}
.chip--ghost.chip--on {
  border-color: var(--signal);
  background: var(--signal);
  color: #fff;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .shop-hero {
    padding-block: clamp(2rem, 5vw, 3rem);
  }
  .shop-hero__title {
    font-size: clamp(1.8rem, 8vw, 2.75rem) !important;
  }
  .shop-search { max-width: 100%; }
  .shop-filters { gap: 0.5rem 0.75rem; }
  .shop-filters__count { width: 100%; margin-left: 0; }
}
@media (max-width: 480px) {
  .shop-hero__controls { gap: 0.75rem; }
  .chip--ghost { padding: 0.25rem 0.6rem; font-size: 0.7rem; }
}

/* ═══════════════════════════════════════════════════════
   BRAND STATEMENT — Section immersive avec carte blanche
   ═══════════════════════════════════════════════════════ */

.brand-statement {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  align-items: center;
}

/* Image de fond */
.brand-statement__bg {
  position: absolute;
  inset: 0;
  background-image: url('https://containermsc.com/wp-content/uploads/2026/05/conteneurs-port.jpg');
  background-size: cover;
  background-position: center 55%;
  z-index: 0;
  transition: transform 6s ease;
}
.brand-statement:hover .brand-statement__bg {
  transform: scale(1.03);
}

/* Overlay léger pour ne pas trop écraser l'image */
.brand-statement__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10,10,15,0.25) 0%,
    rgba(10,10,15,0.30) 100%
  );
}

/* Wrapper centré */
.brand-statement__inner {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding-block: clamp(3rem, 7vw, 5rem);
}

/* Carte blanche centrale */
.brand-statement__card {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 4px;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 5vw, 4rem);
  max-width: 780px;
  width: 100%;
  text-align: center;
  box-shadow: 0 8px 48px rgba(0,0,0,0.18), 0 2px 12px rgba(0,0,0,0.08);
  border-top: 4px solid var(--signal);
}

/* Titre */
.brand-statement__title {
  font-size: clamp(1.3rem, 2.5vw, 1.9rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: var(--ink) !important;
  margin: 0 0 1.25rem !important;
  letter-spacing: -0.02em !important;
}

/* Texte */
.brand-statement__text {
  font-size: clamp(0.9rem, 1.3vw, 1.05rem) !important;
  line-height: 1.75 !important;
  color: #4a4a4a !important;
  margin: 0 !important;
  max-width: 65ch;
  margin-inline: auto !important;
}

/* Responsive */
@media (max-width: 768px) {
  .brand-statement {
    min-height: 340px;
  }
  .brand-statement__card {
    margin-inline: 1rem;
    border-radius: 4px;
  }
}
@media (max-width: 480px) {
  .brand-statement__card {
    padding: 1.5rem 1.25rem;
  }
  .brand-statement__title {
    font-size: 1.2rem !important;
  }
}

/* === Menu navigation — police et espacement améliorés === */
.nav {
  display: flex !important;
  align-items: center !important;
  gap: clamp(0.75rem, 1.8vw, 1.75rem) !important;
  flex-wrap: nowrap !important;
}

.nav a {
  font-family: var(--font-body) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  padding: 0.35rem 0.1rem !important;
  position: relative !important;
  transition: color 0.2s ease !important;
  line-height: 1.2 !important;
}

/* Soulignement animé */
.nav a::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important; right: 0 !important;
  height: 2px !important;
  background: var(--signal) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform 0.22s ease !important;
}
.nav a:hover { color: var(--signal) !important; }
.nav a:hover::after,
.nav a[aria-current="page"]::after { transform: scaleX(1) !important; }
.nav a[aria-current="page"] {
  color: var(--signal) !important;
  font-weight: 700 !important;
}

/* CGV — style discret (texte long) */
.nav a:last-child {
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  color: var(--concrete) !important;
  letter-spacing: 0.02em !important;
}
.nav a:last-child:hover { color: var(--signal) !important; }

/* Mobile : menu vertical complet */
@media (max-width: 900px) {
  .nav {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    padding: 0.5rem 0 !important;
  }
  .nav a {
    width: 100% !important;
    padding: 0.75rem var(--sp-5) !important;
    font-size: 0.85rem !important;
    border-bottom: 1px solid var(--line) !important;
    white-space: normal !important;
  }
  .nav a:last-child {
    font-size: 0.8rem !important;
    border-bottom: 0 !important;
  }
}

/* === Logo SVG dans le header === */
.brand--logo {
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  text-decoration: none !important;
  background: none !important;
}

.brand__logo {
  height: 52px !important;
  width: auto !important;
  max-width: 220px !important;
  display: block !important;
  object-fit: contain !important;
  transition: opacity 0.2s ease !important;
}

.brand--logo:hover .brand__logo {
  opacity: 0.88 !important;
}

@media (max-width: 768px) {
  .brand__logo {
    height: 40px !important;
    max-width: 170px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION À PROPOS — Homepage
   ═══════════════════════════════════════════════════════════════ */

.about-section {
  position: relative;
  background: #f5f3ee;
  overflow: hidden;
  padding-block: clamp(3.5rem, 7vw, 6rem);
}

/* Filigrane MSC */
.about__watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(8rem, 22vw, 18rem);
  font-weight: 900;
  color: rgba(0,0,0,0.04);
  letter-spacing: -0.04em;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 0;
  font-family: 'Arial Black', sans-serif;
}

/* Layout 2 colonnes */
.about__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}

/* ── COLONNE VISUELLE ── */
.about__visual {
  position: relative;
}

/* Angle décoratif vert en haut à gauche */
.about__corner {
  position: absolute;
  top: -12px;
  left: -12px;
  width: 80px;
  height: 80px;
  border-top: 5px solid #92BD28;
  border-left: 5px solid #92BD28;
  z-index: 2;
  pointer-events: none;
}

/* Wrapper image */
.about__img-wrap {
  position: relative;
  border-radius: 4px;
  overflow: visible;
}

.about__img {
  width: 100%;
  height: clamp(280px, 35vw, 440px);
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 4px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

/* Badge circulaire "12 ans" */
.about__badge {
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #92BD28;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 6px 20px rgba(146,189,40,0.35);
  border: 3px solid #f5f3ee;
  z-index: 3;
  line-height: 1.1;
}
.about__badge strong {
  font-size: 1.7rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}
.about__badge span {
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.about__badge small {
  font-size: 0.55rem;
  color: rgba(255,255,255,0.85);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 1px;
}

/* Pills de réassurance */
.about__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2rem;
}
.about__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: #fff;
  border: 1px solid rgba(146,189,40,0.3);
  border-radius: 20px;
  padding: 0.35rem 0.9rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
}
.about__pill svg { color: #92BD28; flex-shrink: 0; }

/* ── COLONNE CONTENU ── */
.about__content {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.5rem);
}

/* Eyebrow */
.about__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #92BD28;
}
.about__eyebrow-line {
  display: block;
  width: 32px;
  height: 2px;
  background: #92BD28;
  flex-shrink: 0;
}

/* Titre principal */
.about__title {
  font-size: clamp(2rem, 4.5vw, 3.4rem) !important;
  font-weight: 900 !important;
  line-height: 0.95 !important;
  letter-spacing: -0.03em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  margin: 0 !important;
}
.about__title-accent {
  color: #92BD28;
}

/* Description */
.about__desc {
  font-size: clamp(0.9rem, 1.3vw, 1.05rem) !important;
  line-height: 1.75 !important;
  color: #555 !important;
  max-width: 52ch;
  margin: 0 !important;
}

/* Grille 2×2 fonctionnalités */
.about__features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}
.about__feature {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  background: #fff;
  border: 1.5px solid rgba(0,0,0,0.07);
  border-radius: 6px;
  padding: 1rem 1.1rem;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  cursor: default;
}
.about__feature:hover {
  border-color: #92BD28;
  box-shadow: 0 4px 16px rgba(146,189,40,0.14);
  transform: translateY(-2px);
}
.about__feature-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(146,189,40,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #92BD28;
}
.about__feature-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}
.about__feature-sub {
  font-size: 0.75rem;
  color: #888;
  margin-top: 2px;
  line-height: 1.3;
}

/* Boutons CTA */
.about__cta {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  align-items: center;
}
.about__btn-primary {
  background: #92BD28 !important;
  color: #fff !important;
  border: 2px solid #92BD28 !important;
  padding: 0.75rem 1.5rem !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  transition: background 0.2s, transform 0.15s !important;
  white-space: nowrap;
}
.about__btn-primary:hover {
  background: #7aa820 !important;
  border-color: #7aa820 !important;
  transform: translateY(-1px) !important;
}
.about__btn-secondary {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1.5px solid rgba(0,0,0,0.2) !important;
  padding: 0.75rem 1.5rem !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  transition: border-color 0.2s, color 0.2s !important;
  white-space: nowrap;
}
.about__btn-secondary:hover {
  border-color: #92BD28 !important;
  color: #92BD28 !important;
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .about__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .about__visual { max-width: 520px; margin-inline: auto; width: 100%; }
  .about__features { grid-template-columns: 1fr 1fr; }
  .about__title { font-size: clamp(1.8rem, 7vw, 2.8rem) !important; }
}
@media (max-width: 560px) {
  .about__features { grid-template-columns: 1fr; }
  .about__pills { gap: 0.4rem; }
  .about__badge { width: 82px; height: 82px; right: -10px; bottom: -10px; }
  .about__badge strong { font-size: 1.4rem; }
  .about__cta { flex-direction: column; }
  .about__btn-primary,
  .about__btn-secondary { width: 100%; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION NOS PRODUITS — Homepage redesignée
   ═══════════════════════════════════════════════════════════════ */

.hp-products {
  background: #f5f3ee;
  padding-block: clamp(3rem, 6vw, 5rem);
}

/* ── En-tête de section ── */
.hp-products__header {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.hp-products__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #92BD28;
}
.hp-products__eyebrow-line {
  display: block;
  width: 28px;
  height: 2px;
  background: #92BD28;
  flex-shrink: 0;
}
.hp-products__title {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  color: var(--ink) !important;
  margin: 0 !important;
  line-height: 1 !important;
}

/* ── Grille 3 colonnes ── */
.hp-products__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

/* ══════════════════════════════════
   CARTE PRODUIT (hpc = hp card)
   ══════════════════════════════════ */
.hpc {
  background: #fff;
  border: 1.5px solid rgba(0,0,0,0.07);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
.hpc:hover {
  border-color: #92BD28;
  box-shadow: 0 6px 28px rgba(146,189,40,0.15);
  transform: translateY(-3px);
}

/* Image */
.hpc__media {
  position: relative;
  display: block;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #f0f0f0;
}
.hpc__media img,
.hpc__media svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.hpc:hover .hpc__media img,
.hpc:hover .hpc__media svg { transform: scale(1.04); }

/* Badge état */
.hpc__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 0.22rem 0.65rem;
  border-radius: 20px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hpc__badge--new {
  background: #92BD28;
  color: #fff;
}
.hpc__badge--used {
  background: rgba(0,0,0,0.6);
  color: #fff;
}

/* Corps */
.hpc__body {
  padding: 1rem 1.1rem 0.6rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Titre */
.hpc__title {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  color: var(--ink) !important;
}
.hpc__title a {
  color: inherit !important;
  text-decoration: none !important;
}
.hpc__title a:hover { color: #92BD28 !important; }

/* Specs */
.hpc__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.75rem;
}
.hpc__spec {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  color: #777;
  font-family: var(--font-mono);
}
.hpc__spec svg { color: #92BD28; flex-shrink: 0; }
.hpc__spec--stock { color: #92BD28; font-weight: 600; }

/* Prix */
.hpc__price {
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.hpc__price small {
  display: block;
  font-size: 0.65rem;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 1px;
}
.hpc__price .woocommerce-Price-amount {
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
}

/* Pied de carte */
.hpc__foot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.1rem;
  border-top: 1px solid rgba(0,0,0,0.06);
  background: rgba(0,0,0,0.015);
}
.hpc__btn-devis {
  flex: 1;
  text-align: center;
  background: #92BD28;
  color: #fff !important;
  padding: 0.55rem 0.75rem;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none !important;
  transition: background 0.2s;
  white-space: nowrap;
}
.hpc__btn-devis:hover { background: #7aa820; }
.hpc__btn-voir {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(0,0,0,0.12);
  border-radius: 4px;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}
.hpc__btn-voir:hover { border-color: #92BD28; color: #92BD28; }

/* ── Footer section (compteur + CTA) ── */
.hp-products__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(2rem, 3vw, 2.5rem);
  text-align: center;
}
.hp-products__count {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: #777;
  margin: 0;
}
.hp-products__count svg { color: #92BD28; }
.hp-products__count strong { color: var(--ink); font-weight: 700; }
.hp-products__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #92BD28;
  color: #fff !important;
  padding: 0.85rem 2.25rem;
  border-radius: 4px;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none !important;
  letter-spacing: 0.01em;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 16px rgba(146,189,40,0.28);
}
.hp-products__cta:hover {
  background: #7aa820;
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(146,189,40,0.35);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .hp-products__grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}
@media (max-width: 768px) {
  .hp-products__grid { grid-template-columns: repeat(2, 1fr); }
  .hpc__price .woocommerce-Price-amount { font-size: 1.05rem !important; }
}
@media (max-width: 480px) {
  .hp-products__grid { grid-template-columns: 1fr; }
  .hp-products__cta { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   PAGE CGV — CONDITIONS GÉNÉRALES DE VENTE
   ═══════════════════════════════════════════════════════════════ */

/* Animations */
@keyframes cgvFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── HERO ── */
.cgv-hero {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.cgv-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 55%;
  z-index: 0;
  transform: scale(1.04);
}
.cgv-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(10,10,15,0.88) 0%, rgba(10,10,15,0.65) 100%);
  z-index: 1;
}
.cgv-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: clamp(3rem, 6vw, 5rem);
}
.cgv-hero__badge {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--signal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.cgv-hero__title {
  font-size: clamp(1.8rem, 5vw, 3.2rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  line-height: 1 !important;
  margin: 0 !important;
}
.cgv-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.6);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  margin: 0;
}
.cgv-hero__meta i { color: var(--signal); margin-right: 0.3rem; }
.cgv-hero__sep { opacity: 0.3; }

/* ── SOMMAIRE MOBILE ── */
.cgv-toc {
  background: var(--ink);
  border-bottom: 3px solid var(--signal);
  position: sticky;
  top: 0;
  z-index: 80;
  display: none;
}
.cgv-toc__wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: 0.6rem;
  overflow: hidden;
}
.cgv-toc__label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--signal);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  font-family: var(--font-mono);
}
.cgv-toc__scroll {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cgv-toc__scroll::-webkit-scrollbar { display: none; }
.cgv-toc__link {
  white-space: nowrap;
  padding: 0.25rem 0.65rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.12);
  transition: color 0.15s, border-color 0.15s;
}
.cgv-toc__link:hover,
.cgv-toc__link.active { color: var(--signal); border-color: var(--signal); }

/* ── LAYOUT 2 COLONNES ── */
.cgv-wrap { background: #f5f3ee; padding-block: clamp(2.5rem, 5vw, 4rem); }
.cgv-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}

/* ── SIDEBAR ── */
.cgv-sidebar { position: sticky; top: 80px; }
.cgv-sidebar__inner {
  background: #fff;
  border: 1.5px solid rgba(0,0,0,0.07);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.cgv-sidebar__heading {
  background: var(--ink);
  color: #fff;
  padding: 0.9rem 1.1rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--font-mono);
}
.cgv-sidebar__heading i { color: var(--signal); margin-right: 0.4rem; }
.cgv-nav { display: flex; flex-direction: column; }
.cgv-nav__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.1rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #555;
  text-decoration: none;
  border-left: 3px solid transparent;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.cgv-nav__item:last-child { border-bottom: none; }
.cgv-nav__item:hover,
.cgv-nav__item--active {
  color: var(--signal);
  background: rgba(146,189,40,0.06);
  border-left-color: var(--signal);
}
.cgv-nav__ico { width: 14px; flex-shrink: 0; color: var(--signal); opacity: 0.7; }
.cgv-nav__item--active .cgv-nav__ico { opacity: 1; }
.cgv-sidebar__cta {
  padding: 0.9rem 1.1rem;
  border-top: 1px solid rgba(0,0,0,0.07);
  background: rgba(146,189,40,0.05);
}
.cgv-sidebar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--signal);
  color: #fff !important;
  padding: 0.65rem 1rem;
  border-radius: 5px;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none !important;
  transition: background 0.2s;
}
.cgv-sidebar__btn:hover { background: #7aa820; }

/* ── CARTES ARTICLES ── */
.cgv-articles { display: flex; flex-direction: column; gap: 1.25rem; }

.cgv-card {
  position: relative;
  background: #fff;
  border: 1.5px solid rgba(0,0,0,0.07);
  border-radius: 8px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  transition: border-color 0.2s, box-shadow 0.2s;
  animation: cgvFadeUp 0.5s ease both;
}
.cgv-card:hover {
  border-color: rgba(146,189,40,0.4);
  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
}

/* Numéro filigrane */
.cgv-card__watermark {
  position: absolute;
  top: -0.5rem;
  right: 1rem;
  font-size: clamp(5rem, 10vw, 8rem);
  font-weight: 900;
  color: rgba(146,189,40,0.07);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  font-family: 'Arial Black', sans-serif;
  letter-spacing: -0.05em;
}

/* En-tête carte */
.cgv-card__header {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.cgv-card__icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: rgba(146,189,40,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--signal);
}
.cgv-card__num {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--signal);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: var(--font-mono);
  margin-bottom: 0.2rem;
}
.cgv-card__title {
  font-size: clamp(1.1rem, 2vw, 1.4rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  line-height: 1.1 !important;
}

/* Corps carte */
.cgv-card__body { position: relative; z-index: 1; }
.cgv-card__body p, .cgv-card__body li {
  font-size: 0.93rem !important;
  line-height: 1.75 !important;
  color: #444 !important;
  margin-bottom: 0.6rem !important;
}
.cgv-card__body strong { color: var(--ink); font-weight: 700; }
.cgv-card__body ul { padding-left: 1.2rem; margin: 0.5rem 0; }
.cgv-card__body li { margin-bottom: 0.4rem !important; }

/* ── BOUTONS FOOTER ── */
.cgv-footer-btns {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  padding: 2rem 0 1rem;
  margin-top: 0.5rem;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.cgv-footer-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 2rem;
  border-radius: 5px;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none !important;
  transition: all 0.2s;
}
.cgv-footer-btn--primary {
  background: var(--signal);
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(146,189,40,0.3);
}
.cgv-footer-btn--primary:hover { background: #7aa820; transform: translateY(-2px); }
.cgv-footer-btn--ghost {
  background: transparent;
  color: var(--ink) !important;
  border: 1.5px solid rgba(0,0,0,0.15);
}
.cgv-footer-btn--ghost:hover { border-color: var(--signal); color: var(--signal) !important; }

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
  .cgv-layout { grid-template-columns: 1fr; }
  .cgv-sidebar { display: none; }
  .cgv-toc { display: block; }
}
@media (max-width: 600px) {
  .cgv-hero { min-height: 260px; }
  .cgv-hero__title { font-size: 1.6rem !important; }
  .cgv-card { padding: 1.25rem; }
  .cgv-card__watermark { font-size: 4.5rem; }
  .cgv-footer-btns { flex-direction: column; }
  .cgv-footer-btn { justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   PAGE DEMANDE DE DEVIS
   ═══════════════════════════════════════════════════════════════ */
@keyframes devisFadeUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── HERO ── */
.devis-hero {
  background: #0a0a0a;
  padding-block: clamp(2.5rem,5vw,4rem);
  border-bottom: 3px solid #92BD28;
}
.devis-hero__inner {
  display:flex; flex-direction:column; gap:.75rem;
  animation: devisFadeUp .5s ease both;
}
.devis-breadcrumb {
  display:flex; align-items:center; gap:.5rem;
  font-size:.72rem; color:rgba(255,255,255,.4);
  font-family:var(--font-mono); letter-spacing:.06em;
}
.devis-breadcrumb a { color:rgba(255,255,255,.4); text-decoration:none; }
.devis-breadcrumb a:hover { color:#92BD28; }
.devis-breadcrumb i { font-size:.55rem; }
.devis-breadcrumb span { color:#92BD28; }
.devis-hero__badge {
  width:52px; height:52px; border-radius:10px;
  background:#92BD28; display:flex; align-items:center;
  justify-content:center; font-size:1.4rem; color:#fff;
  box-shadow:0 4px 14px rgba(146,189,40,.35);
}
.devis-hero__title {
  font-size:clamp(2rem,5vw,3.2rem) !important;
  font-weight:900 !important; letter-spacing:-.02em !important;
  text-transform:uppercase !important; color:#fff !important;
  line-height:1 !important; margin:0 !important;
}
.devis-hero__sub {
  font-size:clamp(.9rem,1.4vw,1.1rem); color:rgba(255,255,255,.6); margin:0;
}
.devis-hero__reassurance {
  display:inline-flex; align-items:center; gap:.45rem;
  background:rgba(146,189,40,.12); border:1px solid rgba(146,189,40,.3);
  color:#92BD28; padding:.35rem .9rem; border-radius:20px;
  font-size:.78rem; font-weight:700; align-self:flex-start;
}

/* ── SPLIT LAYOUT ── */
.devis-split {
  display:grid; grid-template-columns:40% 60%; min-height:calc(100vh - 80px);
}

/* Colonne gauche */
.devis-info {
  position:relative; background:#0a0a0a;
  background-size:cover; background-position:center;
  display:flex; flex-direction:column;
}
.devis-info__overlay {
  position:absolute; inset:0;
  background:linear-gradient(160deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.75) 100%);
  z-index:0;
}
.devis-info__content {
  position:relative; z-index:1;
  padding:clamp(2rem,4vw,3.5rem) clamp(1.5rem,3vw,2.5rem);
  display:flex; flex-direction:column; gap:1.5rem; height:100%;
}
.devis-info__logo {
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--font-mono); font-size:.72rem;
  font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.devis-info__logo i { color:#92BD28; font-size:1rem; }
.devis-info__title {
  font-size:clamp(1.3rem,2.5vw,1.9rem) !important;
  font-weight:800 !important; color:#fff !important; margin:0 !important;
  line-height:1.15 !important; letter-spacing:-.02em !important;
}
.devis-reassurance { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:1.1rem; }
.devis-reassurance__item {
  display:flex; align-items:flex-start; gap:.85rem;
}
.devis-reassurance__icon {
  flex-shrink:0; width:38px; height:38px; border-radius:8px;
  background:rgba(146,189,40,.12); border:1px solid rgba(146,189,40,.2);
  display:flex; align-items:center; justify-content:center;
  color:#92BD28; font-size:.95rem;
}
.devis-reassurance__item strong { display:block; font-size:.85rem; color:#fff; font-weight:700; line-height:1.2; }
.devis-reassurance__item small  { display:block; font-size:.72rem; color:rgba(255,255,255,.45); margin-top:.15rem; }
.devis-info__tel {
  display:inline-flex; align-items:center; gap:.6rem;
  background:rgba(146,189,40,.1); border:1.5px solid rgba(146,189,40,.3);
  color:#92BD28 !important; padding:.65rem 1.25rem; border-radius:5px;
  font-weight:700; font-size:.9rem; text-decoration:none !important;
  transition:background .2s; align-self:flex-start; margin-top:auto;
}
.devis-info__tel:hover { background:rgba(146,189,40,.2); }

/* Colonne droite */
.devis-form-wrap {
  background:#f5f3ee; padding:clamp(2rem,4vw,3rem) clamp(1.5rem,3vw,2.5rem);
  display:flex; flex-direction:column; gap:1.75rem;
}

/* ── STEPPER ── */
.devis-stepper { display:flex; flex-direction:column; gap:.9rem; }
.devis-stepper__track {
  height:4px; background:rgba(0,0,0,.1); border-radius:2px; overflow:hidden;
}
.devis-stepper__fill {
  height:100%; background:#92BD28; border-radius:2px;
  transition:width .4s cubic-bezier(.4,0,.2,1); width:50%;
}
.devis-stepper__steps { display:flex; gap:0; }
.devis-step {
  flex:1; display:flex; align-items:center; gap:.6rem;
  font-size:.78rem; font-weight:600; color:rgba(0,0,0,.35);
  transition:color .3s;
}
.devis-step__circle {
  width:32px; height:32px; border-radius:50%;
  border:2px solid rgba(0,0,0,.15); display:flex;
  align-items:center; justify-content:center;
  font-size:.78rem; color:rgba(0,0,0,.3);
  background:#fff; transition:all .3s; flex-shrink:0;
}
.devis-step--active .devis-step__circle {
  border-color:#92BD28; background:#92BD28; color:#fff;
}
.devis-step--active { color:var(--ink); }
.devis-step--done .devis-step__circle {
  border-color:#92BD28; background:rgba(146,189,40,.1); color:#92BD28;
}

/* ── FORMULAIRE ── */
.devis-form { display:flex; flex-direction:column; gap:1rem; }
.devis-form__step { display:flex; flex-direction:column; gap:1rem; animation:devisFadeUp .35s ease both; }
.devis-form__step--hidden { display:none !important; }
.devis-form__step--enter  { animation:devisFadeUp .35s ease both; }
.devis-form__step-title {
  font-size:1.1rem !important; font-weight:800 !important;
  color:var(--ink) !important; display:flex; align-items:center;
  gap:.5rem; margin:0 0 .25rem !important;
}
.devis-form__step-title i { color:#92BD28; }

.devis-field { display:flex; flex-direction:column; gap:.35rem; }
.devis-field label {
  font-size:.78rem; font-weight:700; color:#444;
  text-transform:uppercase; letter-spacing:.05em;
}
.devis-required { color:#92BD28; }
.devis-optional { color:#aaa; font-weight:400; text-transform:none; }

.devis-field__wrap {
  position:relative; display:flex; align-items:center;
  background:#fff; border:1.5px solid rgba(0,0,0,.1);
  border-radius:6px; transition:border-color .2s, box-shadow .2s;
}
.devis-field__wrap:focus-within {
  border-color:#92BD28; box-shadow:0 0 0 3px rgba(146,189,40,.12);
}
.devis-field__wrap.is-ok    { border-color:#92BD28; }
.devis-field__wrap.is-error { border-color:#e53e3e; box-shadow:0 0 0 3px rgba(229,62,62,.1); }
.devis-field__wrap--textarea { align-items:flex-start; }

.devis-field__icon {
  position:absolute; left:12px; color:#92BD28; font-size:.8rem;
  pointer-events:none; z-index:1;
}
.devis-field__icon--top { top:12px; align-self:unset; }

.devis-field__wrap input,
.devis-field__wrap select,
.devis-field__wrap textarea {
  width:100%; padding:.7rem .85rem .7rem 2.5rem !important;
  background:transparent !important; border:none !important;
  outline:none !important; font-size:.9rem !important;
  color:var(--ink) !important; font-family:var(--font-body) !important;
  box-shadow:none !important; border-radius:0 !important;
}
.devis-field__wrap textarea { padding-top:.75rem !important; resize:vertical; min-height:100px; }
.devis-field__wrap select { appearance:none; cursor:pointer; }

.devis-field-row { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }

/* ── BOUTONS ── */
.devis-btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.8rem 1.75rem; border-radius:5px;
  font-size:.9rem; font-weight:700; cursor:pointer;
  border:none; transition:all .2s; text-decoration:none !important;
}
.devis-btn--next, .devis-btn--submit {
  background:#92BD28; color:#fff !important;
  box-shadow:0 4px 14px rgba(146,189,40,.28);
  align-self:flex-end;
}
.devis-btn--next:hover, .devis-btn--submit:hover {
  background:#7aa820; transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(146,189,40,.35);
}
.devis-btn--back {
  background:transparent; color:#666 !important;
  border:1.5px solid rgba(0,0,0,.12);
}
.devis-btn--back:hover { border-color:#92BD28; color:#92BD28 !important; }
.devis-form__foot { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-top:.5rem; }

/* ── CONFIRMATION ── */
.devis-confirm {
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:1rem; padding:2.5rem 1rem;
  animation:devisFadeUp .5s ease both;
}
.devis-confirm__icon { font-size:3.5rem; color:#92BD28; }
.devis-confirm__title { font-size:1.5rem !important; font-weight:900 !important; color:var(--ink) !important; margin:0 !important; }
.devis-confirm__text  { color:#666; font-size:.95rem; margin:0; line-height:1.6; }

/* ── RESPONSIVE ── */
@media (max-width:960px) {
  .devis-split { grid-template-columns:1fr; }
  .devis-info {
    min-height:auto;
    background-size:cover;
  }
  .devis-info__content { padding:1.5rem; flex-direction:column; }
  .devis-reassurance { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
  .devis-info__title { font-size:1.2rem !important; }
  .devis-info__tel { margin-top:.5rem; }
}
@media (max-width:600px) {
  .devis-field-row { grid-template-columns:1fr; }
  .devis-reassurance { grid-template-columns:1fr; }
  .devis-form__foot { flex-direction:column-reverse; }
  .devis-btn--next, .devis-btn--submit, .devis-btn--back { width:100%; }
  .devis-hero__title { font-size:1.7rem !important; }
}

/* ═══════════════════════════════════════════════════════════════
   PAGE CONTACT — MSC CONTAINERS
   ═══════════════════════════════════════════════════════════════ */
@keyframes contactFadeUp {
  from { opacity:0; transform:translateY(22px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── HERO ── */
.contact-hero {
  position:relative; min-height:300px;
  display:flex; align-items:flex-end;
  overflow:hidden; padding-bottom:clamp(2.5rem,5vw,4rem);
}
.contact-hero__bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center 40%;
  z-index:0; transform:scale(1.03);
}
.contact-hero__overlay {
  position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(10,10,10,.9) 0%,rgba(10,10,10,.65) 100%);
  z-index:1;
}
.contact-hero__inner {
  position:relative; z-index:2;
  display:flex; flex-direction:column; gap:.85rem;
  padding-top:clamp(3rem,6vw,5rem);
  animation:contactFadeUp .5s ease both;
}
.contact-breadcrumb {
  display:flex; align-items:center; gap:.5rem;
  font-size:.7rem; color:rgba(255,255,255,.4);
  font-family:var(--font-mono); letter-spacing:.06em;
}
.contact-breadcrumb a { color:rgba(255,255,255,.4); text-decoration:none; }
.contact-breadcrumb a:hover { color:#92BD28; }
.contact-breadcrumb i { font-size:.55rem; }
.contact-breadcrumb span { color:#92BD28; }
.contact-hero__title {
  font-size:clamp(2.2rem,6vw,4rem) !important;
  font-weight:900 !important; text-transform:uppercase !important;
  letter-spacing:-.03em !important; color:#fff !important;
  line-height:.95 !important; margin:0 !important;
}
.contact-hero__sub {
  font-size:clamp(.9rem,1.3vw,1.05rem); color:rgba(255,255,255,.6); margin:0; line-height:1.6;
}
.contact-hero__badges { display:flex; flex-wrap:wrap; gap:.5rem; }
.contact-hero__badge {
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.32rem .85rem; border-radius:20px;
  font-size:.76rem; font-weight:700;
}
.contact-hero__badge--green {
  background:rgba(146,189,40,.15); border:1px solid rgba(146,189,40,.3); color:#92BD28;
}
.contact-hero__badge--gray {
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15); color:rgba(255,255,255,.55);
}

/* ── SPLIT ── */
.contact-split {
  display:grid; grid-template-columns:60% 40%;
  min-height:calc(100vh - 80px);
  background:#f5f3ee;
}

/* ── COLONNE FORMULAIRE ── */
.contact-form-wrap {
  padding:clamp(2rem,4vw,3.5rem) clamp(1.5rem,3vw,3rem);
  display:flex; flex-direction:column; gap:1.5rem;
  animation:contactFadeUp .5s ease .1s both;
}
.contact-form__title {
  font-size:1.25rem !important; font-weight:800 !important;
  color:var(--ink) !important; margin:0 !important;
  display:flex; align-items:center; gap:.5rem;
}
.contact-form__title i { color:#92BD28; }
.contact-form { display:flex; flex-direction:column; gap:.9rem; }

/* Lignes 2 colonnes dans le formulaire */
.contact-row { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }

/* Champs */
.contact-field { display:flex; flex-direction:column; gap:.32rem; }
.contact-field label {
  font-size:.75rem; font-weight:700; color:#444;
  text-transform:uppercase; letter-spacing:.05em;
}
.contact-req { color:#92BD28; }
.contact-opt { color:#aaa; font-weight:400; text-transform:none; }
.contact-field__wrap {
  position:relative; display:flex; align-items:center;
  background:#fff; border:1.5px solid rgba(0,0,0,.09);
  border-radius:6px; transition:border-color .2s, box-shadow .2s;
}
.contact-field__wrap:focus-within {
  border-color:#92BD28; box-shadow:0 0 0 3px rgba(146,189,40,.12);
}
.contact-field__wrap.is-ok    { border-color:#92BD28; }
.contact-field__wrap.is-error { border-color:#e53e3e; box-shadow:0 0 0 3px rgba(229,62,62,.1); }
.contact-field__wrap--textarea { align-items:flex-start; }
.contact-field__icon {
  position:absolute; left:12px; color:#92BD28; font-size:.8rem; pointer-events:none; z-index:1;
}
.contact-field__icon--top { top:12px; }
.contact-field__wrap input,
.contact-field__wrap select,
.contact-field__wrap textarea {
  width:100%; padding:.7rem .85rem .7rem 2.5rem !important;
  background:transparent !important; border:none !important;
  outline:none !important; font-size:.9rem !important;
  color:var(--ink) !important; font-family:var(--font-body) !important;
  box-shadow:none !important; border-radius:0 !important;
}
.contact-field__wrap select { appearance:none; cursor:pointer; }
.contact-field__wrap textarea { padding-top:.75rem !important; resize:vertical; min-height:110px; }

/* RGPD */
.contact-rgpd {
  display:flex; align-items:flex-start; gap:.6rem;
  font-size:.78rem; color:#666; cursor:pointer; line-height:1.5;
}
.contact-rgpd input { width:16px; height:16px; flex-shrink:0; margin-top:3px; accent-color:#92BD28; }

/* Bouton submit */
.contact-btn--submit {
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  width:100%; padding:.9rem 1.5rem; border-radius:6px;
  background:#92BD28; color:#fff !important; border:none;
  font-size:.95rem; font-weight:700; cursor:pointer;
  text-decoration:none !important;
  box-shadow:0 4px 14px rgba(146,189,40,.28);
  transition:all .2s;
}
.contact-btn--submit:hover {
  background:#7aa820; transform:translateY(-2px);
  box-shadow:0 6px 22px rgba(146,189,40,.35);
}

/* Confirmation */
.contact-confirm {
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:1rem; padding:3rem 1.5rem;
  animation:contactFadeUp .5s ease both;
}
.contact-confirm__icon { font-size:3.5rem; color:#92BD28; }
.contact-confirm__title { font-size:1.6rem !important; font-weight:900 !important; color:var(--ink) !important; margin:0 !important; }
.contact-confirm__text { color:#666; font-size:.95rem; line-height:1.7; margin:0; }

/* ── COLONNE INFOS ── */
.contact-info {
  background:#0a0a0a; padding:clamp(2rem,4vw,3.5rem) clamp(1.5rem,3vw,2.5rem);
  display:flex; flex-direction:column;
  animation:contactFadeUp .5s ease .2s both;
}
.contact-info__card {
  display:flex; flex-direction:column; gap:1.75rem; height:100%;
}
.contact-info__top { display:flex; flex-direction:column; gap:.65rem; }
.contact-info__logo {
  display:flex; align-items:center; gap:.5rem;
  font-family:var(--font-mono); font-size:.68rem;
  font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.4);
}
.contact-info__logo i { color:#92BD28; }
.contact-info__title {
  font-size:clamp(1.4rem,2.5vw,1.9rem) !important;
  font-weight:900 !important; color:#fff !important;
  margin:0 !important; line-height:1.1 !important;
  letter-spacing:-.02em !important;
}

/* Liste détails contact */
.contact-details { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.85rem; }
.contact-detail {
  display:flex; align-items:flex-start; gap:.75rem;
  padding:.75rem; border-radius:7px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);
  transition:border-color .2s, background .2s;
}
.contact-detail:hover { border-color:rgba(146,189,40,.25); background:rgba(146,189,40,.05); }
.contact-detail__icon {
  flex-shrink:0; width:34px; height:34px; border-radius:7px;
  background:rgba(146,189,40,.1); display:flex; align-items:center;
  justify-content:center; color:#92BD28; font-size:.85rem;
}
.contact-detail small { display:block; font-size:.65rem; color:rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:.08em; margin-bottom:.18rem; }
.contact-detail a { display:block; color:#fff; text-decoration:none; font-weight:600; font-size:.88rem; transition:color .2s; }
.contact-detail a:hover { color:#92BD28; }
.contact-detail span { color:rgba(255,255,255,.75); font-size:.88rem; }

/* Réassurance */
.contact-reassurance {
  display:flex; flex-direction:column; gap:.5rem;
  padding:1.1rem; background:rgba(146,189,40,.06);
  border:1px solid rgba(146,189,40,.15); border-radius:7px;
}
.contact-reassurance__item {
  display:flex; align-items:center; gap:.6rem;
  font-size:.8rem; color:rgba(255,255,255,.65);
}
.contact-reassurance__item i { color:#92BD28; width:16px; text-align:center; }

/* Bouton devis */
.contact-devis-btn {
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  background:transparent; border:1.5px solid rgba(146,189,40,.4);
  color:#92BD28 !important; padding:.75rem 1.25rem; border-radius:6px;
  font-size:.85rem; font-weight:700; text-decoration:none !important;
  transition:all .2s; margin-top:auto;
}
.contact-devis-btn:hover { background:rgba(146,189,40,.1); border-color:#92BD28; }

/* ── RESPONSIVE ── */
@media (max-width:960px) {
  .contact-split { grid-template-columns:1fr; }
  .contact-info { order:-1; }
  .contact-info__card { flex-direction:column; }
  .contact-details { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
  .contact-reassurance { display:grid; grid-template-columns:1fr 1fr 1fr; }
}
@media (max-width:600px) {
  .contact-row { grid-template-columns:1fr; }
  .contact-details { grid-template-columns:1fr; }
  .contact-reassurance { grid-template-columns:1fr; }
  .contact-hero__title { font-size:2rem !important; }
}

/* ═══════════════════════════════════════════════════════════════
   PAGE À PROPOS — MSC CONTAINERS
   ═══════════════════════════════════════════════════════════════ */
@keyframes apFadeUp { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }

.ap-accent { color:#92BD28; }

/* ── HERO ── */
.ap-hero { position:relative; min-height:320px; display:flex; align-items:flex-end; overflow:hidden; padding-bottom:clamp(2.5rem,5vw,4rem); }
.ap-hero__bg { position:absolute; inset:0; background-size:cover; background-position:center 40%; z-index:0; }
.ap-hero__overlay { position:absolute; inset:0; background:linear-gradient(135deg,rgba(10,10,10,.88) 0%,rgba(10,10,10,.6) 100%); z-index:1; }
.ap-hero__inner { position:relative; z-index:2; display:flex; flex-direction:column; gap:.85rem; padding-top:clamp(3rem,6vw,5rem); animation:apFadeUp .5s ease both; }
.ap-breadcrumb { display:flex; align-items:center; gap:.5rem; font-size:.7rem; color:rgba(255,255,255,.4); font-family:var(--font-mono); letter-spacing:.06em; }
.ap-breadcrumb a { color:rgba(255,255,255,.4); text-decoration:none; } .ap-breadcrumb a:hover { color:#92BD28; }
.ap-breadcrumb i { font-size:.55rem; } .ap-breadcrumb span { color:#92BD28; }
.ap-hero__badge-icon { width:52px; height:52px; border-radius:10px; background:#92BD28; display:flex; align-items:center; justify-content:center; font-size:1.4rem; color:#fff; box-shadow:0 4px 14px rgba(146,189,40,.35); }
.ap-hero__title { font-size:clamp(2.2rem,6vw,4rem) !important; font-weight:900 !important; text-transform:uppercase !important; letter-spacing:-.03em !important; color:#fff !important; line-height:.95 !important; margin:0 !important; }
.ap-hero__sub { font-size:clamp(.9rem,1.3vw,1.05rem); color:rgba(255,255,255,.6); margin:0; line-height:1.6; }
.ap-hero__badge { display:inline-flex; align-items:center; gap:.45rem; background:rgba(146,189,40,.15); border:1px solid rgba(146,189,40,.3); color:#92BD28; padding:.32rem .85rem; border-radius:20px; font-size:.78rem; font-weight:700; align-self:flex-start; }

/* ── EYEBROW ── */
.ap-eyebrow { display:flex; align-items:center; gap:.65rem; font-family:var(--font-mono); font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#92BD28; }
.ap-eyebrow__line { display:block; width:28px; height:2px; background:#92BD28; flex-shrink:0; }

/* ── SECTION TITLES ── */
.ap-section-title { font-size:clamp(1.8rem,4vw,3rem) !important; font-weight:900 !important; letter-spacing:-.03em !important; text-transform:uppercase !important; color:var(--ink) !important; margin:.4rem 0 0 !important; line-height:.95 !important; }
.ap-section-head { display:flex; flex-direction:column; gap:.5rem; margin-bottom:clamp(2rem,4vw,3rem); }

/* ── NOTRE HISTOIRE ── */
.ap-story { background:#f5f3ee; padding-block:clamp(3.5rem,7vw,6rem); }
.ap-story__inner { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,5vw,5rem); align-items:center; }
.ap-story__visual { position:relative; }
.ap-story__corner { position:absolute; top:-12px; left:-12px; width:70px; height:70px; border-top:4px solid #92BD28; border-left:4px solid #92BD28; z-index:2; pointer-events:none; }
.ap-story__img-wrap { position:relative; border-radius:4px; overflow:visible; }
.ap-story__img { width:100%; height:clamp(280px,35vw,440px); object-fit:cover; border-radius:4px; box-shadow:0 12px 40px rgba(0,0,0,.15); display:block; }
.ap-story__badge { position:absolute; bottom:-18px; right:-18px; width:96px; height:96px; border-radius:50%; background:#92BD28; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; box-shadow:0 6px 20px rgba(146,189,40,.35); border:3px solid #f5f3ee; z-index:3; }
.ap-story__badge strong { font-size:1.6rem; font-weight:900; color:#fff; line-height:1; }
.ap-story__badge span { font-size:.68rem; font-weight:700; color:#fff; text-transform:uppercase; letter-spacing:.04em; }
.ap-story__badge small { font-size:.54rem; color:rgba(255,255,255,.85); text-transform:uppercase; }
.ap-story__content { display:flex; flex-direction:column; gap:1.25rem; }
.ap-story__title { font-size:clamp(1.8rem,4vw,2.8rem) !important; font-weight:900 !important; letter-spacing:-.03em !important; text-transform:uppercase !important; color:var(--ink) !important; margin:0 !important; line-height:1 !important; }
.ap-story__text { font-size:clamp(.9rem,1.3vw,1.05rem) !important; line-height:1.75 !important; color:#555 !important; margin:0 !important; }
.ap-story__pills { display:flex; flex-wrap:wrap; gap:.45rem; }
.ap-pill { display:inline-flex; align-items:center; gap:.35rem; background:#fff; border:1px solid rgba(146,189,40,.3); border-radius:20px; padding:.32rem .85rem; font-size:.75rem; font-weight:600; color:#333; }
.ap-pill i { color:#92BD28; }

/* ── NOS VALEURS ── */
.ap-values { background:var(--ink); padding-block:clamp(3rem,6vw,5rem); }
.ap-values .ap-section-title { color:#fff !important; }
.ap-values .ap-eyebrow { color:#92BD28; }
.ap-values__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.ap-value-card { background:rgba(255,255,255,.04); border:1.5px solid rgba(255,255,255,.07); border-radius:8px; padding:2rem 1.5rem; display:flex; flex-direction:column; gap:.85rem; transition:border-color .2s, background .2s; }
.ap-value-card:hover { border-color:rgba(146,189,40,.35); background:rgba(146,189,40,.06); }
.ap-value-card__icon { width:46px; height:46px; border-radius:10px; background:rgba(146,189,40,.12); display:flex; align-items:center; justify-content:center; font-size:1.2rem; color:#92BD28; }
.ap-value-card__title { font-size:1.05rem !important; font-weight:800 !important; color:#fff !important; margin:0 !important; }
.ap-value-card__desc { font-size:.88rem !important; color:rgba(255,255,255,.55) !important; line-height:1.65 !important; margin:0 !important; }

/* ── CHIFFRES CLÉS ── */
.ap-kpis { background:#f5f3ee; padding-block:clamp(2.5rem,5vw,4rem); border-block:3px solid #92BD28; }
.ap-kpis__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.ap-kpi { padding:2rem 1.5rem; text-align:center; border-right:1px solid rgba(0,0,0,.08); }
.ap-kpi:last-child { border-right:none; }
.ap-kpi__value { font-size:clamp(1.8rem,3.5vw,2.8rem); font-weight:900; color:var(--ink); line-height:1; letter-spacing:-.02em; }
.ap-kpi__value small { font-size:.5em; vertical-align:top; }
.ap-kpi__value .ap-accent { color:#92BD28; }
.ap-kpi__label { font-size:.72rem; color:#777; text-transform:uppercase; letter-spacing:.08em; font-family:var(--font-mono); margin-top:.4rem; }

/* ── ZONES LIVRAISON ── */
.ap-zones { background:#fff; padding-block:clamp(3rem,6vw,5rem); }
.ap-zones__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.ap-zone { background:#f5f3ee; border:1.5px solid rgba(0,0,0,.07); border-radius:8px; padding:2rem 1.5rem; display:flex; flex-direction:column; gap:.6rem; text-align:center; transition:border-color .2s, box-shadow .2s; }
.ap-zone:hover { border-color:#92BD28; box-shadow:0 4px 16px rgba(146,189,40,.12); }
.ap-zone--primary { border-color:#92BD28; background:rgba(146,189,40,.05); }
.ap-zone__flag { font-size:2.5rem; }
.ap-zone__badge { display:inline-block; background:#92BD28; color:#fff; font-size:.65rem; font-weight:700; padding:.2rem .65rem; border-radius:12px; letter-spacing:.06em; text-transform:uppercase; align-self:center; }
.ap-zone__country { font-size:1.2rem !important; font-weight:800 !important; color:var(--ink) !important; margin:0 !important; }
.ap-zone__delay { font-size:.78rem; color:#666; display:flex; align-items:center; justify-content:center; gap:.4rem; }
.ap-zone__delay i { color:#92BD28; }

/* ── CTA FINAL ── */
.ap-cta { background:var(--ink); padding-block:clamp(3rem,6vw,5rem); }
.ap-cta__inner { display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.25rem; }
.ap-cta__title { font-size:clamp(2rem,5vw,3.5rem) !important; font-weight:900 !important; text-transform:uppercase !important; letter-spacing:-.03em !important; color:#fff !important; margin:0 !important; line-height:.95 !important; }
.ap-cta__sub { color:rgba(255,255,255,.55); font-size:clamp(.9rem,1.3vw,1.05rem); margin:0; max-width:50ch; }
.ap-cta__btns { display:flex; gap:.85rem; flex-wrap:wrap; justify-content:center; }
.ap-btn { display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 2rem; border-radius:5px; font-size:.9rem; font-weight:700; text-decoration:none !important; transition:all .2s; }
.ap-btn--primary { background:#92BD28; color:#fff !important; box-shadow:0 4px 14px rgba(146,189,40,.3); }
.ap-btn--primary:hover { background:#7aa820; transform:translateY(-2px); }
.ap-btn--secondary { background:transparent; border:1.5px solid rgba(255,255,255,.2); color:#fff !important; }
.ap-btn--secondary:hover { border-color:#92BD28; color:#92BD28 !important; }

/* ── RESPONSIVE ── */
@media (max-width:900px) {
  .ap-story__inner { grid-template-columns:1fr; }
  .ap-story__visual { max-width:480px; margin-inline:auto; }
  .ap-values__grid { grid-template-columns:1fr; }
  .ap-kpis__grid { grid-template-columns:repeat(2,1fr); }
  .ap-kpi:nth-child(2) { border-right:none; }
  .ap-kpi:nth-child(3),
  .ap-kpi:nth-child(4) { border-top:1px solid rgba(0,0,0,.08); }
  .ap-zones__grid { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .ap-kpis__grid { grid-template-columns:1fr 1fr; }
  .ap-cta__btns { flex-direction:column; width:100%; }
  .ap-btn { justify-content:center; }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION ACIER VÉRIFIÉ — Homepage redesignée
   ═══════════════════════════════════════════════════════════════ */

/* Animations */
@keyframes acierFadeLeft  { from{opacity:0;transform:translateX(-20px)} to{opacity:1;transform:translateX(0)} }
@keyframes acierFadeRight { from{opacity:0;transform:translateX(20px)}  to{opacity:1;transform:translateX(0)} }
@keyframes acierTick      { 0%{transform:scale(0) rotate(-20deg);opacity:0} 60%{transform:scale(1.2) rotate(5deg)} 100%{transform:scale(1) rotate(0);opacity:1} }
@keyframes acierSlide     { from{opacity:0;transform:translateX(-16px)} to{opacity:1;transform:translateX(0)} }

.acier-accent { color:#92BD28; }

/* ── LAYOUT SPLIT 50/50 ── */
.acier-section {
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:560px;
  border-top:1px solid rgba(168,169,173,.2);
  border-bottom:1px solid rgba(168,169,173,.2);
}

/* ── COLONNE GAUCHE ── */
.acier-left {
  position:relative;
  background:#0a0a0a;
  overflow:hidden;
}

/* Texture acier brossé diagonal */
.acier-left__texture {
  position:absolute; inset:0; z-index:0;
  background-image:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 3px,
      rgba(255,255,255,.018) 3px,
      rgba(255,255,255,.018) 4px
    );
  pointer-events:none;
}
/* Reflet métallique subtil */
.acier-left::after {
  content:'';
  position:absolute; inset:0; z-index:0;
  background:radial-gradient(ellipse at 20% 30%, rgba(168,169,173,.06) 0%, transparent 60%);
  pointer-events:none;
}

.acier-left__content {
  position:relative; z-index:1;
  padding:clamp(2.5rem,5vw,4rem) clamp(2rem,4vw,3.5rem);
  display:flex; flex-direction:column; gap:2rem; height:100%;
}

/* Header gauche */
.acier-left__header { display:flex; flex-direction:column; gap:.75rem; }
.acier-left__tag {
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--font-mono); font-size:.65rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.35);
}
.acier-left__tag i { color:#92BD28; }
.acier-left__title {
  font-size:clamp(2.5rem,6vw,4.5rem) !important;
  font-weight:900 !important; text-transform:uppercase !important;
  letter-spacing:-.04em !important; color:#fff !important;
  line-height:.9 !important; margin:0 !important;
}

/* Checklist de points de contrôle */
.acier-checklist {
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:.5rem;
}
.acier-checklist__item {
  display:flex; align-items:center; gap:.9rem;
  padding:.75rem 1rem;
  border:1px solid rgba(255,255,255,.06);
  border-radius:7px;
  background:rgba(255,255,255,.025);
  cursor:default;
  animation:acierSlide .4s ease both;
  transition:border-color .2s, background .2s, transform .2s;
}
.acier-checklist__item:hover {
  border-color:rgba(146,189,40,.35);
  background:rgba(146,189,40,.06);
  transform:translateX(5px);
}
.acier-checklist__icon {
  flex-shrink:0; width:36px; height:36px; border-radius:8px;
  background:rgba(146,189,40,.12); border:1px solid rgba(146,189,40,.2);
  display:flex; align-items:center; justify-content:center;
  color:#92BD28; font-size:.9rem;
}
.acier-checklist__item strong {
  display:block; font-size:.85rem; font-weight:700; color:#fff; line-height:1.2;
}
.acier-checklist__item span {
  display:block; font-size:.72rem; color:#A8A9AD; margin-top:.1rem;
}

/* Badge garantie */
.acier-badge {
  display:inline-flex; align-items:center; gap:.55rem;
  background:rgba(146,189,40,.1); border:1px solid rgba(146,189,40,.25);
  color:#92BD28; padding:.55rem 1rem; border-radius:6px;
  font-size:.78rem; font-weight:700; align-self:flex-start;
  margin-top:auto;
}

/* Séparateur vertical avec reflet */
.acier-left {
  border-right:1px solid rgba(168,169,173,.15);
  box-shadow:inset -4px 0 12px rgba(168,169,173,.04);
}

/* ── COLONNE DROITE ── */
.acier-right {
  background:#f5f3ee;
  display:flex;
  align-items:center;
}
.acier-right__content {
  padding:clamp(2.5rem,5vw,4rem) clamp(2rem,4vw,3.5rem);
  display:flex; flex-direction:column; gap:1.5rem; width:100%;
}

/* Eyebrow */
.acier-right__eyebrow {
  display:flex; align-items:center; gap:.65rem;
  font-family:var(--font-mono); font-size:.7rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:#92BD28;
}
.acier-right__eyebrow-line { display:block; width:28px; height:2px; background:#92BD28; flex-shrink:0; }

/* Titre droit */
.acier-right__title {
  font-size:clamp(1.3rem,2.8vw,2rem) !important;
  font-weight:900 !important; text-transform:uppercase !important;
  letter-spacing:-.02em !important; color:#0a0a0a !important;
  line-height:1.05 !important; margin:0 !important;
}

/* Texte */
.acier-right__text { display:flex; flex-direction:column; gap:.6rem; }
.acier-right__text p {
  font-size:clamp(.88rem,1.2vw,.98rem) !important;
  line-height:1.7 !important; color:#555 !important; margin:0 !important;
}

/* Checklist de progression */
.acier-progress {
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:.35rem;
}
.acier-progress__item {
  display:flex; align-items:center; gap:.65rem;
  font-size:.85rem; font-weight:600; color:#333;
  padding:.4rem 0;
  border-bottom:1px solid rgba(0,0,0,.05);
  opacity:0; transition:opacity .3s ease, transform .3s ease;
  transform:translateX(-8px);
}
.acier-progress__item:last-child { border-bottom:none; }
.acier-progress__item.is-visible {
  opacity:1; transform:translateX(0);
}
.acier-progress__icon {
  color:#92BD28; font-size:1rem; flex-shrink:0;
  opacity:0; transform:scale(0) rotate(-20deg);
  transition:opacity .25s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.acier-progress__item.is-visible .acier-progress__icon {
  opacity:1; transform:scale(1) rotate(0);
}

/* Boutons */
.acier-right__btns { display:flex; gap:.75rem; flex-wrap:wrap; }
.acier-btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.75rem 1.4rem; border-radius:5px;
  font-size:.85rem; font-weight:700; text-decoration:none !important;
  transition:all .2s; cursor:pointer;
}
.acier-btn--ghost {
  background:transparent; color:#0a0a0a !important;
  border:1.5px solid #A8A9AD;
}
.acier-btn--ghost:hover { background:#92BD28; border-color:#92BD28; color:#fff !important; }
.acier-btn--primary {
  background:#92BD28; color:#fff !important; border:1.5px solid #92BD28;
  box-shadow:0 4px 14px rgba(146,189,40,.25);
}
.acier-btn--primary:hover { background:#7aa820; border-color:#7aa820; transform:translateY(-1px); }

/* ── RESPONSIVE ── */
@media (max-width:900px) {
  .acier-section { grid-template-columns:1fr; }
  .acier-left { border-right:none; border-bottom:1px solid rgba(168,169,173,.15); }
  .acier-progress { display:grid; grid-template-columns:1fr 1fr; }
  .acier-right__btns { flex-direction:column; }
  .acier-btn { justify-content:center; }
}
@media (max-width:480px) {
  .acier-progress { grid-template-columns:1fr; }
  .acier-left__title { font-size:2.5rem !important; }
}

/* ═══════════════════════════════════════════════════════════════
   ACIER VÉRIFIÉ — Ajustements compacité & responsive
   ═══════════════════════════════════════════════════════════════ */

/* ── Desktop : max-width centré, paddings réduits de 25% ── */
.acier-section {
  max-width: 1200px !important;
  margin-inline: auto !important;
  min-height: 420px !important;
}

.acier-left__content,
.acier-right__content {
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.5rem, 3vw, 2.75rem) !important;
  gap: 1.25rem !important;
}

/* Titre gauche plus compact */
.acier-left__title {
  font-size: clamp(2rem, 4.5vw, 3.5rem) !important;
}

/* Blocs de contrôle compacts */
.acier-checklist {
  gap: 0.35rem !important;
}
.acier-checklist__item {
  padding: 0.55rem 0.85rem !important;
  gap: 0.7rem !important;
}
.acier-checklist__icon {
  width: 30px !important;
  height: 30px !important;
  font-size: 0.78rem !important;
}
.acier-checklist__item strong { font-size: 0.8rem !important; }
.acier-checklist__item span   { font-size: 0.68rem !important; }

/* Colonne droite : espacement réduit */
.acier-right__content { gap: 1rem !important; }
.acier-progress       { gap: 0.25rem !important; }
.acier-progress__item {
  padding: 0.3rem 0 !important;
  font-size: 0.8rem !important;
}
.acier-right__title {
  font-size: clamp(1.1rem, 2.2vw, 1.6rem) !important;
}
.acier-right__text p {
  font-size: 0.85rem !important;
  line-height: 1.6 !important;
}
.acier-right__btns { gap: 0.6rem !important; margin-top: 0.25rem !important; }
.acier-btn { padding: 0.65rem 1.2rem !important; font-size: 0.82rem !important; }

/* ── Tablette 768px–1024px ── */
@media (min-width: 768px) and (max-width: 1024px) {
  .acier-section {
    grid-template-columns: 45% 55% !important;
    min-height: 380px !important;
  }
  .acier-left__title {
    font-size: clamp(1.75rem, 5vw, 2.8rem) !important;
  }
  .acier-right__title {
    font-size: clamp(1rem, 2vw, 1.4rem) !important;
  }
  .acier-right__btns { flex-direction: row !important; }
  .acier-btn { width: auto !important; }
}

/* ── Mobile < 768px ── */
@media (max-width: 767px) {
  .acier-section {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .acier-left  { border-right: none !important; border-bottom: 1px solid rgba(168,169,173,.15) !important; }
  .acier-left__content,
  .acier-right__content {
    padding: 1.5rem 1.25rem !important;
  }
  .acier-left__title {
    font-size: clamp(1.8rem, 8vw, 2.5rem) !important;
  }
  .acier-checklist { gap: 0.3rem !important; }
  .acier-progress {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
  }
  .acier-right__btns {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  .acier-btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER MSC CONTAINERS — version compacte
   ═══════════════════════════════════════════════════════════════ */

/* Masquer l'ancien footer */
.site-footer { display: none !important; }

/* ── Structure ── */
.msc-footer {
  background: #0a0a0a;
  border-top: 2px solid #92BD28;
  font-family: var(--font-body);
}

/* ── Zone principale ── */
.msc-footer__main {
  padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
}

.msc-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}

/* ── Col 1 : Brand ── */
.msc-footer__col--brand {
  display: flex;
  flex-direction: column;
  gap: .65rem;
}

.msc-footer__logo img {
  height: 42px;
  width: auto;
  display: block;
  opacity: .9;
  transition: opacity .2s;
}
.msc-footer__logo:hover img { opacity: 1; }

.msc-footer__desc {
  font-size: .78rem;
  color: rgba(255,255,255,.45);
  line-height: 1.6;
  margin: 0;
}

.msc-footer__cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: #92BD28;
  color: #fff !important;
  padding: .45rem 1rem;
  border-radius: 4px;
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none !important;
  align-self: flex-start;
  transition: background .2s;
}
.msc-footer__cta:hover { background: #7aa820; }

/* ── Colonnes liens ── */
.msc-footer__heading {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #92BD28;
  margin: 0 0 .75rem;
  font-family: var(--font-mono);
}

.msc-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.msc-footer__links a {
  font-size: 13px;
  color: rgba(255,255,255,.55);
  text-decoration: none;
  transition: color .15s;
  line-height: 1.4;
}
.msc-footer__links a:hover { color: #fff; }

/* ── Barre copyright ── */
.msc-footer__bar {
  border-top: 1px solid rgba(255,255,255,.07);
  padding-block: .8rem;
}

.msc-footer__bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 12px;
  color: rgba(255,255,255,.3);
}

.msc-footer__heart { color: #e53e3e; }

/* ── Responsive ── */
@media (max-width: 960px) {
  .msc-footer__grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem;
  }
  .msc-footer__col--brand {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .msc-footer__desc { display: none; }
}

@media (max-width: 600px) {
  .msc-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }
  .msc-footer__col--brand {
    grid-column: 1 / -1;
  }
  .msc-footer__bar-inner {
    flex-direction: column;
    text-align: center;
    gap: .4rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION ¿POR QUÉ MSC CONTAINERS? — Premium redesign
   ═══════════════════════════════════════════════════════════════ */

.usps-section {
  background: #0a0a0a;
  padding-block: clamp(3rem, 6vw, 5rem);
  position: relative;
  overflow: hidden;
}

/* Texture subtile en arrière-plan */
.usps-section::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

.usps-section__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: clamp(2rem,4vw,3rem);
}

/* ── Header ── */
.usps-section__header {
  display: flex; flex-direction: column; gap: .6rem;
}

.usps-eyebrow {
  display: flex; align-items: center; gap: .65rem;
  font-family: var(--font-mono); font-size: .7rem;
  font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: #92BD28;
}
.usps-eyebrow__line {
  display: block; width: 28px; height: 2px;
  background: #92BD28; flex-shrink: 0;
}

.usps-section__title {
  font-size: clamp(1.6rem, 3.5vw, 2.6rem) !important;
  font-weight: 900 !important;
  letter-spacing: -.03em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  margin: 0 !important;
  line-height: 1 !important;
}

/* ── Grille 4 cartes ── */
.usps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
}

/* ── Carte ── */
.usps-card {
  position: relative;
  background: rgba(255,255,255,.04);
  border: 1.5px solid #A8A9AD33;
  border-radius: 8px;
  padding: clamp(1.5rem,2.5vw,2rem) clamp(1.25rem,2vw,1.75rem);
  display: flex; flex-direction: column; gap: .85rem;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  cursor: default;
}

/* Numéro filigrane */
.usps-card__num {
  position: absolute;
  top: -.5rem; right: .75rem;
  font-size: clamp(4rem, 7vw, 6rem);
  font-weight: 900;
  color: rgba(146,189,40,.08);
  line-height: 1;
  font-family: 'Arial Black', sans-serif;
  pointer-events: none;
  user-select: none;
  letter-spacing: -.05em;
}

/* Hover */
.usps-card:hover {
  border-color: #92BD28;
  box-shadow: 0 8px 28px rgba(146,189,40,.12);
  transform: translateY(-3px);
}

/* Icône */
.usps-card__icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 9px;
  background: #92BD28;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: #fff;
  box-shadow: 0 4px 12px rgba(146,189,40,.3);
}

/* Titre */
.usps-card__title {
  font-size: .85rem !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  position: relative; z-index: 1;
}

/* Description */
.usps-card__desc {
  font-size: .8rem !important;
  line-height: 1.65 !important;
  color: rgba(255,255,255,.5) !important;
  margin: 0 !important;
  position: relative; z-index: 1;
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .usps-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .usps-grid { grid-template-columns: 1fr; }
  .usps-card__num { font-size: 3.5rem; }
}

/* ═══════════════════════════════════════════════════════════════
   CHECKOUT / PAIEMENT / PANIER — MSC Containers
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero pages checkout ── */
.msc-page-hero { padding-block: clamp(2rem,4vw,3rem); }
.msc-page-hero--dark { background: #0a0a0a; border-bottom: 3px solid #92BD28; }
.msc-page-hero__inner { display:flex; flex-direction:column; gap:.65rem; }
.msc-page-hero__title {
  font-size:clamp(1.6rem,4vw,2.8rem) !important; font-weight:900 !important;
  text-transform:uppercase !important; letter-spacing:-.03em !important;
  color:#fff !important; margin:0 !important; display:flex; align-items:center; gap:.6rem;
}
.msc-page-hero__title i { color:#92BD28; font-size:.8em; }

.msc-breadcrumb {
  display:flex; align-items:center; gap:.5rem;
  font-size:.7rem; color:rgba(255,255,255,.4);
  font-family:var(--font-mono); letter-spacing:.06em;
}
.msc-breadcrumb a { color:rgba(255,255,255,.4); text-decoration:none; }
.msc-breadcrumb a:hover { color:#92BD28; }
.msc-breadcrumb i { font-size:.5rem; }
.msc-breadcrumb span { color:#92BD28; }

/* ── Wrapper principal ── */
.msc-checkout-wrap { padding-block: clamp(2rem,4vw,3.5rem); }

/* ── Panier vide ── */
.msc-cart-empty {
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:1rem; padding:4rem 1rem;
}
.msc-cart-empty__icon { font-size:3.5rem; color:#92BD28; opacity:.4; }
.msc-cart-empty h2 { font-size:1.5rem; color:var(--ink); }
.msc-cart-empty p { color:#777; }

/* ── Layout panier — pleine largeur ── */
.msc-checkout-page .msc-checkout-wrap {
  max-width:1400px; padding-inline:clamp(.5rem,1.5vw,1.25rem);
}
.msc-cart-layout {
  display:grid; grid-template-columns:70% 1fr; gap:2rem; align-items:start;
}

/* Table panier */
.msc-cart-table { width:100%; border-collapse:collapse; background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,.06); }
.msc-cart-table thead tr { background:#0a0a0a; }
.msc-cart-table th { padding:12px 16px; text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.7); }
.msc-cart-table td { padding:14px 16px; border-bottom:1px solid rgba(0,0,0,.05); vertical-align:middle; }
.msc-cart-table tbody tr:last-child td { border:none; }
.msc-cart-img img { width:70px; height:70px; object-fit:cover; border-radius:4px; display:block; }
.msc-cart-name a { font-weight:700; color:var(--ink); text-decoration:none; }
.msc-cart-name a:hover { color:#92BD28; }
.msc-cart-name small { display:block; color:#888; font-size:.75rem; margin-top:2px; }
.msc-cart-price, .msc-cart-subtotal { font-weight:700; color:#0a0a0a; }
.msc-qty__input { width:64px; padding:.4rem .5rem; border:1.5px solid rgba(0,0,0,.12); border-radius:4px; text-align:center; font-size:.9rem; }
.msc-qty__input:focus { border-color:#92BD28; outline:none; }
.msc-cart-remove__btn { color:#ccc; font-size:1.1rem; transition:color .15s; }
.msc-cart-remove__btn:hover { color:#e53e3e; }
.msc-cart-actions { display:flex; justify-content:space-between; margin-top:1rem; gap:.75rem; flex-wrap:wrap; }

/* Résumé panier */
.msc-cart-summary {
  background:#fff; border-radius:8px; padding:1.5rem;
  box-shadow:0 2px 12px rgba(0,0,0,.06); position:sticky; top:80px;
}
.msc-cart-summary__title { font-size:1rem; font-weight:800; color:#0a0a0a; margin:0 0 1rem; text-transform:uppercase; }
.msc-cart-summary__row { display:flex; justify-content:space-between; padding:.5rem 0; border-bottom:1px solid rgba(0,0,0,.05); font-size:.85rem; color:#555; }
.msc-cart-summary__row--total { border:none; font-size:1.1rem; font-weight:900; color:#0a0a0a; padding-top:.75rem; }
.msc-cart-summary__reassurance { display:flex; gap:1rem; justify-content:center; margin-top:1rem; font-size:.72rem; color:#888; flex-wrap:wrap; }
.msc-cart-summary__reassurance i { color:#92BD28; margin-right:.25rem; }

/* ── Boutons ── */
.msc-btn { display:inline-flex; align-items:center; gap:.45rem; padding:.7rem 1.4rem; border-radius:5px; font-size:.85rem; font-weight:700; text-decoration:none !important; cursor:pointer; border:none; transition:all .2s; }
.msc-btn--primary { background:#92BD28; color:#fff !important; box-shadow:0 4px 12px rgba(146,189,40,.25); }
.msc-btn--primary:hover { background:#7aa820; transform:translateY(-1px); }
.msc-btn--ghost { background:transparent; color:var(--ink) !important; border:1.5px solid rgba(0,0,0,.15); }
.msc-btn--ghost:hover { border-color:#92BD28; color:#92BD28 !important; }
.msc-btn--outline { background:transparent; color:var(--ink) !important; border:1.5px solid rgba(0,0,0,.15); }
.msc-btn--outline:hover { border-color:#92BD28; }
.msc-btn--full { width:100%; justify-content:center; margin-top:1rem; padding:.85rem; }

/* ── Bouton Añadir al carrito (cartes produit) ── */
.hpc__btn-cart {
  flex:1; text-align:center; background:#92BD28; color:#fff !important;
  padding:.55rem .75rem; border-radius:4px; font-size:.78rem; font-weight:700;
  text-decoration:none !important; transition:background .2s;
  border:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
}
.hpc__btn-cart:hover { background:#7aa820; }
.hpc__btn-cart.loading { opacity:.6; pointer-events:none; }

/* ── Layout checkout ── */
.msc-checkout-layout { display:grid; grid-template-columns:1fr 380px; gap:2rem; align-items:start; }
.msc-checkout-section { background:#fff; border-radius:8px; padding:1.75rem; box-shadow:0 2px 12px rgba(0,0,0,.06); margin-bottom:1.25rem; }
.msc-checkout-section__title { font-size:1rem; font-weight:800; color:#0a0a0a; margin:0 0 1.25rem; text-transform:uppercase; display:flex; align-items:center; gap:.5rem; }
.msc-checkout-section__title i { color:#92BD28; }

/* Virement bancaire info */
.msc-bacs-info { display:flex; gap:.85rem; background:rgba(146,189,40,.07); border:1.5px solid rgba(146,189,40,.25); border-radius:7px; padding:1rem 1.25rem; margin-bottom:1rem; }
.msc-bacs-info__icon { font-size:1.6rem; color:#92BD28; flex-shrink:0; }
.msc-bacs-info strong { display:block; font-weight:800; color:#0a0a0a; margin-bottom:.35rem; }
.msc-bacs-info p { font-size:.82rem; color:#555; line-height:1.6; margin:0; }

/* Récapitulatif checkout */
.msc-checkout-summary { position:sticky; top:80px; }
.msc-checkout-summary__card { background:#fff; border-radius:8px; padding:1.5rem; box-shadow:0 2px 12px rgba(0,0,0,.06); }
.msc-checkout-summary__title { font-size:1rem; font-weight:800; color:#0a0a0a; margin:0 0 1rem; text-transform:uppercase; }
.msc-order-items { display:flex; flex-direction:column; gap:.65rem; margin-bottom:1rem; }
.msc-order-item { display:flex; align-items:center; gap:.75rem; }
.msc-order-item img { width:52px; height:52px; object-fit:cover; border-radius:4px; flex-shrink:0; }
.msc-order-item__name { font-size:.82rem; font-weight:600; color:#0a0a0a; }
.msc-order-item__qty { font-size:.75rem; color:#888; }
.msc-order-item__price { font-size:.85rem; font-weight:700; color:#0a0a0a; margin-left:auto; flex-shrink:0; }
.msc-order-totals { border-top:1px solid rgba(0,0,0,.07); padding-top:.75rem; }
.msc-order-total-row { display:flex; justify-content:space-between; padding:.35rem 0; font-size:.82rem; color:#555; }
.msc-order-total-row--total { font-weight:900; color:#0a0a0a; font-size:1rem; padding-top:.5rem; }
.msc-checkout-reassurance { display:flex; flex-wrap:wrap; gap:.5rem .75rem; margin-top:1rem; border-top:1px solid rgba(0,0,0,.06); padding-top:.75rem; }
.msc-checkout-reassurance div { font-size:.72rem; color:#888; display:flex; align-items:center; gap:.3rem; }
.msc-checkout-reassurance i { color:#92BD28; }

/* WooCommerce form champs – harmonisation */
.woocommerce-billing-fields input,
.woocommerce-billing-fields select,
.woocommerce-additional-fields textarea {
  border: 1.5px solid rgba(0,0,0,.12) !important;
  border-radius: 5px !important;
  padding: .65rem .9rem !important;
  font-size: .88rem !important;
  width: 100% !important;
  transition: border-color .2s !important;
}
.woocommerce-billing-fields input:focus,
.woocommerce-billing-fields select:focus {
  border-color: #92BD28 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(146,189,40,.1) !important;
}
.woocommerce #payment #place_order {
  background: #92BD28 !important;
  border-color: #92BD28 !important;
  width: 100% !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  padding: 1rem !important;
}
.woocommerce #payment #place_order:hover { background: #7aa820 !important; }

/* ── Responsive carrito ── */
/* Tablette 768-1024px */
@media (max-width:1024px) {
  .msc-cart-layout { grid-template-columns:65% 1fr; gap:1.25rem; }
  .msc-checkout-layout { grid-template-columns:1fr 35%; gap:1.25rem; }
}
/* Mobile < 768px */
@media (max-width:767px) {
  .msc-cart-layout { grid-template-columns:1fr; gap:1.5rem; }
  .msc-checkout-layout { grid-template-columns:1fr; }
  .msc-checkout-summary { position:static; }
  .msc-cart-summary { position:static; width:100%; }
  .msc-btn--full { width:100%; justify-content:center; }
  /* Table mobile : image+nom en haut, détails en dessous */
  .msc-cart-table thead { display:none; }
  .msc-cart-table tbody tr {
    display:flex; flex-wrap:wrap; position:relative;
    padding:.75rem .5rem; border-bottom:1px solid rgba(0,0,0,.08);
    gap:.35rem;
  }
  .msc-cart-table td { display:block; border:none; padding:.2rem .4rem; }
  .msc-cart-img { width:72px; order:1; flex-shrink:0; }
  .msc-cart-name { flex:1; order:2; min-width:0; }
  .msc-cart-remove { order:3; margin-left:auto; align-self:flex-start; }
  .msc-cart-price,.msc-cart-qty,.msc-cart-subtotal {
    order:4; width:33%; text-align:center;
  }
  .msc-cart-price::before   { content:attr(data-label); display:block; font-size:.6rem; color:#888; text-transform:uppercase; letter-spacing:.05em; }
  .msc-cart-qty::before     { content:attr(data-label); display:block; font-size:.6rem; color:#888; text-transform:uppercase; letter-spacing:.05em; }
  .msc-cart-subtotal::before{ content:attr(data-label); display:block; font-size:.6rem; color:#888; text-transform:uppercase; letter-spacing:.05em; }
  .msc-cart-actions { flex-direction:column; }
  .msc-cart-actions .msc-btn { width:100%; justify-content:center; }
}


/* ═══════════════════════════════════════════════════════════════
   PAGE CONFIRMATION DE COMMANDE
   ═══════════════════════════════════════════════════════════════ */

@keyframes confirmPop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

.msc-confirm-page { background: #f5f3ee; min-height: 80vh; }

.msc-confirm-wrap {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
}

.msc-confirm-card {
  background: #fff; border-radius: 10px;
  box-shadow: 0 4px 32px rgba(0,0,0,.08);
  padding: clamp(2rem, 5vw, 3.5rem);
  max-width: 680px; width: 100%;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 1.25rem;
  border-top: 4px solid #92BD28;
}

.msc-confirm-icon {
  font-size: 4rem; color: #92BD28;
  animation: confirmPop .6s cubic-bezier(.34,1.56,.64,1) both;
}

.msc-confirm-title {
  font-size: clamp(1.5rem,4vw,2.2rem) !important;
  font-weight: 900 !important; color: #0a0a0a !important;
  margin: 0 !important; text-transform: uppercase !important;
  letter-spacing: -.02em !important;
}

.msc-confirm-msg {
  font-size: .95rem; color: #555; line-height: 1.7; max-width: 50ch; margin: 0;
}

/* Détails commande */
.msc-confirm-details {
  display: grid; grid-template-columns: repeat(2,1fr);
  gap: .65rem; width: 100%;
  background: #f5f3ee; border-radius: 7px; padding: 1.25rem;
}
.msc-confirm-detail {
  display: flex; flex-direction: column; gap: .2rem; text-align: left;
}
.msc-confirm-detail__label {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
  color: #999; display: flex; align-items: center; gap: .35rem;
  font-family: var(--font-mono);
}
.msc-confirm-detail__label i { color: #92BD28; }
.msc-confirm-detail__value { font-size: .9rem; font-weight: 700; color: #0a0a0a; }

/* Articles */
.msc-confirm-items { width: 100%; border: 1px solid rgba(0,0,0,.07); border-radius: 7px; overflow: hidden; }
.msc-confirm-items__title {
  font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: #fff; background: #0a0a0a;
  padding: .6rem 1rem; margin: 0;
}
.msc-confirm-item {
  display: flex; align-items: center; gap: .85rem;
  padding: .85rem 1rem; border-bottom: 1px solid rgba(0,0,0,.05);
  text-align: left;
}
.msc-confirm-item:last-child { border-bottom: none; }
.msc-confirm-item img { width: 52px; height: 52px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.msc-confirm-item__name { font-size: .85rem; font-weight: 700; color: #0a0a0a; }
.msc-confirm-item__qty { font-size: .75rem; color: #888; margin-top: 2px; }
.msc-confirm-item__price { font-size: .9rem; font-weight: 800; color: #0a0a0a; margin-left: auto; flex-shrink: 0; }

/* Infos virement */
.msc-confirm-bacs {
  display: flex; gap: .85rem; width: 100%;
  background: rgba(146,189,40,.07); border: 1.5px solid rgba(146,189,40,.25);
  border-radius: 7px; padding: 1rem 1.25rem; text-align: left;
}
.msc-confirm-bacs__icon { font-size: 1.6rem; color: #92BD28; flex-shrink: 0; }
.msc-confirm-bacs strong { display: block; font-weight: 800; color: #0a0a0a; margin-bottom: .3rem; }
.msc-confirm-bacs p { font-size: .82rem; color: #555; line-height: 1.6; margin: 0; }

/* Bouton PDF */
.msc-btn--icon { gap: .5rem; }

/* Boutons */
.msc-confirm-btns { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; }

/* Réassurance bas de page */
.msc-confirm-reassurance {
  display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: center;
  font-size: .78rem; color: #888;
}
.msc-confirm-reassurance div { display: flex; align-items: center; gap: .4rem; }
.msc-confirm-reassurance i { color: #92BD28; }

/* ── Responsive ── */
@media (max-width: 560px) {
  .msc-confirm-details { grid-template-columns: 1fr; }
  .msc-confirm-btns { flex-direction: column; width: 100%; }
  .msc-btn { justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   MODO DE ENTREGA — Cartes sélectionnables
   ═══════════════════════════════════════════════════════════════ */
.msc-delivery-options { display:flex; flex-direction:column; gap:.65rem; }
.msc-delivery-card input[type="radio"] { position:absolute; opacity:0; width:0; height:0; }
.msc-delivery-card {
  display:block; cursor:pointer; border:1.5px solid rgba(0,0,0,.1);
  border-radius:7px; overflow:hidden; transition:border-color .2s, box-shadow .2s; background:#fff;
}
.msc-delivery-card:hover { border-color:rgba(146,189,40,.4); }
.msc-delivery-card.is-selected {
  border-color:#92BD28; box-shadow:0 0 0 3px rgba(146,189,40,.12);
  background:rgba(146,189,40,.03);
}
.msc-delivery-card__inner { display:flex; align-items:center; gap:1rem; padding:1rem 1.1rem; }
.msc-delivery-card__icon {
  flex-shrink:0; width:44px; height:44px; border-radius:8px;
  background:rgba(146,189,40,.1); display:flex; align-items:center;
  justify-content:center; font-size:1.15rem; color:#92BD28; transition:background .2s;
}
.msc-delivery-card.is-selected .msc-delivery-card__icon { background:#92BD28; color:#fff; }
.msc-delivery-card__body { flex:1; min-width:0; }
.msc-delivery-card__title {
  font-size:.88rem; font-weight:800; color:#0a0a0a;
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.2rem;
}
.msc-delivery-card__badge {
  font-size:.65rem; font-weight:700; background:#92BD28; color:#fff;
  padding:.15rem .55rem; border-radius:20px; letter-spacing:.04em; text-transform:uppercase;
}
.msc-delivery-card__desc { font-size:.78rem; color:#777; line-height:1.5; margin:0; }
.msc-delivery-card__check {
  flex-shrink:0; font-size:1.3rem; color:rgba(0,0,0,.12); transition:color .2s;
}
.msc-delivery-card.is-selected .msc-delivery-card__check { color:#92BD28; }
.msc-delivery-error {
  color:#e53e3e; font-size:.8rem; margin-top:.5rem;
  display:flex; align-items:center; gap:.4rem;
}
@media (max-width:560px) {
  .msc-delivery-card__check { display:none; }
}

/* ═══════════════════════════════════════════════════════════════
   FORMULAIRE CLIENT CHECKOUT — Campos personalizados
   ═══════════════════════════════════════════════════════════════ */

/* Message erreur global */
.msc-form-global-error {
  background:#fef2f2; border:1.5px solid #fca5a5; color:#b91c1c;
  padding:.85rem 1.1rem; border-radius:6px; margin-bottom:1.25rem;
  display:flex; align-items:center; gap:.5rem; font-size:.85rem; font-weight:600;
}
.msc-form-global-error[hidden] { display:none; }

/* Titre sous-groupe */
.msc-form-group-title {
  font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; color:#92BD28; display:flex; align-items:center;
  gap:.45rem; margin-bottom:.75rem;
}

/* Lignes de champs */
.msc-form-row { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
.msc-form-row--half { grid-template-columns:1fr; max-width:50%; }

/* Champ individuel */
.msc-form-field { display:flex; flex-direction:column; gap:.3rem; }
.msc-form-field label {
  font-size:.75rem; font-weight:700; color:#444;
  text-transform:uppercase; letter-spacing:.05em;
}
.msc-req  { color:#92BD28; }
.msc-opt  { color:#aaa; font-weight:400; text-transform:none; letter-spacing:0; }

/* Wrapper input avec icône */
.msc-input-wrap {
  position:relative; display:flex; align-items:center;
  background:#fff; border:1.5px solid rgba(0,0,0,.1);
  border-radius:6px; transition:border-color .2s, box-shadow .2s;
}
.msc-input-wrap:focus-within {
  border-color:#92BD28; box-shadow:0 0 0 3px rgba(146,189,40,.1);
}
.msc-input-wrap.is-ok    { border-color:#92BD28; }
.msc-input-wrap.is-error { border-color:#e53e3e; box-shadow:0 0 0 3px rgba(229,62,62,.08); }

.msc-input-icon {
  position:absolute; left:12px; color:#92BD28; font-size:.8rem;
  pointer-events:none; z-index:1; flex-shrink:0;
}
.msc-input-wrap input,
.msc-input-wrap select,
.msc-input-wrap textarea {
  width:100%; padding:.68rem .85rem .68rem 2.4rem !important;
  background:transparent !important; border:none !important;
  outline:none !important; font-size:.88rem !important;
  color:#0a0a0a !important; font-family:var(--font-body) !important;
  box-shadow:none !important; border-radius:0 !important;
}
.msc-input-wrap select { appearance:none; cursor:pointer; }

/* msc-form-field doit avoir margin-bottom entre les lignes */
.msc-checkout-section .msc-form-field { margin-bottom:.75rem; }
.msc-checkout-section .msc-form-row   { margin-bottom:.75rem; }

/* Checkbox "même adresse" */
.msc-same-address {
  display:flex; align-items:center; gap:.65rem; cursor:pointer;
  font-size:.84rem; color:#444; margin:.5rem 0;
}
.msc-same-address input { display:none; }
.msc-same-address__check {
  width:20px; height:20px; border-radius:4px; flex-shrink:0;
  border:2px solid rgba(0,0,0,.18); background:#fff;
  display:flex; align-items:center; justify-content:center;
  color:transparent; transition:all .2s;
}
.msc-same-address input:checked + .msc-same-address__check {
  background:#92BD28; border-color:#92BD28; color:#fff;
}

/* Adresse facturation alternative */
.msc-billing-alt { padding:1rem; background:#f9f9f9; border-radius:7px; border:1px solid rgba(0,0,0,.07); }
.msc-billing-alt[hidden] { display:none; }

/* Checkbox CGV */
.msc-cgv-check {
  display:flex; align-items:flex-start; gap:.65rem; cursor:pointer;
  font-size:.82rem; color:#555; margin:1rem 0;
}
.msc-cgv-check input { display:none; }
.msc-cgv-check__box {
  width:20px; height:20px; border-radius:4px; flex-shrink:0;
  border:2px solid rgba(0,0,0,.18); background:#fff; margin-top:1px;
  display:flex; align-items:center; justify-content:center;
  color:transparent; transition:all .2s;
}
.msc-cgv-check input:checked + .msc-cgv-check__box {
  background:#92BD28; border-color:#92BD28; color:#fff;
}
.msc-cgv-check a { color:#92BD28; text-decoration:none; font-weight:600; }
.msc-cgv-check a:hover { text-decoration:underline; }

/* Bouton confirmer */
.msc-btn--confirm {
  margin-top:.5rem; padding:1rem 1.5rem !important;
  font-size:1rem !important; letter-spacing:.02em;
}

/* ── Responsive formulaire ── */
@media (max-width:640px) {
  .msc-form-row { grid-template-columns:1fr; }
  .msc-form-row--half { max-width:100%; }
}

/* === MENU NAVIGATION MOBILE === */
.site-header__inner { display:flex !important; align-items:center !important; justify-content:space-between !important; gap:.75rem !important; padding-block:.6rem !important; }
.site-header__actions { display:flex !important; align-items:center !important; gap:.5rem !important; flex-shrink:0 !important; }
.cart-pill { display:flex !important; align-items:center !important; gap:.4rem !important; position:relative !important; }
.cart-pill .fa-cart-shopping { font-size:1.1rem; color:var(--ink); }
.cart-pill__text { font-size:.78rem; font-weight:600; }
.menu-toggle { display:none !important; align-items:center !important; justify-content:center !important; width:40px; height:40px; border:1.5px solid rgba(0,0,0,.12); border-radius:6px; background:transparent; cursor:pointer; font-size:1.1rem; color:var(--ink); transition:border-color .2s, color .2s; flex-shrink:0; }
.menu-toggle:hover { border-color:#92BD28; color:#92BD28; }
.nav--desktop { display:flex; }
.nav__cgv { font-size:.72rem !important; font-weight:500 !important; color:var(--concrete) !important; letter-spacing:.02em !important; }
.nav__cgv:hover { color:var(--signal) !important; }

@media (max-width:768px) {
  .menu-toggle { display:flex !important; }
  .nav--desktop { display:none !important; }
  .brand__logo { height:36px !important; max-width:150px !important; }
  .cart-pill__text { display:none; }
}

.mobile-nav { position:fixed; top:0; left:0; right:0; background:#0a0a0a; z-index:9000; transform:translateY(-100%); opacity:0; transition:transform .35s cubic-bezier(.4,0,.2,1), opacity .25s ease; pointer-events:none; border-bottom:3px solid #92BD28; display:none; }
@media (max-width:768px) { .mobile-nav { display:block; } }
.mobile-nav.is-open { transform:translateY(0); opacity:1; pointer-events:all; }
.mobile-nav__inner { padding:1.25rem 1rem 1.5rem; display:flex; flex-direction:column; gap:.15rem; }
.mobile-nav__link { display:flex; align-items:center; gap:.85rem; padding:.85rem 1rem; border-radius:7px; color:rgba(255,255,255,.7) !important; text-decoration:none !important; font-size:.95rem; font-weight:600; transition:background .15s, color .15s; }
.mobile-nav__link i:first-child { color:#92BD28; width:20px; text-align:center; flex-shrink:0; font-size:.9rem; }
.mobile-nav__link span { flex:1; }
.mobile-nav__arrow { font-size:.65rem; color:rgba(255,255,255,.2); transition:color .15s; }
.mobile-nav__link:hover, .mobile-nav__link--active { background:rgba(146,189,40,.08); color:#fff !important; }
.mobile-nav__link--active i:first-child, .mobile-nav__link--active .mobile-nav__arrow { color:#92BD28; }
.mobile-nav__link:hover .mobile-nav__arrow { color:rgba(255,255,255,.4); }

.mobile-nav__overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(2px); z-index:8999; opacity:0; transition:opacity .25s ease; pointer-events:none; }
@media (max-width:768px) { .mobile-nav__overlay { display:block; } }
.mobile-nav__overlay.is-visible { opacity:1; pointer-events:all; }

/* ═══════════════════════════════════════════════════════════════
   CARTE PRODUIT (pc) — Nuestros Productos — redesign uniforme
   ═══════════════════════════════════════════════════════════════ */

/* Grille WooCommerce : forcer 3 col */
.woocommerce ul.products { display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:1.25rem !important; margin:0 !important; padding:0 !important; list-style:none !important; }
.woocommerce ul.products li.product { margin:0 !important; padding:0 !important; float:none !important; width:auto !important; }

/* Carte */
.pc {
  display:flex; flex-direction:column;
  background:#fff; border:1.5px solid rgba(0,0,0,.07);
  border-radius:8px; overflow:hidden;
  transition:border-color .2s, box-shadow .2s, transform .2s;
  height:100%;
}
.pc:hover {
  border-color:#92BD28;
  box-shadow:0 6px 28px rgba(146,189,40,.14);
  transform:translateY(-3px);
}

/* Image — proportion fixe */
.pc__media {
  display:block; position:relative;
  aspect-ratio:4/3; overflow:hidden;
  background:#f5f3ee; flex-shrink:0;
}
.pc__media img,
.pc__media svg {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .4s ease;
}
.pc:hover .pc__media img,
.pc:hover .pc__media svg { transform:scale(1.04); }

/* Badges sur l'image */
.pc__badges {
  position:absolute; top:8px; left:8px;
  display:flex; flex-wrap:wrap; gap:4px;
}
.pc__badge {
  display:inline-flex; align-items:center;
  padding:.2rem .6rem; border-radius:20px;
  font-size:.65rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
  line-height:1;
}
.pc__badge--new       { background:#92BD28; color:#fff; }
.pc__badge--used      { background:rgba(0,0,0,.6); color:#fff; }
.pc__badge--out       { background:#e53e3e; color:#fff; }
.pc__badge--highlight { background:var(--signal); color:#fff; }
.pc__badge--ref       { background:rgba(0,0,0,.55); color:#fff; font-family:var(--font-mono); }

/* Corps */
.pc__body {
  padding:.85rem 1rem .6rem;
  display:flex; flex-direction:column; gap:.5rem;
  flex:1;
}

/* Titre */
.pc__title {
  font-size:.9rem !important; font-weight:700 !important;
  line-height:1.3 !important; margin:0 !important;
  color:var(--ink) !important;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.pc__title a { color:inherit !important; text-decoration:none !important; }
.pc__title a:hover { color:#92BD28 !important; }

/* Specs */
.pc__specs {
  display:grid; grid-template-columns:1fr 1fr;
  gap:.25rem .5rem; margin:0;
}
.pc__spec {
  display:flex; align-items:baseline; gap:.3rem;
  font-size:.7rem;
}
.pc__spec dt {
  font-family:var(--font-mono); font-weight:700;
  color:#aaa; text-transform:uppercase; letter-spacing:.06em;
  flex-shrink:0;
}
.pc__spec dd { color:#444; margin:0; }
.pc__spec--in  dd { color:#92BD28; font-weight:700; }
.pc__spec--out dt, .pc__spec--out dd { color:#e53e3e; font-weight:700; }

/* Prix */
.pc__price {
  margin-top:auto; padding-top:.5rem;
  border-top:1px solid rgba(0,0,0,.06);
}
.pc__price small {
  display:block; font-size:.62rem; color:#aaa;
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:1px;
}
.pc__price .woocommerce-Price-amount {
  font-size:1.15rem !important; font-weight:800 !important; color:var(--ink) !important;
}

/* Pied de carte — 2 boutons */
.pc__foot {
  display:flex; gap:.45rem; padding:.7rem .85rem;
  border-top:1px solid rgba(0,0,0,.06);
  background:rgba(0,0,0,.015); flex-shrink:0;
}
.pc__btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:.35rem; border-radius:4px; font-size:.75rem; font-weight:700;
  text-decoration:none !important; cursor:pointer; transition:all .2s;
  padding:.45rem .7rem; border:none; line-height:1;
}
.pc__btn--ver {
  background:transparent; color:var(--ink) !important;
  border:1.5px solid rgba(0,0,0,.15); flex-shrink:0; white-space:nowrap;
}
.pc__btn--ver:hover { border-color:#92BD28; color:#92BD28 !important; }
.pc__btn--cart {
  flex:1; background:#92BD28; color:#fff !important;
  box-shadow:0 2px 8px rgba(146,189,40,.2);
}
.pc__btn--cart:hover { background:#7aa820; }
.pc__btn--agotado {
  flex:1; background:rgba(229,62,62,.08);
  color:#e53e3e !important; border:1px solid rgba(229,62,62,.2);
  cursor:not-allowed; opacity:.7;
}

/* Responsive */
@media (max-width:960px) {
  .woocommerce ul.products { grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width:540px) {
  .woocommerce ul.products { grid-template-columns:1fr !important; }
  .pc__specs { grid-template-columns:repeat(2,1fr); }
}
/* ═══════════════════════════════════════════════════════════════
/* ═══════════════════════════════════════════════════════════════
   FICHE PRODUIT SINGLE — spv- — Contenedores Vizcaya
   ═══════════════════════════════════════════════════════════════ */

/* ── Page wrapper ── */
.spv-page { background:#f5f3ee; }

/* ── Fil d'Ariane ── */
.spv-breadcrumb {
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,.07);
}
.spv-breadcrumb__inner {
  display:flex; align-items:center; flex-wrap:wrap;
  gap:.3rem .6rem;
  padding-block:.75rem;
  font-size:.72rem; font-family:var(--font-mono); letter-spacing:.05em;
  color:#aaa;
}
.spv-breadcrumb__inner a { color:#aaa; text-decoration:none; transition:color .15s; }
.spv-breadcrumb__inner a:hover { color:#92BD28; }
.spv-breadcrumb__inner span { color:#92BD28; font-weight:600; }
.spv-sep { color:#92BD28; font-size:.85rem; line-height:1; }

/* ── Zone principale ── */
.spv-main { padding-block:clamp(1.5rem,3vw,3rem); }
.spv-main__grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(1.5rem,3vw,3.5rem);
  align-items:start;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   GALERIE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.spv-gallery { position:sticky; top:80px; }

.spv-gallery__stage {
  position:relative;
  background:#fff;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 4px 24px rgba(0,0,0,.09);
  aspect-ratio:4/3;
  display:flex; align-items:center; justify-content:center;
  cursor:zoom-in;
}
.spv-gallery__main-img {
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .45s cubic-bezier(.16,1,.3,1), opacity .15s;
}
.spv-gallery__stage:hover .spv-gallery__main-img { transform:scale(1.06); }

/* Badge galerie (mobile visible dans l'image) */
.spv-gallery__badge {
  position:absolute; top:12px; left:12px; z-index:2;
  padding:.3rem .9rem; border-radius:20px;
  font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  pointer-events:none;
}
.spv-gallery__badge--new  { background:#92BD28; color:#fff; }
.spv-gallery__badge--used { background:rgba(0,0,0,.55); color:#fff; }

/* Miniatures */
.spv-gallery__thumbs {
  display:flex; gap:.5rem; margin-top:.65rem;
  overflow-x:auto; padding-bottom:.25rem;
  scrollbar-width:thin; scrollbar-color:#ddd transparent;
}
.spv-gallery__thumbs::-webkit-scrollbar { height:4px; }
.spv-gallery__thumbs::-webkit-scrollbar-thumb { background:#ddd; border-radius:2px; }
.spv-gallery__thumb {
  flex-shrink:0;
  width:70px; height:70px;
  border-radius:6px; overflow:hidden;
  border:2px solid rgba(0,0,0,.08);
  cursor:pointer; background:#fff;
  transition:border-color .18s, box-shadow .18s;
  padding:0;
}
.spv-gallery__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.spv-gallery__thumb:hover  { border-color:#92BD28; }
.spv-gallery__thumb.is-active { border-color:#92BD28; box-shadow:0 0 0 3px rgba(146,189,40,.2); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BLOC INFO
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.spv-info {
  background:#fff;
  border-radius:10px;
  padding:clamp(1.25rem,2.5vw,2rem);
  box-shadow:0 4px 24px rgba(0,0,0,.07);
  display:flex; flex-direction:column; gap:.85rem;
}

/* Badges */
.spv-info__top { display:flex; flex-wrap:wrap; gap:.4rem; }
.spv-badge {
  display:inline-flex; align-items:center;
  padding:.28rem .85rem; border-radius:20px;
  font-size:.7rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
}
.spv-badge--new   { background:#92BD28; color:#fff; }
.spv-badge--used  { background:#4b5563; color:#fff; }
.spv-badge--promo { background:#f59e0b; color:#fff; }

/* Titre */
.spv-info__title {
  font-size:clamp(1.3rem,2.5vw,1.9rem) !important;
  font-weight:900 !important; color:#0a0a0a !important;
  line-height:1.15 !important; margin:0 !important;
  letter-spacing:-.02em !important; text-transform:uppercase !important;
}

/* Référence */
.spv-info__ref {
  font-size:.73rem; color:#999;
  font-family:var(--font-mono); letter-spacing:.06em;
  margin:0;
}
.spv-info__ref-sep { margin-inline:.35rem; color:#ccc; }

/* Prix */
.spv-info__price-wrap { display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; }
.spv-info__desde { font-size:.78rem; color:#888; font-weight:400; }
.spv-info__price .woocommerce-Price-amount {
  font-size:2.1rem !important; font-weight:900 !important; color:#0a0a0a !important; line-height:1 !important;
}
.spv-info__ivainfo { font-size:.72rem; color:#bbb; font-weight:400; margin-left:.25rem; }

/* Stock */
.spv-info__stock { display:flex; align-items:center; gap:.5rem; font-size:.85rem; font-weight:700; }
.spv-info__stock--in  { color:#16a34a; }
.spv-info__stock--out { color:#dc2626; }
.spv-info__stock i { font-size:.85rem; }

/* Séparateur */
.spv-divider { border:none; border-top:1px solid rgba(0,0,0,.07); margin:.15rem 0; }

/* Quantité */
.spv-form { display:flex; flex-direction:column; gap:.7rem; }
.spv-qty {
  display:flex; align-items:stretch;
  border:1.5px solid rgba(0,0,0,.12); border-radius:7px;
  overflow:hidden; background:#fff;
  width:fit-content; min-width:140px;
}
.spv-qty__btn {
  width:44px; background:transparent; border:none;
  font-size:1.2rem; font-weight:700; color:#333;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s;
}
.spv-qty__btn:hover { background:rgba(146,189,40,.1); color:#92BD28; }
.spv-qty__input {
  width:60px !important; border:none !important;
  border-left:1px solid rgba(0,0,0,.1) !important;
  border-right:1px solid rgba(0,0,0,.1) !important;
  text-align:center !important; font-size:.95rem !important;
  font-weight:700 !important; color:#0a0a0a !important;
  background:transparent !important; outline:none !important;
  box-shadow:none !important; padding:0 !important; appearance:textfield !important;
}
.spv-qty__input::-webkit-outer-spin-button,
.spv-qty__input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

/* Boutons */
.spv-btn {
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  width:100%; padding:.9rem 1.25rem; border-radius:7px;
  font-size:.95rem !important; font-weight:700 !important;
  text-decoration:none !important; cursor:pointer;
  transition:all .2s; border:none; text-align:center;
}
.spv-btn--cart {
  background:#92BD28; color:#fff !important;
  box-shadow:0 4px 14px rgba(146,189,40,.3);
}
.spv-btn--cart:hover { background:#7aa820; transform:translateY(-2px); box-shadow:0 6px 22px rgba(146,189,40,.38); }
.spv-btn--devis {
  background:transparent; color:#0a0a0a !important;
  border:1.5px solid rgba(0,0,0,.15) !important;
}
.spv-btn--devis:hover { border-color:#92BD28 !important; color:#92BD28 !important; }

/* Réassurance */
.spv-reassurance { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.6rem; }
.spv-reassurance__item { display:flex; align-items:flex-start; gap:.7rem; }
.spv-reassurance__icon {
  flex-shrink:0; width:33px; height:33px; border-radius:7px;
  background:rgba(146,189,40,.1); display:flex; align-items:center;
  justify-content:center; color:#92BD28; font-size:.82rem; margin-top:.1rem;
}
.spv-reassurance__text strong { display:block; font-size:.8rem; font-weight:700; color:#0a0a0a; }
.spv-reassurance__text span   { display:block; font-size:.74rem; color:#888; margin-top:.05rem; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION DESCRIPTION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.spv-desc-section {
  background:#fff;
  padding-block:clamp(2rem,4vw,3.5rem);
  border-top:1px solid rgba(0,0,0,.06);
}
.spv-desc-inner { max-width:860px; }

/* Tableaux dans la description */
.spv-desc-inner h3 {
  font-size:1rem !important; font-weight:800 !important;
  text-transform:uppercase !important; letter-spacing:.08em !important;
  color:#92BD28 !important; margin:1.75rem 0 .6rem !important;
  padding-bottom:.4rem; border-bottom:2px solid rgba(146,189,40,.2);
}
.spv-desc-inner h3:first-child { margin-top:0 !important; }
.spv-desc-inner table {
  width:100%; border-collapse:collapse;
  border-radius:7px; overflow:hidden;
  box-shadow:0 1px 6px rgba(0,0,0,.06);
  margin-bottom:1.25rem;
  font-size:.88rem;
}
.spv-desc-inner table td {
  padding:9px 14px;
  border-bottom:1px solid rgba(0,0,0,.05);
  vertical-align:middle; line-height:1.5;
}
.spv-desc-inner table tr:last-child td { border-bottom:none; }
.spv-desc-inner table tr:nth-child(odd)  td { background:#fafafa; }
.spv-desc-inner table tr:nth-child(even) td { background:#fff; }
.spv-desc-inner table td:first-child {
  width:38%; font-weight:700; color:#444;
  font-size:.83rem;
}
.spv-desc-inner p { font-size:.9rem; line-height:1.8; color:#555; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PRODUITS SIMILAIRES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.spv-related-section {
  background:#f5f3ee;
  padding-block:clamp(2rem,4vw,3.5rem);
  border-top:1px solid rgba(0,0,0,.06);
}
/* Titre généré par WooCommerce */
.spv-related-section .products > h2,
.spv-related-section h2.woocommerce-loop-product__title {
  font-size:clamp(1.2rem,3vw,1.6rem) !important;
  font-weight:900 !important; text-transform:uppercase !important;
  letter-spacing:-.02em !important; color:#0a0a0a !important;
  margin:0 0 1.5rem !important;
}
.spv-related-section .related.products > h2 {
  font-size:clamp(1.2rem,3vw,1.6rem) !important;
  font-weight:900 !important; margin:0 0 1.5rem !important;
}
.spv-related-section .related { margin-bottom:0; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Tablette 768–1024px */
@media (max-width:1024px) {
  .spv-main__grid { grid-template-columns:45% 1fr; gap:1.75rem; }
  .spv-gallery { position:static; }
}

/* Mobile < 768px */
@media (max-width:767px) {
  .spv-main__grid { grid-template-columns:1fr; gap:1.25rem; }
  .spv-gallery     { position:static; }
  .spv-gallery__stage { aspect-ratio:4/3; }
  .spv-gallery__thumb { width:58px; height:58px; }
  .spv-info { padding:1.25rem; }
  .spv-info__title { font-size:1.25rem !important; }
  .spv-info__price .woocommerce-Price-amount { font-size:1.7rem !important; }
  .spv-btn { padding:.85rem 1rem; font-size:.9rem !important; }
  .spv-desc-inner table { display:block; overflow-x:auto; }
}

/* Max-width container */
.spv-page .wrap { max-width:1400px; }
/* ── Prix HT / sin IVA ── */
.price-suffix {
  font-size:.6em !important;
  font-weight:400 !important;
  color:#999 !important;
  vertical-align:middle;
  letter-spacing:.01em;
  white-space:nowrap;
}
.pc__price .price-suffix,
.hpc__price .price-suffix  { font-size:.65em !important; }
.spv-info__price .price-suffix { font-size:.55em !important; color:#bbb !important; }


/* =============================================================
   RESPONSIVE CORRECTIONS — herga-sl.es
   Complète main.css sans modifier aucun template ni contenu.
   ============================================================= */

/* ── Sécurité globale ─────────────────────────────────────── */
html { overflow-x: hidden; }
img, picture, video, svg { max-width: 100%; height: auto; }

/* ===== TABLETTE (max 1024px) ============================= */
@media (max-width: 1024px) {

  /* Hero : CTA flex-wrap déjà présent, ajout du gap */
  .hero__cta { gap: 0.75rem; }

  /* Fiche produit : specs tables scrollables */
  .spv-specs-table,
  .spv-const-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

  /* Section-head : déjà 1 col à 720px, préventif */
  .section-head { overflow-x: hidden; }
}

/* ===== MOBILE (max 480px) ================================ */
@media (max-width: 480px) {

  /* ── Hero CTA : empilage vertical ── */
  .hero__cta {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .hero__cta .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* ── Hero panel : specs en 2 colonnes pour compacter ── */
  .hero__panel dl {
    grid-template-columns: max-content 1fr max-content 1fr;
    column-gap: 0.5rem;
    row-gap: 0.35rem;
  }

  /* ── Footer : 1 colonne pleine largeur ── */
  .msc-footer__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .msc-footer__col--brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    grid-column: auto;
  }
  .msc-footer__logo { margin-inline: auto; }
  .msc-footer__cta  { align-self: center; }

  /* ── Footer bar : empilage vertical (déjà à 600px, sécurité) ── */
  .msc-footer__bar-inner {
    flex-direction: column;
    text-align: center;
    gap: 0.4rem;
  }

  /* ── Fiche produit : tables scrollables ── */
  .spv-specs-table,
  .spv-const-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

  /* ── Fiche produit : bouton quantité pleine largeur ── */
  .spv-qty {
    width: 100%;
    justify-content: space-between;
  }

  /* ── Grille produits similaires : 1 col ── */
  .hp-products__grid { grid-template-columns: 1fr; }

  /* ── WhatsApp popup : adapté très petits écrans ── */
  #msc-wa-popup { width: calc(100vw - 24px); }

  /* ── Font-size min mobile ── */
  body { font-size: max(0.875rem, 14px); }
  h2   { font-size: max(1.25rem, 20px); }
}