/*
 * CAVOUS – Boutique : correctifs d'affichage mesurés (audit responsive du 15/10/2026,
 * 8 largeurs de 320 à 1920 px). Couleurs et polices restent celles du site.
 *
 * Les sélecteurs visent les modèles Elementor existants par leur identifiant :
 *   #7141 en-tête (Elementor Header & Footer) ; #9877 modèle ShopEngine des catégories.
 * Si un de ces blocs est supprimé dans Elementor, la règle correspondante ne s'applique plus,
 * sans autre effet.
 */

/* =========================================================================================
 * 1. En-tête
 * ====================================================================================== */

/* Tablette (768–1024 px) : la colonne du panier (7 % de la largeur, 51 px) était plus étroite
   que le bouton « 0,00 € » (117 px) : il dépassait et toute la page défilait à l'horizontale.
   La colonne du panier prend la place dont elle a besoin, le menu le reste. */
@media (min-width: 768px) and (max-width: 1024px) {
	body .elementor-7141 .elementor-element.elementor-element-3f65902 {
		--width: auto;
		flex: 0 0 auto;
	}

	body .elementor-7141 .elementor-element.elementor-element-5297c61 {
		--width: auto;
		flex: 1 1 auto;
		min-width: 0;
	}
}

/* Téléphone : logo, menu et panier étaient empilés sur 342 px de haut (40 % du premier écran
   d'un téléphone de 844 px). Ils tiennent désormais sur une ligne : logo à gauche, panier et
   menu à droite. */
@media (max-width: 767px) {
	body .elementor-7141 .elementor-element.elementor-element-20ccc35 > .e-con-inner {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		gap: 8px;
		padding-top: 6px;
		padding-bottom: 6px;
	}

	body .elementor-7141 .elementor-element.elementor-element-7c297ca,
	body .elementor-7141 .elementor-element.elementor-element-5297c61,
	body .elementor-7141 .elementor-element.elementor-element-3f65902 {
		--width: auto;
		--padding-top: 0px;
		--padding-right: 0px;
		--padding-bottom: 0px;
		--padding-left: 0px;
		flex: 0 0 auto;
		width: auto;
		padding: 0;
	}

	body .elementor-7141 .elementor-element.elementor-element-7c297ca {
		order: 1;
		align-items: flex-start;
	}

	body .elementor-7141 .elementor-element.elementor-element-3f65902 {
		order: 2;
		margin-left: auto;
	}

	/* La colonne du menu prenait la largeur de tout le menu replié (713 px) et poussait le
	   bouton hors de l'écran : elle est ramenée à la taille du bouton. Le menu déroulant reste
	   en pleine largeur (position calculée par Elementor Header & Footer à l'ouverture). */
	body .elementor-7141 .elementor-element.elementor-element-5297c61 {
		order: 3;
		flex: 0 0 44px;
		width: 44px;
		--width: 44px;
	}

	body .elementor-7141 .elementor-element.elementor-element-ef7675f,
	body .elementor-7141 .elementor-element.elementor-element-ef7675f > .elementor-widget-container,
	body .elementor-7141 .elementor-element.elementor-element-ef7675f > .elementor-widget-container > div.hfe-nav-menu {
		width: 44px;
		max-width: 44px;
	}

	/* Menu fermé : sa liste, invisible mais présente, dépassait de l'écran à droite. On la
	   rogne (pas de « display: none », qui fausserait le calcul de position à l'ouverture). */
	body .elementor-7141 .elementor-element.elementor-element-ef7675f nav.hfe-dropdown:not(.menu-is-active) {
		overflow: hidden;
	}

	body .elementor-7141 .elementor-element.elementor-element-2bb2621 {
		--container-widget-width: 64px;
		width: 64px;
		max-width: 64px;
	}

	body .elementor-7141 .elementor-element.elementor-element-2bb2621 img {
		display: block;
		width: 64px;
		height: 64px;
	}

	/* Lien du logo en bloc : en ligne, il ajoutait l'interligne sous l'image (en-tête de 76 px
	   qui passait à 82 px une fois les polices chargées, petit saut de toute la page). */
	body .elementor-7141 .elementor-element.elementor-element-2bb2621 a {
		display: block;
		line-height: 0;
	}

	body .elementor-7141 .elementor-element.elementor-element-20ccc35 > .e-con-inner {
		min-height: 76px;
	}

	body .elementor-7141 .elementor-element.elementor-element-911a275 .elementor-button {
		min-height: 44px;
		padding: 10px 14px;
	}
}

/* Très petits écrans (moins de 360 px) : le montant du panier laisse la place à l'icône. */
@media (max-width: 359px) {
	body .elementor-7141 .elementor-element.elementor-element-911a275 .elementor-button-text {
		display: none;
	}
}

/* =========================================================================================
 * 2. Pages de catégories (modèle ShopEngine #9877)
 * ====================================================================================== */

/* Fil d'Ariane de WooCommerce (code court [cavous_fil_ariane]). */
.cavous-fil-ariane {
	font-size: 0.875em;
	line-height: 1.5;
}

.cavous-fil-ariane a {
	display: inline-block;
	padding: 10px 0;
}

