/*
Theme Name: HP eStore CI
Theme URI: https://www.hp.arielekow.com
Description: Theme enfant Blocksy pour la boutique HP Experience Store (Cote d'Ivoire).
Author: Smart Corporation
Template: blocksy
Version: 1.0.0
Text Domain: hp-estore-ci
*/

/* ---------------------------------------------------------------
   Jetons de la direction "HP eStore CI"
   Les couleurs et la typographie viennent du Customizer Blocksy.
   Ce fichier ne porte que ce que Blocksy n'expose pas nativement.
   --------------------------------------------------------------- */

:root {
	--hp-ink: var(--theme-palette-color-3);
	--hp-muted: #5B5B5F;
	--hp-border: var(--theme-palette-color-5);
	--hp-surface: var(--theme-palette-color-6);
	--hp-accent: var(--theme-palette-color-1);
	--hp-promo: #C8102E;
	--hp-radius: 8px;
}

/* Rayon unique : 8px partout, sans exception. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
select,
textarea,
.ct-search-form input[type="search"] {
	border-radius: var(--hp-radius);
}

#search-modal .ct-search-form {
	--theme-form-border-radius: var(--hp-radius);
}

/* Focus : anneau bleu 2px, jamais une ombre diffuse. */
input:focus,
select:focus,
textarea:focus {
	outline: 2px solid var(--hp-accent);
	outline-offset: 1px;
	box-shadow: none;
}

/* Cartes produit : filet, pas d'ombre. */
.woocommerce ul.products li.product,
.ct-woo-card-actions,
.entry-card {
	box-shadow: none;
}

/* ---------------------------------------------------------------
   Bloc prix : barre, actuel, economie, pourcentage.
   L'ordre et les couleurs sont fixes par la direction.
   --------------------------------------------------------------- */

.woocommerce div.product p.price del,
.woocommerce ul.products li.product .price del {
	color: var(--hp-muted);
	opacity: 1;
	font-weight: 400;
}

.woocommerce div.product p.price ins,
.woocommerce ul.products li.product .price ins {
	color: var(--hp-ink);
	text-decoration: none;
	font-weight: 600;
}

.hp-saving {
	color: var(--hp-promo);
	font-weight: 600;
	font-size: 14px;
	display: block;
	margin-top: 4px;
}

/* ---------------------------------------------------------------
   Barre de reassurance
   --------------------------------------------------------------- */

.hp-trust {
	background: var(--hp-surface);
	border-top: 1px solid var(--hp-border);
	border-bottom: 1px solid var(--hp-border);
}

.hp-trust__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	margin: 0;
	padding: 24px 0;
	list-style: none;
}

.hp-trust__item {
	font-size: 14px;
	color: var(--hp-ink);
}

@media (max-width: 767px) {
	.hp-trust__list {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
}

/* Le prix n'emprunte jamais le bleu d'action. */
.woocommerce .price {
	color: var(--hp-ink);
}

/* Le mega-menu est un dispositif desktop : ces regles ne doivent pas
   atteindre le panneau mobile, ou elles coloraient en bleu les seules
   entrees pourvues d'un sous-menu. */
@media (min-width: 1025px) {
	/* ---------------------------------------------------------------
	   Mega-menu : colonnes inspirees de HP.com.
	   Colonnes 1 et 2 sur blanc, colonne services sur #F5F5F7 pleine
	   hauteur. Aucune ombre : le panneau est separe par un filet.
	   --------------------------------------------------------------- */

	[class*="ct-mega-menu-columns"] > .sub-menu {
		padding: 40px 0 0;
		border-top: 1px solid var(--hp-border);
		box-shadow: none;
		border-radius: 0;
		background: var(--theme-palette-color-8);
		column-gap: 0;
		align-items: stretch;
	}

	[class*="ct-mega-menu-columns"] > .sub-menu > li {
		padding: 0 40px 40px;
		display: flex;
		flex-direction: column;
	}

	[class*="ct-mega-menu-columns"] > .sub-menu > li.hp-col-grey {
		background: var(--hp-surface);
		margin-top: -40px;
		padding-top: 40px;
	}

	[class*="ct-mega-menu-columns"] > .sub-menu > li.hp-col-title > .ct-sub-menu-parent > .ct-menu-link {
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.09em;
		text-transform: uppercase;
		--theme-link-initial-color: var(--hp-muted);
		--theme-link-hover-color: var(--hp-muted);
		color: var(--hp-muted);
		padding: 0 0 20px;
		cursor: default;
	}

	[class*="ct-mega-menu-columns"] > .sub-menu > li.hp-col-grey > .ct-sub-menu-parent {
		display: none;
	}

	[class*="ct-mega-menu-columns"] > .sub-menu .sub-menu .ct-menu-link {
		font-size: 16px;
		line-height: 1.35;
		--theme-link-initial-color: var(--hp-ink);
		color: var(--hp-ink);
		padding: 10px 0;
	}

	[class*="ct-mega-menu-columns"] > .sub-menu .sub-menu .ct-menu-link:hover {
		--theme-link-hover-color: var(--hp-accent);
		color: var(--hp-accent);
	}

	[class*="ct-mega-menu-columns"] li.hp-cta {
		margin-top: auto;
		padding-top: 24px;
	}

	[class*="ct-mega-menu-columns"] li.hp-cta .ct-menu-link {
		--theme-link-initial-color: var(--hp-accent);
		color: var(--hp-accent);
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 0.07em;
		text-transform: uppercase;
	}

	/* Indicateur bleu sous l'entree active. */
	[data-row="bottom"] nav > ul > li > .ct-sub-menu-parent > .ct-menu-link,
	[data-row="bottom"] nav > ul > li > .ct-menu-link {
		position: relative;
	}

	[data-row="bottom"] nav > ul > li > .ct-sub-menu-parent > .ct-menu-link::after,
	[data-row="bottom"] nav > ul > li > .ct-menu-link::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 3px;
		background: var(--hp-accent);
		opacity: 0;
		transition: opacity 0.15s;
	}

	[data-row="bottom"] nav > ul > li:hover > .ct-sub-menu-parent > .ct-menu-link::after,
	[data-row="bottom"] nav > ul > li:hover > .ct-menu-link::after,
	[data-row="bottom"] nav > ul > li.current-menu-item > .ct-menu-link::after {
		opacity: 1;
	}

	@media (max-width: 1024px) {
		[class*="ct-mega-menu-columns"] > .sub-menu > li,
		[class*="ct-mega-menu-columns"] > .sub-menu > li.hp-col-grey {
			padding: 0 20px 20px;
			margin-top: 0;
			background: none;
		}
	}


}

/* ---------------------------------------------------------------
   Carte produit : filet, pas d'ombre, visuel plein cadre,
   specifications visibles des la liste (trait signature HP.com).
   --------------------------------------------------------------- */

.woocommerce ul.products li.product {
	border: 1px solid var(--hp-border);
	border-radius: var(--hp-radius);
	box-shadow: none;
	background: var(--theme-palette-color-8);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.woocommerce ul.products li.product .ct-media-container,
.woocommerce ul.products li.product .woocommerce-loop-product__link {
	border-radius: 0;
}

.woocommerce ul.products li.product > *:not(.ct-media-container):not(.ct-woo-card-figure) {
	padding-left: 20px;
	padding-right: 20px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 15px;
	line-height: 1.35;
	font-weight: 500;
	margin-top: 16px;
}

/* Titre : deux lignes maximum, pour que les cartes s'alignent. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.7em;
}

/* Specifications cles : hauteur libre. La marge basse automatique
   repousse prix et bouton en pied de carte : ils s'alignent sur la
   rangee sans reserver un bloc vide aux produits peu decrits. */
.hp-card-specs {
	list-style: none;
	margin: 10px 0 auto;
	padding: 0 20px 12px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--hp-muted);
}

.hp-card-specs:empty {
	padding-bottom: 0;
}

.hp-card-specs li {
	margin: 0;
	color: var(--hp-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Disponibilite */
.hp-availability {
	margin: 10px 0 0;
	padding-left: 20px;
	padding-right: 20px;
	font-size: 13px;
	font-weight: 500;
}

.hp-availability--in { color: #1B7A43; }
.hp-availability--out { color: var(--hp-muted); }

/* Bloc prix */
.woocommerce ul.products li.product .price {
	margin-top: 8px;
	font-size: 20px;
	font-weight: 600;
	color: var(--hp-ink);
}

.woocommerce ul.products li.product .price del {
	font-size: 14px;
	font-weight: 400;
	color: var(--hp-muted);
	display: block;
}

.woocommerce ul.products li.product .hp-saving {
	padding-left: 20px;
	padding-right: 20px;
}

/* Actions : collees au prix, pas repoussees en bas de carte. */
.woocommerce ul.products li.product .button {
	margin-top: 16px;
	margin-bottom: 20px;
	align-self: flex-start;
}

/* Produit indisponible : contour encre, jamais le bleu d'achat. */
.woocommerce ul.products li.product .button.hp-button-outline {
	--theme-button-background-initial-color: transparent;
	--theme-button-background-hover-color: var(--hp-surface);
	--theme-button-text-initial-color: var(--hp-ink);
	--theme-button-text-hover-color: var(--hp-ink);
	box-shadow: inset 0 0 0 1px var(--hp-ink);
}

/* Fiche produit : l'economie se lit sous le prix. */
.single-product .hp-saving {
	font-size: 15px;
	margin-bottom: 8px;
}

/* ---------------------------------------------------------------
   Fiche produit
   --------------------------------------------------------------- */

/* Delai de livraison : l'information la plus demandee apres le prix. */
.hp-delivery {
	margin: 16px 0 0;
	font-size: 15px;
	color: var(--hp-ink);
}

/* Reassurance sous le bouton d'achat. */
.hp-trust-list {
	list-style: none;
	margin: 20px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--hp-border);
	font-size: 14px;
	color: var(--hp-muted);
}

.hp-trust-list li {
	margin: 0 0 8px;
	padding-left: 22px;
	position: relative;
}

.hp-trust-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--hp-accent);
}

