/* Sevid Floor – fiche produit. Charte : bleu nuit #0D1B2A, chêne #B8860B, bois sombre #8B5A2B, blanc. Titres Montserrat, texte Roboto. */
:root {
  --sf-navy: #0D1B2A;
  --sf-gold: #B8860B;
  --sf-wood: #8B5A2B;
  --sf-white: #FFFFFF;
  --sf-soft: #F6F3EE;
  --sf-line: rgba(13, 27, 42, .14);
  --sf-muted: rgba(13, 27, 42, .64);
  --sf-title-font: 'Montserrat', 'Roboto', Arial, sans-serif;
  --sf-text-font: 'Roboto', 'Montserrat', Arial, sans-serif;
}
.sf-gallery, .sf-overline, .sf-highlights, .sf-pricebox, .sf-calc, .sf-pickup, .sf-share, .sf-props, .sf-similar, .sf-acc-tabs, .sf-viz, .sf-product, .sf-price { font-family: var(--sf-text-font); color: var(--sf-navy); box-sizing: border-box; }
.sf-gallery *, .sf-calc *, .sf-props *, .sf-similar *, .sf-acc-tabs * { box-sizing: border-box; }
.sf-i { width: 20px; height: 20px; flex: none; vertical-align: middle; }

/* ---------- Galerie ---------- */
.sf-gallery { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; }
.sf-gallery.sf-thumbs-bottom, .sf-gallery.sf-gallery-single { grid-template-columns: 1fr; }
.sf-pricebox .amount, .sf-pricebox bdi, .sf-badge .amount, .sf-calc-total .amount, .sf-card-price .amount, .sf-card-sub .amount, .sf-price .amount { color: inherit !important; font: inherit !important; }
.sf-gallery.sf-thumbs-bottom .sf-gallery-thumbs { order: 2; flex-direction: row; max-height: none; overflow-x: auto; }
.sf-gallery-thumbs { display: flex; flex-direction: column; gap: 10px; max-height: 640px; overflow-y: auto; scrollbar-width: thin; }
.sf-gallery-thumb { display: block; width: 96px; aspect-ratio: 1; padding: 0; border: 2px solid transparent; background: var(--sf-soft); cursor: pointer; flex: none; }
.sf-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-gallery-thumb.is-active, .sf-gallery-thumb:hover { border-color: var(--sf-navy); }
.sf-gallery-main { position: relative; background: var(--sf-soft); }
.sf-gallery-link { display: block; cursor: zoom-in; }
.sf-gallery-img { display: block; width: 100%; aspect-ratio: var(--sf-ratio, 1); object-fit: cover; height: auto; }
.sf-gallery-zoom { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 0; background: rgba(255, 255, 255, .85); color: var(--sf-navy); cursor: pointer; padding: 0; }
.sf-gallery-zoom:hover { background: var(--sf-white); color: var(--sf-gold); }
.sf-lightbox { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; background: rgba(13, 27, 42, .94); }
.sf-lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; }
.sf-lightbox button { position: absolute; width: 52px; height: 52px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; padding: 0; }
.sf-lightbox button:hover { background: var(--sf-gold); }
.sf-lightbox .sf-lb-close { top: 20px; right: 20px; }
.sf-lightbox .sf-lb-prev { left: 20px; top: 50%; margin-top: -26px; }
.sf-lightbox .sf-lb-next { right: 20px; top: 50%; margin-top: -26px; }
.sf-lightbox .sf-lb-count { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, .7); font-size: 14px; }

/* ---------- Surtitre, titre, points forts ---------- */
.sf-overline { margin: 0 0 14px; font: 500 13px/1.5 var(--sf-title-font); letter-spacing: .18em; text-transform: uppercase; color: var(--sf-muted); }
.sf-title { margin: 0 0 22px; font: 600 clamp(30px, 4vw, 52px)/1.08 var(--sf-title-font); letter-spacing: -.02em; color: var(--sf-navy); }
.sf-highlights { margin: 0 0 26px; padding: 0; list-style: none; }
.sf-highlights li { position: relative; margin: 0 0 8px; padding-left: 20px; font-size: 17px; line-height: 1.5; }
.sf-highlights li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; background: var(--sf-gold); transform: rotate(45deg); }

