/*
Theme Name:   Carkeys
Theme URI:    https://carkeys.fr
Description:  Thème enfant Divi pour Carkeys. Accueille les surcharges de gabarits et les styles propres au thème. Les composants métier (recherche par véhicule, options produit, accès B2B) restent dans l'extension carkeys-core.
Author:       Agence Blow'Up
Author URI:   https://agenceblowup.fr
Template:     Divi
Version:      1.1.3
Text Domain:  carkeys-child
*/

/* --------------------------------------------------------------------------
   Les couleurs et tailles proviennent du design system Divi (Variables).
   Ne pas coder de valeur en dur : passer par les variables ci-dessous, qui
   sont injectées dans :root par Divi. Les valeurs après la virgule ne sont
   que des filets de sécurité si une variable venait à être supprimée.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   1. Cartes produit (grille boutique, catégorie, « Derniers produits »)

   WooCommerce et Divi rendent les vignettes sans conteneur visible.
   La maquette demande une carte blanche bordée de noir, à coins arrondis,
   contenu centré. On stylise donc la sortie native plutôt que de la
   remplacer, pour rester compatible avec les mises à jour.
   -------------------------------------------------------------------------- */

.et_pb_shop ul.products li.product,
.et_pb_wc_related_products ul.products li.product,
.et_pb_wc_upsells ul.products li.product,
.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	padding: 22px 20px 26px;
	border: 1px solid var(--gcid-ck-noir, #000);
	border-radius: var(--gvid-ck-radius, 10px);
	background: var(--gcid-ck-blanc, #fff);
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.et_pb_shop ul.products li.product:hover,
.et_pb_wc_related_products ul.products li.product:hover,
.et_pb_wc_upsells ul.products li.product:hover,
.woocommerce ul.products li.product:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.et_pb_shop ul.products li.product .et_shop_image,
.et_pb_wc_related_products ul.products li.product .et_shop_image,
.et_pb_wc_upsells ul.products li.product .et_shop_image,
.woocommerce ul.products li.product .et_shop_image {
	display: block;
	overflow: hidden;
	border-radius: var(--gvid-ck-radius, 10px);
}

.et_pb_shop ul.products li.product img,
.et_pb_wc_related_products ul.products li.product img,
.et_pb_wc_upsells ul.products li.product img,
.woocommerce ul.products li.product img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

.et_pb_shop ul.products li.product .woocommerce-loop-product__title,
.et_pb_wc_related_products ul.products li.product .woocommerce-loop-product__title,
.et_pb_wc_upsells ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding: 20px 0 0;
	text-align: center;
	text-wrap: balance;
}

.et_pb_shop ul.products li.product .price,
.et_pb_wc_related_products ul.products li.product .price,
.et_pb_wc_upsells ul.products li.product .price,
.woocommerce ul.products li.product .price {
	display: block;
	margin-top: auto;
	padding-top: 14px;
	text-align: center;
}

/*
   Message « Tarif réservé aux professionnels » (extension carkeys-core) :
   dans une carte, il tient la place du prix. On retire la pastille, inutile
   répétée sur toute une grille, et on centre le texte sur ses deux lignes.
*/
.et_pb_shop ul.products li.product .carkeys-locked-price a,
.et_pb_wc_related_products ul.products li.product .carkeys-locked-price a,
.et_pb_wc_upsells ul.products li.product .carkeys-locked-price a,
.woocommerce ul.products li.product .carkeys-locked-price a {
	display: block;
	padding: 0;
	background: none;
	text-align: center;
	color: var(--gcid-ck-secondaire, #6c757d);
}

.et_pb_shop ul.products li.product .carkeys-locked-price a:hover,
.et_pb_wc_related_products ul.products li.product .carkeys-locked-price a:hover,
.et_pb_wc_upsells ul.products li.product .carkeys-locked-price a:hover,
.woocommerce ul.products li.product .carkeys-locked-price a:hover {
	color: var(--gcid-ck-noir, #000);
	text-decoration: underline;
}

/* Les cartes d'une même ligne gardent la même hauteur. */
.et_pb_shop ul.products,
.et_pb_wc_related_products ul.products,
.et_pb_wc_upsells ul.products {
	align-items: stretch;
}

/* --------------------------------------------------------------------------
   2. Accessibilité — visibilité du focus clavier

   Divi retire l'outline par défaut sur plusieurs éléments interactifs.
   On le rétablit avec la couleur d'accent de la marque.
   -------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--gcid-ck-jaune, #ffdf02);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. Formulaire de contact — message d'erreur / de confirmation

   Divi n'applique aucune couleur à ce message : il hérite du texte noir et
   devient illisible sur une section sombre. On le pose dans un encart clair,
   lisible quel que soit le fond de la section.
   -------------------------------------------------------------------------- */

.et_pb_contact_form_container .et-pb-contact-message:not(:empty) {
	margin-bottom: 20px;
	padding: 14px 18px;
	border-left: 4px solid var(--gcid-ck-jaune, #ffdf02);
	border-radius: var(--gvid-ck-radius-champ, 6px);
	background-color: var(--gcid-ck-blanc, #fff);
	color: var(--gcid-ck-noir, #000);
}

.et_pb_contact_form_container .et-pb-contact-message p,
.et_pb_contact_form_container .et-pb-contact-message ul {
	margin: 0;
	padding-bottom: 0;
	color: inherit;
}

.et_pb_contact_form_container .et-pb-contact-message ul {
	margin-top: 6px;
	padding-left: 1.2em;
}

.et_pb_contact_form_container .et-pb-contact-message ul:empty {
	display: none;
}

/* --------------------------------------------------------------------------
   4. Fiche produit — tableau des caractéristiques

   Ni WooCommerce ni Divi n'alignent les cellules : le libellé (<th>) est
   centré par défaut. La maquette aligne libellés et valeurs sur l'axe
   central du tableau : libellé à droite, valeur à gauche.
   -------------------------------------------------------------------------- */

.et_pb_wc_additional_info .woocommerce-product-attributes th {
	text-align: right;
}

.et_pb_wc_additional_info .woocommerce-product-attributes td {
	text-align: left;
}

/* --------------------------------------------------------------------------
   5. Impression — retire le chrome non imprimable des fiches produit
   -------------------------------------------------------------------------- */

@media print {
	.et-l--header,
	.et-l--footer,
	.carkeys-vs,
	.carkeys-access-gate,
	.et_pb_wc_add_to_cart {
		display: none !important;
	}

	.et_pb_section {
		padding: 0 !important;
		background: none !important;
	}
}