/* Presentation generale : grille de caracteristiques cles, posee
   entre le resume d'achat et les onglets. */
.hp-overview {
	margin: 56px 0;
	padding: 40px;
	background: var(--hp-surface);
	border-radius: var(--hp-radius);
}

.hp-overview__title {
	font-size: 22px;
	font-weight: 600;
	margin: 0 0 28px;
	color: var(--hp-ink);
}

.hp-overview__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--hp-border);
	border: 1px solid var(--hp-border);
	border-radius: var(--hp-radius);
	overflow: hidden;
	margin: 0;
}

.hp-overview__cell {
	background: var(--theme-palette-color-8);
	padding: 20px 24px;
}

.hp-overview__cell dt {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hp-muted);
	margin: 0 0 8px;
}

.hp-overview__cell dd {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	color: var(--hp-ink);
}

.hp-overview__link {
	display: inline-block;
	margin-top: 24px;
	color: var(--hp-accent);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

@media (max-width: 767px) {
	.hp-overview {
		padding: 24px 20px;
		margin: 32px 0;
	}

	.hp-overview__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.hp-overview__grid {
		grid-template-columns: 1fr;
	}
}

/* Tableau des caracteristiques completes, dans l'onglet. */
.woocommerce-product-attributes {
	width: 100%;
	border-collapse: collapse;
}

.woocommerce-product-attributes th,
.woocommerce-product-attributes td {
	padding: 14px 16px;
	border-bottom: 1px solid var(--hp-border);
	text-align: left;
	font-size: 15px;
}

.woocommerce-product-attributes th {
	width: 34%;
	font-weight: 500;
	color: var(--hp-muted);
}

/* Prix : le bloc signature, dans l'ordre impose. */
.single-product .summary .price {
	font-size: 30px;
	font-weight: 600;
	color: var(--hp-ink);
}

.single-product .summary .price del {
	font-size: 18px;
	font-weight: 400;
	color: var(--hp-muted);
	display: block;
}


/* ---------------------------------------------------------------
   Facettes
   --------------------------------------------------------------- */

#sidebar .ct-filter-widget-wrapper {
	border-bottom: 1px solid var(--hp-border);
	padding-bottom: 20px;
	margin-bottom: 20px;
}

#sidebar .ct-filter-widget-wrapper:last-child {
	border-bottom: none;
}

#sidebar .widget-title,
#sidebar .ct-filter-widget-wrapper > .ct-module-title {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hp-muted);
	margin-bottom: 14px;
}

#sidebar .ct-filter-item {
	font-size: 14px;
	line-height: 1.5;
}

/* Le compteur est l'element qui rend une facette utilisable :
   il annonce le nombre de resultats avant le clic. */
#sidebar .ct-filter-count {
	color: var(--hp-muted);
	font-size: 13px;
}


/* ---------------------------------------------------------------
   Panier et paiement
   --------------------------------------------------------------- */

.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
	float: none;
	width: 100%;
}

.woocommerce-checkout h3 {
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 20px;
}

.woocommerce form .form-row label {
	font-size: 14px;
	font-weight: 500;
	color: var(--hp-ink);
	margin-bottom: 6px;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
	border: 1px solid var(--hp-border);
	border-radius: var(--hp-radius);
	padding: 12px 14px;
	font-size: 15px;
}

#billing_landmark_field .description,
#shipping_landmark_field .description {
	color: var(--hp-muted);
	font-size: 13px;
}

/* Recapitulatif de commande : encadre sobre, sans ombre. */
.woocommerce-checkout-review-order,
.cart_totals {
	border: 1px solid var(--hp-border);
	border-radius: var(--hp-radius);
	padding: 28px;
	background: var(--theme-palette-color-8);
}

.woocommerce-checkout-review-order-table {
	width: 100%;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	padding: 12px 0;
	border-bottom: 1px solid var(--hp-border);
	font-size: 15px;
}

.woocommerce-checkout-review-order-table .order-total td {
	font-size: 22px;
	font-weight: 600;
	color: var(--hp-ink);
}

/* Modes de paiement */
.woocommerce-checkout #payment {
	background: var(--hp-surface);
	border-radius: var(--hp-radius);
	padding: 20px;
}

.woocommerce-checkout #payment ul.payment_methods li {
	padding: 12px 0;
	border-bottom: 1px solid var(--hp-border);
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--theme-palette-color-8);
	border-radius: var(--hp-radius);
	font-size: 14px;
	color: var(--hp-muted);
}

.woocommerce-checkout #payment div.payment_box::before {
	display: none;
}

.hp-trust-list--cart {
	margin-top: 24px;
}


/* ---------------------------------------------------------------
   Carrousel d'accueil
   Quatre gabarits : lancement, gamme, offre, entreprise.
   --------------------------------------------------------------- */

.hp-hero-carousel .swiper-slide {
	height: auto;
}

.hp-slide {
	width: 100%;
}

/* Pagination : traits plutot que pastilles, pour accompagner la
   composition horizontale de la slide. */
.hp-hero-carousel .swiper-pagination-bullet {
	width: 28px;
	height: 3px;
	border-radius: 0;
	background: var(--hp-border);
	opacity: 1;
	transition: background 0.2s;
}

.hp-hero-carousel .swiper-pagination-bullet-active {
	background: var(--hp-accent);
}

/* Sur la slide encre, les traits doivent rester lisibles. */
.hp-hero-carousel .swiper-slide:has(.hp-slide--entreprise) ~ * .swiper-pagination-bullet {
	background: rgba(255, 255, 255, 0.3);
}

.hp-hero-carousel .elementor-swiper-button {
	color: var(--hp-ink);
	background: rgba(255, 255, 255, 0.9);
	width: 44px;
	height: 44px;
	border-radius: var(--hp-radius);
	border: 1px solid var(--hp-border);
}

.hp-hero-carousel .elementor-swiper-button:focus-visible {
	outline: 2px solid var(--hp-accent);
	outline-offset: 2px;
}

/* Le defilement automatique est une animation non sollicitee :
   on la coupe pour qui a demande moins de mouvement. */
@media (prefers-reduced-motion: reduce) {
	.hp-hero-carousel .swiper-wrapper {
		transition-duration: 0s !important;
	}
}

@media (max-width: 767px) {
	.hp-slide {
		text-align: left;
	}

	.hp-hero-carousel .elementor-swiper-button {
		display: none;
	}
}

.hp-slide--entreprise p {
	opacity: 0.85;
}

.hp-slide--entreprise .elementor-heading-title[class] {
	opacity: 0.75;
}

.hp-slide--entreprise h2.elementor-heading-title {
	opacity: 1;
}


/* ---------------------------------------------------------------
   Univers produits
   Composition asymetrique : deux cartes larges, puis trois.
   Chaque carte donne ses sous-categories et leur volume, pour que le
   visiteur sache ou il va avant de cliquer.
   --------------------------------------------------------------- */

.hp-univers {
	transition: border-color 0.15s;
}

.hp-univers:hover {
	border-color: var(--hp-ink);
}

.hp-univers .elementor-widget-image img {
	max-height: 150px;
	width: auto;
	object-fit: contain;
}

.hp-univers--large .elementor-widget-image img {
	max-height: 190px;
}

.hp-univers__count {
	margin: 0;
}

.hp-univers__links {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	border-top: 1px solid var(--hp-border);
}

.hp-univers__links li {
	margin: 0;
	border-bottom: 1px solid var(--hp-border);
}

.hp-univers__links a {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 10px 0;
	font-size: 15px;
	--theme-link-initial-color: var(--hp-ink);
	color: var(--hp-ink);
}

.hp-univers__links a:hover {
	--theme-link-hover-color: var(--hp-accent);
	color: var(--hp-accent);
}

/* Le volume se lit comme une donnee, pas comme un libelle. */
.hp-univers__links span {
	color: var(--hp-muted);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
	.hp-univers[class] {
		width: 100%;
	}
}


/* ---------------------------------------------------------------
   Blocs de conversion
   --------------------------------------------------------------- */

/* Raisons d'acheter.
   Quatre colonnes reellement egales : les largeurs en pourcentage
   d'Elementor s'additionnent aux gouttieres et provoquaient un retour
   a la ligne sur le quatrieme element. La grille est pilotee ici.
   Un filet haut plutot qu'un filet gauche : il suit la largeur de la
   colonne et donne une ligne horizontale continue a la section. */
.e-con.hp-raisons > .e-con-inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0 40px;
	align-items: start;
}

