/* =========================================================================
   LPP — Cartes produit (chargée sur tout le site)
   LA carte du site : catalogue, grilles Elementor, pages SEO, produits similaires, recherche.
   Charte : bleu nuit #030F27 · orange #FD5D14 · Montserrat (titres) · Poppins (texte)
   Tout est préfixé .lpp-t : le thème et Elementor imposent leurs styles aux boutons et titres.
   ========================================================================= */

/* ---------- Jetons ---------- */
.lpp-t {
	--or: #FD5D14;
	--or-fonce: #D94A08;
	--or-pale: #FFF3EC;
	--nuit: #030F27;
	--nuit-2: #0B1C3F;
	--nuit-3: #16284F;
	--texte: #1F2937;
	--gris: #5B6474;
	--doux: #F4F6F9;
	--doux-2: #EAEEF4;
	--bord: #DCE2EA;
	--ok: #16803C;
	--ok-pale: #EAF6EE;
	--att: #A15C00;
	--att-pale: #FFF6E5;
	--ko: #B42318;
	--rayon: 18px;
	--ombre: 0 1px 2px rgba(3, 15, 39, .06), 0 8px 24px rgba(3, 15, 39, .07);
	--ombre-h: 0 2px 4px rgba(3, 15, 39, .08), 0 18px 40px rgba(3, 15, 39, .14);
	--titre: "Montserrat", "Poppins", system-ui, sans-serif;
	--corps: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

	font-family: var(--corps);
	font-size: 16px;
	line-height: 1.55;
	color: var(--texte);
	-webkit-font-smoothing: antialiased;
}
.lpp-t *, .lpp-t *::before, .lpp-t *::after { box-sizing: border-box; }
.lpp-t [hidden] { display: none !important; }
.lpp-t img { max-width: 100% !important; height: auto; }
.lpp-t h1, .lpp-t h2, .lpp-t h3, .lpp-t h4 { font-family: var(--titre); text-transform: none; letter-spacing: -.01em; margin: 0; }
.lpp-t p { margin: 0; }
.lpp-t a { color: inherit; }
.lpp-t :focus-visible { outline: 3px solid rgba(253, 93, 20, .55); outline-offset: 2px; }
.lpp-t .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* ---------- Boutons (le thème force un texte blanc au survol : couleurs fixées partout) ---------- */
.lpp-t .lpp-t-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 46px; padding: 10px 18px; border-radius: 999px; border: 1.5px solid transparent;
	font: 600 15px/1.2 var(--corps); text-decoration: none; text-transform: none; letter-spacing: 0; white-space: nowrap;
	cursor: pointer; transition: background .18s, color .18s, border-color .18s, transform .12s, box-shadow .18s;
	-webkit-tap-highlight-color: transparent;
}
.lpp-t .lpp-t-btn:active { transform: scale(.98); }
.lpp-t .lpp-t-btn > .lpp-t-sm-cache { margin-left: -4px; } /* le gap du bouton fait déjà l'espace */
.lpp-t .lpp-t-btn:disabled { opacity: .45; cursor: not-allowed; }
.lpp-t .lpp-t-btn--or { background: var(--or); color: #fff; box-shadow: 0 6px 16px rgba(253, 93, 20, .28); }
.lpp-t .lpp-t-btn--or:hover:not(:disabled), .lpp-t .lpp-t-btn--or:focus { background: var(--or-fonce); color: #fff; }
.lpp-t .lpp-t-btn--plein { background: var(--nuit); color: #fff; }
.lpp-t .lpp-t-btn--plein:hover, .lpp-t .lpp-t-btn--plein:focus { background: var(--nuit-3); color: #fff; }
.lpp-t .lpp-t-btn--fantome { background: #fff; color: var(--nuit); border-color: var(--bord); }
.lpp-t .lpp-t-btn--fantome:hover, .lpp-t .lpp-t-btn--fantome:focus { background: #fff; color: var(--nuit); border-color: var(--nuit); }
.lpp-t .lpp-t-btn--grand { min-height: 54px; padding: 14px 26px; font-size: 16px; }
.lpp-t .lpp-t-btn--petit { min-height: 38px; padding: 8px 14px; font-size: 13px; }
.lpp-t .lpp-t-btn--large { width: 100%; margin-top: 16px; }
.lpp-t .lpp-t-btn--comparer { background: #fff; color: var(--nuit); border-color: var(--bord); }
.lpp-t .lpp-t-btn--comparer:hover:not(:disabled), .lpp-t .lpp-t-btn--comparer:focus { background: #fff; color: var(--nuit); border-color: var(--nuit); }
.lpp-t .lpp-t-btn--comparer.est-actif, .lpp-t .lpp-t-btn--comparer.est-actif:hover { background: var(--or-pale); color: var(--or-fonce); border-color: var(--or); }
.lpp-t .lpp-t-coche { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid currentColor; display: inline-grid; place-items: center; }
.lpp-t .est-actif > .lpp-t-coche::after { content: "✓"; font-size: 12px; font-weight: 700; }
/* Ajout au devis (AJAX WooCommerce) : en cours, puis ajouté */
.lpp-t .lpp-t-btn.loading { opacity: .6; pointer-events: none; }
.lpp-t .lpp-t-btn.added, .lpp-t .lpp-t-btn.added:hover { background: var(--ok); color: #fff; }
.lpp-t .lpp-t-btn.added::after { content: " ✓"; }
.lpp-t .added_to_cart { display: none !important; } /* lien « Voir le panier » : le mini-panier s'ouvre déjà */
.lpp-t .lpp-t-lien {
	background: none; border: 0; padding: 0; color: var(--or-fonce); font: 600 14px var(--corps);
	text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-transform: none;
}
.lpp-t .lpp-t-lien:hover, .lpp-t .lpp-t-lien:focus { background: none; color: var(--or-fonce); }
.lpp-t .lpp-t-lien:disabled { color: var(--gris); opacity: .5; cursor: default; }

/* ---------- La carte ---------- */
.lpp-t-carte {
	container-type: inline-size;
	display: flex; flex-direction: column; height: 100%; background: #fff; border-radius: var(--rayon); overflow: hidden;
	border: 1px solid var(--doux-2); box-shadow: var(--ombre); transition: box-shadow .22s, transform .22s;
	animation: lpp-t-app .35s ease both;
}
.lpp-t-carte:hover { box-shadow: var(--ombre-h); transform: translateY(-3px); }
@keyframes lpp-t-app { from { opacity: 0; transform: translateY(8px); } }

.lpp-t .lpp-t-carte-img { position: relative; display: block; aspect-ratio: 4 / 3; background: linear-gradient(180deg, #F7F9FC 0%, #E9EEF5 100%); }
.lpp-t .lpp-t-carte-img img {
	position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: 100% !important;
	object-fit: contain; padding: 14px; margin: 0 !important; border-radius: 0; mix-blend-mode: multiply; transition: opacity .3s;
}
.lpp-t .lpp-t-carte-img .lpp-t-img2 { opacity: 0; }
@media (hover: hover) {
	.lpp-t .lpp-t-carte:hover .a-survol img:first-child { opacity: 0; }
	.lpp-t .lpp-t-carte:hover .a-survol .lpp-t-img2 { opacity: 1; }
}
.lpp-t-carte--article .lpp-t-carte-img { background: #fff; border-bottom: 1px solid var(--doux-2); }

.lpp-t-badge { position: absolute; z-index: 1; top: 12px; left: 12px; background: var(--nuit); color: #fff; font: 700 12px/1 var(--titre); padding: 7px 10px; border-radius: 999px; }
.lpp-t-badge--type { background: #fff; color: var(--nuit); border: 1px solid var(--bord); font-family: var(--corps); font-weight: 600; }
.lpp-t-badge--commande { left: auto; right: 12px; background: #fff; color: var(--att); border: 1px solid #F3D9A8; }

.lpp-t-carte-corps { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; flex: 1; text-align: left; }
/* !important sur la taille : WooCommerce impose « ul.products li.product h3 { font-size: 1em } », plus spécifique */
.lpp-t .lpp-t-carte-titre { font-size: 22px !important; font-weight: 800; color: var(--nuit); line-height: 1.1; text-transform: uppercase; margin: 0 !important; padding: 0 !important; }
.lpp-t .lpp-t-carte-titre a { text-decoration: none; }
.lpp-t .lpp-t-carte--article .lpp-t-carte-titre {
	font: 700 15.5px/1.3 var(--corps); font-size: 15.5px !important; letter-spacing: 0; text-transform: none;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.9em;
}
.lpp-t-carte-nom { font-size: 13px; color: var(--gris); margin-top: -6px !important; }
.lpp-t-carte-resume { font-size: 13.5px; color: var(--gris); line-height: 1.45; }
.lpp-t-compat { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12px; }
.lpp-t-compat span { color: var(--gris); margin-right: 2px; }
.lpp-t-compat b { font-weight: 700; color: var(--nuit); background: var(--doux); border-radius: 6px; padding: 2px 7px; }

.lpp-t-specs { display: grid; grid-template-columns: repeat(var(--nb, 3), minmax(0, 1fr)); gap: 6px; margin: 2px 0 0; }
.lpp-t-specs div { background: var(--doux); border-radius: 10px; padding: 8px 8px 7px; min-width: 0; }
.lpp-t-specs dt { font-size: 11px; color: var(--gris); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lpp-t-specs dd { margin: 1px 0 0; font: 700 15px var(--titre); color: var(--nuit); white-space: nowrap; }

/* Prix : TTC en avant, HT discret ; « prix conseillé » et mention devis selon le réglage du produit */
.lpp-t-prix { margin-top: auto; padding-top: 4px; color: var(--gris); font-size: 13px; line-height: 1.3; }
.lpp-t-prix p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 5px; margin: 0; }
.lpp-t-prix p small { display: inline; }
.lpp-t-prix strong { display: inline; font: 800 22px var(--titre); color: var(--nuit); }
.lpp-t-prix-label { display: block; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--gris); margin-bottom: 2px; }
.lpp-t-prix-ht { display: block; font-size: 12.5px; color: #8A93A3; margin-top: 2px; }
.lpp-t-prix-devis { display: block; margin-top: 8px; padding: 6px 9px; border-radius: 8px; background: var(--or-pale); color: var(--or-fonce); font-size: 12px; font-weight: 600; }

.lpp-t-carte-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.lpp-t .lpp-t-carte-actions .lpp-t-btn { padding-inline: 12px; }
/* Équipement : « Voir » compact à côté de « Ajouter au devis », sur une seule ligne dès que la carte a la place */
@container (min-width: 241px) {
	.lpp-t-carte--article .lpp-t-carte-actions { grid-template-columns: auto minmax(0, 1fr); }
	.lpp-t .lpp-t-carte--article .lpp-t-carte-actions .lpp-t-btn--fantome { padding-inline: 16px; }
}

/* Carte moyenne (grilles à 3-4 colonnes dans un conteneur, produits similaires) */
@container (max-width: 300px) {
	.lpp-t-carte-corps { padding: 14px; }
	.lpp-t .lpp-t-carte-titre { font-size: 19px !important; }
	.lpp-t-specs { gap: 4px; }
	.lpp-t-specs div { padding: 6px 6px 5px; }
	.lpp-t-specs dt { font-size: 9.5px; letter-spacing: 0; }
	.lpp-t-specs dd { font-size: 13.5px; }
}

/* Carte étroite (colonnes très serrées) : l'essentiel seulement */
@container (max-width: 240px) {
	.lpp-t-carte-corps { padding: 12px; gap: 8px; }
	.lpp-t .lpp-t-carte-titre { font-size: 17px !important; }
	.lpp-t .lpp-t-carte--article .lpp-t-carte-titre { font-size: 14px !important; min-height: 0; }
	.lpp-t-carte-nom, .lpp-t-specs, .lpp-t-prix-ht { display: none; }
	.lpp-t-prix strong { font-size: 19px; }
	.lpp-t-carte-actions { grid-template-columns: 1fr; }
	.lpp-t .lpp-t-carte-actions .lpp-t-btn { min-height: 40px; font-size: 13px; }
	.lpp-t-sm-cache { display: none; }
}

/* ---------- Dans les grilles WooCommerce du site (widgets Elementor, produits similaires…) ---------- */
ul.products li.product.lpp-t-li {
	display: block !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important;
	box-shadow: none !important; text-align: left !important; width: auto; float: none;
}
ul.products li.product.lpp-t-li:hover { transform: none; box-shadow: none !important; }
ul.products:has(> li.lpp-t-li) { gap: 20px !important; }
/* Grilles WooCommerce classiques (shortcode [products]) : flottants à marges → grille */
.woocommerce ul.products:not(.elementor-grid):has(> li.lpp-t-li) { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.woocommerce ul.products:not(.elementor-grid):has(> li.lpp-t-li)::before,
.woocommerce ul.products:not(.elementor-grid):has(> li.lpp-t-li)::after { display: none; }
.woocommerce ul.products:not(.elementor-grid) li.product.lpp-t-li { width: auto !important; float: none !important; }

@media (prefers-reduced-motion: reduce) {
	.lpp-t *, .lpp-t *::before, .lpp-t *::after { animation: none !important; transition: none !important; }
}

/* Grilles de produits Elementor dans un conteneur flex (pages SEO Rippa / pas cher, équipements) :
   le widget ne s'étirait pas sur la largeur du conteneur, sa hauteur était calculée pour une autre largeur
   et, en 2 colonnes (mobile), les dernières cartes débordaient sur le bouton et la section suivante (21/09/2026). */
.e-con > .elementor-widget-woocommerce-products,
.e-con > .e-con-inner > .elementor-widget-woocommerce-products { width: 100%; }

/* ---------- Filet : aucun décalage latéral sur téléphone ----------
   Malgré les corrections au cas par cas, un bloc trop large suffit à rendre toute la page
   glissante de droite à gauche, barres fixes comprises. « clip » coupe le débordement sans
   désactiver les positions collantes, contrairement à « hidden ». */
@media (max-width: 767px) {
	html, body { overflow-x: clip; max-width: 100%; }
}