
/*
* @subsection   ToTop
* @license      MIT license - http://opensource.org/licenses/MIT
* @version      1.0.0
*/
.ui-to-top {
  position: fixed;
  right: 15px;
  bottom: 15px;
  width: 58px;
  height: 58px;
  border-radius: 100%;
  font-size: 24px;
  line-height: 58px;
  overflow: hidden;
  text-align: center;
  text-decoration: none;
  z-index: 20;
  -webkit-transition: .3s all ease;
  transition: .3s all ease;
  -webkit-transform: translateY(100px);
      -ms-transform: translateY(100px);
          transform: translateY(100px);
}

.ui-to-top::before {
  /*  
  content: '\e941';
  font-family: 'Linearicons'; 
  */
}

.ui-to-top, .ui-to-top:active, .ui-to-top:focus {
  color: #fff;
  background: rgba(112, 112, 112, 0.71);
  
}

.ui-to-top:hover {
  color: #fff;
  background: #000;
}

.ui-to-top:focus {
  outline: 0;
}

.ui-to-top.active {
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}

.mobile .ui-to-top,
.tablet .ui-to-top {
  display: none !important;
}

@media (min-width: 480px) {
  .ui-to-top {
    right: 40px;
    bottom: 40px;
  }
}

/* ----- contrat prix promo (markup émis par Product::price()) -----
   price() rend : <span class="price">NEUF</span>
                  <span class="originprice" style="display:none">…</span>
                  <span class="linethrough"><span class="oldprice">ORIGINE</span></span>
   Barré/discret centralisé ici (common.css est chargé par TOUS les thèmes webshop)
   → le prix d'origine s'affiche barré à côté du prix neuf sur toutes les surfaces
   (carte, fiche, panier, favoris, quickview, modal variante), sans re-styler
   chaque thème. Les thèmes peuvent surcharger l'esthétique localement. */
.originprice { display: none; }
.linethrough { margin-inline-start: .4rem; font-size: .82em; font-weight: 400; opacity: .8; }
.linethrough .oldprice { text-decoration: line-through; }

/* ═══════════════════════════════════════════════════════════════════════════
   SWS Theme-Studio — filet CORE partagé pour les blocs de section (.sws-block__*)
   ---------------------------------------------------------------------------
   Le fallback CORE (_common/blocks/section*.tpl) émet ces classes ; seul carat
   les stylait. Ici on les style UNE FOIS pour tous les thèmes SANS override.
   Règles STRICTES (non-régression carat/funnel) :
   - common.css est chargé AVANT le bundle du thème → à spécificité ÉGALE le thème
     gagne. Donc : single-class UNIQUEMENT, JAMAIS !important, JAMAIS de spécificité
     augmentée. Les head-fallbacks passent par :where() (spécificité 0).
   - Tokens : seul le JEU GARANTI partout est utilisé nu (--color-*, --font-*,
     --border-radius*, --section-spacing…). Tout le reste via var(--x, fallback).
     JAMAIS --space-* (absent de la plupart, famous le redéfinit à une autre échelle).
   - Texte sur média = #fff fixe + scrim (--color-on-primary manque sur 6 thèmes).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Échelle locale scellée (préfixe --swsb-, jamais surchargée par un thème). */