.e-con.hp-raisons > .e-con-inner {
	width: 100%;
}

.e-con .hp-raison {
	width: auto;
	border-top: 2px solid var(--hp-ink);
	padding: 22px 0 0;
	border-left: none;
	padding-left: 0;
}

.hp-raison .elementor-heading-title {
	margin-bottom: 2px;
}

/* Le premier bloc porte l'objection principale : il est marque par
   l'accent, les trois autres restent en encre. */
.hp-raison:first-child {
	border-top-color: var(--hp-accent);
}

@media (max-width: 1024px) {
	.e-con.hp-raisons > .e-con-inner {
		grid-template-columns: repeat(2, 1fr);
		gap: 36px 40px;
	}
}

@media (max-width: 767px) {
	.e-con.hp-raisons > .e-con-inner {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

/* FAQ */
.hp-faq .elementor-accordion .elementor-accordion-item {
	border-radius: var(--hp-radius);
	background: var(--theme-palette-color-8);
	margin-bottom: 8px;
	overflow: hidden;
}

.hp-faq .elementor-tab-title {
	padding: 18px 20px;
}

.hp-faq .elementor-tab-content {
	padding: 0 20px 20px;
	border-top: none;
}

.hp-faq .elementor-accordion-icon {
	font-size: 13px;
}

/* ---------------------------------------------------------------
   Contact direct
   Sur ce marche, une part des commandes se conclut par telephone.
   --------------------------------------------------------------- */

.hp-contact-float {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 60;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.hp-contact-float__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 18px;
	border-radius: var(--hp-radius);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	box-shadow: 0 6px 20px rgba(26, 26, 26, 0.16);
}

.hp-contact-float__btn--wa {
	background: #1FA855;
	--theme-link-initial-color: #FFFFFF;
	color: #FFFFFF;
}

.hp-contact-float__btn--tel {
	background: var(--theme-palette-color-8);
	border: 1px solid var(--hp-border);
	--theme-link-initial-color: var(--hp-ink);
	color: var(--hp-ink);
}

.hp-contact-float__btn:focus-visible {
	outline: 2px solid var(--hp-accent);
	outline-offset: 2px;
}

/* La barre d'ajout au panier occupe le bas de l'ecran sur la fiche
   produit : on remonte les boutons pour ne pas la recouvrir. */
.single-product .hp-contact-float {
	bottom: 88px;
}

@media (max-width: 767px) {
	.hp-contact-float {
		flex-direction: row;
		left: 16px;
		right: 16px;
	}

	.hp-contact-float__btn {
		flex: 1;
		justify-content: center;
	}
}


/* ---------------------------------------------------------------
   Bloc d'aide
   Quatre liens de meme largeur, marques d'un filet bleu en tete.
   La grille est pilotee ici : les largeurs en pourcentage d'Elementor
   s'additionnent aux gouttieres et cassent la rangee.
   --------------------------------------------------------------- */

.e-con.hp-aide > .e-con-inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	align-items: stretch;
}

.e-con.hp-aide > .e-con-inner {
	width: 100%;
}

.e-con .hp-aide__item {
	width: auto;
	padding: 0;
}

.hp-aide__item .elementor-widget-button,
.hp-aide__item .elementor-button-wrapper {
	height: 100%;
}

.hp-aide__item .elementor-button {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	text-align: left;
	border-top: 2px solid var(--hp-accent);
	border-right: 1px solid var(--hp-border);
	border-bottom: 1px solid var(--hp-border);
	border-left: 1px solid var(--hp-border);
	border-radius: var(--hp-radius);
	transition: border-color 0.15s;
}

.hp-aide__item .elementor-button:hover {
	border-right-color: var(--hp-accent);
	border-bottom-color: var(--hp-accent);
	border-left-color: var(--hp-accent);
}

@media (max-width: 1024px) {
	.e-con.hp-aide > .e-con-inner {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.e-con.hp-aide > .e-con-inner {
		grid-template-columns: 1fr;
	}
}


/* ---------------------------------------------------------------
   Page de devis : formulaire a gauche, deroulement a droite.
   --------------------------------------------------------------- */

.e-con.hp-devis > .e-con-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
	width: 100%;
}

.e-con .hp-devis__form,
.e-con .hp-devis__aside {
	width: auto;
}

.hp-devis__aside .elementor-widget-heading {
	margin-top: 18px;
}

.hp-devis__aside .elementor-widget-heading:first-child {
	margin-top: 0;
}

.hp-devis__tel {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--hp-border);
}

/* Les champs suivent le rayon et les filets de la charte. */
.hp-devis .elementor-field-group > label {
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 6px;
}

.hp-devis .elementor-field-textual {
	padding: 12px 14px;
	font-size: 15px;
}

.hp-devis .elementor-button[type="submit"] {
	padding: 14px 26px;
	font-size: 16px;
	font-weight: 500;
}

@media (max-width: 1024px) {
	.e-con.hp-devis > .e-con-inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}


/* ---------------------------------------------------------------
   Page assistance
   --------------------------------------------------------------- */

.e-con.hp-assist__cards > .e-con-inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	align-items: stretch;
	width: 100%;
}

.e-con .hp-assist__card {
	width: auto;
	border-top-color: var(--hp-accent);
	transition: border-color 0.15s;
}

.e-con .hp-assist__card:hover {
	border-right-color: var(--hp-accent);
	border-bottom-color: var(--hp-accent);
	border-left-color: var(--hp-accent);
}

.e-con.hp-assist__steps > .e-con-inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	align-items: start;
	width: 100%;
}

.e-con .hp-assist__step {
	width: auto;
	border-top: 2px solid var(--hp-ink);
	padding-top: 18px;
}

.e-con.hp-assist__two > .e-con-inner {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 48px;
	align-items: start;
	width: 100%;
}

.e-con .hp-assist__col {
	width: auto;
}

.hp-assist__col ul {
	margin: 12px 0 0;
	padding-left: 18px;
}

.hp-assist__col li {
	margin-bottom: 8px;
}

@media (max-width: 1024px) {
	.e-con.hp-assist__cards > .e-con-inner,
	.e-con.hp-assist__steps > .e-con-inner {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.e-con.hp-assist__cards > .e-con-inner,
	.e-con.hp-assist__steps > .e-con-inner,
	.e-con.hp-assist__two > .e-con-inner {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}


/* ---------------------------------------------------------------
   Guide d'achat
   Trois produits par profil, visuel en tete de carte.
   --------------------------------------------------------------- */

.e-con.hp-guide__cards > .e-con-inner {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	align-items: stretch;
	width: 100%;
}

.e-con .hp-guide__card {
	width: auto;
	transition: border-color 0.15s;
}

.e-con .hp-guide__card:hover {
	border-color: var(--hp-ink);
}

/* Les visuels produit n'ont pas tous le meme cadrage : une hauteur
   fixe et un ajustement en contain evitent les cartes en escalier. */
.hp-guide__card .elementor-widget-image img {
	height: 170px;
	width: 100%;
	object-fit: contain;
}

.hp-guide__card .elementor-widget-heading {
	margin-top: 10px;
}

.hp-guide__specs {
	margin: 0;
}

/* Le prix est cale en bas pour aligner les trois cartes. */
.hp-guide__card .elementor-widget-text-editor:last-child {
	margin-top: auto;
	padding-top: 10px;
}

.hp-guide__crit {
	margin-top: 4px;
	padding: 14px 16px;
	background: var(--theme-palette-color-8);
	border-left: 2px solid var(--hp-accent);
	border-radius: 0 var(--hp-radius) var(--hp-radius) 0;
}

@media (max-width: 1024px) {
	.e-con.hp-guide__cards > .e-con-inner {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.e-con.hp-guide__cards > .e-con-inner {
		grid-template-columns: 1fr;
	}
}


/* ---------------------------------------------------------------
   Assistance : structure reprise de support.hp.com
   --------------------------------------------------------------- */

.e-con.hpa-portes > .e-con-inner {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	align-items: stretch;
	width: 100%;
}

.e-con .hpa-porte {
	width: auto;
	border-top-color: var(--hp-accent);
	transition: border-color 0.15s;
}

.e-con .hpa-porte:hover {
	border-right-color: var(--hp-accent);
	border-bottom-color: var(--hp-accent);
	border-left-color: var(--hp-accent);
}

.hpa-porte .elementor-widget-image img {
	height: 140px;
	width: 100%;
	object-fit: contain;
}

/* Liens utilitaires : une rangee sobre sous les portes d'entree. */
.e-con.hpa-utiles > .e-con-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	width: 100%;
}

.hpa-utiles p {
	margin: 0;
}

.hpa-utiles a {
	--theme-link-initial-color: var(--hp-ink);
	color: var(--hp-ink);
	font-weight: 500;
	border-bottom: 1px solid var(--hp-accent);
	padding-bottom: 2px;
}

.hpa-utiles a:hover {
	--theme-link-hover-color: var(--hp-accent);
	color: var(--hp-accent);
}

/* Ou trouver le numero de serie */
.e-con.hpa-serie > .e-con-inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	align-items: start;
	width: 100%;
}

.e-con .hpa-serie__col {
	width: auto;
	border-top: 2px solid var(--hp-ink);
	padding-top: 16px;
}

/* Recherche catalogue */
.hpa-recherche .dgwt-wcas-search-wrapp {
	max-width: 620px;
}

/* Autres services */
.e-con.hpa-services > .e-con-inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
	align-items: start;
	width: 100%;
}

