/* Mobile refinement for the Monsieur Bécane storefront. */
@media (max-width: 600px) {
  .header {
    box-shadow: 0 7px 20px rgba(35, 29, 22, .08);
  }

  .header-inner {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    grid-template-areas:
      "menu brand actions"
      "search search search";
    align-items: center;
    gap: 8px 9px;
    min-height: 0;
    padding-block: 9px 11px;
    position: relative;
  }

  .menu-toggle {
    grid-area: menu;
    width: 40px;
    height: 40px;
    border-color: #ded4c6;
    border-radius: 9px;
    background: #fffaf2;
    color: #a74729;
  }

  .brand {
    grid-area: brand;
    min-width: 0;
    flex: 1 1 auto;
    gap: 8px;
  }

  .brand-mark {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
  }

  .brand-word {
    min-width: 0;
    overflow: hidden;
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .brand-word small {
    overflow: hidden;
    font-size: 7px;
    letter-spacing: .45px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .primary-nav {
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100dvh - 150px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid #e4ddd1;
    border-top: 0;
    border-radius: 0 0 12px 12px;
  }

  .header-search {
    display: flex;
    grid-area: search;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
  }

  .header-search input {
    height: 46px;
    padding-left: 14px;
    border-radius: 10px;
    font-size: 14px;
  }

  .header-search button {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #b84a27;
  }

  .header-actions {
    grid-area: actions;
    justify-self: end;
    gap: 6px;
    margin: 0;
  }

  .header-actions .icon-link {
    width: 40px;
    min-width: 40px;
    height: 40px;
    border-radius: 9px;
    background: #fffdf9;
  }

  .header-actions .icon-link .label {
    display: none;
  }

  .bottom-nav {
    min-height: 64px;
    padding: 7px 6px max(10px, env(safe-area-inset-bottom));
    border-top-color: #d8cebf;
    box-shadow: 0 -8px 24px rgba(35, 29, 22, .09);
  }

  .bottom-nav a {
    min-height: 48px;
    gap: 4px;
    font-size: 10px;
  }

  .bottom-nav a span:first-child {
    font-size: 20px;
  }

  body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }

  #toast {
    bottom: calc(84px + env(safe-area-inset-bottom));
  }
}

@media (min-width: 340px) and (max-width: 600px) {
  .product-grid,
  .home-products-section .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 11px;
  }

  .product-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    border-radius: 12px;
  }

  .product-image {
    height: clamp(138px, 42vw, 178px);
    background: #f0ebe2;
  }

  .product-image img {
    object-fit: contain;
  }

  .product-card-body {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    padding: 12px;
  }

  .product-meta {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 6px;
  }

  .product-brand {
    max-width: 100%;
    font-size: 10px;
  }

  .status-pill {
    max-width: 100%;
    font-size: 9px;
    line-height: 1.3;
    white-space: normal;
  }

  .product-card h3 {
    margin-block: 9px 6px;
    font-size: 14px;
    line-height: 1.25;
  }

  .product-sub {
    display: -webkit-box;
    min-height: 0;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .product-price {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
    margin-top: 10px;
    padding-top: 9px;
  }

  .product-price strong {
    font-size: 16px;
    line-height: 1.25;
  }

  .product-price small {
    font-size: 10px;
    line-height: 1.35;
  }

  .card-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    gap: 7px;
    margin-top: auto;
    padding-top: 12px;
  }

  .card-actions .button {
    min-width: 0;
    min-height: 42px;
    padding-inline: 8px;
    font-size: 11px;
    white-space: nowrap;
  }

  .card-actions .button:last-child {
    width: 40px;
    padding: 0;
  }

  .home-products-section .product-card:last-child:nth-child(odd) {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(116px, 38%) minmax(0, 1fr);
  }

  .home-products-section .product-card:last-child:nth-child(odd) .product-image {
    height: 100%;
    min-height: 160px;
  }

  .home-products-section .product-card:last-child:nth-child(odd) .product-card-body {
    padding: 14px;
  }
}

