/* ══════════════════════════════════════════════════════════════════════
   RT-CAROUSEL — la rangée de produits de Rightech

   POURQUOI PAS CELUI DU THÈME. Le carrousel d'Avanam attend que ses
   flèches existent DÉJÀ dans la page pour s'initialiser, et rien d'autre
   ne le déclenche : sur une fiche produit il restait muet, les cartes
   s'effondraient en colonnes de vingt pixels. J'ai reproduit son
   balisage au caractère près, flèches comprises — il n'a pas démarré.

   POURQUOI PAS CELUI DE L'ANCIEN SITE NON PLUS, tel quel. rightech.ma
   fait tourner Owl Carousel 2 sur jQuery, initialisé dans le custom.js
   du thème WDGTM008_electro : six articles, un par clic, points et
   flèches personnalisées. C'est la FORME qu'Aziz veut garder — titre à
   gauche, flèches à droite, filet jaune, six de front — pas forcément la
   mécanique, qui traîne une bibliothèque de plus.

   CE QU'ON FAIT. La même forme, sans aucune dépendance : une piste qui
   défile nativement avec accrochage CSS, et deux boutons qui appellent
   scrollBy. Ça ne peut pas « ne pas s'initialiser », ça marche au doigt
   sur téléphone, et si le script ne se charge pas on perd les flèches,
   pas le contenu.

   LA PISTE GARDE « products product-loop ». Toutes les règles de carte du
   thème sont portées par ces deux classes ; sans elles les vignettes
   sortent brutes, titres géants et colonnes écrasées.
   ═══════════════════════════════════════════════════════════════════ */

.rt-carousel {
  margin: 36px 0 12px;
}

/* ── En-tête : titre à gauche, flèches à droite, filet jaune ───────── */
.rt-carousel__tete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 3px solid #f5c518;
  padding-bottom: 10px;
  margin-bottom: 16px;
}

.rt-carousel__titrage {
  min-width: 0;
}

.rt-carousel__titre {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: #1f2a3a;
}

.rt-carousel__sous {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: #6b7a8d;
  max-width: 78ch;
}

.rt-carousel__sous strong {
  color: #2e7d32;
  font-weight: 700;
}