.e-con .hpa-service {
	width: auto;
	border-top: 1px solid var(--hp-border);
	padding-top: 18px;
}

.hpa-service__cta {
	margin: 0;
}

.hpa-service__cta a {
	--theme-link-initial-color: var(--hp-accent);
	color: var(--hp-accent);
}

@media (max-width: 1024px) {
	.e-con.hpa-serie > .e-con-inner,
	.e-con.hpa-services > .e-con-inner {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.e-con.hpa-portes > .e-con-inner {
		grid-template-columns: 1fr;
	}

	.e-con.hpa-serie > .e-con-inner,
	.e-con.hpa-services > .e-con-inner {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}


/* ---------------------------------------------------------------
   Contact et magasin
   --------------------------------------------------------------- */

.e-con.hpc-canaux > .e-con-inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	align-items: start;
	width: 100%;
}

.e-con .hpc-canal {
	width: auto;
	border-top: 2px solid var(--hp-accent);
	padding-top: 16px;
}

.hpc-canal__valeur {
	margin: 0;
}

.hpc-canal__valeur a {
	--theme-link-initial-color: var(--hp-ink);
	color: var(--hp-ink);
}

.hpc-canal__valeur a:hover {
	--theme-link-hover-color: var(--hp-accent);
	color: var(--hp-accent);
}

.e-con.hpc-orient > .e-con-inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	align-items: stretch;
	width: 100%;
}

.e-con.hpc-magasin > .e-con-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
	gap: 40px;
	align-items: start;
	width: 100%;
}

.e-con .hpc-magasin__fiche,
.e-con .hpc-magasin__services {
	width: auto;
}

.hpc-magasin__fiche p {
	margin: 0 0 14px;
}

.hpc-magasin__fiche p:last-child {
	margin-bottom: 0;
}

.hpc-magasin__services ul {
	margin: 10px 0 0;
	padding-left: 18px;
}

.hpc-magasin__services li {
	margin-bottom: 10px;
}

@media (max-width: 1024px) {
	.e-con.hpc-canaux > .e-con-inner,
	.e-con.hpc-orient > .e-con-inner {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.e-con.hpc-canaux > .e-con-inner,
	.e-con.hpc-orient > .e-con-inner,
	.e-con.hpc-magasin > .e-con-inner {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}


/* ---------------------------------------------------------------
   Contact : banniere avec carte en debord, sur le modele de la page
   "Contacter HP". La carte chevauche le bas de la banniere.
   --------------------------------------------------------------- */

.e-con.hpc-hero {
	background-size: cover;
	background-position: center;
	margin-bottom: 0;
}

.e-con.hpc-hero > .e-con-inner {
	width: 100%;
	justify-content: flex-end;
	align-items: flex-start;
}

.e-con .hpc-hero__card {
	width: min(520px, 100%);
	margin-bottom: -56px;
	box-shadow: 0 10px 30px rgba(26, 26, 26, 0.12);
}

.hpc-hero__card p {
	margin: 0;
}

/* Trois portes d'entree */
.e-con.hpc-portes > .e-con-inner {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	align-items: stretch;
	width: 100%;
}

.e-con .hpc-porte {
	width: auto;
	text-align: center;
}

.hpc-porte .elementor-widget-icon-box {
	flex-grow: 1;
}

.hpc-porte .elementor-icon-box-description {
	max-width: 32ch;
	margin-left: auto;
	margin-right: auto;
}

/* Formulaire : saisie a gauche, conseils a droite. */
.e-con.hpc-form > .e-con-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
	width: 100%;
}

.e-con .hpc-form__main,
.e-con .hpc-form__aside {
	width: auto;
}

.hpc-form .elementor-field-group > label {
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 6px;
}

.hpc-form .elementor-field-textual {
	padding: 12px 14px;
	font-size: 15px;
}

.hpc-form .elementor-button[type="submit"] {
	padding: 14px 26px;
	font-size: 16px;
	font-weight: 500;
}

.hpc-form__aside p {
	margin: 0 0 12px;
}

@media (max-width: 1024px) {
	.e-con.hpc-form > .e-con-inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.e-con .hpc-hero__card {
		width: 100%;
		margin-bottom: -32px;
	}
}


/* Les trois portes de contact tiennent en rang jusqu'au mobile. */
@media (max-width: 767px) {
	.e-con.hpc-portes > .e-con-inner {
		grid-template-columns: 1fr;
		gap: 48px;
	}
}


/* ===============================================================
   Responsive : regles transversales
   Points de rupture alignes sur ceux d'Elementor : 1024 et 767.
   =============================================================== */

/* Un enfant de grille ou de flex refuse de retrecir sous la taille
   de son contenu : c'est la cause la plus frequente de debordement
   horizontal. */
.e-con > .e-con-inner > .e-con,
.e-con > .e-con-inner > .elementor-widget {
	min-width: 0;
}

/* Aucun media ne depasse sa colonne. */
.elementor img,
.elementor video,
.elementor iframe {
	max-width: 100%;
	height: auto;
}

/* Le tableau de caracteristiques peut etre large : il defile dans son
   propre cadre plutot que d'elargir la page. */
.woocommerce-tabs .woocommerce-product-attributes,
#tab-additional_information table {
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
	/* Les colonnes definies en pourcentage restent cote a cote sur
	   mobile si on ne les redresse pas : diaporama, bloc entreprise,
	   fiche produit. */
	.e-con.e-flex > .e-con-inner > .e-con {
		width: 100%;
	}

	/* Le diaporama se lit texte puis visuel. */
	.hp-slide > .e-con-inner {
		flex-direction: column;
	}

	.hp-slide {
		min-height: 0;
	}

	/* Les caracteristiques de carte peuvent respirer : la carte occupe
	   toute la largeur, la troncature n'a plus lieu d'etre. */
	.hp-card-specs li {
		white-space: normal;
	}

	.hp-card-specs {
		min-height: 0;
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		min-height: 0;
		-webkit-line-clamp: 3;
	}

	/* Les boutons pleine largeur sont plus faciles a viser au pouce. */
	.hp-slide .elementor-button,
	.hpc-porte .elementor-button {
		width: 100%;
		text-align: center;
		justify-content: center;
	}
}


/* ---------------------------------------------------------------
   Grille produit issue du shortcode [products]
   WooCommerce pose une classe columns-4 fixe : le nombre de colonnes
   ne suit pas l'ecran, contrairement aux pages d'archive pilotees par
   le theme. On la rend responsive ici.
   --------------------------------------------------------------- */

.elementor-widget-shortcode ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	float: none;
}

.elementor-widget-shortcode ul.products::before,
.elementor-widget-shortcode ul.products::after {
	display: none;
}

.elementor-widget-shortcode ul.products li.product {
	width: auto;
	margin: 0;
	float: none;
	clear: none;
}

@media (max-width: 1024px) {
	.elementor-widget-shortcode ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.elementor-widget-shortcode ul.products {
		grid-template-columns: minmax(0, 1fr);
	}


}


/* ---------------------------------------------------------------
   Bouton d'action de la carte produit
   Il occupe la largeur utile de la carte, marges comprises, sur tous
   les gabarits : archive, resultats de recherche et shortcode.
   Une largeur calculee le faisait deborder ; nowrap tronquait le
   libelle au lieu de le replier.
   --------------------------------------------------------------- */

.woocommerce ul.products li.product .button {
	display: block;
	width: auto;
	margin-left: 20px;
	margin-right: 20px;
	margin-top: 16px;
	margin-bottom: 20px;
	align-self: stretch;
	text-align: center;
	white-space: normal;
	line-height: 1.3;
	padding-left: 14px;
	padding-right: 14px;
}

@media (max-width: 767px) {
	.woocommerce ul.products li.product .button {
		font-size: 15px;
	}
}


/* ---------------------------------------------------------------
   Grilles produit a colonnes fixes
   WooCommerce pose columns-N en dur sur le shortcode, les produits
   lies et les ventes croisees. Le theme ne pilote que les archives :
   ces grilles-la restent a N colonnes quel que soit l'ecran.
   --------------------------------------------------------------- */

.elementor-widget-shortcode ul.products,
.related.products ul.products,
.up-sells ul.products,
.cross-sells ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	float: none;
}

.related.products ul.products li.product,
.up-sells ul.products li.product,
.cross-sells ul.products li.product {
	width: auto;
	margin: 0;
	float: none;
	clear: none;
}

@media (max-width: 1024px) {
	.elementor-widget-shortcode ul.products,
	.related.products ul.products,
	.up-sells ul.products,
	.cross-sells ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.elementor-widget-shortcode ul.products,
	.related.products ul.products,
	.up-sells ul.products,
	.cross-sells ul.products {
		grid-template-columns: minmax(0, 1fr);
	}
}


/* ---------------------------------------------------------------
   Univers produits sur mobile
   Empilees, les cinq cartes avec visuel et liste de sous-categories
   representaient environ cinq ecrans de defilement. Sur petit ecran
   elles deviennent des tuiles compactes a deux colonnes : le nom, le
   volume et un visuel reduit. Les sous-categories restent joignables
   par le mega-menu et par la page de categorie.
   --------------------------------------------------------------- */

