/* ==========================================================================
   abisco-quickwins.css - correctifs UX rapides (27/10/2026)
   Fichier séparé, chargé après les CSS existants : retirable d'une ligne.
   Les sélecteurs sont préfixés (html body ...) pour passer devant les règles
   !important existantes de main_integration.css, sans rien toucher ailleurs.
   ========================================================================== */

/* --- 1. Tableau des références de la fiche produit (audit B02 / G4) ------ */

/* visible d'emblée (avant : caché derrière un « + » de 22 px) */
html body #result_description_technique { display: block !important; }
html body #conteneur_caracteristiques_produit #icon-plus,
html body #conteneur_caracteristiques_produit #icon-moins { display: none !important; }

/* conteneur : carte avec défilement horizontal si beaucoup de colonnes */
html body #result_description_technique div#SelectionRef {
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
	margin: 12px 0 28px !important;
	border: 1px solid #E5E7EB !important;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(17, 24, 39, .05);
}
html body #result_description_technique table.tab-p {
	position: static !important;	/* le CSS existant décalait le tableau de -48 px (références coupées) */
	left: auto !important;
	margin: 0 !important;
	width: 100% !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	font-size: 14px !important;
	color: #1F2937 !important;
}

/* en-têtes */
html body #result_description_technique table.tab-p tr.tb_head th {
	position: sticky;
	top: 0;
	z-index: 2;
	padding: 11px 12px !important;
	background: #F3F4F6 !important;
	border-bottom: 2px solid #E5E7EB !important;
	color: #111827 !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	text-align: left !important;
	vertical-align: bottom !important;
	white-space: normal;
	min-width: 72px;
}
html body #result_description_technique table.tab-p tr.tb_head th strong { font-weight: 700 !important; }

/* cellules */
html body #result_description_technique table.tab-p td {
	padding: 10px 12px !important;
	border-bottom: 1px solid #EEF0F2 !important;
	background: #fff;
	color: #1F2937 !important;
	font-size: 14px !important;
	line-height: 1.35 !important;
	text-align: left !important;
	vertical-align: middle !important;
	height: auto !important;
}
html body #result_description_technique table.tab-p tr:hover td { background: #FFF7ED; }

/* 1re colonne : la référence */
html body #result_description_technique table.tab-p tr > :first-child {
	white-space: nowrap;
	font-weight: 600 !important;
}

/* prix */
html body #result_description_technique table.tab-p td.priceCaracts {
	color: #111827 !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	white-space: nowrap;
}

/* sélecteur de quantité : [-] [ 0 ] [+] */
html body #result_description_technique .quanT { white-space: nowrap; }
html body #result_description_technique .quanT div#select_qty {
	display: inline-flex !important;
	align-items: stretch !important;
	height: 36px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid #D1D5DB !important;
	border-radius: 8px !important;
	overflow: hidden;
	background: #fff !important;
	float: none !important;
}
html body #result_description_technique .quanT div#select_qty input.quantity {
	order: 1;
	width: 42px !important;
	height: 34px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-left: 1px solid #E5E7EB !important;
	border-right: 1px solid #E5E7EB !important;
	border-radius: 0 !important;
	background: #fff !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-align: center !important;
}
html body #result_description_technique .quanT div#select_qty a.down,
html body #result_description_technique .quanT div#select_qty a.augmenter {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 34px !important;
	height: 34px !important;
	margin: 0 !important;
	padding: 0 !important;
	position: static !important;
	float: none !important;
	color: #374151 !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	cursor: pointer !important;
	user-select: none;
}
html body #result_description_technique .quanT div#select_qty a.down { order: 0; }
html body #result_description_technique .quanT div#select_qty a.augmenter { order: 2; }
html body #result_description_technique .quanT div#select_qty a:hover { background: #F3F4F6 !important; }

/* boutons Panier / Devis : la couleur reste pilotée par le script existant
   (gris tant que la quantité vaut 0, orange ensuite) ; seule la forme change */
