/*
 * La grille textile — habillage.
 *
 * Univers « atelier éditorial » de la charte impressions.be : fond papier,
 * encre, bleu de calage, filets d'un pixel. AUCUNE ombre portée, angles quasi
 * vifs (2 px), les montants en mono comme les specs produit.
 *
 * Les valeurs de couleur sont reprises des jetons de la charte. La seule
 * couleur qui vienne des données — la teinte d'un coloris — est posée en
 * attribut `style` par le serveur, jamais ici : aucun coloris n'est écrit
 * dans cette feuille.
 *
 * Cible : lisible et utilisable à 320 px de large, au doigt comme au clavier.
 */

.ipt-grille {
	--ipt-papier: #F6F3EC;
	--ipt-encre: #16150F;
	--ipt-bleu: #2440C8;
	--ipt-graphite: #6F6B61;
	--ipt-filigrane: #E5DFD2;
	--ipt-blanc: #FFFFFF;

	--ipt-texte: "Archivo", "Helvetica Neue", sans-serif;
	--ipt-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

	font-family: var( --ipt-texte );
	color: var( --ipt-encre );
	max-width: 42rem;
}

.ipt-grille *,
.ipt-grille *::before,
.ipt-grille *::after {
	box-sizing: border-box;
}

/* --- Le coloris ---------------------------------------------------- */

.ipt-coloris {
	margin: 0 0 1.25rem;
}

.ipt-coloris__intitule,
.ipt-coloris__label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35rem;
}

/* Quand le script a pris la main, le <select> et son étiquette s'effacent :
   le champ reste dans le formulaire et porte toujours la valeur soumise. */
.ipt-coloris--js .ipt-coloris__natif,
.ipt-coloris--js .ipt-coloris__label {
	display: none;
}

.ipt-coloris__natif {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.5rem;
	font: inherit;
	border: 1px solid var( --ipt-filigrane );
	border-radius: 2px;
	background: var( --ipt-blanc );
}

.ipt-coloris__note {
	margin: 0.5rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var( --ipt-graphite );
}

/* --- La pastille de couleur ---------------------------------------- */

.ipt-pastille {
	display: inline-block;
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	border: 1px solid var( --ipt-filigrane );
	border-radius: 2px;
	background: var( --ipt-blanc );
}

/* Pas de teinte connue : un carré hachuré, jamais une couleur inventée. */
.ipt-pastille--sans {
	background-image: repeating-linear-gradient(
		45deg,
		var( --ipt-filigrane ) 0,
		var( --ipt-filigrane ) 2px,
		var( --ipt-blanc ) 2px,
		var( --ipt-blanc ) 4px
	);
}

/* --- La liste déroulante à pastilles -------------------------------- */

.ipt-liste {
	position: relative;
}

.ipt-liste__bouton {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: 100%;
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem;
	font: inherit;
	text-align: left;
	color: var( --ipt-encre );
	background: var( --ipt-blanc );
	border: 1px solid var( --ipt-filigrane );
	border-radius: 2px;
	cursor: pointer;
}

.ipt-liste__bouton::after {
	content: "";
	margin-left: auto;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid var( --ipt-graphite );
	border-bottom: 2px solid var( --ipt-graphite );
	transform: rotate( 45deg ) translate( -25%, -25% );
}

.ipt-liste__options {
	position: absolute;
	z-index: 20;
	left: 0;
	right: 0;
	margin: 2px 0 0;
	padding: 0;
	max-height: 17rem;
	overflow-y: auto;
	list-style: none;
	background: var( --ipt-blanc );
	border: 1px solid var( --ipt-filigrane );
	border-radius: 2px;
}

.ipt-liste__option {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 2.75rem;
	padding: 0.4rem 0.75rem;
	cursor: pointer;
}

.ipt-liste__option--actif {
	background: var( --ipt-papier );
	outline: 2px solid var( --ipt-bleu );
	outline-offset: -2px;
}

.ipt-liste__option[ aria-selected="true" ] .ipt-liste__nom {
	font-weight: 600;
}

.ipt-liste__mention {
	margin-left: auto;
	font-size: 0.75rem;
	font-style: italic;
	color: var( --ipt-graphite );
}

/* --- Le tableau des tailles ----------------------------------------- */

.ipt-tailles {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.25rem;
}

.ipt-tailles__legende {
	caption-side: top;
	text-align: left;
	padding: 0 0 0.6rem;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var( --ipt-graphite );
}

.ipt-tailles th,
.ipt-tailles td {
	padding: 0.35rem 0.5rem;
	border-bottom: 1px solid var( --ipt-filigrane );
	text-align: left;
	vertical-align: middle;
}

.ipt-tailles thead th {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --ipt-graphite );
	border-bottom-width: 2px;
}

.ipt-tailles tbody th {
	font-family: var( --ipt-mono );
	font-weight: 600;
	white-space: nowrap;
}

.ipt-tailles thead th:last-child,
.ipt-pu {
	text-align: right;
	font-family: var( --ipt-mono );
	white-space: nowrap;
}

.ipt-pu--sans {
	color: var( --ipt-graphite );
	font-style: italic;
}

/* Coloris pas encore choisi : le prix dépend de lui, on n'en avance aucun. */
.ipt-pu--attente {
	color: var( --ipt-graphite );
}

/* 16 px au minimum : en dessous, les iPhone zooment sur le champ actif et
   sortent la grille de l'écran. */