@media (max-width: 767px) {
	.e-con .hp-univers,
	.e-con .hp-univers--large {
		width: calc(50% - 8px);
		padding: 14px;
		gap: 2px;
	}

	.hp-univers .elementor-widget-image img,
	.hp-univers--large .elementor-widget-image img {
		max-height: 84px;
	}

	.hp-univers .elementor-heading-title {
		font-size: 15px;
		line-height: 1.25;
	}

	.hp-univers--large .elementor-heading-title {
		font-size: 15px;
	}

	.hp-univers__count {
		font-size: 12px;
	}

	/* La liste detaillee ferait de chaque tuile un pave. */
	.hp-univers__links {
		display: none;
	}

	/* Les deux rangees se rejoignent visuellement. */
	.e-con.hp-univers-row > .e-con-inner {
		gap: 16px;
	}
}

@media (max-width: 767px) {
	.e-con .hp-univers:last-child {
		width: 100%;
	}

	.e-con .hp-univers:last-child .elementor-widget-image img {
		max-height: 110px;
	}
}


/* ---------------------------------------------------------------
   Marges laterales sur petit ecran
   Mes sections posent des marges laterales a zero, ce qui ecrase la
   marge par defaut des conteneurs Elementor. Invisible tant que la
   largeur maximale centre le contenu, genant des que l'ecran est plus
   etroit que cette largeur : le texte colle au bord.
   --------------------------------------------------------------- */

@media (max-width: 1024px) {
	.elementor .e-con-boxed > .e-con-inner {
		padding-left: 24px;
		padding-right: 24px;
	}
}

@media (max-width: 767px) {
	.elementor .e-con-boxed > .e-con-inner {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* Le diaporama garde ses marges internes propres. */
	.hp-slide > .e-con-inner {
		padding-left: 20px;
		padding-right: 20px;
	}
}


/* ---------------------------------------------------------------
   Panneau de navigation mobile
   Fond blanc opaque, texte encre, bleu reserve a l'entree active.
   Le panneau heritait d'un fond sombre semi-transparent : le contenu
   de la page transparaissait derriere le menu.
   --------------------------------------------------------------- */

[data-header] #offcanvas.ct-panel {
	--theme-panel-background: #FFFFFF;
}

[data-header] #offcanvas .ct-panel-inner,
[data-header] #offcanvas .ct-panel-content,
[data-header] #offcanvas .ct-panel-content-inner {
	background: #FFFFFF;
}

[data-header] #offcanvas .ct-panel-actions .ct-toggle-close {
	color: var(--hp-ink);
}

/* Entrees de premier niveau */
[data-header] #offcanvas .mobile-menu > li > .ct-menu-link,
[data-header] #offcanvas .mobile-menu > li > .ct-sub-menu-parent > .ct-menu-link {
	--theme-link-initial-color: var(--hp-ink);
	color: var(--hp-ink);
	font-size: 17px;
	font-weight: 500;
	padding: 14px 0;
}

[data-header] #offcanvas .mobile-menu > li {
	border-bottom: 1px solid var(--hp-border);
}

[data-header] #offcanvas .mobile-menu > li:last-child {
	border-bottom: none;
}

/* Sous-entrees : plus discretes, pour distinguer les deux niveaux. */
[data-header] #offcanvas .mobile-menu .sub-menu .ct-menu-link {
	--theme-link-initial-color: var(--hp-muted);
	color: var(--hp-muted);
	font-size: 15px;
	font-weight: 400;
	padding: 10px 0 10px 16px;
}

/* Le bleu ne marque que la page en cours et l'appui. */
[data-header] #offcanvas .mobile-menu .ct-menu-link:hover,
[data-header] #offcanvas .mobile-menu .current-menu-item > .ct-menu-link,
[data-header] #offcanvas .mobile-menu .current-menu-ancestor > .ct-sub-menu-parent > .ct-menu-link {
	--theme-link-hover-color: var(--hp-accent);
	color: var(--hp-accent);
}

[data-header] #offcanvas .ct-toggle-dropdown-mobile {
	color: var(--hp-muted);
}

/* Les coordonnees en pied de panneau. */
[data-header] #offcanvas .ct-contact-info {
	border-top: 1px solid var(--hp-border);
	padding-top: 16px;
	margin-top: 8px;
	color: var(--hp-ink);
}

/* Blocksy pose --theme-link-initial-color:#ffffff sur le conteneur du
   menu mobile, pensé pour un panneau sombre. On le ramene a l'encre. */
[data-header] #offcanvas [data-id="mobile-menu"] {
	--theme-link-initial-color: var(--hp-ink);
	--theme-link-hover-color: var(--hp-accent);
	--theme-font-size: 17px;
	--theme-font-weight: 500;
}

[data-header] #offcanvas [data-id="mobile-menu"] .sub-menu {
	--theme-link-initial-color: var(--hp-muted);
}


/* ---------------------------------------------------------------
   Panier deroulant de l'en-tete
   Blocksy le livre sur fond ardoise #29333C avec texte blanc : un
   ilot sombre au milieu d'un site clair. On le ramene dans la charte.
   Les selecteurs reprennent le prefixe d'attribut du theme, sans quoi
   ses regles restent prioritaires.
   --------------------------------------------------------------- */

[data-header] [data-id="cart"] .ct-cart-content {
	--mini-cart-background-color: #FFFFFF;
	--theme-text-color: var(--hp-ink);
	--theme-link-initial-color: var(--hp-ink);
	--theme-link-hover-color: var(--hp-accent);
	border: 1px solid var(--hp-border);
	border-radius: var(--hp-radius);
	box-shadow: 0 10px 30px rgba(26, 26, 26, 0.12);
}

[data-header] [data-id="cart"] .ct-cart-content .total {
	--theme-text-color: var(--hp-ink);
	border-top: 1px solid var(--hp-border);
}

[data-header] [data-id="cart"] .ct-cart-content .ct-cart-item {
	--theme-icon-color: var(--hp-muted);
}

/* Le nom du produit se lit en encre, pas en bleu : le bleu est
   reserve a l'action. */
[data-header] [data-id="cart"] .ct-cart-content .cart_list a {
	--theme-link-initial-color: var(--hp-ink);
	color: var(--hp-ink);
	font-weight: 500;
}

[data-header] [data-id="cart"] .ct-cart-content .cart_list a:hover {
	color: var(--hp-accent);
}

[data-header] [data-id="cart"] .ct-cart-content .quantity,
[data-header] [data-id="cart"] .ct-cart-content .ct-label {
	color: var(--hp-muted);
}

/* Deux actions, une seule dominante : commander est l'achat,
   voir le panier est une etape intermediaire. */
[data-header] [data-id="cart"] .ct-cart-content .buttons .button {
	border-radius: var(--hp-radius);
	font-weight: 500;
}

[data-header] [data-id="cart"] .ct-cart-content .buttons .button:not(.checkout) {
	background: transparent;
	color: var(--hp-ink);
	box-shadow: inset 0 0 0 1px var(--hp-ink);
}

[data-header] [data-id="cart"] .ct-cart-content .buttons .button.checkout {
	background: var(--hp-accent);
	color: #FFFFFF;
}

/* Meme traitement pour le panier lateral. */
[data-header] #woo-cart-panel {
	background-color: rgba(26, 26, 26, 0.45);
}

[data-header] #woo-cart-panel .ct-toggle-close {
	--theme-icon-color: var(--hp-ink);
}

[data-header] #woo-cart-panel .buttons .button:not(.checkout) {
	background: transparent;
	color: var(--hp-ink);
	box-shadow: inset 0 0 0 1px var(--hp-ink);
}

[data-header] #woo-cart-panel .buttons .button.checkout {
	background: var(--hp-accent);
	color: #FFFFFF;
}


/* ---------------------------------------------------------------
   Listes deroulantes des formulaires
   Elementor impose une hauteur fixe aux champs select ; combinee a
   mes marges internes, le libelle depassait le cadre et se retrouvait
   coupe en bas. On laisse la hauteur s'adapter au contenu.
   --------------------------------------------------------------- */

.elementor-field-type-select select,
.elementor-field-type-select .elementor-field,
.hp-devis select,
.hpc-form select {
	height: auto;
	min-height: 48px;
	line-height: 1.4;
	padding: 12px 42px 12px 14px;
	font-size: 15px;
	color: var(--hp-ink);
	background-color: #FFFFFF;
	border: 1px solid var(--hp-border);
	border-radius: var(--hp-radius);
	appearance: none;
	-webkit-appearance: none;
}

/* Chevron porte par le champ lui-meme : sa position ne depend plus
   de la hauteur du libelle, qui varie quand il passe sur deux lignes. */
.elementor-field-type-select select,
.woocommerce form .form-row select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235B5B5F' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 12px 8px;
}

.elementor-field-type-select select:focus {
	outline: 2px solid var(--hp-accent);
	outline-offset: 1px;
	border-color: var(--hp-accent);
}

/* Les champs de saisie suivent la meme hauteur, pour aligner les
   colonnes de gauche et de droite. */