/* Ordinateur : les deux colonnes (16,2 % + 87 %) dépassaient le conteneur de 37 px, la grille
   ne s'alignait plus sur l'en-tête. La colonne des produits prend la place restante. */
@media (min-width: 1025px) {
	body .elementor-9877 .elementor-element.elementor-element-c5dc0ff {
		--width: auto;
		flex: 1 1 0;
		min-width: 0;
	}
}

/* Tablette et téléphone : la colonne des catégories restait à côté des produits et se réduisait
   à 50 px de large (textes coupés, chevauchements, défilement horizontal à 768 et 1024 px).
   Elle passe au-dessus des produits, en pastilles compactes. */
@media (max-width: 1024px) {
	body .elementor-9877 .elementor-element.elementor-element-72a1a20 {
		--flex-direction: column;
		--flex-wrap: nowrap;
	}

	body .elementor-9877 .elementor-element.elementor-element-72a1a20 > .e-con-inner {
		flex-direction: column;
		flex-wrap: nowrap;
	}

	body .elementor-9877 .elementor-element.elementor-element-a6f9791,
	body .elementor-9877 .elementor-element.elementor-element-c5dc0ff {
		--width: 100%;
		width: 100%;
		max-width: 100%;
		flex: 0 0 auto;
	}

	body .elementor-9877 .elementor-element.elementor-element-9f01fe9 .shopengine-product-category-lists .shopengine-category-lists-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	body .elementor-9877 .elementor-element.elementor-element-9f01fe9 .shopengine-product-category-lists .single-cat-list-item {
		padding: 0;
	}

	body .elementor-9877 .elementor-element.elementor-element-9f01fe9 .shopengine-product-category-lists .single-product-category a {
		display: flex;
		align-items: baseline;
		gap: 6px;
		min-height: 44px;
		padding: 10px 14px;
		box-sizing: border-box;
	}

	body .elementor-9877 .elementor-element.elementor-element-9f01fe9 .shopengine-product-category-lists .product-category-title {
		margin: 0;
		font-size: 15px;
		line-height: 1.3;
	}

	body .elementor-9877 .elementor-element.elementor-element-9f01fe9 .shopengine-product-category-lists .cat-count {
		margin: 0;
		font-size: 13px;
		line-height: 1.3;
	}
}

/* =========================================================================================
 * 3. Vignettes des produits (catégories, boutique, accueil)
 * ====================================================================================== */

/* Photo entière au format portrait 3:4 (format de 63 photos principales sur 78), sans
   recadrage : les rares photos d'un autre format gardent leurs proportions sur fond neutre. */
.woocommerce ul.products li.product img.cavous-vignette,
.woocommerce-page ul.products li.product img.cavous-vignette,
ul.products li.product img.cavous-vignette {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: contain;
	background: #f6f6f6;
}

/* ShopEngine réservait 55 px vides sous chaque photo (pour des boutons au survol, désactivés
   sur ce site). */
body .shopengine-widget .shopengine-grid ul.products li.product img.cavous-vignette {
	margin-bottom: 14px !important;
}

/* Boutons sous la vignette : cibles tactiles de 40 px au lieu de 25 × 15 px, libellés
   homogènes (« Ajouter au panier » / « Choix des options »). */
body .shopengine-widget .shopengine-product-description-btn-group {
	gap: 4px;
}

body .shopengine-widget .shopengine-product-description-btn-group .se-btn,
.woocommerce ul.products li.product .se-btn,
.woocommerce ul.products li.product .shopengine-wishlist,
.woocommerce ul.products li.product .shopengine-comparison {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0;
	margin: 0;
}

body .shopengine-widget .shopengine-product-description-btn-group a.button {
	min-height: 40px;
	text-transform: none;
	font-size: 14px;
	line-height: 1.3;
}

@media (max-width: 767px) {
	body .shopengine-widget .shopengine-product-description-btn-group a.button {
		order: 5;
		flex: 1 1 100%;
		text-align: center;
		padding-left: 8px;
		padding-right: 8px;
	}
}

/* Tri des produits : 16 px minimum sur téléphone, sinon l'iPhone zoome à la sélection. */
@media (max-width: 767px) {
	.woocommerce-ordering select.orderby {
		font-size: 16px;
	}
}

/* =========================================================================================
 * 4. Pied de page
 * ====================================================================================== */

/* Coordonnées et liens légaux : 11,7 px sur téléphone (sous le seuil de lisibilité) et liens
   de 19 px de haut. */
@media (max-width: 767px) {
	body .elementor .elementor-element.elementor-element-34086133 .elementor-icon-list-items .elementor-icon-list-item .elementor-icon-list-text,
	body .elementor .elementor-element.elementor-element-660ebcbc .elementor-icon-list-items .elementor-icon-list-item .elementor-icon-list-text {
		font-size: 14px;
	}

	body .elementor .elementor-element.elementor-element-34086133 .elementor-icon-list-items .elementor-icon-list-item > a,
	body .elementor .elementor-element.elementor-element-660ebcbc .elementor-icon-list-items .elementor-icon-list-item > a {
		min-height: 40px;
		align-items: center;
	}
}