/* ---------- Prix ---------- */
.sf-pricebox { margin: 0 0 26px; }
.sf-pricebox-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.sf-pricebox-main { font: 600 30px/1.1 var(--sf-title-font); color: var(--sf-navy); }
.sf-pricebox-unit { font-size: 16px; font-weight: 500; color: var(--sf-muted); }
.sf-pricebox-reg { font-size: 15px; color: var(--sf-muted); }
.sf-badges { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.sf-badge { display: inline-block; padding: 7px 12px; font: 600 13px/1 var(--sf-title-font); color: var(--sf-white); }
.sf-badge-save { background: var(--sf-wood); }
.sf-badge-sale { background: var(--sf-gold); }
.sf-pricebox-sub { margin-top: 8px; font-size: 14px; color: var(--sf-muted); }
.sf-pricebox-ask { font: 600 22px/1.2 var(--sf-title-font); }
.sf-price { display: inline-flex; flex-direction: column; gap: 2px; }
.sf-price-m2 { font-weight: 600; }
.sf-price-unit { font-weight: 400; font-size: .85em; }
.sf-price-pack { font-size: .82em; opacity: .75; }

/* ---------- Calculateur ---------- */
.sf-calc { margin: 0 0 22px; }
.sf-calc-fields { display: flex; flex-wrap: wrap; gap: 18px 40px; margin-bottom: 10px; }
.sf-calc-field label { display: block; margin-bottom: 8px; font-size: 13px; letter-spacing: .02em; color: var(--sf-navy); }
.sf-stepper { display: inline-flex; align-items: stretch; height: 44px; border: 1px solid var(--sf-line); background: var(--sf-white); }
.sf-stepper .sf-step { width: 40px; border: 0; background: transparent; color: var(--sf-navy); font-size: 20px; line-height: 1; cursor: pointer; padding: 0; }
.sf-stepper .sf-step:hover { color: var(--sf-gold); }
.sf-stepper .sf-qty { width: 56px; height: 100%; border: 0 !important; text-align: center; font: 500 16px var(--sf-text-font); color: var(--sf-navy); background: transparent; -moz-appearance: textfield; padding: 0 !important; margin: 0; box-shadow: none !important; }
.sf-stepper .sf-qty::-webkit-outer-spin-button, .sf-stepper .sf-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sf-calc-label { display: block; margin-bottom: 8px; font-size: 13px; letter-spacing: .02em; color: var(--sf-navy); }
.sf-stepper-m2 .sf-qty-m2 { width: 74px; height: 100%; border: 0 !important; text-align: right; font: 500 16px var(--sf-text-font); color: var(--sf-navy); background: transparent; padding: 0 4px 0 0 !important; margin: 0; box-shadow: none !important; }
.sf-stepper-unit { align-self: center; padding-right: 6px; color: var(--sf-muted); font-size: 15px; }
.sf-stepper-m2 .sf-qty-m2[readonly] { cursor: default; outline: none; }
.sf-calc-tip { margin: 0 0 12px; padding: 8px 12px; border-left: 3px solid var(--sf-gold); background: var(--sf-soft); font-size: 13px; color: var(--sf-navy); }
.sf-surface.sf-surface-fixed { background: var(--sf-soft); padding: 0 14px 0 16px; gap: 8px; cursor: default; }
.sf-surface-fixed .sf-surface-val { font: 500 16px var(--sf-text-font); color: var(--sf-navy); }
.sf-surface { display: inline-flex; align-items: center; height: 44px; border: 1px solid var(--sf-line); background: var(--sf-white); padding-right: 14px; }
.sf-surface input { width: 90px; height: 100%; border: 0 !important; padding: 0 10px 0 16px !important; font: 500 16px var(--sf-text-font); color: var(--sf-navy); background: transparent; box-shadow: none !important; margin: 0; }
.sf-surface span { color: var(--sf-muted); }
.sf-surface:focus-within, .sf-stepper:focus-within { border-color: var(--sf-gold); box-shadow: 0 0 0 1px var(--sf-gold); }
.sf-calc-help { margin: 0 0 10px; font-size: 13px; color: var(--sf-muted); }
.sf-calc-chute { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; font-size: 14px; cursor: pointer; }
.sf-calc-chute input { width: 18px; height: 18px; accent-color: var(--sf-gold); margin: 0; }
.sf-calc-total { min-height: 1.4em; margin: 6px 0 4px; font-size: 16px; }
.sf-calc-total strong { font: 600 18px var(--sf-title-font); }
.sf-calc-note { margin: 0 0 14px; font-size: 12.5px; color: var(--sf-muted); }
.sf-btn-cart { display: flex !important; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; margin: 0 !important; padding: 14px 20px !important; border: 0 !important; border-radius: 0 !important; background: var(--sf-navy) !important; color: var(--sf-white) !important; font: 500 18px/1.2 var(--sf-title-font) !important; letter-spacing: .01em; text-transform: none !important; cursor: pointer; transition: background .2s; }
.sf-btn-cart:hover { background: var(--sf-gold) !important; }
.sf-btn-cart.loading { opacity: .7; }
.sf-calc-contact { display: grid; gap: 8px; margin-top: 10px; }
.sf-btn-wa, .sf-btn-quote { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 10px 16px; border: 1.5px solid var(--sf-gold); color: var(--sf-navy) !important; font: 500 15px/1.2 var(--sf-title-font); text-decoration: none !important; transition: background .2s, color .2s; }
.sf-btn-wa:hover, .sf-btn-quote:hover { background: var(--sf-gold); color: var(--sf-white) !important; }
.sf-calc .stock { margin: 0 0 12px; font-weight: 600; }

/* ---------- Retrait & partage ---------- */
.sf-pickup { display: flex; gap: 12px; margin: 18px 0 22px; font-size: 15px; }
.sf-pickup > .sf-i { color: var(--sf-gold); width: 22px; height: 22px; margin-top: 1px; }
.sf-pickup strong { display: block; font-weight: 500; }
.sf-pickup small { display: block; margin: 3px 0 8px; font-size: 13px; color: var(--sf-muted); }
.sf-pickup a { color: var(--sf-navy); text-decoration: underline; text-underline-offset: 3px; }
.sf-share { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.sf-share-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--sf-line); background: var(--sf-soft); color: var(--sf-navy); font: 400 15px var(--sf-text-font); cursor: pointer; border-radius: 0; }
.sf-share-btn:hover { border-color: var(--sf-gold); }
.sf-share-ico { display: inline-grid; place-items: center; width: 34px; height: 34px; color: var(--sf-navy) !important; }
.sf-share-ico:hover { color: var(--sf-gold) !important; }