@media (max-width: 360px) {
  .header-actions .icon-link[href="/compte"] {
    display: none;
  }

  .brand-mark {
    flex-basis: 35px;
    width: 35px;
    height: 35px;
  }

  .brand-word {
    font-size: 15px;
  }

  .brand-word small {
    letter-spacing: .2px;
  }

  .product-grid,
  .home-products-section .product-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-products-section .product-card:last-child:nth-child(odd) {
    display: flex;
  }

  .home-products-section .product-card:last-child:nth-child(odd) .product-image {
    height: 190px;
    min-height: 0;
  }
}


/* Quote alternatives: keep the two logistics choices clear and easy to compare. */
.quote-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:16px 0}
.quote-option{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--paper,#fff)}
.quote-option h3{margin:0;font-size:1.05rem}
.quote-option p{margin:0;line-height:1.55;color:var(--muted)}
.quote-option .quote-line{width:100%}
.quote-option .button{margin-top:auto}
@media(max-width:700px){.quote-options{grid-template-columns:1fr}.quote-option{padding:16px}}

.detail-price small{display:block;margin-top:6px;font-size:.74rem;line-height:1.45;color:var(--muted)}


/* Richer, clearer header controls while keeping the existing NERA palette. */
.header-search input {
  border-color: #d9c7a9;
  border-radius: 10px;
  background: linear-gradient(135deg, #fffdf8, #f7efe2);
  color: var(--forest);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 3px 10px rgba(16,36,30,.06);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.header-search input::placeholder { color: #787064; opacity: 1; }
.header-search input:focus {
  border-color: #b84a27;
  background: #fffdf8;
  box-shadow: 0 0 0 3px rgba(184,74,39,.14), 0 4px 12px rgba(16,36,30,.08);
}
.header-search button {
  color: #fff;
  background: linear-gradient(145deg, #c15a32, #963b24);
  box-shadow: 0 2px 6px rgba(120,48,27,.2);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.header-search button:hover {
  filter: brightness(.92);
  box-shadow: 0 4px 10px rgba(120,48,27,.26);
  transform: translateY(-1px);
}
.header-actions .icon-link {
  min-height: 42px;
  padding-inline: 11px;
  border: 1px solid #d9c7a9;
  border-radius: 11px;
  background: linear-gradient(145deg, #fffdf8, #f4ead8);
  color: var(--forest-2);
  box-shadow: 0 3px 10px rgba(16,36,30,.08);
  font-weight: 700;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.header-actions .icon-link[href="/panier"] {
  border-color: #d5bc8a;
  background: linear-gradient(145deg, #fff9ed, #f1dfbb);
}
.header-actions .icon-link[href="/compte"] {
  border-color: #10241e;
  background: linear-gradient(145deg, #29483d, #10241e);
  color: #fff;
  box-shadow: 0 4px 12px rgba(16,36,30,.17);
}
.header-actions .icon-link[href="/panier"] .cart-count {
  background: #b84a27;
  color: #fff;
  box-shadow: 0 1px 4px rgba(120,48,27,.2);
}
.header-actions .icon-link:hover,
.header-actions .icon-link:focus-visible {
  border-color: #b84a27;
  box-shadow: 0 5px 14px rgba(16,36,30,.14);
  transform: translateY(-1px);
}
.header-search button:focus-visible,
.header-actions .icon-link:focus-visible {
  outline: 3px solid rgba(184,74,39,.28);
  outline-offset: 2px;
}
@media (max-width: 600px) {
  .header-actions .icon-link[href="/panier"] {
    background: linear-gradient(145deg, #fff9ed, #f1dfbb);
  }
  .header-actions .icon-link[href="/compte"] {
    background: linear-gradient(145deg, #29483d, #10241e);
  }
  .header-search input { border-radius: 12px; }
}


/* Customs and transport estimator */
.customs-page{max-width:1020px}
.customs-negotiation{display:flex;align-items:flex-start;gap:16px;margin-bottom:32px;padding:20px 22px;border:1px solid #d8bc84;border-radius:16px;background:linear-gradient(135deg,#fff7e7,#f2e4c7);color:var(--forest)}
.customs-negotiation-mark{display:grid;flex:0 0 34px;width:34px;height:34px;place-items:center;border-radius:50%;background:#b84a27;color:#fff;font-size:20px;font-weight:800}
.customs-negotiation strong{display:block;font-size:17px}
.customs-negotiation p,.customs-section-heading>p:not(.eyebrow){margin:6px 0 0;color:#5e655f;line-height:1.65}
.customs-section-heading{margin:0 0 17px}
.customs-section-heading h2{margin:3px 0 0;font-size:clamp(25px,4vw,36px);line-height:1.13;color:var(--forest)}
.customs-section-heading .eyebrow{margin:0;color:#a74729;font-size:10px;font-weight:800;letter-spacing:1.5px}
.customs-table-wrap{overflow:hidden;border:1px solid #e5ddcf;border-radius:16px;background:#fff;box-shadow:0 10px 28px rgba(16,36,30,.055)}
.customs-table{width:100%;border-collapse:collapse;table-layout:fixed}
.customs-table th,.customs-table td{padding:16px 18px;border-bottom:1px solid #eee8df;text-align:left;vertical-align:middle}
.customs-table thead th{background:#f5f0e7;color:#536158;font-size:12px;font-weight:800;letter-spacing:.04em}
.customs-table tbody tr:last-child th,.customs-table tbody tr:last-child td{border-bottom:0}
.customs-table tbody th{width:25%;color:var(--forest);font-size:14px;line-height:1.4}
.customs-explanation{width:52%;color:#66716a;font-size:12px;line-height:1.6}
.customs-amount-cell{width:23%}
.customs-amount-label{display:none}
.customs-input-wrap{display:flex;align-items:center;gap:7px;min-width:0}
.customs-input-wrap input{width:100%;min-width:0;height:42px;padding:0 10px;border:1px solid #d8cbb7;border-radius:9px;background:#fffdf9;color:var(--forest);font:700 14px "DM Sans","Segoe UI",sans-serif}
.customs-input-wrap input:focus{outline:0;border-color:#b84a27;box-shadow:0 0 0 3px rgba(184,74,39,.14)}
.customs-input-wrap span{color:#6c706b;font-size:11px;font-weight:700}
.customs-local-note{margin:10px 0 32px;color:#707a73;font-size:12px;line-height:1.6}
.customs-formulas-heading{margin-bottom:14px}
.customs-options-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.customs-option-card{display:flex;flex-direction:column;min-height:255px;padding:22px;border:1px solid #dfd4c3;border-radius:17px;background:linear-gradient(145deg,#fffdf8,#f6efe3);box-shadow:0 8px 24px rgba(16,36,30,.06)}
.customs-option-card .eyebrow{margin:0 0 5px;color:#a74729;font-size:10px;font-weight:800;letter-spacing:1.5px}
.customs-option-card h3{margin:0;color:var(--forest);font-size:21px;line-height:1.2}
.customs-option-card>p:not(.eyebrow){margin:12px 0;color:#5f6b64;font-size:13px;line-height:1.65}
.customs-total-line{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:auto;padding-top:16px;border-top:1px solid #e4d9c8;color:var(--forest)}
.customs-total-line span{font-size:12px;font-weight:700;line-height:1.4}
.customs-total-line strong{font-size:25px;line-height:1.05;white-space:nowrap}
.customs-option-card .customs-excluded{margin:9px 0 0!important;color:#766a59!important;font-size:11px!important}
.customs-option-home{border-color:#23463a;background:linear-gradient(145deg,#24483b,#10241e);color:#fff}
.customs-option-home .eyebrow{color:#efc56d}
.customs-option-home h3,.customs-option-home .customs-total-line{color:#fff}
.customs-option-home>p:not(.eyebrow){color:#e1e9e2}
.customs-option-home .customs-total-line{border-top-color:rgba(255,255,255,.2)}
.customs-option-home .customs-excluded{color:#d9e2dc!important}
.customs-disclaimer{margin-top:26px;padding:20px 22px;border:1px solid #dfd8cd;border-radius:15px;background:#fff}
.customs-disclaimer strong{color:var(--forest);font-size:15px}
.customs-disclaimer p{margin:6px 0 15px;color:#647068;font-size:13px;line-height:1.65}
.customs-disclaimer .button{min-height:44px}
@media(max-width:700px){
  .customs-page{width:calc(100% - 30px)}
  .customs-negotiation{gap:11px;margin-bottom:25px;padding:16px;border-radius:13px}
  .customs-negotiation strong{font-size:15px}
  .customs-negotiation p{font-size:13px}
  .customs-section-heading{margin-bottom:13px}
  .customs-table-wrap{overflow:visible;border-radius:13px}
  .customs-table,.customs-table tbody{display:block;width:100%}
  .customs-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .customs-table tbody tr{display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding:14px 15px;border-bottom:1px solid #eee8df}
  .customs-table tbody tr:last-child{border-bottom:0}
  .customs-table tbody th,.customs-table tbody td{display:block;width:auto;padding:0;border:0}
  .customs-table tbody th{margin-bottom:4px;font-size:14px}
  .customs-explanation{font-size:12px}
  .customs-amount-cell{display:flex!important;align-items:center;justify-content:space-between;gap:12px;margin-top:10px!important}
  .customs-amount-label{display:inline;color:#59645d;font-size:11px;font-weight:700}
  .customs-input-wrap{flex:0 0 145px}
  .customs-input-wrap input{height:40px}
  .customs-local-note{margin-bottom:26px}
  .customs-options-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .customs-option-card{min-height:0;padding:18px}
  .customs-total-line strong{font-size:23px}
  .customs-disclaimer{padding:17px}
  .customs-disclaimer .button{width:100%;white-space:normal;text-align:center}
}


/* Tarif communiqué pour le transport des motos */
.customs-fixed-rate{margin:0 0 28px;padding:20px 24px;border:1px solid #345548;border-radius:16px;background:linear-gradient(120deg,#203c31,#10251f);color:#fff;box-shadow:0 10px 28px rgba(16,36,30,.12)}
.customs-fixed-rate .eyebrow{margin:0 0 6px;color:#f0c579;font-size:10px;font-weight:800;letter-spacing:1.5px}
.customs-fixed-rate h2{margin:0;color:#fff;font-size:22px}
.customs-fixed-rate p:not(.eyebrow){margin:8px 0 0;color:#edf1eb;font-size:14px;line-height:1.6}
.customs-fixed-rate strong{color:#f4cf8c}
@media(max-width:700px){.customs-fixed-rate{margin-bottom:24px;padding:17px;border-radius:13px}.customs-fixed-rate h2{font-size:20px}.customs-fixed-rate p:not(.eyebrow){font-size:13px}}


/* Calculateur pièces et équipements : formule partenaire avec retrait */
.customs-carrier-section{padding-top:0}
.customs-carrier-panel{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:18px}
.customs-carrier-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:13px;padding:20px;border:1px solid #e5ddcf;border-radius:16px;background:#fff;box-shadow:0 10px 28px rgba(16,36,30,.055)}
.customs-carrier-fields label{display:grid;gap:7px;color:var(--forest);font-size:12px;font-weight:700}
.customs-carrier-fields label:nth-child(3),.customs-carrier-fields label:nth-child(4),.customs-carrier-fields label:nth-child(6),.customs-carrier-fields>small,.customs-carrier-fields>.text-link{grid-column:1/-1}
.customs-carrier-fields input,.customs-carrier-fields select{width:100%;min-width:0;min-height:44px;padding:9px 11px;border:1px solid #d8cbb7;border-radius:9px;background:#fffdf9;color:var(--forest);font:600 14px "DM Sans","Segoe UI",sans-serif}
.customs-carrier-fields input:focus,.customs-carrier-fields select:focus{outline:0;border-color:#b84a27;box-shadow:0 0 0 3px rgba(184,74,39,.14)}
.customs-carrier-fields input[readonly]{background:#f4f0e8}
.customs-carrier-fields>small{color:#6c746e;font-size:11px;line-height:1.5}
.customs-carrier-fields>.text-link{font-size:12px}
.customs-carrier-summary{display:flex;flex-direction:column;justify-content:center;padding:22px;border:1px solid #23463a;border-radius:16px;background:linear-gradient(145deg,#24483b,#10241e);color:#fff;box-shadow:0 10px 28px rgba(16,36,30,.12)}
.customs-carrier-summary .eyebrow{margin:0 0 6px;color:#efc56d;font-size:10px;font-weight:800;letter-spacing:1.2px}
.customs-carrier-summary h3{margin:0 0 14px;color:#fff;font-size:20px}
.customs-carrier-line,.customs-carrier-total{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:10px 0;border-top:1px solid rgba(255,255,255,.18)}
.customs-carrier-line span,.customs-carrier-total span{font-size:12px;line-height:1.5}
.customs-carrier-line strong{font-size:13px;text-align:right}
.customs-carrier-total strong{color:#f4cf8c;font-size:21px;text-align:right}
.customs-carrier-note{margin:12px 0 0;color:#e1e9e2;font-size:11px;line-height:1.6}
.customs-carrier-alternative{margin-top:18px}
@media(max-width:700px){
  .customs-carrier-panel{grid-template-columns:minmax(0,1fr);gap:12px}
  .customs-carrier-fields{grid-template-columns:minmax(0,1fr);gap:12px;padding:16px;border-radius:13px}
  .customs-carrier-fields label:nth-child(n){grid-column:1}
  .customs-carrier-fields>small,.customs-carrier-fields>.text-link{grid-column:1}
  .customs-carrier-summary{padding:18px;border-radius:13px}
}


/* Séparation visuelle des parcours de livraison */
.customs-mode-panel[hidden]{display:none!important}
.customs-method-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 30px}
.customs-method-tab{display:flex;min-width:0;min-height:126px;flex-direction:column;align-items:flex-start;gap:6px;padding:18px 20px;border:1px solid #dfd4c3;border-radius:16px;background:#fffdf8;color:var(--forest);text-align:left;cursor:pointer;box-shadow:0 7px 20px rgba(16,36,30,.05);transition:background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.customs-method-tab:hover{border-color:#9e7951;transform:translateY(-1px);box-shadow:0 10px 24px rgba(16,36,30,.09)}
.customs-method-tab:focus-visible{outline:3px solid rgba(184,74,39,.35);outline-offset:3px}
.customs-method-step{color:#a74729;font-size:10px;font-weight:800;letter-spacing:1.4px}
.customs-method-tab strong{font-size:20px;line-height:1.2}
.customs-method-tab small{color:#647068;font-size:12px;font-weight:500;line-height:1.55}
.customs-method-tab.is-active{border-color:#24483b;background:linear-gradient(145deg,#24483b,#10241e);color:#fff;box-shadow:0 10px 25px rgba(16,36,30,.15)}
.customs-method-tab.is-active .customs-method-step{color:#efc56d}
.customs-method-tab.is-active small{color:#e1e9e2}
.customs-mode-panel>.customs-section-heading:first-child{margin-top:0}
@media(max-width:700px){
  .customs-method-picker{grid-template-columns:minmax(0,1fr);gap:10px;margin-bottom:24px}
  .customs-method-tab{min-height:0;padding:16px;border-radius:13px}
  .customs-method-tab strong{font-size:18px}
}


.customs-agent-contact{display:inline-flex;align-items:center;justify-content:center;flex:1;min-height:42px;padding:9px 12px;border:1px solid rgba(239,197,109,.7);border-radius:9px;color:#f5d17d;font-size:12px;font-weight:800;line-height:1.35;text-align:center;text-decoration:none;transition:background .18s ease,border-color .18s ease}
.customs-agent-contact:hover{border-color:#efc56d;background:rgba(239,197,109,.12)}
.customs-agent-contact:focus-visible{outline:3px solid rgba(239,197,109,.45);outline-offset:3px}
@media(max-width:700px){.customs-agent-contact{font-size:11px;padding:8px 9px}}