.ipt-quantite {
	width: 5.5rem;
	min-height: 2.75rem;
	padding: 0.4rem 0.5rem;
	font-family: var( --ipt-mono );
	font-size: 1rem;
	text-align: right;
	color: var( --ipt-encre );
	background: var( --ipt-blanc );
	border: 1px solid var( --ipt-filigrane );
	border-radius: 2px;
}

/* --- Les totaux ----------------------------------------------------- */

.ipt-totaux {
	padding: 0.9rem 1rem;
	background: var( --ipt-papier );
	border: 1px solid var( --ipt-filigrane );
	border-radius: 2px;
}

.ipt-totaux--attente {
	opacity: 0.6;
}

.ipt-totaux--panne::before {
	content: "Le total n’a pas pu être mis à jour. Vérifiez votre connexion, ou ajoutez au panier : le prix sera recalculé.";
	display: block;
	margin-bottom: 0.6rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var( --ipt-filigrane );
	font-size: 0.875rem;
	color: var( --ipt-bleu );
}

.ipt-totaux__liste {
	margin: 0;
}

.ipt-totaux__ligne {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.2rem 0;
}

.ipt-totaux__ligne dt {
	margin: 0;
	color: var( --ipt-graphite );
}

.ipt-totaux__ligne dd {
	margin: 0;
	font-family: var( --ipt-mono );
	text-align: right;
}

.ipt-totaux__ligne--fort {
	font-weight: 600;
}

.ipt-totaux__ligne--fort dt {
	color: var( --ipt-encre );
}

.ipt-totaux__invite,
.ipt-totaux__minimum,
.ipt-totaux__palier {
	margin: 0.6rem 0 0;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var( --ipt-graphite );
}

.ipt-totaux__minimum {
	color: var( --ipt-bleu );
}

.ipt-totaux__erreurs {
	margin: 0 0 0.6rem;
	padding-left: 1.1rem;
	color: var( --ipt-bleu );
	font-size: 0.875rem;
}

/* --- Le bouton ------------------------------------------------------ */

.ipt-grille__action {
	margin: 1.1rem 0 0;
}

.ipt-grille .ipt-ajouter {
	min-height: 2.75rem;
	padding: 0.65rem 1.4rem;
	font: inherit;
	font-weight: 600;
	color: var( --ipt-papier );
	background: var( --ipt-bleu );
	border: 1px solid var( --ipt-bleu );
	border-radius: 2px;
	cursor: pointer;
}

.ipt-grille__noscript {
	margin: 0.6rem 0 0;
	font-size: 0.875rem;
	color: var( --ipt-graphite );
}

/* --- Le clavier doit se voir ---------------------------------------- */

.ipt-grille :focus-visible {
	outline: 2px solid var( --ipt-bleu );
	outline-offset: 2px;
}

/* --- Téléphone ------------------------------------------------------ */

@media ( max-width: 30rem ) {

	.ipt-tailles th,
	.ipt-tailles td {
		padding: 0.3rem 0.25rem;
	}

	.ipt-quantite {
		width: 4.5rem;
	}

	.ipt-totaux__ligne {
		gap: 0.5rem;
	}

	.ipt-grille .ipt-ajouter {
		width: 100%;
	}
}

/* ------------------------------------------------------------------ *
 *  Le marquage — ajoute le 24/09/2026.
 *  Le bloc vient de « ip-fiche-eco », donc il porte ses classes « ipeco- ».
 *  Sa feuille, elle, n est PAS chargee sur les fiches maison : ces
 *  quelques regles l habillent ici, sans rien changer aux 1 369.
 * ------------------------------------------------------------------ */
.ipt-marquage { margin-block: 22px 4px; }
.ipt-marquage .ipeco-titre { margin: 0 0 4px; font-weight: 600; }
.ipt-marquage .ipeco-note-en-ligne { font-weight: 400; opacity: .7; }
.ipt-marquage .ipeco-note { margin: 0 0 12px; font-size: 13px; opacity: .8; }
.ipt-marquage .ipeco-etiquette { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.ipt-marquage .ipeco-mq-tech { margin-bottom: 14px; }
.ipt-marquage .ipeco-mq-tech select { width: 100%; max-width: 22rem; padding: 8px 10px; }
.ipt-marquage .ipeco-mq-zones { margin: 0 0 12px; padding: 0; border: 0; }
.ipt-marquage .ipeco-mq-zones legend { padding: 0; }
.ipt-marquage .ipeco-mq-zone { display: inline-flex; align-items: center; gap: 7px;
	margin: 0 14px 8px 0; font-size: 14px; min-height: 44px; }
.ipt-marquage .ipeco-mq-total { margin: 0; font-size: 14px; line-height: 1.5; }
.ipt-marquage .ipt-mq-ligne { display: block; }
.ipt-marquage .ipt-mq-mr { opacity: .75; }
.ipt-marquage .ipt-mq-attente,
.ipt-marquage .ipt-mq-devis { opacity: .8; font-style: italic; }

/* ⛔ MESURE DU 24/09/2026, PAS UNE PREFERENCE. La ligne « Marquage, hors TVA »
   est en « flex: nowrap » comme toutes les lignes de ce tableau : son « dd » ne
   pouvait donc pas se replier, et « 137,50 € (dont 25,00 € de mise en route) »
   sur une seule ligne faisait deborder la page de 410 px pour 375 disponibles.
   La mention passe a la ligne : mesure apres, 375/375. */
.ipt-totaux__ligne .ipt-mq-mr { display: block; font-size: 12px; opacity: .75; }