/* ---------- Propriétés (accordéons) ---------- */
.sf-eyebrow { margin: 0 0 14px; font: 600 13px/1.4 var(--sf-title-font); letter-spacing: .2em; text-transform: uppercase; color: var(--sf-gold); }
.sf-props { max-width: 1160px; margin: 0 auto; }
.sf-acc { border-top: 1px solid var(--sf-line); }
.sf-acc:last-child { border-bottom: 1px solid var(--sf-line); }
.sf-acc summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 26px 0; list-style: none; cursor: pointer; font: 500 clamp(20px, 2.4vw, 30px)/1.2 var(--sf-title-font); letter-spacing: .02em; color: var(--sf-navy); }
.sf-acc summary::-webkit-details-marker { display: none; }
.sf-acc summary i { position: relative; width: 36px; height: 36px; flex: none; border: 1px solid var(--sf-line); }
.sf-acc summary i::before, .sf-acc summary i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; margin: -.75px 0 0 -7px; background: var(--sf-navy); transition: transform .2s; }
.sf-acc summary i::after { transform: rotate(90deg); }
.sf-acc[open] summary i::after { transform: rotate(0); }
.sf-acc summary:hover i { border-color: var(--sf-gold); }
.sf-acc-body { padding: 0 0 30px; }
.sf-feature { margin: 0 0 18px; padding-left: 0; }
.sf-feature h4 { margin: 0 0 6px; font: 500 22px/1.3 var(--sf-title-font); color: var(--sf-navy); }
.sf-feature p { margin: 0; font-size: 16px; line-height: 1.6; color: rgba(13, 27, 42, .82); }
.sf-table { width: 100%; border-collapse: collapse; margin: 0; }
.sf-table th, .sf-table td { padding: 14px 10px; border: 0; border-bottom: 1px solid var(--sf-line); text-align: left; font-size: 16px; background: transparent; }
.sf-table th { width: 50%; font-weight: 600; }
.sf-docs { margin: 0; padding: 0; list-style: none; }
.sf-docs li { margin: 0 0 10px; }
.sf-docs a { display: inline-flex; align-items: center; gap: 10px; color: var(--sf-navy); text-decoration: none; font-weight: 500; }
.sf-docs a:hover { color: var(--sf-gold); }

