/* ============================================================
   PetEnrichment — identité par-dessus le skin Bella (Pawsitive)
   Palette : crème #FAF7F2 · ardoise #22303A · orange #E86A33 · vert #3E7C59
   Signature : arche sur les cards produits · boutons pill
   ============================================================ */

/* --- Arche sur les images des cards produits (grilles boutique) --- */
.products li.product > a > img,
.products li.product img {
	border-radius: 999px 999px 24px 24px;
	-o-object-fit: cover;
	   object-fit: cover;
	transition: transform .2s ease, box-shadow .2s ease;
}

/* Hover lift + ombre douce */
.products li.product:hover img {
	transform: translateY(-4px);
	box-shadow: 0 14px 30px rgba(34, 48, 58, .16);
}

/* Arche aussi sur les cards du builder (single product démo) */
.bt_bb_card .bt_bb_card_image img {
	border-radius: 999px 999px 24px 24px;
	-o-object-fit: cover;
	   object-fit: cover;
}

/* --- Boutons pill (renfort si le skin ne suffit pas) --- */
.btLink, .bt_bb_button.bt_bb_style_filled a,
.bt_bb_button.bt_bb_style_outline a,
button, .button, input[type="submit"],
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt {
	border-radius: 999px !important;
}

/* --- Focus visible (accessibilité) --- */
a:focus-visible, button:focus-visible, input:focus-visible {
	outline: 3px solid #e86a33;
	outline-offset: 2px;
}

/* ============================================================
   Bloc D2 — CLS 0,630 → correction de la CAUSE RACINE (2026-09-28)

   MESURÉ (ops/phase6/cls-timeline.py) : UN SEUL layout-shift de 0,630.
   La 1re section (hero) passe de h=56 à h=650 entre 5783 et 5803 ms.
   Pas un problème de thème : le hero est un `bt_bb_content_slider` en
   `bt_bb_height_keep-height`, dont les 2 slides sont des
   `background-image` (hero_home_shop_01/02.jpg, 1920x1280) SANS aucune
   hauteur déclarée. Slick ne peut donc connaître la hauteur qu'après
   l'init JavaScript → le contenu arrive sous le pli et pousse tout le bas.
   Pire : le thème a une animation `bt_bb_animation_fade_in` qui retarde
   encore l'apparition.

   Le correctif est de RÉSERVER la hauteur (aspect-ratio), pas de toucher
   aux marges du builder — c'était la piste précédente, fausse (voir bloc 1).

   On cible uniquement les sliders EN FOND, pas ceux qui portent une image
   <img> (eux, leur ratio vient de l'image). */
@media (max-width: 768px) {
	.bt_bb_content_slider.bt_bb_height_keep-height .slick-list,
	.bt_bb_content_slider.bt_bb_height_keep-height .slick-track,
	.bt_bb_content_slider.bt_bb_height_keep-height .slick-slide {
		/* 1920x1280 → ratio 1.5. Sur mobile on garde la proportion pour
		   réserver la place AVANT l'init de slick, pas de bond de layout. */
		aspect-ratio: 3 / 2;
		min-height: 0;
	}
	.bt_bb_content_slider.bt_bb_height_keep-height .slick-slide > div {
		height: 100%;
	}
}

/* --- Respect de prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
	.products li.product, .products li.product img,
	.bt_bb_card .bt_bb_card_image img { transition: none; }
	.products li.product:hover img { transform: none; }
}