html body #result_description_technique td.caractsL p { margin: 0 !important; text-align: left !important; }
html body #result_description_technique a.grey2 {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	min-width: 76px;
	height: 36px !important;
	margin: 0 !important;
	padding: 0 14px !important;
	border-radius: 8px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: .03em;
	line-height: 1 !important;
	text-transform: uppercase;
	text-decoration: none !important;
	white-space: nowrap;
	transition: filter .15s;
}
html body #result_description_technique a.grey2 span { margin: 0 !important; font-size: 13px !important; line-height: 1 !important; }
html body #result_description_technique a.grey2:hover { filter: brightness(.94); }

/* --- 1b. Mobile : chaque référence devient une carte « libellé : valeur » --- */
@media (max-width: 767px) {
	html body #result_description_technique #tab-m > div {
		overflow: visible !important;
		margin: 0 0 14px !important;
		border: 1px solid #E5E7EB;
		border-radius: 10px;
		background: #fff;
		box-shadow: 0 1px 2px rgba(17, 24, 39, .05);
	}
	html body #result_description_technique #tab-m table {
		display: block !important;
		width: 100% !important;
		position: static !important;
		left: auto !important;
		margin: 0 !important;
		border: 0 !important;
	}
	/* en-têtes et valeurs côte à côte : th (colonne 1) en face du td de même rang (colonne 2) */
	html body #result_description_technique #tab-m tbody {
		display: grid !important;
		grid-template-columns: minmax(118px, 42%) 1fr;
	}
	html body #result_description_technique #tab-m tr { display: contents !important; }
	html body #result_description_technique #tab-m th,
	html body #result_description_technique #tab-m td {
		position: static !important;
		width: auto !important;
		min-width: 0 !important;
		height: auto !important;
		padding: 9px 12px !important;
		border: 0 !important;
		border-bottom: 1px solid #F0F1F3 !important;
		font-size: 14px !important;
		line-height: 1.35 !important;
		text-align: left !important;
		vertical-align: middle !important;
		white-space: normal !important;
		box-shadow: none !important;
	}
	html body #result_description_technique #tab-m th {
		grid-column: 1;
		background: #F9FAFB !important;
		color: #4B5563 !important;
		font-size: 12.5px !important;
		font-weight: 600 !important;
	}
	html body #result_description_technique #tab-m td { grid-column: 2; background: #fff !important; color: #111827 !important; }
	/* 1re ligne : la référence, en titre de carte */
	html body #result_description_technique #tab-m tr > :nth-child(1) { font-size: 15px !important; font-weight: 700 !important; background: #F3F4F6 !important; }
	html body #result_description_technique #tab-m td.priceCaracts { font-size: 16px !important; font-weight: 700 !important; }
	html body #result_description_technique #tab-m tr > :nth-child(1) { grid-row: 1; }
	html body #result_description_technique #tab-m tr > :nth-child(2) { grid-row: 2; }
	html body #result_description_technique #tab-m tr > :nth-child(3) { grid-row: 3; }
	html body #result_description_technique #tab-m tr > :nth-child(4) { grid-row: 4; }
	html body #result_description_technique #tab-m tr > :nth-child(5) { grid-row: 5; }
	html body #result_description_technique #tab-m tr > :nth-child(6) { grid-row: 6; }
	html body #result_description_technique #tab-m tr > :nth-child(7) { grid-row: 7; }
	html body #result_description_technique #tab-m tr > :nth-child(8) { grid-row: 8; }
	html body #result_description_technique #tab-m tr > :nth-child(9) { grid-row: 9; }
	html body #result_description_technique #tab-m tr > :nth-child(10) { grid-row: 10; }
	html body #result_description_technique #tab-m tr > :nth-child(11) { grid-row: 11; }
	html body #result_description_technique #tab-m tr > :nth-child(12) { grid-row: 12; }
	html body #result_description_technique #tab-m tr > :nth-child(13) { grid-row: 13; }
	html body #result_description_technique #tab-m tr > :nth-child(14) { grid-row: 14; }
	html body #result_description_technique #tab-m tr > :nth-child(15) { grid-row: 15; }
	html body #result_description_technique #tab-m tr > :nth-child(16) { grid-row: 16; }
	html body #result_description_technique #tab-m tr > :nth-child(17) { grid-row: 17; }
	html body #result_description_technique #tab-m tr > :nth-child(18) { grid-row: 18; }
	html body #result_description_technique #tab-m tr > :nth-child(19) { grid-row: 19; }
	html body #result_description_technique #tab-m tr > :nth-child(20) { grid-row: 20; }
	html body #result_description_technique #tab-m tr > :nth-child(21) { grid-row: 21; }
	html body #result_description_technique #tab-m tr > :nth-child(22) { grid-row: 22; }
	html body #result_description_technique #tab-m tr > :nth-child(23) { grid-row: 23; }
	html body #result_description_technique #tab-m tr > :nth-child(24) { grid-row: 24; }
	html body #result_description_technique #tab-m tr > :nth-child(25) { grid-row: 25; }
	html body #result_description_technique #tab-m tr > :nth-child(26) { grid-row: 26; }
	html body #result_description_technique #tab-m tr > :nth-child(27) { grid-row: 27; }
	html body #result_description_technique #tab-m tr > :nth-child(28) { grid-row: 28; }
	html body #result_description_technique #tab-m tr > :nth-child(29) { grid-row: 29; }
	html body #result_description_technique #tab-m tr > :nth-child(30) { grid-row: 30; }

	/* Quantité / Commander / Devis : affichés dans le bloc sous la carte, libellés vides masqués */
	html body #result_description_technique #tab-m tr.tb_head th:nth-last-child(-n+3) { display: none !important; }
	/* bloc commande collé sous la carte */
	html body #result_description_technique #tab-m > div:has(+ div > .quanT) { margin-bottom: 0 !important; border-radius: 10px 10px 0 0; }
	html body #result_description_technique #tab-m > div:has(> .quanT) {
		display: flex !important;
		flex-wrap: wrap;
		align-items: center !important;
		gap: 10px;
		margin: 0 0 16px !important;
		padding: 12px !important;
		border: 1px solid #E5E7EB;
		border-top: 0;
		border-radius: 0 0 10px 10px;
		background: #F9FAFB;
	}
	html body #result_description_technique #tab-m > div:has(> .quanT) > div { margin: 0 !important; padding: 0 !important; float: none !important; }
	html body #result_description_technique #tab-m > div:has(> .quanT) > div:not(.quanT) { flex: 1 1 0; }
	html body #result_description_technique #tab-m > div:has(> .quanT) a.grey2 { width: 100% !important; height: 42px !important; }
}
/* --- 2. Pop-up « Besoin d'un conseil ? » (audit B05 / G3) ----------------- */
/* masquée sur mobile (25 % de l'écran), plus discrète sur ordinateur */
@media (max-width: 899px) {
	html body #popup_conseil, html body .popup_conseil { display: none !important; }
}
@media (min-width: 900px) {
	html body #popup_conseil.popup_conseil {
		right: 16px !important;
		bottom: 16px !important;
		transform: scale(.85);
		transform-origin: bottom right;
	}
}

/* --- 3. Texte de 4 px sur mobile : tailles en vw (audit B06 / G1) --------- */
html body #categorybloc p,
html body #categorybloc p span,
html body #categorybloc .intro p,
html body p#categoryTitle {
	font-size: clamp(14px, 1.1vw, 17px) !important;
	letter-spacing: 0 !important;
}

/* --- 4. Défilement horizontal parasite (audit B07 / G2) ------------------- */
html, body { overflow-x: clip; }
html body #center.page,
html body .mi_new_column_1,
html body .mi_new_column_2,
html body .mi_new_column_3 { max-width: 100%; min-width: 0; }
html body #center img,
html body .visuel img,
html body .mainImage img,
html body img.image_font_blanc { max-width: 100%; height: auto; }