/*
Theme Name:   Blocksy Child
Template:     blocksy
Description:  Thème enfant Blocksy pour Mr Smart, revendeur agréé Apple à Abidjan.
Version:      1.0.1787572327
*/

/* ==================================================================
   Cartes produit — disposition Apple Premium Reseller
   Cible : image, titre, prix, catégories, bouton pleine largeur.

   Blocksy rend le prix et le bouton dans un même conteneur
   .ct-woo-card-actions, ce qui empêche d'insérer les catégories
   entre les deux. On neutralise ce conteneur avec display:contents
   pour que ses enfants deviennent des éléments de la carte, puis on
   réordonne. Désactiver l'élément dans le Customizer supprimerait
   le prix ET le bouton : ce n'est pas une option.
   ================================================================== */

.products li.product {
	display: flex;
	flex-direction: column;
	gap: 10px;
	/* toutes les cartes prennent la hauteur de la plus haute de la rangee,
	   sinon les boutons se decalent selon la longueur des titres */
	height: 100%;
}

/* le bouton est pousse en bas de chaque carte : ils s'alignent alors
   d'une colonne a l'autre quel que soit le nombre de lignes du titre */
.products li.product .button,
.products li.product .add_to_cart_button,
.products li.product .added_to_cart,
.products li.product .product_type_variable,
.products li.product .product_type_simple,
.products li.product .product_type_grouped,
.products li.product .product_type_external {
	margin-top: auto;
	align-self: stretch;
}

.products li.product > figure { order: 1; margin-bottom: 6px; }
.products li.product > .woocommerce-loop-product__title { order: 2; }
.products li.product > .ct-woo-card-actions { display: contents; }
.products li.product .price { order: 3; }
.products li.product > ul.entry-meta { order: 4; }
.products li.product .button,
.products li.product .add_to_cart_button,
.products li.product .added_to_cart { order: 5; }

/* Titre */
.products li.product .woocommerce-loop-product__title {
	font-size: 17px;
	font-weight: 500;
	letter-spacing: -0.2px;
	line-height: 1.3;
	margin: 0;
}

/* Blocksy dessine un filet vertical de 1px entre le prix et le bouton
   (.price::after) parce qu'ils sont cotes a cote dans sa mise en page
   d'origine. Une fois empiles, ce trait flotte a droite du prix. */
.products li.product .price::after {
	display: none;
}

/* Prix */
.products li.product .price {
	font-size: 16px;
	font-weight: 500;
	color: var(--theme-palette-color-3);
	margin: 0;
}

/* Catégories */
.products li.product ul.entry-meta {
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: .7;
	margin: 0;
}

/* Bouton d'achat : pilule bleue pleine largeur */
.products li.product .button,
.products li.product .add_to_cart_button,
.products li.product .added_to_cart,
.products li.product .product_type_variable,
.products li.product .product_type_external {
	width: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--theme-palette-color-1);
	color: #fff;
	border-radius: 980px;
	padding: 9px 18px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.35;
	margin-top: 2px;
	transition: background-color .18s ease;
	/* Blocksy impose min-height:55px et un interlignage de 27px sur ses boutons :
	   sans ces deux remises a zero, le padding n'a aucun effet visible. */
	min-height: 0;
	height: auto;
}

.products li.product .button:hover,
.products li.product .add_to_cart_button:hover,
.products li.product .added_to_cart:hover {
	background-color: var(--theme-palette-color-2);
	color: #fff;
}

/* Aucune bordure arrondie sur la carte ni la vignette */
.products li.product,
.products li.product figure,
.products li.product figure img {
	border-radius: 0;
}

/* ==================================================================
   Harmonisation des boutons d'achat
   Deux ecueils du theme, constates a la mesure :
   1. Blocksy applique flex-grow aux elements de la zone d'action.
      Comme .ct-woo-card-actions est en display:contents, le bouton
      devient enfant direct de la carte et absorbe l'espace libre :
      75px de haut sur une carte a titre court, 40px sur un titre long.
   2. Ses selecteurs prefixes .woocommerce l'emportent sur les notres,
      d'ou une largeur qui restait celle du contenu.
   ================================================================== */

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .added_to_cart,
ul.products li.product .button,
ul.products li.product .add_to_cart_button,
ul.products li.product .added_to_cart {
	flex: 0 0 auto;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	min-height: 0;
	height: auto;
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
	font-size: 13px;
	line-height: 1.4;
	border-radius: 980px;
}

/* ==================================================================
   PAGE D ACCUEIL : comportement responsive
   Trois pieges Elementor traites ici :
   1. il empile les conteneurs en colonne sous 768px ;
   2. la largeur fixee sur un conteneur enfant n est pas conservee
      en responsive, les cartes se comprimaient a une lettre par ligne ;
   3. trois colonnes a 33% plus un gap de 20px depassent 100% et la
      troisieme bascule a la ligne.
   ================================================================== */

/* --- rangees a defilement horizontal --- */
.elementor-element-5d8b021, .elementor-element-a3cf6d1 {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  padding-bottom: 10px;
}
.elementor-element-5d8b021 > *, .elementor-element-a3cf6d1 > * { flex: 0 0 auto !important; scroll-snap-align: start; }
.elementor-element-5d8b021 { align-items: flex-end; gap: 20px; }
.elementor-element-5d8b021 > * { width: 110px !important; min-width: 95px; padding: 0 !important; }
.elementor-element-5d8b021 img { height: 55px !important; width: auto !important; max-width: 100% !important; object-fit: contain; display: block; margin: 0 auto; }
.elementor-element-5d8b021 figure, .elementor-element-5d8b021 .elementor-widget-image { width: 100% !important; text-align: center; }
.elementor-element-a3cf6d1 { align-items: stretch; gap: 16px; }
.elementor-element-a3cf6d1 > * { width: 240px !important; min-width: 240px !important; }
.elementor-element-a3cf6d1 img { max-height: 150px; width: auto !important; object-fit: contain; display: block; margin: 0 auto; }

/* --- rangees de trois cartes : on repartit par flex, pas par pourcentage --- */
.elementor-element-557c533, .elementor-element-f15b14d { display: flex !important; flex-wrap: wrap !important; gap: 20px; align-items: stretch; }
.elementor-element-557c533, .elementor-element-f15b14d > * { flex: 1 1 260px !important; width: auto !important; min-width: 260px; }

/* --- produits WooCommerce injectes par shortcode ---
   Ces rangees etaient ciblees par identifiant Elementor : chaque nouvelle
   section obligeait a revenir ici. La classe ms-produits-defilants, posee
   dans Elementor (Avance > Classes CSS) sur le widget Code court, suffit
   desormais. Les identifiants restent pour ne rien casser. --- */
.ms-produits-defilants ul.products, .elementor-element-c55f6d5 ul.products, .elementor-element-f0617e1 ul.products, .elementor-element-ip4vd02 ul.products {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 16px;
  margin: 0;
  padding-bottom: 10px;

}
.ms-produits-defilants ul.products li.product, .elementor-element-c55f6d5 ul.products li.product, .elementor-element-f0617e1 ul.products li.product, .elementor-element-ip4vd02 ul.products li.product {
  flex: 0 0 auto !important;
  width: 240px !important;
  min-width: 240px !important;
  max-width: 240px !important;
  margin: 0 !important;
  scroll-snap-align: start;
}