.sws-block {
  --swsb-gap: 1.5rem;
  --swsb-radius: var(--border-radius, var(--radius, 0));
  --swsb-surface-alt: var(--color-surface-alt, var(--color-surface, #f4f4f5));
  --swsb-muted: var(--color-text-muted, currentColor);
  --swsb-on-media: #fff;
}
@media (min-width: 768px) { .sws-block { --swsb-gap: 2rem; } }

/* Head de bloc — fallback à spécificité 0 (aide sws-base/clean/famous, perd
   toujours face à un thème qui style ces classes). */
:where(.sws-block) .sws-section__head { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
:where(.sws-block) .sws-eyebrow { display: inline-block; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent, inherit); }
:where(.sws-block) .sws-section__title { margin: .25rem 0; font-family: var(--font-family-heading); font-weight: var(--font-weight-heading, 700); line-height: 1.15; font-size: clamp(1.8rem, 4vw, 2.6rem); }
:where(.sws-block) .sws-section__sub { color: var(--swsb-muted); line-height: var(--line-height-base, 1.6); max-width: 60ch; }
:where(.sws-block) .sws-text-center .sws-section__sub { margin-inline: auto; }

/* ── HERO (layout vedette, rendu par _common/blocks/section-hero.tpl) ── */
.sws-block__hero { position: relative; display: flex; align-items: flex-end; overflow: hidden; min-height: clamp(30rem, calc(70 * var(--sws-vh, 1vh)), 46rem); background: var(--color-primary, #1c2329) center/cover no-repeat; color: var(--swsb-on-media); }
.sws-block__hero-slide { position: absolute; inset: 0; background: center/cover no-repeat; opacity: 0; transition: opacity .9s ease; }
.sws-block__hero-slide.is-active { opacity: 1; }
.sws-block__hero-video, .sws-block__hero-slide-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; border: 0; pointer-events: none; }
.sws-block__hero-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.42) 45%, rgba(0,0,0,.12) 100%); }
.sws-block__hero-inner { position: relative; z-index: 2; width: 100%; padding-block: clamp(2rem, 6vw, 4rem); }
.sws-block__hero-title { margin: 0 0 1rem; max-width: 20ch; color: inherit; font-family: var(--font-family-heading); font-weight: var(--font-weight-heading, 700); line-height: 1.1; font-size: clamp(2.4rem, 6vw, 5rem); }
.sws-block__hero-text { max-width: 52ch; margin: 0 0 1.5rem; font-size: clamp(1rem, 2.2vw, 1.25rem); opacity: .95; }
.sws-block__hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.sws-block__hero-dots { position: absolute; z-index: 3; bottom: 1.25rem; inset-inline-end: 1.5rem; display: flex; gap: .5rem; }
.sws-block__hero-dot { width: 8px; height: 8px; padding: 0; border: 1px solid #fff; background: transparent; cursor: pointer; }
.sws-block__hero-dot.is-active { background: #fff; }

/* ── BANNER (le tpl générique émet .sws-block__banner + variante --video) ── */
.sws-block__banner { position: relative; display: flex; align-items: center; justify-content: center; min-height: clamp(22rem, calc(48 * var(--sws-vh, 1vh)), 38rem); background: var(--swsb-surface-alt) center/cover no-repeat; color: var(--swsb-on-media); overflow: hidden; text-align: center; }
.sws-block__banner::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0,0,0,.42); }
.sws-block__banner-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; border: 0; pointer-events: none; }
.sws-block__banner-inner { position: relative; z-index: 2; width: 100%; padding: 2rem 1.25rem; }

/* ── SPLIT (image + texte) ── */
.sws-block__split { display: grid; grid-template-columns: 1fr; gap: var(--swsb-gap); align-items: center; }
@media (min-width: 768px) { .sws-block__split { grid-template-columns: 1fr 1fr; } }
@media (min-width: 768px) { .sws-block__split--reverse .sws-block__media { order: -1; } }
.sws-block__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--swsb-radius); display: block; }
.sws-block__body h3 { margin: 0 0 .5rem; font-family: var(--font-family-heading); font-weight: var(--font-weight-heading, 700); }

/* ── GRID (steps/reviews/items sans slider) ── */
.sws-block__grid { display: grid; grid-template-columns: 1fr; gap: var(--swsb-gap); }
@media (min-width: 600px) { .sws-block__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sws-block__grid { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); } }

/* ── RAIL (scroll-snap horizontal + flèches optionnelles) ── */
.sws-block__rail { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: var(--swsb-gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
@media (min-width: 768px) { .sws-block__rail { grid-auto-columns: clamp(20rem, 30vw, 26rem); } }
.sws-block__rail::-webkit-scrollbar { display: none; }
.sws-block__rail > * { scroll-snap-align: start; }
.sws-block__rail-nav { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .75rem; }
.sws-block__rail-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-border, #ddd); background: var(--color-surface, #fff); color: var(--color-text, inherit); cursor: pointer; }

/* ── ITEM card (partagé grid + rail) ── */
.sws-block__item { display: flex; flex-direction: column; }
.sws-block__item-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--swsb-surface-alt); border-radius: var(--swsb-radius); }
.sws-block__item-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sws-block__item-title { margin: .75rem 0 .25rem; font-size: .9rem; text-transform: uppercase; letter-spacing: .08em; }
.sws-block__item-text { font-size: .9rem; color: var(--swsb-muted); line-height: 1.6; }

/* ── STATS ── */
.sws-block__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--swsb-gap); margin: 0; }
@media (min-width: 768px) { .sws-block__stats { grid-template-columns: repeat(4, 1fr); } }
.sws-block__stat-value { font-family: var(--font-family-heading); font-weight: var(--font-weight-heading, 700); font-size: clamp(2rem, 5vw, 3rem); line-height: 1; }
.sws-block__stat-label { margin: .35rem 0 0; color: var(--swsb-muted); font-size: .85rem; }

/* ── LOGOS ── */
.sws-block__logos { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.5rem, 5vw, 3rem); }
.sws-block__logos--rail { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scroll-snap-type: x mandatory; scrollbar-width: none; }
.sws-block__logo img { max-height: 2.5rem; width: auto; object-fit: contain; filter: grayscale(1); opacity: .7; transition: opacity .2s, filter .2s; }
.sws-block__logo:hover img { filter: none; opacity: 1; }
.sws-block__logo-text { font-family: var(--font-family-heading); font-weight: var(--font-weight-heading, 700); opacity: .6; }