.elementor-field-group .elementor-field-textual {
	min-height: 48px;
	line-height: 1.4;
}

.elementor-field-group textarea.elementor-field-textual {
	min-height: 120px;
}

/* Meme traitement sur les selecteurs WooCommerce, notamment la
   commune au moment du paiement. */
.woocommerce form .form-row select,
.woocommerce-page form .form-row select {
	height: auto;
	min-height: 48px;
	line-height: 1.4;
	padding: 12px 42px 12px 14px;
}


/* ---------------------------------------------------------------
   Fenetre de confirmation d'ajout au panier
   Sa racine est un identifiant, #ct-added-to-cart-popup, et non une
   classe : mes premieres regles ne s'appliquaient a rien, d'ou le fond
   absent et le titre a taille de titre de page.
   --------------------------------------------------------------- */

#ct-added-to-cart-popup .ct-panel-inner,
#ct-added-to-cart-popup .ct-popup-inner {
	background: var(--theme-palette-color-8);
	border-radius: var(--hp-radius);
	box-shadow: 0 14px 40px rgba(26, 26, 26, 0.18);
	max-width: min(560px, calc(100vw - 32px));
}

#ct-added-to-cart-popup .ct-added-to-cart-message {
	font-size: 15px;
	font-weight: 600;
	color: var(--hp-ink);
	border-bottom-color: var(--hp-border);
}

/* Le titre est un h2.woocommerce-loop-product__title : sans regle
   dediee, il prend la taille des titres de section. */
#ct-added-to-cart-popup .ct-product-title-price h2,
#ct-added-to-cart-popup .woocommerce-loop-product__title,
#ct-added-to-cart-popup .woocommerce-loop-product__title a {
	font-size: 14px;
	line-height: 1.35;
	font-weight: 500;
	color: var(--hp-ink);
	margin: 0;
}

#ct-added-to-cart-popup .ct-product-title-price {
	align-items: flex-start;
	gap: 16px;
}

#ct-added-to-cart-popup .ct-product-title-price .price {
	font-size: 14px;
	font-weight: 600;
	color: var(--hp-ink);
	white-space: nowrap;
}

#ct-added-to-cart-popup .ct-added-to-cart-product {
	gap: 16px;
}

#ct-added-to-cart-popup .ct-media-container,
#ct-added-to-cart-popup .ct-added-to-cart-product img {
	max-width: 120px;
	max-height: 120px;
	object-fit: contain;
}

#ct-added-to-cart-popup :is(.ct-product-attributes, .ct-product-totals) {
	border-top-color: var(--hp-border);
	color: var(--hp-ink);
}

#ct-added-to-cart-popup :is(.ct-added-to-cart-product, .ct-popup-actions):not(:last-child) {
	border-bottom-color: var(--hp-border);
}

/* Une seule action dominante : le reste passe en contour. */
#ct-added-to-cart-popup .ct-popup-actions .ct-button {
	border-radius: var(--hp-radius);
	font-weight: 500;
}

#ct-added-to-cart-popup .ct-added-to-cart-popup-checkout {
	background: var(--hp-accent);
	color: #FFFFFF;
}

#ct-added-to-cart-popup .ct-added-to-cart-popup-cart,
#ct-added-to-cart-popup .ct-added-to-cart-popup-continue {
	background: transparent;
	color: var(--hp-ink);
	box-shadow: inset 0 0 0 1px var(--hp-ink);
}

#ct-added-to-cart-popup {
	z-index: 80;
}

@media (max-width: 767px) {
	#ct-added-to-cart-popup .ct-panel-inner,
	#ct-added-to-cart-popup .ct-popup-inner {
		max-width: calc(100vw - 24px);
		max-height: 84vh;
		overflow-y: auto;
	}

	#ct-added-to-cart-popup .ct-media-container,
	#ct-added-to-cart-popup .ct-added-to-cart-product img {
		max-width: 84px;
		max-height: 84px;
	}

	/* Trois actions cote a cote deviennent illisibles sous 400px. */
	#ct-added-to-cart-popup .ct-popup-actions {
		flex-direction: column;
		gap: 10px;
	}

	#ct-added-to-cart-popup .ct-popup-actions > * {
		flex: none;
		width: 100%;
	}

	body:has(#ct-added-to-cart-popup.active) .hp-contact-float {
		display: none;
	}
}

/* La fenetre impose sa propre echelle typographique : sans cela, le
   titre du produit reprend celle des titres de section du theme. */
#ct-added-to-cart-popup {
	--theme-font-size: 14px;
	--theme-line-height: 1.4;
}

#ct-added-to-cart-popup :is(h1, h2, h3, h4) {
	font-size: 14px;
	line-height: 1.35;
	font-weight: 500;
	letter-spacing: 0;
}


/* ---------------------------------------------------------------
   Solutions entreprise
   --------------------------------------------------------------- */

.e-con.hpe-besoins > .e-con-inner {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	align-items: stretch;
	width: 100%;
}

.e-con .hpe-besoin {
	width: auto;
	transition: border-color 0.15s;
}

.e-con .hpe-besoin:hover {
	border-color: var(--hp-ink);
}

.hpe-besoin .elementor-widget-image img {
	height: 140px;
	width: 100%;
	object-fit: contain;
}

.e-con.hpe-etapes > .e-con-inner {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
	align-items: start;
	width: 100%;
}

.e-con .hpe-etape {
	width: auto;
	border-top: 2px solid var(--hp-ink);
	padding-top: 18px;
}

.e-con.hpe-raisons > .e-con-inner {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
	align-items: start;
	width: 100%;
}

.e-con .hpe-raison {
	width: auto;
	border-top: 2px solid var(--hp-accent);
	padding-top: 18px;
}

@media (max-width: 1024px) {
	.e-con.hpe-besoins > .e-con-inner,
	.e-con.hpe-etapes > .e-con-inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.e-con.hpe-raisons > .e-con-inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px;
	}
}

@media (max-width: 767px) {
	.e-con.hpe-besoins > .e-con-inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.hpe-besoin .elementor-widget-image img {
		height: 90px;
	}

	.e-con .hpe-besoin {
		padding: 14px;
	}

	.e-con.hpe-etapes > .e-con-inner,
	.e-con.hpe-raisons > .e-con-inner {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}


/* ---------------------------------------------------------------
   Pages legales
   Les champs restant a renseigner sont surlignes pour qu'aucun ne
   passe inapercu a la relecture.
   --------------------------------------------------------------- */

.hp-todo {
	background: #FFF2CC;
	color: #8E7A00;
	padding: 1px 6px;
	border-radius: 4px;
	font-weight: 600;
	font-size: 0.95em;
}

.hp-todo::before {
	content: "à completer : ";
	font-weight: 400;
	opacity: 0.75;
}

.page .entry-content h2 {
	font-size: 22px;
	font-weight: 600;
	margin-top: 36px;
	margin-bottom: 12px;
}

.page .entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 16px 0;
}

.page .entry-content th,
.page .entry-content td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--hp-border);
	text-align: left;
	font-size: 15px;
}

.page .entry-content th {
	font-weight: 600;
	color: var(--hp-muted);
}


/* ===============================================================
   Couleurs d'univers
   Reprises du site existant : les clients les connaissent deja et
   elles servent le reperage dans un catalogue qui melange machines,
   consommables et accessoires. Elles marquent l'entree d'un univers,
   jamais une action : le bleu reste seul a porter l'achat.
   =============================================================== */

:root {
	--hp-u-portables: #8AB95D;
	--hp-u-bureau: #D29632;
	--hp-u-ecrans: #F9E0EF;
	--hp-u-imprimantes: #54B8B5;
	--hp-u-consommables: #288FA1;
	--hp-u-accessoires: #D2D326;
	--hp-u-gaming: #14171C;
}

/* Bandeau d'entree de categorie. Le texte suit le contraste reel de
   la teinte, pas une regle uniforme. */
.hp-univ-band {
	background: var(--hp-univ, var(--hp-surface));
	color: var(--hp-univ-text, var(--hp-ink));
	border-radius: var(--hp-radius);
	padding: 28px 32px;
	margin-bottom: 32px;
}

.hp-univ-band h1,
.hp-univ-band h2 {
	color: inherit;
	margin: 0 0 6px;
}

.hp-univ-band p {
	margin: 0;
	opacity: 0.9;
}

/* Teintes claires : texte en encre. */
.hp-univ--portables { --hp-univ: var(--hp-u-portables); --hp-univ-text: var(--hp-ink); }
.hp-univ--ecrans { --hp-univ: var(--hp-u-ecrans); --hp-univ-text: var(--hp-ink); }
.hp-univ--accessoires { --hp-univ: var(--hp-u-accessoires); --hp-univ-text: var(--hp-ink); }
.hp-univ--bureau { --hp-univ: var(--hp-u-bureau); --hp-univ-text: var(--hp-ink); }
.hp-univ--imprimantes { --hp-univ: var(--hp-u-imprimantes); --hp-univ-text: var(--hp-ink); }