.rt-carousel__nav {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.rt-carousel__fleche {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #e2e7f0;
  border-radius: 999px;
  background: #ffffff;
  color: #293544;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}

.rt-carousel__fleche:hover:not([disabled]) {
  background: #f5c518;
  border-color: #f5c518;
}

/* Une flèche qui ne mène nulle part s'efface plutôt que de mentir. */
.rt-carousel__fleche[disabled] {
  opacity: .3;
  cursor: default;
}

/* ── Les onglets, quand il y a un choix à poser ────────────────────── */
.rt-carousel__onglets {
  display: flex;
  gap: 8px;
  margin: 0 0 16px;
  flex-wrap: wrap;
}

.rt-carousel__onglet {
  border: 1px solid #e2e7f0;
  background: #ffffff;
  color: #4a5b6b;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.rt-carousel__onglet:hover {
  border-color: #293544;
}

.rt-carousel__onglet.is-actif {
  background: #293544;
  border-color: #293544;
  color: #ffffff;
}

.rt-carousel__groupe.est-cache {
  display: none;
}

/* ── La piste ──────────────────────────────────────────────────────── */
/* COMBIEN DE CARTES DE FRONT — dans une règle à UNE SEULE CLASSE.

   C'est la deuxième fois que le même piège se referme. La règle de mise
   en page doit citer « .rt-carousel__piste.products.product-loop » pour
   reprendre la main sur le thème : trois classes. Si la variable est
   déclarée là, aucun point de rupture écrit en « .rt-carousel__piste »
   ne pourra la changer — il en faut trois aussi. Résultat mesuré : sur
   téléphone les cartes restaient à 52 px et la page débordait de 709 px.

   La variable vit donc SEULE, à une classe, et les points de rupture
   plus bas ont exactement la même spécificité : c'est l'ordre du fichier
   qui tranche, comme on s'y attend. */
.rt-carousel__piste {
  --rt-de-front: 6;
  --rt-ecart: 16px;
}

.rt-carousel__piste,
.rt-carousel__piste.products.product-loop {
  /* La mise en page, elle, doit reprendre la main sur « .products
     .product-loop » du thème, qui met les vignettes en grille : d'où
     les trois classes. */
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--rt-ecart);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 4px;
  margin: 0;
  /* la barre reste utilisable à la molette et au clavier, mais les
     flèches suffisent : on ne la donne pas à voir */
  scrollbar-width: none;
}

.rt-carousel__piste::-webkit-scrollbar {
  display: none;
}

.rt-carousel__item {
  flex: 0 0 auto;
  width: calc((100% - (var(--rt-de-front) - 1) * var(--rt-ecart))
              / var(--rt-de-front));
  scroll-snap-align: start;
  padding: 0;
  max-width: none;
}

/* La vignette du thème porte ses propres colonnes Bootstrap ; dans une
   piste horizontale elles imposeraient un pourcentage de la piste
   entière, donc des cases minuscules. */
.rt-carousel__item [class*="col-"] {
  width: 100%;
  max-width: none;
  flex: 0 0 100%;
  padding-left: 0;
  padding-right: 0;
}

.rt-carousel__item > .product,
.rt-carousel__item > article,
.rt-carousel__item .product-miniature {
  height: 100%;
  width: 100%;
  margin: 0;
}

/* ── La carte : le titre, le prix, acheter ─────────────────────────────
   « Juste le titre au maximum sur deux lignes puis acheter » — Aziz.
   La vignette du thème est faite pour une page de rayon, où il y a la
   place de tout dire. Ici la liste de spécifications montait à 672 px à
   elle seule, et la piste étirant toutes les cartes sur la plus haute,
   les six y passaient. */
.rt-carousel__item .product-desc,
.rt-carousel__item .availability,
.rt-carousel__item .mini-actions,
.rt-carousel__item .comments_note,
.rt-carousel__item .product-list-reviews,
.rt-carousel__item .variant-links,
.rt-carousel__item .highlighted-informations,
.rt-carousel__item .brand-title,
.rt-carousel__item .time-sale {
  display: none !important;
}

.rt-carousel__item .thumbnail-container,
.rt-carousel__item .product-description {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: static;
}

.rt-carousel__item .product-description {
  flex: 1 1 auto;
  padding: 10px 10px 12px;
  gap: 0;
}

/* L'image entière dans un carré franc : elle ne déborde plus de sa
   boîte et ne laisse plus de vide sous elle. */
.rt-carousel__item .thumbnail-top {
  height: auto;
  flex: 0 0 auto;
}

.rt-carousel__item .product-thumbnail {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.rt-carousel__item .product-thumbnail picture,
.rt-carousel__item .product-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.rt-carousel__item .product-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
}

/* C'EST LE PRIX QUI POUSSE. Une marge automatique sur le BOUTON ne
   tenait pas : selon que la fiche est en stock ou en rupture, il n'a ni
   la même classe ni les mêmes voisins, et l'écart au bas de la carte
   oscillait entre 13 et 33 px. Le prix existe toujours, et toujours
   avant le bouton : c'est lui qu'on pousse vers le bas, le bouton suit. */
.rt-carousel__item .product-price-and-shipping {
  margin: 10px 0 0;
  margin-top: auto;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.rt-carousel__item .product-description .btn {
  width: 100%;
  margin: 10px 0 0;
}

/* ── Aux autres largeurs ───────────────────────────────────────────── */
@media (max-width: 1499.98px) { .rt-carousel__piste { --rt-de-front: 5; } }

@media (max-width: 1199.98px) { .rt-carousel__piste { --rt-de-front: 4; } }

@media (max-width: 991.98px) {
  .rt-carousel__piste { --rt-de-front: 3; }
  .rt-carousel__titre { font-size: 20px; }
}

@media (max-width: 767.98px) { .rt-carousel__piste { --rt-de-front: 2; } }

@media (max-width: 575.98px) {
  .rt-carousel { margin-top: 28px; }
  .rt-carousel__titre { font-size: 18px; }
  /* une carte et demie : on voit qu'il y en a d'autres a cote */
  .rt-carousel__piste { --rt-de-front: 1.5; --rt-ecart: 12px; }
}