/* --- desktop : la barre de categories tient entiere --- */
@media (min-width: 1100px) {
  .elementor-element-5d8b021 { justify-content: space-between; overflow-x: visible !important; }
}

/* --- telephone --- */
@media (max-width: 767px) {
  .elementor-element-a3cf6d1 > * { width: 200px !important; min-width: 200px !important; }
  .ms-produits-defilants ul.products li.product, .elementor-element-c55f6d5 ul.products li.product, .elementor-element-f0617e1 ul.products li.product, .elementor-element-ip4vd02 ul.products li.product { width: 200px !important; min-width: 200px !important; max-width: 200px !important; }
  .elementor-element-557c533, .elementor-element-f15b14d > * { flex: 1 1 100% !important; min-width: 0; }
  .elementor-element-140e02f { text-align: center; }
}

/* --- defilement sans barre visible ---
   Le geste reste possible au doigt, a la molette et au clavier ;
   seule la barre est masquee, sur les trois moteurs. */
.elementor-element-5d8b021, .elementor-element-a3cf6d1, .ms-produits-defilants ul.products, .elementor-element-c55f6d5 ul.products, .elementor-element-f0617e1 ul.products, .elementor-element-ip4vd02 ul.products {
  scrollbar-width: none;
  -ms-overflow-style: none;
  align-items: stretch;
}
.elementor-element-5d8b021::-webkit-scrollbar,
.elementor-element-a3cf6d1::-webkit-scrollbar,
.ms-produits-defilants ul.products::-webkit-scrollbar,
.elementor-element-ip4vd02 ul.products::-webkit-scrollbar,
.elementor-element-c55f6d5 ul.products::-webkit-scrollbar,
.elementor-element-f0617e1 ul.products::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* --- mosaique asymetrique : grande tuile + deux tuiles empilees
   La colonne de droite doit occuper toute la hauteur de la grande
   tuile, et ses deux cartes se partager cette hauteur a egalite,
   sinon un vide se creuse sous la seconde. --- */

.elementor-element-f15b14d { align-items: stretch !important; }
.elementor-element-f15b14d > * { flex: 1 1 300px !important; min-width: 300px; }

.elementor-element-e8cf962 { display: flex !important; flex-direction: column !important; }
.elementor-element-e8cf962 > * { flex: 1 1 0 !important; }

/* image de la grande tuile ancree en bas */
.elementor-element-3a99edb > .elementor-widget-image { margin-top: auto; }
.elementor-element-3a99edb img { max-height: 360px; width: auto !important; object-fit: contain; }
.elementor-element-e8cf962 img { max-height: 130px; width: auto !important; object-fit: contain; }

@media (max-width: 767px) {
  .elementor-element-f15b14d > * { flex: 1 1 100% !important; min-width: 0; }
  .elementor-element-3a99edb img { max-height: 260px; }
}