/* Teintes soutenues : texte en blanc. */
.hp-univ--consommables { --hp-univ: var(--hp-u-consommables); --hp-univ-text: #FFFFFF; }
.hp-univ--gaming { --hp-univ: var(--hp-u-gaming); --hp-univ-text: #FFFFFF; }

/* Filet de couleur sur les cartes d'univers de l'accueil : un rappel
   discret, sans aplat, pour ne pas transformer la page en mosaique. */
.e-con .hp-univers[class*="hp-univ--"] {
	border-top: 3px solid var(--hp-univ, var(--hp-border));
}

/* Marqueur de l'univers courant dans la navigation. */
[data-row="bottom"] nav > ul > li.hp-univ--portables:hover > .ct-sub-menu-parent > .ct-menu-link::after,
[data-row="bottom"] nav > ul > li[class*="hp-univ--"]:hover > .ct-menu-link::after,
[data-row="bottom"] nav > ul > li[class*="hp-univ--"]:hover > .ct-sub-menu-parent > .ct-menu-link::after {
	background: var(--hp-univ, var(--hp-accent));
}


/* ---------------------------------------------------------------
   Pages de categorie : bandeau d'univers
   On colore l'en-tete d'archive existant plutot que d'ajouter un
   second bandeau, ce qui dupliquerait le titre.
   --------------------------------------------------------------- */

.hp-has-universe .hero-section {
	background: var(--hp-univ, var(--hp-surface));
	color: var(--hp-univ-text, var(--hp-ink));
	padding: 44px 0;
	margin-bottom: 40px;
}

.hp-has-universe .hero-section .page-title {
	color: inherit;
	margin: 0;
	font-size: 36px;
	font-weight: 600;
}

.hp-univ-tagline {
	margin: 8px 0 0;
	font-size: 17px;
	line-height: 1.6;
	color: inherit;
	opacity: 0.9;
	max-width: 62ch;
}

/* La description de categorie remonte dans le bandeau. */
.hp-has-universe .term-description,
.hp-has-universe .woocommerce-archive-description {
	color: inherit;
}

/* Bonnes affaires */
.hp-cat-deals {
	margin-top: 64px;
	padding-top: 40px;
	border-top: 1px solid var(--hp-border);
}

.hp-cat-deals h2 {
	font-size: 26px;
	font-weight: 600;
	margin-bottom: 20px;
}

/* Appel entreprise : la couleur d'univers marque le filet, l'action
   reste en bleu. */
.hp-cat-business {
	margin-top: 56px;
	padding: 32px;
	background: var(--hp-surface);
	border-radius: var(--hp-radius);
	border-top: 3px solid var(--hp-univ, var(--hp-accent));
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}

.hp-cat-business h2 {
	font-size: 22px;
	font-weight: 600;
	margin: 0 0 6px;
}

.hp-cat-business p {
	margin: 0;
	color: var(--hp-muted);
	font-size: 15px;
	max-width: 60ch;
}

.hp-cat-business__cta {
	flex: none;
	background: var(--hp-accent);
	--theme-link-initial-color: #FFFFFF;
	color: #FFFFFF;
	padding: 14px 26px;
	border-radius: var(--hp-radius);
	font-weight: 500;
}

.hp-cat-business__cta:hover {
	background: var(--hp-accent-hover, #0339A8);
	--theme-link-hover-color: #FFFFFF;
	color: #FFFFFF;
}

@media (max-width: 767px) {
	.hp-has-universe .hero-section {
		padding: 28px 0;
		margin-bottom: 28px;
	}

	.hp-has-universe .hero-section .page-title {
		font-size: 26px;
	}

	.hp-univ-tagline {
		font-size: 15px;
	}

	.hp-cat-business {
		padding: 24px 20px;
	}

	.hp-cat-business__cta {
		width: 100%;
		text-align: center;
	}
}


/* ---------------------------------------------------------------
   Blocs editoriaux de categorie
   Repris de la structure du site existant : bandeau photo, bloc
   promotionnel, liste de benefices. Ils se posent sur une archive
   WooCommerce, donc sans sacrifier les facettes ni la pagination.
   --------------------------------------------------------------- */

.hp-cat-hero {
	position: relative;
	min-height: 340px;
	background-size: cover;
	background-position: center;
	border-radius: var(--hp-radius);
	margin-bottom: 40px;
	display: flex;
	align-items: flex-end;
	padding: 28px;
}

/* Carte de texte posee sur la photo, comme sur les pages actuelles. */
.hp-cat-hero__card {
	background: rgba(255, 255, 255, 0.94);
	border-radius: var(--hp-radius);
	padding: 24px 28px;
	max-width: min(520px, 100%);
}

.hp-cat-hero__card h2 {
	font-size: 24px;
	font-weight: 600;
	color: var(--hp-ink);
	margin: 0 0 8px;
}

.hp-cat-hero__card p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--hp-muted);
}

/* Bloc promotionnel */
.hp-cat-promo {
	margin-top: 64px;
	padding: 32px;
	background: var(--hp-surface);
	border-radius: var(--hp-radius);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	gap: 32px;
	align-items: center;
}

.hp-cat-promo__media img {
	width: 100%;
	height: auto;
	border-radius: var(--hp-radius);
}

.hp-cat-promo h2 {
	font-size: 26px;
	font-weight: 600;
	margin: 0 0 10px;
	color: var(--hp-ink);
}

.hp-cat-promo p {
	margin: 0 0 18px;
	font-size: 16px;
	line-height: 1.65;
	color: var(--hp-muted);
}

.hp-cat-promo__cta {
	display: inline-block;
	background: transparent;
	--theme-link-initial-color: var(--hp-ink);
	color: var(--hp-ink);
	box-shadow: inset 0 0 0 1px var(--hp-ink);
	padding: 13px 26px;
	border-radius: var(--hp-radius);
	font-weight: 500;
}

.hp-cat-promo__cta:hover {
	box-shadow: inset 0 0 0 1px var(--hp-accent);
	--theme-link-hover-color: var(--hp-accent);
	color: var(--hp-accent);
}

/* Benefices : une liste de lignes separees par des filets, comme sur
   les pages actuelles. */
.hp-cat-benefits {
	margin-top: 56px;
}

.hp-cat-benefits h2 {
	font-size: 24px;
	font-weight: 600;
	margin: 0 0 16px;
}

.hp-cat-benefits ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--hp-border);
}

.hp-cat-benefits li {
	margin: 0;
	padding: 16px 0 16px 18px;
	border-bottom: 1px solid var(--hp-border);
	border-left: 3px solid var(--hp-univ, var(--hp-accent));
	font-size: 16px;
	color: var(--hp-ink);
}

@media (max-width: 767px) {
	.hp-cat-hero {
		min-height: 240px;
		padding: 16px;
	}

	.hp-cat-hero__card {
		padding: 18px 20px;
	}

	.hp-cat-hero__card h2 {
		font-size: 19px;
	}

	.hp-cat-promo {
		grid-template-columns: 1fr;
		padding: 24px 20px;
		gap: 20px;
	}

	.hp-cat-promo__cta {
		display: block;
		text-align: center;
	}
}


/* ---------------------------------------------------------------
   Grille "Que cherchez-vous ?"
   Reprise de la page d'accueil existante : une entree par intention
   d'achat, pas par categorie. Le filet haut porte la couleur de
   l'univers concerne.
   --------------------------------------------------------------- */

.e-con.hp-portes-grille > .e-con-inner {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	align-items: stretch;
	width: 100%;
}

.e-con .hp-porte[class*="hp-univ--"] {
	width: auto;
	border-top-color: var(--hp-univ, var(--hp-border));
	transition: border-color 0.15s;
}

.e-con .hp-porte:hover {
	border-right-color: var(--hp-ink);
	border-bottom-color: var(--hp-ink);
	border-left-color: var(--hp-ink);
}

.hp-porte .elementor-widget-image {
	margin-top: auto;
}

.hp-porte .elementor-widget-image img {
	height: 120px;
	width: 100%;
	object-fit: contain;
}

@media (max-width: 1024px) {
	.e-con.hp-portes-grille > .e-con-inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.e-con.hp-portes-grille > .e-con-inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.e-con .hp-porte {
		padding: 14px;
	}

	.hp-porte .elementor-widget-image img {
		height: 76px;
	}
}


/* ---------------------------------------------------------------
   Slide pleine largeur
   Les bannieres de campagne portent leur propre message : aucune
   surcouche de texte, l'image occupe toute la slide.
   --------------------------------------------------------------- */

.hp-slide--banniere {
	min-height: 0;
	padding: 0;
}

.hp-slide--banniere > .e-con-inner {
	padding: 0;
	max-width: none;
	width: 100%;
}

.hp-slide--banniere .elementor-widget-image,
.hp-slide--banniere .elementor-widget-container {
	width: 100%;
}

.hp-slide--banniere img {
	width: 100%;
	height: auto;
	display: block;
}

/* Sur mobile, un visuel en 3,2:1 devient une bande de 120 px de haut
   ou le message est illisible. On recadre sur le centre, la ou se
   trouve le sujet des deux bannieres. */
@media (max-width: 767px) {
	.hp-slide--banniere img {
		height: 260px;
		object-fit: cover;
		object-position: center;
	}
}


/* ---------------------------------------------------------------
   Hauteur commune des slides
   Une banniere en 3,2:1 affichee pleine largeur mesure pres de 600 px
   sur un grand ecran, contre 420 px pour les gabarits produit : le
   carrousel sautait a chaque transition. Toutes les slides partagent
   desormais la meme hauteur, la banniere se recadre.
   --------------------------------------------------------------- */