/* ---------- Sections & cartes ---------- */
.sf-section-title { margin: 0 0 40px; text-align: center; font: 500 clamp(28px, 4vw, 48px)/1.1 var(--sf-title-font); letter-spacing: -.02em; color: var(--sf-navy); }
.sf-cards { display: grid; grid-template-columns: repeat(var(--sf-cols, 4), minmax(0, 1fr)); gap: 14px; }
.sf-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sf-card-img { position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; background: var(--sf-soft); margin-bottom: 18px; }
.sf-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; margin: 0 !important; }
.sf-card:hover .sf-card-img img { transform: scale(1.04); }
.sf-card-flag { position: absolute; top: 10px; left: 10px; padding: 5px 9px; background: var(--sf-gold); color: var(--sf-white); font: 600 12px var(--sf-title-font); }
.sf-card-title { margin: 0 0 6px; font: 500 17px/1.3 var(--sf-text-font); }
.sf-card-title a { color: var(--sf-navy); text-decoration: none; }
.sf-card-title a:hover { color: var(--sf-gold); }
.sf-card-meta { margin: 0 0 8px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--sf-muted); }
.sf-card-price { margin: 0; font: 500 19px/1.3 var(--sf-title-font); }
.sf-card-sub { margin: 2px 0 0; font-size: 13px; color: var(--sf-muted); }
.sf-card-add { display: inline-flex !important; align-items: center; gap: 6px; margin-top: 12px !important; padding: 8px 14px !important; border: 1.5px solid var(--sf-navy) !important; border-radius: 0 !important; background: transparent !important; color: var(--sf-navy) !important; font: 500 14px var(--sf-title-font) !important; }
.sf-card-add:hover { background: var(--sf-navy) !important; color: var(--sf-white) !important; }
.sf-card-add .sf-i { width: 18px; height: 18px; }
.sf-card .added_to_cart { display: block; margin-top: 6px; font-size: 13px; color: var(--sf-gold); }

/* ---------- Onglets accessoires ---------- */
.sf-tablist { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4px; margin: 0 auto 50px; border-bottom: 1px solid var(--sf-navy); width: fit-content; max-width: 100%; }
.sf-tablist button { padding: 12px 16px; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; background: none; color: var(--sf-navy); font: 400 16px var(--sf-text-font); cursor: pointer; border-radius: 0; }
.sf-tablist button[aria-selected="true"] { border-bottom-color: var(--sf-navy); font-weight: 500; }
.sf-tablist button:hover { color: var(--sf-gold); }
.sf-tab-intro { max-width: 860px; margin-bottom: 30px; }
.sf-tab-intro h3 { margin: 0 0 16px; font: 500 clamp(22px, 2.6vw, 32px)/1.2 var(--sf-title-font); color: var(--sf-navy); }
.sf-tab-text { font-size: 16px; line-height: 1.7; }
.sf-tab-text ul { padding-left: 20px; }
.sf-rail { position: relative; }
.sf-rail-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 14px) / 4); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.sf-rail-track::-webkit-scrollbar { display: none; }
.sf-rail-track > * { scroll-snap-align: start; }
.sf-rail-nav { display: flex; justify-content: flex-end; margin-top: 18px; }
.sf-rail-nav button { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--sf-line); margin-left: -1px; background: var(--sf-white); color: var(--sf-navy); cursor: pointer; padding: 0; border-radius: 0; }
.sf-rail-nav button:hover { color: var(--sf-gold); }
.sf-rail-nav button:disabled { opacity: .35; cursor: default; }

/* ---------- Visualiseur & fiche complète ---------- */
.sf-viz { margin: 0; }
.sf-product-top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 60px; margin-bottom: 70px; }
.sf-product > section, .sf-product-props { margin-bottom: 80px; }
.sf-qty-unit { margin: 0 12px 0 6px; align-self: center; color: var(--sf-muted); }
.sf-cart-m2 { color: var(--sf-muted); }

@media (max-width: 1024px) {
  .sf-cards, .sf-rail-track { --sf-cols: 3; }
  .sf-rail-track { grid-auto-columns: calc((100% - 2 * 14px) / 3); }
  .sf-product-top { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 767px) {
  .sf-gallery { grid-template-columns: 1fr; }
  .sf-gallery-thumbs { order: 2; flex-direction: row; max-height: none; overflow-x: auto; }
  .sf-gallery-thumb { width: 72px; }
  .sf-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-rail-track { grid-auto-columns: 72%; }
  .sf-calc-fields { gap: 14px 20px; }
  .sf-section-title { margin-bottom: 26px; }
  .sf-tablist { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; width: 100%; margin-bottom: 30px; }
  .sf-tablist button { white-space: nowrap; }
  .sf-acc summary { padding: 20px 0; }
}