/* --- canaux de contact : trois colonnes centrees, sans carte --- */
.elementor-element-b2aef5c > * { flex: 1 1 240px !important; min-width: 240px; }
.elementor-element-b2aef5c .elementor-icon { color: #6E6E73; }
@media (max-width: 767px) {
  .elementor-element-b2aef5c > * { flex: 1 1 100% !important; min-width: 0; }
}

/* --- cartes services : trois colonnes egales, coins arrondis --- */
.elementor-element-557c533 { display: flex !important; flex-wrap: wrap !important; align-items: stretch; }
.elementor-element-557c533 > * { flex: 1 1 260px !important; width: auto !important; min-width: 260px; }
@media (max-width: 767px) {
  .elementor-element-557c533 > * { flex: 1 1 100% !important; min-width: 0; }
}

/* ==================================================================
   Cartes de contenu : rayon 14px et ombre portee subtile
   Regle du design system :
     - carte PRODUIT  : rayon 0, aucune ombre (fiche, boutique, rangees)
     - carte CONTENU  : rayon 14px, ombre teintee vers l encre
   L ombre n est jamais noire pure : elle prend la teinte du fond,
   sinon elle grise l ensemble et se voit comme un halo.
   ================================================================== */

/* services, nouveautes, tuiles de la mosaique */
.elementor-element-557c533 > *,
.elementor-element-a3cf6d1 > *,
.elementor-element-3a99edb,
.elementor-element-e8cf962 > * {
  border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(29, 29, 31, .04), 0 6px 16px -6px rgba(29, 29, 31, .10) !important;
  transition: box-shadow .2s ease, transform .2s ease;
}

/* leger relief au survol sur les tuiles cliquables */
.elementor-element-a3cf6d1 > *:hover,
.elementor-element-3a99edb:hover,
.elementor-element-e8cf962 > *:hover {
  box-shadow: 0 2px 4px rgba(29, 29, 31, .05), 0 12px 28px -10px rgba(29, 29, 31, .16) !important;
}

/* les cartes produit restent a plat, sans rayon ni ombre */
.products li.product,
.products li.product figure,
.products li.product figure img {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* --- correction : les rangees ne doivent pas heriter d une hauteur
   Leur parent est un conteneur flex en COLONNE. Un flex-basis pose
   sur la rangee y devient une HAUTEUR imposee (260px), do ou un vide
   sous le texte des cartes. On remet la rangee en dimension auto. --- */

.elementor-element-557c533,
.elementor-element-b2aef5c,
.elementor-element-f15b14d {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  align-items: stretch;
}

/* les cartes de contenu se dimensionnent sur leur texte,
   tout en restant a hauteur egale dans la rangee */
.elementor-element-557c533 > * {
  height: auto !important;
  align-self: stretch;
}

/* ==================================================================
   Carrousel services (widget 26eabe7)
   La rangee statique 557c533 est remplacee par un carrousel Elementor
   Pro : boucle infinie, 3 vues bureau / 2 tablette / 1 telephone.
   Swiper masque le debordement : sans marge interne, les ombres des
   diapositives seraient rognees sur les bords.
   ================================================================== */

.elementor-element-26eabe7 .swiper { padding: 8px 8px 4px; }
.elementor-element-26eabe7 .swiper-slide { height: auto; display: flex; }
.elementor-element-26eabe7 .swiper-slide > * { width: 100%; }

/* meme traitement visuel que les autres cartes de contenu */
.elementor-element-26eabe7 .swiper-slide > * {
  border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(29, 29, 31, .04), 0 6px 16px -6px rgba(29, 29, 31, .10) !important;
  transition: box-shadow .2s ease;
}

/* puces : reperes de defilement, utiles seulement quand toutes les
   cartes ne tiennent pas a l ecran */
.elementor-element-26eabe7 .swiper-pagination-bullet { background: #1D1D1F; opacity: .22; }
.elementor-element-26eabe7 .swiper-pagination-bullet-active { opacity: 1; }
@media (min-width: 1025px) {
  .elementor-element-26eabe7 .swiper-pagination { display: none; }
}

/* le geste doit rester horizontal sur telephone : sans cette regle,
   un balayage legerement oblique fait defiler la page a la place */
.elementor-element-26eabe7 .swiper { touch-action: pan-y; }

@media (max-width: 767px) {
  .elementor-element-26eabe7 .swiper-slide > * { padding: 20px !important; }
}

/* ==================================================================
   Section "En boutique" (carrousel d51ab08)
   Les photos sont en 3:2 et de cadrages differents. On impose un
   rapport 4:3 avec recadrage centre, sinon la hauteur des cartes
   varie d une photo a l autre et la rangee se desaligne.
   ================================================================== */

.elementor-element-d51ab08 .swiper { padding: 8px 8px 4px; }
.elementor-element-d51ab08 .swiper-slide { height: auto; display: flex; }
.elementor-element-d51ab08 .swiper-slide > * { width: 100%; }

.elementor-element-d51ab08 .swiper-slide > * {
  border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(29, 29, 31, .04), 0 6px 16px -6px rgba(29, 29, 31, .10) !important;
  transition: box-shadow .2s ease;
}
.elementor-element-d51ab08 .swiper-slide > *:hover {
  box-shadow: 0 2px 4px rgba(29, 29, 31, .05), 0 12px 28px -10px rgba(29, 29, 31, .16) !important;
}

.elementor-element-d51ab08 .elementor-widget-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* le texte occupe la place restante : les cartes gardent la meme
   hauteur meme si un paragraphe fait une ligne de moins */
.elementor-element-d51ab08 .swiper-slide > * > .e-con:last-child { flex: 1 1 auto; }

.elementor-element-d51ab08 .swiper-pagination-bullet { background: #1D1D1F; opacity: .22; }
.elementor-element-d51ab08 .swiper-pagination-bullet-active { opacity: 1; }
@media (min-width: 1025px) {
  .elementor-element-d51ab08 .swiper-pagination { display: none; }
}
.elementor-element-d51ab08 .swiper { touch-action: pan-y; }

/* ==================================================================
   Bandeaux alternes photo / texte (section e7c10a0)
   Chaque rangee est deux moities egales. La photo doit remplir sa
   moitie quelle que soit sa hauteur naturelle : sans object-fit,
   Elementor la centre et laisse deux bandes blanches.
   ================================================================== */

.elementor-element-e7c10a1, .elementor-element-e7c10a2, .elementor-element-e7c10a3 {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: 0 !important;
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden;
}
.elementor-element-e7c10a1 > *, .elementor-element-e7c10a2 > *, .elementor-element-e7c10a3 > * {
  flex: 1 1 50% !important;
  width: 50% !important;
  max-width: 50%;
  min-width: 0;
}

/* la moitie photo : le widget image doit se comporter en bloc plein */
.elementor-element-e7c10a1 .elementor-widget-image,
.elementor-element-e7c10a2 .elementor-widget-image,
.elementor-element-e7c10a3 .elementor-widget-image { width: 100%; height: 100%; }
.elementor-element-e7c10a1 .elementor-widget-image > .elementor-widget-container,
.elementor-element-e7c10a2 .elementor-widget-image > .elementor-widget-container,
.elementor-element-e7c10a3 .elementor-widget-image > .elementor-widget-container { height: 100%; }
.elementor-element-e7c10a1 .elementor-widget-image figure,
.elementor-element-e7c10a2 .elementor-widget-image figure,
.elementor-element-e7c10a3 .elementor-widget-image figure { height: 100%; margin: 0; }
.elementor-element-e7c10a1 .elementor-widget-image img,
.elementor-element-e7c10a2 .elementor-widget-image img,
.elementor-element-e7c10a3 .elementor-widget-image img {
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

/* le panneau gris ne descend jamais sous la hauteur de la photo */
.elementor-element-e7c10a1 > *:not(:has(img)),
.elementor-element-e7c10a2 > *:not(:has(img)),
.elementor-element-e7c10a3 > *:not(:has(img)) { min-height: 300px; }

/* --- telephone : la photo passe systematiquement au-dessus du texte,
   y compris sur la rangee inversee, sinon l alternance donne un bloc
   de texte en tete de section --- */
@media (max-width: 767px) {
  .elementor-element-e7c10a1, .elementor-element-e7c10a2, .elementor-element-e7c10a3 {
    flex-direction: column !important;
  }
  .elementor-element-e7c10a1 > *, .elementor-element-e7c10a2 > *, .elementor-element-e7c10a3 > * {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100%;
  }
  .elementor-element-e7c10a2 > *:has(img) { order: -1; }
  .elementor-element-e7c10a1 .elementor-widget-image img,
  .elementor-element-e7c10a2 .elementor-widget-image img,
  .elementor-element-e7c10a3 .elementor-widget-image img { min-height: 0; aspect-ratio: 3 / 2; }
  .elementor-element-e7c10a1 > *:not(:has(img)),
  .elementor-element-e7c10a2 > *:not(:has(img)),
  .elementor-element-e7c10a3 > *:not(:has(img)) { min-height: 0; }
}

/* --- hauteur egale pour les trois bandeaux ---
   Les photos n ont pas le meme rapport : 3:2 pour deux d entre elles,
   quasi carre pour la troisieme (1287x1066). Sans rapport impose, la
   troisieme rangee faisait 534px contre 430px pour les autres. --- */

@media (min-width: 768px) {
  .elementor-element-e7c10a1 .elementor-widget-image img,
  .elementor-element-e7c10a2 .elementor-widget-image img,
  .elementor-element-e7c10a3 .elementor-widget-image img {
    aspect-ratio: 3 / 2;
    height: auto;
    min-height: 0;
    max-height: 430px;
  }
}

/* --- coins arrondis des bandeaux ---
   Le rayon est pose sur la rangee, pas sur chaque moitie : la rangee
   porte deja overflow:hidden, qui rogne la photo et le panneau gris
   exactement sur la meme courbe. Un rayon pose moitie par moitie
   laisserait une jointure droite au milieu. --- */

.elementor-element-e7c10a1,
.elementor-element-e7c10a2,
.elementor-element-e7c10a3 {
  border-radius: 14px !important;
  overflow: hidden !important;
  /* Safari ignore overflow:hidden sur un conteneur flex arrondi si
     aucun contexte de rendu n est cree : isolation le force. */
  isolation: isolate;
}

/* ==================================================================
   Navigation des rangees de produits
   Fleches sur ordinateur, points sur telephone.

   Les produits viennent du shortcode WooCommerce : il n y a pas de
   carrousel Swiper a configurer, seulement un conteneur a debordement
   horizontal. Les commandes sont donc ajoutees autour de ce conteneur,
   ce qui preserve integralement la mise en forme des cartes produit.
   ================================================================== */

.ms-carrousel { position: relative; }

.ms-fleche {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--theme-palette-color-1, #0066CC);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(29, 29, 31, .18);
  transition: opacity .2s ease, transform .2s ease;
}
.ms-fleche:hover { transform: translateY(-50%) scale(1.06); }
.ms-fleche svg { width: 17px; height: 17px; display: block; }
.ms-fleche--prev { left: -14px; }
.ms-fleche--next { right: -14px; }

/* en bout de course la fleche s efface au lieu de disparaitre :
   sa disparition ferait sauter la rangee de quelques pixels */
.ms-fleche[disabled] { opacity: 0; pointer-events: none; }

.ms-points {
  display: none;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
.ms-point {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #1D1D1F;
  opacity: .22;
  cursor: pointer;
  transition: opacity .2s ease;
}
.ms-point[aria-current="true"] { opacity: 1; }

/* ordinateur : fleches seules. telephone : points seuls, car une cible
   de 40px posee sur les cartes gene le balayage au doigt. */
@media (max-width: 1024px) {
  .ms-fleche { display: none; }
  .ms-points { display: flex; }
}

/* ==================================================================
   Alignement des cartes dans les rangees de produits

   Cause mesuree : la regle .products li.product { height: 100% }
   posee plus haut pour la boutique. Une taille transversale autre
   que auto desactive align-self: stretch. Les cartes gardaient donc
   la hauteur de leur contenu (442px contre 464px selon que le titre
   tient sur une ou deux lignes) et margin-top:auto sur le bouton
   n avait plus d espace a repartir.

   On rend la hauteur auto pour ces deux rangees, et on reserve deux
   lignes au titre : sans cela seuls les boutons s alignent, les prix
   restent decales.
   ================================================================== */

.elementor-element-c55f6d5 ul.products li.product,
.elementor-element-f0617e1 ul.products li.product {
  height: auto !important;
  align-self: stretch !important;
}

.elementor-element-c55f6d5 ul.products li.product .woocommerce-loop-product__title,
.elementor-element-f0617e1 ul.products li.product .woocommerce-loop-product__title {
  min-height: 2.6em;   /* 2 lignes a interlignage 1.3 */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
}

/* le prix occupe lui aussi une hauteur fixe : les produits variables
   affichent une fourchette qui passe sur deux lignes (600 000 FCFA
   - 700 000 FCFA), les produits simples une seule. */
.elementor-element-c55f6d5 ul.products li.product .price,
.elementor-element-f0617e1 ul.products li.product .price {
  min-height: 2.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-wrap: wrap;
}

/* --- vignette a hauteur fixe ---
   Deux produits sur huit ont un visuel en portrait : 240x329 et
   240x339 la ou les autres font 240x240. Le titre de ces deux cartes
   demarrait donc 90 a 100px plus bas.
   Cadrage "contain" et non "cover" : sur un catalogue Apple, rogner
   un produit est pire que laisser du blanc autour. --- */

.elementor-element-c55f6d5 ul.products li.product > figure,
.elementor-element-f0617e1 ul.products li.product > figure {
  height: 240px;
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.elementor-element-c55f6d5 ul.products li.product > figure img,
.elementor-element-f0617e1 ul.products li.product > figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --- titre sur deux lignes exactement ---
   min-height fixait le plancher mais pas le plafond : un titre de
   trois lignes decalait de nouveau toute la carte. Coupe avec points
   de suspension, comme le fait le site de reference. --- */

.elementor-element-c55f6d5 ul.products li.product .woocommerce-loop-product__title,
.elementor-element-f0617e1 ul.products li.product .woocommerce-loop-product__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 2.6em;
  min-height: 2.6em;
  text-align: center;
}

/* ==================================================================
   FICHE PRODUIT — audit ASBIS, slides 33 a 43
   ================================================================== */

/* --- Slide 41 : “the buy button is the most critical action” ---
   Mesure avant : 188 x 55 px, soit un quart de la largeur de la
   colonne. Le bouton occupe maintenant toute la place restante a
   cote du selecteur de quantite. --- */

.ct-product-add-to-cart form.cart,
.ct-product-add-to-cart .cart:not(.variations_form) {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
}
.ct-product-add-to-cart .woocommerce-variation-add-to-cart {
  display: flex;
  align-items: stretch;
  gap: 12px;
  width: 100%;
}
.ct-product-add-to-cart .quantity { flex: 0 0 auto; }

.woocommerce div.product .single_add_to_cart_button {
  flex: 1 1 auto;
  min-width: 220px;
  justify-content: center;
  border-radius: 980px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  background-color: var(--theme-palette-color-1);
  color: #fff;
}
.woocommerce div.product .single_add_to_cart_button:hover {
  background-color: var(--theme-palette-color-2);
}

/* Les UGS sont desormais renseignees sur les 285 lignes : la reference
   redevient visible sur la fiche. */

/* --- Arguments de vente et moyens de paiement ---
   Places juste sous le bouton d achat, comme le demande la slide 33. --- */

.ct-product-additional-info { font-size: 15px; }
.ct-product-additional-info li { line-height: 1.5; }
.ct-payment-methods { border: 0; padding: 0; margin: 0; }
.ct-payment-methods legend { font-size: 13px; color: #6E6E73; padding: 0; }

/* --- corrections apres mesure ---
   1. Le bloc d achat d un produit variable etait large de 360px la
      ou la colonne en fait 625 : la chaine single_variation_wrap >
      woocommerce-variation-add-to-cart > ct-cart-actions ne prenait
      pas toute la largeur, le bouton ne pouvait donc pas s etendre.
   2. La feuille de Blocksy est chargee apres celle-ci : la regle sur
      l UGS demande !important pour l emporter. --- */

.ct-product-add-to-cart form.cart,
.ct-product-add-to-cart .single_variation_wrap,
.ct-product-add-to-cart .woocommerce-variation-add-to-cart,
.ct-product-add-to-cart .ct-cart-actions {
  width: 100% !important;
  max-width: 100% !important;
}
.ct-product-add-to-cart .ct-cart-actions {
  display: flex !important;
  align-items: stretch;
  gap: 12px;
}
.ct-product-add-to-cart .ct-cart-actions .quantity { flex: 0 0 auto; }
.woocommerce div.product .single_add_to_cart_button {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
}



/* --- Barre d achat collante (slide 37) ---
   Le style est pose des maintenant ; la barre n apparaitra qu une
   fois le PHP correspondant installe dans functions.php. --- */

.ms-barre-achat {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 999;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid #E5E5E7;
  transform: translateY(100%);
  transition: transform .25s ease;
  pointer-events: none;
}
.ms-barre-achat.est-visible { transform: translateY(0); pointer-events: auto; }

.ms-barre-achat__inner {
  max-width: 1290px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.ms-barre-achat__produit { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ms-barre-achat__produit img { width: 44px; height: 44px; object-fit: contain; }
.ms-barre-achat__produit > div { display: flex; flex-direction: column; min-width: 0; }
.ms-barre-achat__nom { font-size: 14px; font-weight: 500; color: #1D1D1F;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
.ms-barre-achat__prix { font-size: 13px; color: #6E6E73; }
.ms-barre-achat__prix .price { font-size: 13px; }

.ms-barre-achat__cta {
  flex: 0 0 auto;
  border: 0;
  border-radius: 980px;
  padding: 12px 30px;
  font-size: 15px;
  font-weight: 500;
  background: var(--theme-palette-color-1);
  color: #fff;
  cursor: pointer;
}
.ms-barre-achat__cta:hover { background: var(--theme-palette-color-2); }

@media (max-width: 767px) {
  .ms-barre-achat__nom { max-width: 38vw; }
  .ms-barre-achat__cta { padding: 12px 20px; font-size: 14px; }
}

/* --- Accessoires compatibles pres du bouton (slide 43) --- */

.ms-accessoires { margin: 22px 0 4px; }
.ms-accessoires__titre {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6E6E73;
}
.ms-accessoires ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ms-accessoires li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid #E5E5E7;
  border-radius: 14px;
  text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.ms-accessoires li a:hover {
  border-color: #d2d2d6;
  box-shadow: 0 1px 2px rgba(29,29,31,.04), 0 6px 16px -6px rgba(29,29,31,.10);
}
.ms-accessoires img { width: 40px; height: 40px; object-fit: contain; flex: 0 0 auto; }
.ms-accessoires__nom { flex: 1 1 auto; font-size: 14px; color: #1D1D1F; }
.ms-accessoires__prix { flex: 0 0 auto; font-size: 14px; font-weight: 500; color: #1D1D1F; }
.ms-accessoires__prix .price { font-size: 14px; }

/* --- La bulle de discussion passe devant la barre d achat ---
   Chaty se pose en position fixe avec z-index 997, la barre est a
   999 : elle recouvrait donc la bulle et la rendait incliquable.
   On remonte Chaty au-dessus plutot que d abaisser la barre, pour
   que le contact reste toujours atteignable. --- */

.chaty-widget,
#chaty-widget-0 .chaty-widget { z-index: 1001 !important; }

/* ==================================================================
   Cartes des produits suggérés (ventes croisées et similaires)

   Cause : dans les rangees a defilement de la fiche produit, Blocksy
   ne rend pas <li class="product"> mais <div class="product"> a
   l interieur d un .flexy-item. Toutes nos regles etaient ecrites en
   "li.product" : aucune ne s appliquait, d ou la carte d origine du
   theme avec le prix et le bouton cote a cote dans un cadre.
   ================================================================== */

.flexy-item > .product {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  height: auto !important;
  align-self: stretch;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* meme neutralisation que sur la boutique : le prix et le bouton sont
   rendus dans un conteneur commun qu il faut dissoudre pour pouvoir
   les empiler et glisser les categories entre les deux */
.flexy-item > .product > .ct-woo-card-actions { display: contents; }

.flexy-item > .product > figure { order: 1; margin-bottom: 6px; }
.flexy-item > .product > .woocommerce-loop-product__title { order: 2; }
.flexy-item > .product .price { order: 3; }
.flexy-item > .product > ul.entry-meta { order: 4; }
.flexy-item > .product .button,
.flexy-item > .product .add_to_cart_button,
.flexy-item > .product .added_to_cart { order: 5; }

.flexy-item > .product .woocommerce-loop-product__title {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.2px;
  line-height: 1.3;
  margin: 0;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 2.6em;
}

.flexy-item > .product .price {
  font-size: 15px;
  font-weight: 500;
  color: var(--theme-palette-color-3);
  margin: 0;
  min-height: 2.4em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* filet vertical de separation, sans objet une fois les blocs empiles */
.flexy-item > .product .price::after { display: none; }

.flexy-item > .product ul.entry-meta {
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .7;
  margin: 0;
  justify-content: center;
}

.flexy-item > .product .button,
.flexy-item > .product .add_to_cart_button,
.flexy-item > .product .added_to_cart,
.flexy-item > .product .product_type_variable,
.flexy-item > .product .product_type_simple,
.flexy-item > .product .product_type_external {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  min-height: 0 !important;
  height: auto !important;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  border-radius: 980px;
  background-color: var(--theme-palette-color-1);
  color: #fff;
}
.flexy-item > .product .button:hover,
.flexy-item > .product .add_to_cart_button:hover {
  background-color: var(--theme-palette-color-2);
  color: #fff;
}

/* vignette a hauteur fixe, comme sur les rangees de la page d accueil */
.flexy-item > .product > figure {
  height: 200px;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.flexy-item > .product > figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
}

.flexy-item { align-items: stretch; }

/* --- produits suggeres sur telephone ---
   Le carrousel est fige a columns-4 : sans regle, une carte ferait
   moins de 90px de large sur un ecran de 360px. Deux colonnes sur
   telephone, trois sur tablette. --- */

@media (max-width: 999px) {
  .up-sells .flexy-items.columns-4 > .flexy-item,
  .related .flexy-items.columns-4 > .flexy-item { width: 33.333% !important; }
  .up-sells .flexy-item > .product > figure,
  .related .flexy-item > .product > figure { height: 160px; min-height: 160px; }
}

@media (max-width: 689px) {
  .up-sells .flexy-items.columns-4 > .flexy-item,
  .related .flexy-items.columns-4 > .flexy-item { width: 50% !important; }
  .up-sells .flexy-item > .product > figure,
  .related .flexy-item > .product > figure { height: 140px; min-height: 140px; }
  .up-sells .flexy-item > .product .woocommerce-loop-product__title,
  .related .flexy-item > .product .woocommerce-loop-product__title { font-size: 14px; }
  .up-sells .flexy-arrow-prev, .up-sells .flexy-arrow-next,
  .related .flexy-arrow-prev, .related .flexy-arrow-next { display: none; }
}

/* --- Reprise iPhone : trois etapes (section f3b1re0) ---
   Les cartes sont empilees sur telephone et non mises en carrousel :
   un parcours numerote perd son sens si les etapes 2 et 3 sont
   masquees derriere un geste. --- */

.elementor-element-f3b1re3 {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
}
.elementor-element-f3b1re3 > * {
  flex: 1 1 260px !important;
  width: auto !important;
  min-width: 260px;
  height: auto !important;
  align-self: stretch;
  border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(29, 29, 31, .04), 0 6px 16px -6px rgba(29, 29, 31, .10) !important;
}

@media (max-width: 767px) {
  .elementor-element-f3b1re3 > * { flex: 1 1 100% !important; min-width: 0; }
}

/* --- Section iPhone en vedette (ip4vd00) --- */

/* titre a gauche, lien de categorie a droite, sur la meme ligne de base */
.elementor-element-ip4vd01 {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  justify-content: space-between;
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  gap: 12px;
}
.elementor-element-ip4vd01 > * { flex: 0 1 auto !important; width: auto !important; }
.elementor-element-ip4vd0b a:hover { text-decoration: underline !important; }

/* rangee de produits : memes regles que Nouveautes et Accessoires */
.elementor-element-ip4vd02 ul.products li.product > figure,
.elementor-element-ip4vd02 ul.products li.product > figure img { }
.elementor-element-ip4vd02 ul.products li.product > figure {
  height: 240px; min-height: 240px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.elementor-element-ip4vd02 ul.products li.product > figure img {
  width: 100%; height: 100%; object-fit: contain;
}
.elementor-element-ip4vd02 ul.products li.product .woocommerce-loop-product__title {
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; height: 2.6em; min-height: 2.6em; text-align: center;
}
.elementor-element-ip4vd02 ul.products li.product .price {
  min-height: 2.4em; display: flex; align-items: center; justify-content: center;
  text-align: center; flex-wrap: wrap;
}

@media (max-width: 767px) {
  .elementor-element-ip4vd02 ul.products li.product { width: 200px !important; min-width: 200px !important; max-width: 200px !important; }
  .elementor-element-ip4vd01 { justify-content: flex-start; }
}

/* ==================================================================
   Rangees services et « En boutique » — defilement CSS

   Les deux nested-carousel d Elementor Pro ont ete remplaces par des
   conteneurs simples. Swiper ne s initialisait pas correctement chez
   les visiteurs non connectes — une seule carte s affichait au lieu
   de trois. On reprend ici le procede des rangees categories,
   nouveautes et produits, qui ne depend d aucun JavaScript.
   ================================================================== */

.elementor-element-svc0row,
.elementor-element-btq0row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  gap: 20px;
}

.elementor-element-svc0row > *,
.elementor-element-btq0row > * {
  flex: 1 1 280px !important;
  width: auto !important;
  min-width: 280px;
  height: auto !important;
  align-self: stretch;
  border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(29, 29, 31, .04), 0 6px 16px -6px rgba(29, 29, 31, .10) !important;
  transition: box-shadow .2s ease;
}
.elementor-element-btq0row > *:hover {
  box-shadow: 0 2px 4px rgba(29, 29, 31, .05), 0 12px 28px -10px rgba(29, 29, 31, .16) !important;
}

/* les photos gardent le cadrage 4:3 impose precedemment */
.elementor-element-btq0row .elementor-widget-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* --- telephone : defilement horizontal, comme les autres rangees --- */
@media (max-width: 767px) {
  .elementor-element-svc0row,
  .elementor-element-btq0row {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 6px;
  }
  .elementor-element-svc0row::-webkit-scrollbar,
  .elementor-element-btq0row::-webkit-scrollbar { width: 0; height: 0; display: none; }
  .elementor-element-svc0row > *,
  .elementor-element-btq0row > * {
    flex: 0 0 82% !important;
    min-width: 82%;
    scroll-snap-align: start;
  }
}

/* ==================================================================
   Page de gamme iPhone (/iphone/)
   Une ligne par gamme : texte a gauche, visuel a droite. Sur
   telephone la ligne s empile, visuel au-dessus du texte.
   ================================================================== */

.elementor-element-gam1row,
.elementor-element-gam2row,
.elementor-element-gam3row,
.elementor-element-gam4row,
.elementor-element-gam5row,
.elementor-element-gam6row,
.elementor-element-gam7row,
.elementor-element-gam8row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
}
.elementor-element-gam1row > *,
.elementor-element-gam2row > *,
.elementor-element-gam3row > *,
.elementor-element-gam4row > *,
.elementor-element-gam5row > *,
.elementor-element-gam6row > *,
.elementor-element-gam7row > *,
.elementor-element-gam8row > * {
  flex: 1 1 300px !important;
  width: auto !important;
  min-width: 300px;
}
.elementor-element-gam1row img,
.elementor-element-gam2row img,
.elementor-element-gam3row img,
.elementor-element-gam4row img,
.elementor-element-gam5row img,
.elementor-element-gam6row img,
.elementor-element-gam7row img,
.elementor-element-gam8row img {
  max-height: 230px;
  width: auto !important;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* le heros du modele phare */
.elementor-element-iph0her img { max-height: 340px; width: auto !important; object-fit: contain; }

@media (max-width: 767px) {
  .elementor-element-gam1row,
  .elementor-element-gam2row,
  .elementor-element-gam3row,
  .elementor-element-gam4row,
  .elementor-element-gam5row,
  .elementor-element-gam6row,
  .elementor-element-gam7row,
  .elementor-element-gam8row { flex-direction: column-reverse !important; text-align: left; }
  .elementor-element-gam1row > *,
  .elementor-element-gam2row > *,
  .elementor-element-gam3row > *,
  .elementor-element-gam4row > *,
  .elementor-element-gam5row > *,
  .elementor-element-gam6row > *,
  .elementor-element-gam7row > *,
  .elementor-element-gam8row > * { flex: 1 1 100% !important; min-width: 0; }
  .elementor-element-gam1row img,
  .elementor-element-gam2row img,
  .elementor-element-gam3row img,
  .elementor-element-gam4row img,
  .elementor-element-gam5row img,
  .elementor-element-gam6row img,
  .elementor-element-gam7row img,
  .elementor-element-gam8row img { max-height: 180px; }
  .elementor-element-iph0her img { max-height: 240px; }
}

/* --- Bandeau de gammes, sous l en-tete de la page iPhone ---
   Defilement horizontal en CSS, sans JavaScript, comme les rangees
   de la page d accueil. La vignette active recoit un fond gris. --- */

.elementor-element-bnd0row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  gap: 8px;
}
.elementor-element-bnd0row::-webkit-scrollbar { width: 0; height: 0; display: none; }

.elementor-element-bnd0row > * {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 210px;
  scroll-snap-align: start;
  transition: background-color .18s ease;
}
.elementor-element-bnd0row > *:hover { background-color: #F5F5F7; }

/* la vignette : petite, jamais deformee */
.elementor-element-bnd0row img {
  width: 54px !important;
  height: 62px !important;
  object-fit: contain;
  display: block;
}
.elementor-element-bnd0row .elementor-widget-image { width: auto !important; }
.elementor-element-bnd0row > * > *:first-child { flex: 0 0 auto !important; min-width: 0 !important; width: auto !important; }
.elementor-element-bnd0row > * > *:last-child { flex: 1 1 auto !important; min-width: 0 !important; }
.elementor-element-bnd0row p { white-space: nowrap; }

@media (max-width: 767px) {
  .elementor-element-bnd0row > * { min-width: 190px; }
}

/* ==================================================================
   Table de comparaison sur petits ecrans

   Structure reelle relevee sur la page /comparer/ :
     .ct-compare-table[style="--compare-products:N"]
       .ct-compare-row
         .ct-compare-column.ct-compare-item-label   <- intitule
         .ct-compare-column  x N                    <- un par produit
   19 rangees pour 3 produits, soit 76 cellules.

   A trois produits sur un ecran de 390px, chaque colonne tomberait
   sous 90px. On fait donc defiler la table horizontalement en gardant
   la colonne des intitules fixee a gauche : sans elle, impossible de
   savoir quelle caracteristique on lit.
   ================================================================== */

@media (max-width: 999px) {

  .ct-compare-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: relative;
  }
  .ct-compare-table::-webkit-scrollbar { width: 0; height: 0; display: none; }

  .ct-compare-table .ct-compare-row {
    display: grid !important;
    grid-template-columns: 108px repeat(var(--compare-products, 3), minmax(168px, 1fr));
    min-width: max-content;
    align-items: start;
  }

  /* l intitule reste visible pendant le defilement lateral */
  .ct-compare-table .ct-compare-item-label {
    position: sticky;
    left: 0;
    z-index: 3;
    background: #fff;
    border-right: 1px solid #E5E5E7;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: #1D1D1F;
    display: flex;
    align-items: center;
  }

  .ct-compare-table .ct-compare-column {
    padding: 12px 10px;
    font-size: 13px;
    line-height: 1.4;
    word-break: break-word;
  }

  /* une rangee sur deux legerement teintee : a douze caracteristiques,
     l oeil perd la ligne sans ce reperage */
  .ct-compare-table .ct-compare-row:nth-child(even) .ct-compare-column { background: #FAFAFB; }
  .ct-compare-table .ct-compare-row:nth-child(even) .ct-compare-item-label { background: #FAFAFB; }

  .ct-compare-table img { max-height: 120px; width: auto !important; object-fit: contain; }
  .ct-compare-table .price { font-size: 14px; }
  .ct-compare-table .button,
  .ct-compare-table .add_to_cart_button {
    width: 100%;
    min-height: 0;
    padding: 9px 12px;
    font-size: 12px;
    border-radius: 980px;
  }
}

@media (max-width: 600px) {
  .ct-compare-table .ct-compare-row {
    grid-template-columns: 92px repeat(var(--compare-products, 3), minmax(150px, 1fr));
  }
  .ct-compare-table .ct-compare-item-label { font-size: 11px; }
  .ct-compare-table .ct-compare-column { font-size: 12px; padding: 10px 8px; }
  .ct-compare-table img { max-height: 96px; }
}

/* la barre de comparaison ne doit pas recouvrir la barre d achat */
@media (max-width: 767px) {
  .ct-compare-bar { z-index: 998; }
}


/* ==================================================================
   Tableau comparatif par gamme  [mrsmart_comparatif]

   Correction du premier jet : les colonnes etaient definies en
   minmax(190px, 1fr) avec min-width:max-content sur la rangee. La
   rangee prenait donc la largeur du texte le plus long, mais les
   colonnes ne suivaient pas et les valeurs debordaient sur la
   colonne voisine. On passe a des colonnes de largeur fixe, dans
   lesquelles le texte revient a la ligne.
   ================================================================== */

.ms-comparatif {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-top: 8px;
}
.ms-comparatif::-webkit-scrollbar { width: 0; height: 0; display: none; }

.ms-comparatif__row {
  display: grid;
  grid-template-columns: 150px repeat(var(--ms-produits, 4), 216px);
  width: max-content;
  min-width: 100%;
  border-top: 1px solid #E5E5E7;
}
.ms-comparatif__row:first-child { border-top: 0; }

/* colonne des intitules : fixee a gauche pendant le defilement */
.ms-comparatif__label {
  position: sticky;
  left: 0;
  z-index: 3;
  background: #fff;
  padding: 20px 18px 20px 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  color: #6E6E73;
  display: flex;
  align-items: center;
}

.ms-comparatif__cell {
  padding: 20px 16px;
  font-size: 14px;
  line-height: 1.5;
  color: #1D1D1F;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.ms-comparatif__vide { color: #C7C7CC; }

/* rangee des visuels : hauteur constante, air autour */
.ms-comparatif__row--tete { border-top: 0; }
.ms-comparatif__row--tete .ms-comparatif__cell { padding: 8px 16px 20px; }
.ms-comparatif img {
  height: 132px;
  width: 100%;
  object-fit: contain;
  display: block;
}

.ms-comparatif__nom { padding-top: 0; padding-bottom: 6px; }
.ms-comparatif__nom a {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.3px;
  line-height: 1.25;
  color: #1D1D1F;
  text-decoration: none;
}
.ms-comparatif__nom a:hover { color: var(--theme-palette-color-1, #0066CC); }

.ms-comparatif__prix { padding-top: 0; color: #6E6E73; }
.ms-comparatif__prix .price,
.ms-comparatif__prix .amount { font-size: 14px; font-weight: 400; color: #6E6E73; }

/* Le prix d un produit variable est une fourchette, rendue ainsi :
     <span class=amount>1 040 000 FCFA</span>
     <span aria-hidden=true> – </span>
     <span class=amount>1 700 000 FCFA</span>
   Ces trois elements sont enfants directs de la cellule, sans
   conteneur .price intermediaire : mes premiers selecteurs ne
   correspondaient donc a rien. On masque le tiret et la borne haute,
   puisque l intitule annonce deja « A partir de ». Le texte destine
   aux lecteurs d ecran reste en place et continue d annoncer la
   fourchette complete. */
.ms-comparatif__prix > .amount ~ .amount { display: none; }
.ms-comparatif__prix > span[aria-hidden="true"]:not(.amount) { display: none; }
.ms-comparatif__prix > del { display: none; }

.ms-comparatif__row--pied { border-top: 1px solid #E5E5E7; }
.ms-comparatif__row--pied .ms-comparatif__cell { padding: 22px 16px 4px; }
.ms-comparatif__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border-radius: 980px;
  background: var(--theme-palette-color-1, #0066CC);
  color: #fff !important;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.ms-comparatif__cta:hover { background: var(--theme-palette-color-2, #0055B3); }

@media (max-width: 767px) {
  .ms-comparatif__row { grid-template-columns: 108px repeat(var(--ms-produits, 4), 168px); }
  .ms-comparatif__label { padding: 16px 12px 16px 0; font-size: 11px; }
  .ms-comparatif__cell { padding: 16px 12px; font-size: 13px; }
  .ms-comparatif img { height: 104px; }
  .ms-comparatif__nom a { font-size: 15px; }
  .ms-comparatif__cta { padding: 10px 16px; font-size: 13px; }
}

/* --- Confirmation d ajout au panier sans rechargement ---
   Le panier flottant de Blocksy s ouvre de lui-meme, mais un repere
   au niveau du bouton evite au client de se demander si son clic a
   ete pris en compte. --- */

.ms-ajout-confirme {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #1D8A4E;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease;
}
.ms-ajout-confirme.est-visible { opacity: 1; transform: translateY(0); }

/* le bouton reste lisible pendant l appel */
.single_add_to_cart_button.loading { opacity: .65; pointer-events: none; }

/* --- Lien « Voir le panier » du bloc accessoires ---
   WooCommerce ajoute ce lien apres chaque ajout en AJAX, et Blocksy
   l habille en bouton plein : la ligne passait sur deux niveaux et
   le lien faisait doublon avec le panier flottant. Ramene a un lien
   discret. --- */

.ms-accessoires .added_to_cart,
.ms-accessoires a.wc-forward {
  flex: 0 0 auto !important;
  order: 5;
  margin: 0 0 0 10px !important;
  padding: 0 !important;
  min-height: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--theme-palette-color-1, #0066CC) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  text-decoration: underline;
  white-space: nowrap;
  box-shadow: none !important;
}
.ms-accessoires .added_to_cart:hover { color: var(--theme-palette-color-2, #004C99) !important; }

/* ==================================================================
   Boutons des cartes produit — regle unique et definitive

   Deux jeux de regles se contredisaient : celles de cette feuille et
   celles du CSS additionnel, avec des !important des deux cotes. Le
   CSS additionnel etant injecte apres, il l emportait et rendait les
   boutons en largeur automatique. Ces regles-la ont ete retirees ;
   tout est desormais decrit ici, en un seul endroit.

   Pleine largeur choisie pour trois raisons : des libelles de longueur
   differente (« Ajouter au panier » contre « Choix des options ») ne
   s alignent jamais en largeur automatique ; la fiche produit et la
   barre d achat utilisent deja la pastille pleine largeur ; et la
   cible tactile est plus large sur telephone.
   ================================================================== */

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .added_to_cart,
ul.products li.product .button,
ul.products li.product a.button,
.flexy-item > .product .button,
.flexy-item > .product a.button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 10px 0 0 0 !important;
  padding: 11px 20px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  white-space: nowrap;
  border-radius: 980px !important;
  background-color: var(--theme-palette-color-1) !important;
  color: #fff !important;
  transition: background-color .18s ease;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.button:hover,
ul.products li.product .button:hover,
.flexy-item > .product .button:hover {
  background-color: var(--theme-palette-color-2) !important;
  color: #fff !important;
}

/* le bouton reste colle en bas quelle que soit la longueur du titre */
.woocommerce ul.products li.product,
ul.products li.product {
  display: flex !important;
  flex-direction: column !important;
}
.woocommerce ul.products li.product .button { margin-top: auto !important; }

/* ==================================================================
   Page « Nos boutiques »
   Grille CSS plutôt que colonnes Elementor : même parti pris que les
   rangees de gamme, et le passage a une colonne sur telephone se fait
   sans reglage responsive a maintenir dans trois breakpoints.
   ================================================================== */

.elementor-element-bou0row,
.elementor-element-acb0row,
.elementor-element-liv0row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}
.elementor-element-bou0row > .e-con,
.elementor-element-acb0row > .e-con,
.elementor-element-liv0row > .e-con {
  height: 100%;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.elementor-element-bou0row > .e-con:hover,
.elementor-element-acb0row > .e-con:hover,
.elementor-element-liv0row > .e-con:hover {
  border-color: #d2d2d6 !important;
  box-shadow: 0 1px 2px rgba(29,29,31,.04), 0 10px 26px -10px rgba(29,29,31,.14);
}

.ms-boutique-lien {
  color: var(--theme-palette-color-1, #0066CC);
  text-decoration: none;
  font-weight: 500;
}
.ms-boutique-lien:hover { text-decoration: underline; }

@media (max-width: 999px) {
  .elementor-element-bou0row,
.elementor-element-acb0row,
.elementor-element-liv0row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 689px) {
  .elementor-element-bou0row,
.elementor-element-acb0row,
.elementor-element-liv0row { grid-template-columns: 1fr; gap: 14px; }
}

/* Photos des boutiques : meme cadrage pour les trois cartes.
   Les originaux n ont pas le meme rapport (paysage, portrait) ;
   object-fit les recadre au centre sans deformer. */
.elementor-element-bou0row .elementor-widget-image,
.elementor-element-acb0row .elementor-widget-image { margin-bottom: 12px; }
.elementor-element-bou0row .elementor-widget-image img,
.elementor-element-acb0row .elementor-widget-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border-radius: 12px;
  display: block;
}

/* Bandeau d annonce en pleine largeur.
   La rangee est fluide et desormais bleue ; il reste la marge laterale du
   conteneur interieur de Blocksy, qui rentrait les fleches vers le centre. */
[data-row="top"] .ct-container,
[data-row="top"] .ct-container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
}
[data-row="top"] .ms-annonce { background: transparent; }

/* ==================================================================
   Formulaire de reprise (Contact Form 7)
   ================================================================== */

.ms-form-reprise label{display:block;font-size:14px;font-weight:500;color:#1D1D1F;margin-bottom:6px}
.ms-form-reprise label span{color:#C00000}
.ms-form-reprise p{margin:0 0 16px}
.ms-form-reprise input[type=text],
.ms-form-reprise input[type=tel],
.ms-form-reprise input[type=email],
.ms-form-reprise select,
.ms-form-reprise textarea{
  width:100%;box-sizing:border-box;padding:11px 14px;
  border:1px solid #E5E5E7;border-radius:12px;background:#fff;
  font-size:15px;color:#1D1D1F;transition:border-color .18s ease}
.ms-form-reprise input:focus,.ms-form-reprise select:focus,.ms-form-reprise textarea:focus{
  border-color:var(--theme-palette-color-1,#0066CC);outline:none}
.ms-form-reprise textarea{resize:vertical;min-height:110px}

/* deux champs par ligne sur ordinateur, empiles sur telephone */
.ms-form__duo{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.ms-form__trio{display:grid;grid-template-columns:repeat(3,1fr);gap:0 12px}
.ms-form__aide{font-size:14px;font-weight:500;color:#1D1D1F;margin-bottom:8px !important}
.ms-form__aide em{color:#6E6E73;font-weight:400}
.ms-form-reprise input[type=file]{width:100%;font-size:13px;color:#6E6E73}

.ms-form__accord{font-size:14px;color:#6E6E73;line-height:1.5}
.ms-form__accord .wpcf7-list-item{margin:0}

.ms-form__envoi{
  width:100%;padding:13px 24px;border:0;border-radius:980px;
  background:var(--theme-palette-color-1,#0066CC);color:#fff;
  font-size:15px;font-weight:500;cursor:pointer;transition:background-color .18s ease}
.ms-form__envoi:hover{background:var(--theme-palette-color-2,#0055AA)}

.ms-form__mention{font-size:13px;color:#6E6E73;line-height:1.5;margin-top:14px !important}

@media (max-width:768px){
  .ms-form__duo,.ms-form__trio{grid-template-columns:1fr}
}

/* ==================================================================
   Cartes produit — mise en forme commune a toutes les grilles

   La troncature du titre et le cadre carre de la vignette n existaient
   que pour les deux rangees de la page d accueil, cibles par leur
   identifiant Elementor. La boutique, les categories et les resultats
   de recherche n en beneficiaient pas : titres sur quatre ou cinq
   lignes, vignettes de hauteurs differentes, prix desalignes.
   Ces regles s appliquent a toute grille WooCommerce ; celles de la
   page d accueil, plus specifiques, gardent la main la ou elles.
   ================================================================== */

/* --- vignette : cadre carre, image entiere, jamais rognee --- */
ul.products li.product > figure {
  margin: 0 0 12px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
ul.products li.product > figure .ct-media-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
ul.products li.product > figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --- titre : deux lignes exactement, coupe aux points de suspension ---
   Une hauteur fixe plutot qu un minimum : sans plafond, un titre long
   repousse le prix et le bouton, et les deux colonnes se decalent. --- */
ul.products li.product .woocommerce-loop-product__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 2.7em;
  min-height: 2.7em;
  margin: 0 0 8px;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
}

/* --- prix et bouton : colles en bas, quelle que soit la hauteur --- */
ul.products li.product .ct-woo-card-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  text-align: center;
}
ul.products li.product .ct-woo-card-actions .price {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: #1D1D1F;
}

/* --- deux colonnes sur telephone : on resserre --- */
@media (max-width: 689px) {
  ul.products li.product .woocommerce-loop-product__title {
    font-size: 13px;
    height: 2.6em;
    min-height: 2.6em;
    margin-bottom: 6px;
  }
  ul.products li.product .ct-woo-card-actions .price { font-size: 14px; }
  ul.products li.product > figure { margin-bottom: 10px; }
  ul.products li.product .button { font-size: 12px !important; padding: 10px 12px !important; }
}

/* ==================================================================
   Ordre des elements dans la carte produit

   Blocksy attribue un ordre a chaque partie de la carte : figure 1,
   titre 2, bloc prix/bouton 0. Tant que la carte etait en display
   block, cet ordre restait dormant et le navigateur suivait le HTML.
   En passant la carte en flex le 19 aout pour coller le bouton en bas,
   j ai reveille ces valeurs : le bloc prix/bouton, a l ordre 0, est
   remonte au-dessus de l image. Mesure en console : figure order 1,
   h2 order 2, ct-woo-card-actions order 0.
   On fixe donc l ordre explicitement.
   ================================================================== */

ul.products li.product > figure { order: 1; }
ul.products li.product > .woocommerce-loop-product__title { order: 2; }
ul.products li.product > .ct-woo-card-actions { order: 3; }
ul.products li.product > .ct-woo-card-actions ~ * { order: 4; }