.hp-hero-carousel .swiper-slide,
.hp-hero-carousel .hp-slide {
	height: 440px;
	min-height: 440px;
}

.hp-slide--banniere {
	height: 440px;
	min-height: 440px;
	overflow: hidden;
}

.hp-slide--banniere > .e-con-inner,
.hp-slide--banniere .elementor-widget-image,
.hp-slide--banniere .elementor-widget-container,
.hp-slide--banniere .elementor-image,
.hp-slide--banniere a {
	height: 100%;
	display: block;
}

.hp-slide--banniere img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

@media (max-width: 1024px) {
	.hp-hero-carousel .swiper-slide,
	.hp-hero-carousel .hp-slide,
	.hp-slide--banniere {
		height: 380px;
		min-height: 380px;
	}
}

@media (max-width: 767px) {
	.hp-hero-carousel .swiper-slide,
	.hp-hero-carousel .hp-slide,
	.hp-slide--banniere {
		height: auto;
		min-height: 0;
	}

	/* Sur telephone les gabarits produit s'empilent et ont besoin de
	   respirer ; la banniere garde une bande fixe. */
	.hp-slide--banniere,
	.hp-hero-carousel .swiper-slide:has(.hp-slide--banniere) {
		height: 240px;
		min-height: 240px;
	}
}




/* ===============================================================
   Carrousels d'accueil : un par type d'ecran
   Ordinateur et tablette partagent le carrousel horizontal ; le
   telephone a le sien, avec ses visuels carres et ses slides
   empilees. Chacun a une hauteur calee sur son ecran.
   =============================================================== */

/* --- Ordinateur et tablette ------------------------------------- */

.hp-hero--desktop .swiper-slide,
.hp-hero--desktop .hp-slide {
	height: 440px;
	min-height: 440px;
}

.hp-hero--desktop .hp-slide--banniere {
	overflow: hidden;
}

.hp-hero--desktop .hp-slide--banniere > .e-con-inner,
.hp-hero--desktop .hp-slide--banniere .elementor-widget-image,
.hp-hero--desktop .hp-slide--banniere .elementor-widget-container,
.hp-hero--desktop .hp-slide--banniere a {
	height: 100%;
	display: block;
}

.hp-hero--desktop .hp-slide--banniere img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

@media (max-width: 1024px) {
	.hp-hero--desktop .swiper-slide,
	.hp-hero--desktop .hp-slide {
		height: 360px;
		min-height: 360px;
	}

	/* Sur tablette, texte et visuel restent cote a cote mais le titre
	   descend d'un cran pour tenir dans la hauteur. */
	.hp-hero--desktop .hp-slide h2 {
		font-size: 30px;
	}
}

/* --- Telephone --------------------------------------------------- */

@media (max-width: 767px) {
	.hp-hero--mobile .swiper-slide,
	.hp-hero--mobile .hp-slide {
		height: auto;
		min-height: 0;
	}

	/* Visuel carre : pleine largeur de l'ecran, proportion d'origine.
	   Chaque niveau d'imbrication doit s'etirer, sinon l'image garde
	   sa taille intrinseque et reste centree. */
	.elementor .hp-hero--mobile .hp-slide--carre,
	.elementor .hp-hero--mobile .hp-slide--carre > .e-con-inner,
	.elementor .hp-hero--mobile .hp-slide--carre .elementor-widget-image,
	.elementor .hp-hero--mobile .hp-slide--carre .elementor-widget-container,
	.elementor .hp-hero--mobile .hp-slide--carre a {
		width: 100%;
		max-width: none;
		display: block;
		padding: 0;
		margin: 0;
	}

	.elementor .hp-hero--mobile .hp-slide--carre img {
		width: 100%;
		max-width: none;
		height: auto;
		aspect-ratio: 1 / 1;
		object-fit: cover;
		display: block;
	}

	/* Le carrousel mobile colle aux bords de l'ecran. */
	.elementor .hp-hero--mobile,
	.elementor .hp-hero--mobile > .e-con-inner {
		padding-left: 0;
		padding-right: 0;
	}

	/* Slides produit : texte au-dessus, visuel en dessous, marges
	   internes pour que rien ne touche le bord de l'ecran. */
	.hp-hero--mobile .hp-slide:not(.hp-slide--banniere) {
		padding: 28px 20px 32px;
	}

	.hp-hero--mobile .hp-slide:not(.hp-slide--banniere) > .e-con-inner {
		flex-direction: column;
		gap: 20px;
		padding: 0;
	}

	.hp-hero--mobile .hp-slide:not(.hp-slide--banniere) > .e-con-inner > .e-con {
		width: 100%;
	}

	.hp-hero--mobile .hp-slide h2 {
		font-size: 26px;
		line-height: 1.15;
	}

	.hp-hero--mobile .hp-slide .elementor-widget-image img {
		max-height: 200px;
		width: auto;
		margin: 0 auto;
		display: block;
	}

	.hp-hero--mobile .hp-slide .elementor-button {
		width: 100%;
		justify-content: center;
	}

	/* Pagination sous la slide, pas par-dessus le visuel. */
	.hp-hero--mobile .swiper-pagination {
		position: static;
		margin-top: 12px;
	}
}


/* ---------------------------------------------------------------
   Slides produit sur telephone
   Elementor fixe la hauteur minimale par une variable, --min-height,
   posee sur chaque element : la propriete min-height seule ne suffit
   pas, d'ou le grand vide sous le visuel.
   --------------------------------------------------------------- */

@media (max-width: 767px) {
	.elementor .hp-hero--mobile .hp-slide {
		--min-height: 0px;
		min-height: 0;
		height: auto;
	}

	.elementor .hp-hero--mobile .swiper-slide {
		height: auto;
	}

	/* Les photos produit ont un fond blanc : sur la slide grise il
	   dessinait un rectangle. Le mode multiply fond le blanc dans la
	   couleur de la slide, le produit reste intact. */
	.elementor .hp-hero--mobile .hp-slide:not(.hp-slide--banniere) .elementor-widget-image img {
		mix-blend-mode: multiply;
		max-height: 190px;
		width: auto;
		margin: 0 auto;
		display: block;
	}

	/* Boutons pleine largeur : le wrapper d'Elementor doit s'etirer
	   avec eux. */
	.elementor .hp-hero--mobile .hp-slide .elementor-widget-button,
	.elementor .hp-hero--mobile .hp-slide .elementor-button-wrapper,
	.elementor .hp-hero--mobile .hp-slide .elementor-button {
		width: 100%;
	}

	.elementor .hp-hero--mobile .hp-slide .elementor-button {
		justify-content: center;
		text-align: center;
	}

	.elementor .hp-hero--mobile .hp-slide .elementor-widget-button {
		margin: 0;
	}

	/* Pagination centree sous la slide, hors de la zone de Chaty. */
	.elementor .hp-hero--mobile .swiper-pagination {
		position: static;
		display: flex;
		justify-content: center;
		gap: 6px;
		padding: 14px 0 6px;
	}

	.elementor .hp-hero--mobile .swiper-pagination-bullet {
		width: 22px;
		height: 3px;
		border-radius: 0;
		margin: 0;
		background: var(--hp-border);
		opacity: 1;
	}

	.elementor .hp-hero--mobile .swiper-pagination-bullet-active {
		background: var(--hp-accent);
	}
}


/* hp-header-1024 : entre 1000 et 1279 px, les colonnes egales de l'en-tete
   Blocksy ne laissent que ~200 px a droite pour recherche, compte, panier
   et devis : le bloc deborde sur "Suivi de commande". La colonne de droite
   prend sa largeur reelle, le centre se partage le reste. */
@media (min-width: 1000px) and (max-width: 1279.98px) {
	#header [data-device="desktop"] [data-row="middle"][data-column-set="3"] > .ct-container {
		grid-template-columns: auto 1fr auto;
		column-gap: 24px;
	}

	/* Les horaires ne tiennent plus : on garde telephone et suivi de commande. */
	#header [data-device="desktop"] [data-id="contacts"] li:nth-child(2) {
		display: none;
	}
}


/* Bandeau d'avantages de l'accueil : sur telephone, 2 x 2 petites cartes blanches. */
@media (max-width: 767px) {
	.hp-avantages > .e-con-inner > .e-con,
	.hp-avantages > .e-con {
		background: #FFFFFF;
		border: 1px solid #E3E3E3;
		border-radius: 12px;
		padding: 14px !important;
	}
}


/* hp-galerie-produit : la photo principale est montree en entier, jamais rognee
   (les visuels produits sont carres ou non, sur fond blanc). */
.woocommerce-product-gallery .ct-media-container img {
	object-fit: contain !important;
	background: #FFFFFF;
}


/* hp-fiche-espace : depuis le retrait du fil d'Ariane du haut, la fiche
   produit collait a l'en-tete. On rend l'espace sous le menu. */
.single-product #main > .ct-container-full {
	padding-top: 40px;
}

@media (max-width: 999px) {
	.single-product #main > .ct-container-full {
		padding-top: 24px;
	}
}

@media (max-width: 689px) {
	.single-product #main > .ct-container-full {
		padding-top: 16px;
	}
}