/**
 * ip-parcours — habillage.
 *
 * Charte impressions.be : fond papier, encre, bleu de calage, angles quasi
 * vifs (2 px au maximum), AUCUNE ombre portée, Fraunces pour les titres,
 * Archivo pour le texte, IBM Plex Mono pour les chiffres et les prix.
 *
 * Les polices ne sont pas chargées ici : le thème les charge déjà. Chaque
 * famille garde donc une pile de secours complète, pour que l’écran reste
 * lisible même si elles manquent.
 *
 * Tout est portée par des variables : un thème enfant peut tout reprendre
 * sans toucher à ce fichier.
 */

.ipp-bloc,
.ipp-apres,
.ipp-comparateur {
	--ipp-papier: #F6F3EC;
	--ipp-feuille: #FFFFFF;
	--ipp-encre: #16150F;
	--ipp-bleu: #2440C8;
	--ipp-bleu-clair: #5B73E8;
	--ipp-graphite: #6F6B61;
	--ipp-filigrane: #E5DFD2;
	--ipp-surligne: #E9ECFA;
	--ipp-rouge: #B3202A;
	--ipp-vert: #1E6B45;
	--ipp-titre: "Fraunces", Georgia, "Times New Roman", serif;
	--ipp-texte: "Archivo", Helvetica, Arial, sans-serif;
	--ipp-mono: "IBM Plex Mono", Consolas, "Courier New", monospace;
	--ipp-rayon: 2px;
}

/* ---------------------------------------------------------------- le fil */

.ipp-bloc {
	font-family: var(--ipp-texte);
	color: var(--ipp-encre);
	margin: 0 0 18px;
}

.ipp-fil {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	min-height: 34px;
}

.ipp-etape {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--ipp-mono);
	font-size: 12.5px;
	line-height: 1.3;
	background: var(--ipp-papier);
	color: var(--ipp-encre);
	border: 1px solid var(--ipp-filigrane);
	border-radius: var(--ipp-rayon);
	padding: 5px 9px;
	max-width: 100%;
}

.ipp-etape-lib {
	color: var(--ipp-graphite);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .08em;
	white-space: nowrap;
}

.ipp-retour {
	all: unset;
	cursor: pointer;
	color: var(--ipp-bleu);
	border-bottom: 1px solid transparent;
	font-family: var(--ipp-mono);
	font-size: 12.5px;
	/* Cible tactile : le texte est court, la zone ne doit pas l’être. */
	padding: 6px 2px;
	min-height: 24px;
	display: inline-flex;
	align-items: center;
}

.ipp-retour:hover,
.ipp-retour:focus-visible {
	border-bottom-color: var(--ipp-bleu);
}

.ipp-retour:focus-visible,
.ipp-croix:focus-visible,
.ipp-raz:focus-visible,
.ipp-copier:focus-visible,
.ipp-confirme-oui:focus-visible,
.ipp-confirme-non:focus-visible,
.ipp-case:focus-visible {
	outline: 2px solid var(--ipp-bleu);
	outline-offset: 2px;
}

.ipp-retour[disabled],
.ipp-croix[disabled] {
	cursor: default;
	opacity: .45;
}

.ipp-croix {
	all: unset;
	cursor: pointer;
	width: 26px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--ipp-rayon);
	color: var(--ipp-graphite);
	font-size: 17px;
	line-height: 1;
}

.ipp-croix:hover,
.ipp-croix:focus-visible {
	background: var(--ipp-filigrane);
	color: var(--ipp-rouge);
}

.ipp-fleche {
	color: var(--ipp-graphite);
	opacity: .5;
	font-family: var(--ipp-mono);
	font-size: 12px;
}

.ipp-vide {
	color: var(--ipp-graphite);
	font-size: 13.5px;
	font-style: italic;
}

/* ------------------------------------------------ la barre et l’annonce */

.ipp-barre {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--ipp-filigrane);
}

.ipp-raz {
	all: unset;
	cursor: pointer;
	font-family: var(--ipp-mono);
	font-size: 12px;
	color: var(--ipp-graphite);
	border: 1px solid var(--ipp-filigrane);
	border-radius: var(--ipp-rayon);
	padding: 9px 13px;
	min-height: 24px;
}

.ipp-raz:hover:not([disabled]),
.ipp-raz:focus-visible:not([disabled]) {
	border-color: var(--ipp-rouge);
	color: var(--ipp-rouge);
}

.ipp-raz[disabled] {
	opacity: .4;
	cursor: default;
}

.ipp-etat {
	font-family: var(--ipp-mono);
	font-size: 11.5px;
	color: var(--ipp-graphite);
	flex: 1 1 220px;
	min-width: 0;
}

/* --------------------------------------------------------- confirmation */

.ipp-confirme {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
	padding: 10px 12px;
	border: 1px solid var(--ipp-filigrane);
	border-left: 2px solid var(--ipp-rouge);
	border-radius: var(--ipp-rayon);
	background: var(--ipp-papier);
}

.ipp-confirme[hidden] {
	display: none;
}

.ipp-confirme-texte {
	font-size: 14px;
	flex: 1 1 240px;
}

.ipp-confirme-oui,
.ipp-confirme-non {
	all: unset;
	cursor: pointer;
	font-family: var(--ipp-mono);
	font-size: 12px;
	border-radius: var(--ipp-rayon);
	padding: 9px 13px;
	min-height: 24px;
}

.ipp-confirme-oui {
	background: var(--ipp-bleu);
	color: #FFFFFF;
}

.ipp-confirme-oui:hover,
.ipp-confirme-oui:focus-visible {
	background: var(--ipp-bleu-clair);
}

.ipp-confirme-non {
	border: 1px solid var(--ipp-filigrane);
	color: var(--ipp-graphite);
}

/* ------------------------------------------------------ le comparateur */

.ipp-case-entete {
	width: 34px;
}

.ipp-case-cellule {
	width: 34px;
	vertical-align: middle;
}

.ipp-case {
	width: 18px;
	height: 18px;
	accent-color: #2440C8;
	cursor: pointer;
}

.ipp-lecteur {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.ipp-comparateur {
	font-family: var(--ipp-texte);
	color: var(--ipp-encre);
	background: var(--ipp-papier);
	border: 1px solid var(--ipp-filigrane);
	border-radius: var(--ipp-rayon);
	padding: 16px;
	margin: 16px 0 0;
}

.ipp-comparateur-titre {
	font-family: var(--ipp-titre);
	font-size: 17px;
	font-weight: 600;
	margin: 0 0 4px;
}

.ipp-comparateur-rappel {
	font-family: var(--ipp-mono);
	font-size: 12px;
	color: var(--ipp-graphite);
	margin: 0 0 14px;
	overflow-wrap: anywhere;
}

.ipp-cartes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px;
}

.ipp-carte {
	border: 1px solid var(--ipp-filigrane);
	background: var(--ipp-feuille);
	border-radius: var(--ipp-rayon);
	padding: 13px;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.ipp-q {
	font-family: var(--ipp-mono);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ipp-graphite);
}

.ipp-p {
	font-family: var(--ipp-mono);
	font-size: 19px;
	font-variant-numeric: tabular-nums;
}

.ipp-t,
.ipp-u {
	font-family: var(--ipp-mono);
	font-size: 11.5px;
	color: var(--ipp-graphite);
	font-variant-numeric: tabular-nums;
}

.ipp-gain {
	font-family: var(--ipp-mono);
	font-size: 11.5px;
	color: var(--ipp-vert);
	margin-top: 4px;
}

.ipp-gain-vide {
	color: var(--ipp-graphite);
}

.ipp-copier {
	all: unset;
	cursor: pointer;
	background: var(--ipp-bleu);
	color: #FFFFFF;
	font-family: var(--ipp-texte);
	font-weight: 600;
	font-size: 15px;
	padding: 12px 18px;
	border-radius: var(--ipp-rayon);
	margin-top: 14px;
	display: inline-block;
	text-align: center;
}

.ipp-copier:hover,
.ipp-copier:focus-visible {
	background: var(--ipp-bleu-clair);
}

.ipp-copie-retour {
	display: block;
	font-size: 13px;
	color: var(--ipp-graphite);
	margin-top: 8px;
}

.ipp-copie-secours {
	display: block;
	width: 100%;
	margin-top: 8px;
	font-family: var(--ipp-mono);
	font-size: 12px;
	border: 1px solid var(--ipp-filigrane);
	border-radius: var(--ipp-rayon);
	padding: 8px;
	background: var(--ipp-feuille);
	color: var(--ipp-encre);
}

.ipp-copie-secours[hidden] {
	display: none;
}

/* ------------------------------- l’avis réservé à l’administrateur */

.ipp-diagnostic {
	font-family: var(--ipp-mono);
	font-size: 12px;
	color: var(--ipp-rouge);
	border: 1px dashed var(--ipp-rouge);
	border-radius: 2px;
	padding: 8px 10px;
	margin: 0 0 12px;
	background: #F6F3EC;
}

/* ------------------------------------------------------------ téléphone */

@media (max-width: 560px) {

	.ipp-etape {
		font-size: 12px;
		padding: 4px 7px;
	}

	.ipp-fleche {
		display: none;
	}

	.ipp-cartes {
		grid-template-columns: 1fr;
	}

	.ipp-copier {
		display: block;
		width: 100%;
	}

	.ipp-barre {
		gap: 8px;
	}
}

/* Le clavier d’abord : personne ne doit perdre le focus de vue. */
@media (prefers-reduced-motion: reduce) {

	.ipp-retour,
	.ipp-croix,
	.ipp-raz,
	.ipp-copier {
		transition: none;
	}
}

/* ================================================================== *
 *  1.1.0 — comparer des CONFIGURATIONS
 *
 *  Cette partie vient EN PLUS du tableau des quantités : elle ne le
 *  remplace pas et ne lui retire rien.
 * ================================================================== */

.ipp-apres {
	font-family: var(--ipp-texte);
	color: var(--ipp-encre);
}

/* ------------------------------------------- la barre de duplication */

.ipp-duplication {
	border: 1px solid var(--ipp-filigrane);
	border-radius: var(--ipp-rayon);
	background: var(--ipp-feuille);
	padding: 14px 16px;
	margin: 16px 0 0;
}

.ipp-dup-titre {
	font-family: var(--ipp-titre);
	font-size: 16px;
	font-weight: 600;
	margin: 0;
}

.ipp-dup-aide {
	font-size: 13.5px;
	color: var(--ipp-graphite);
	margin: 4px 0 0;
	max-width: 62ch;
}

.ipp-dup-ligne {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
}

.ipp-dup-qte {
	font-family: var(--ipp-mono);
	font-size: 13px;
	color: var(--ipp-encre);
	background: var(--ipp-papier);
	border: 1px solid var(--ipp-filigrane);
	border-radius: var(--ipp-rayon);
	padding: 9px 10px;
	min-height: 24px;
	max-width: 100%;
}

.ipp-dup-qte:focus-visible,
.ipp-dup-bouton:focus-visible,
.ipp-col-croix:focus-visible,
.ipp-col-communes:focus-visible,
.ipp-col-vider:focus-visible {
	outline: 2px solid var(--ipp-bleu);
	outline-offset: 2px;
}

.ipp-dup-bouton {
	all: unset;
	cursor: pointer;
	font-family: var(--ipp-texte);
	font-weight: 600;
	font-size: 14.5px;
	color: var(--ipp-bleu);
	border: 1px solid var(--ipp-bleu);
	border-radius: var(--ipp-rayon);
	padding: 10px 15px;
	min-height: 24px;
	text-align: center;
}

.ipp-dup-bouton:hover:not([disabled]),
.ipp-dup-bouton:focus-visible:not([disabled]) {
	background: var(--ipp-surligne);
}

.ipp-dup-bouton[disabled] {
	opacity: .45;
	cursor: default;
	color: var(--ipp-graphite);
	border-color: var(--ipp-filigrane);
}

.ipp-dup-etat {
	display: block;
	font-family: var(--ipp-mono);
	font-size: 11.5px;
	color: var(--ipp-graphite);
	margin-top: 8px;
}

.ipp-dup-avis {
	font-size: 12.5px;
	color: var(--ipp-graphite);
	border-left: 2px solid var(--ipp-filigrane);
	padding-left: 10px;
	margin: 10px 0 0;
}

/* ---------------------------------- le tableau des configurations */

.ipp-colonnes {
	border: 1px solid var(--ipp-filigrane);
	border-radius: var(--ipp-rayon);
	background: var(--ipp-papier);
	padding: 14px 16px;
	margin: 12px 0 0;
}

.ipp-colonnes-titre {
	font-family: var(--ipp-titre);
	font-size: 17px;
	font-weight: 600;
	margin: 0 0 2px;
}

.ipp-colonnes-change {
	font-size: 13.5px;
	color: var(--ipp-graphite);
	margin: 0 0 12px;
	max-width: 66ch;
}

.ipp-colonnes-defilement {
	overflow-x: auto;
	border: 1px solid var(--ipp-filigrane);
	border-radius: var(--ipp-rayon);
	background: var(--ipp-feuille);
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
}

.ipp-col-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
}

.ipp-col-table caption {
	text-align: left;
}

.ipp-col-table th,
.ipp-col-table td {
	text-align: left;
	vertical-align: top;
	padding: 9px 12px;
	border-bottom: 1px solid var(--ipp-filigrane);
}

.ipp-col-table tr[hidden] {
	display: none;
}

.ipp-col-table tbody tr:last-child th,
.ipp-col-table tbody tr:last-child td {
	border-bottom: 0;
}

.ipp-col-table thead th {
	border-bottom: 1px solid var(--ipp-filigrane);
	background: var(--ipp-feuille);
	white-space: nowrap;
}

/* La colonne des caractéristiques reste visible quand on fait défiler
   les configurations : sur un téléphone, c'est elle qui donne le sens. */
.ipp-col-table th:first-child {
	position: sticky;
	left: 0;
	z-index: 1;
	background: var(--ipp-feuille);
	font-weight: 500;
	min-width: 8.5rem;
}

.ipp-col-table td {
	min-width: 9.5rem;
	scroll-snap-align: start;
}

.ipp-col-caract {
	font-family: var(--ipp-mono);
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ipp-graphite);
	font-weight: 400 !important;
}

.ipp-col-entete {
	min-width: 9.5rem;
}

.ipp-col-nom {
	display: block;
	font-family: var(--ipp-titre);
	font-size: 15px;
	font-weight: 600;
}

.ipp-col-date {
	display: block;
	font-family: var(--ipp-mono);
	font-size: 10.5px;
	color: var(--ipp-graphite);
	font-weight: 400;
}

.ipp-col-croix {
	all: unset;
	cursor: pointer;
	width: 26px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--ipp-rayon);
	color: var(--ipp-graphite);
	font-size: 17px;
	line-height: 1;
	margin-top: 4px;
}

.ipp-col-croix:hover,
.ipp-col-croix:focus-visible {
	background: var(--ipp-filigrane);
	color: var(--ipp-rouge);
}

/* CE QUI CHANGE saute aux yeux ; ce qui est commun s'efface. */
.ipp-differe > th,
.ipp-differe > td {
	background: var(--ipp-surligne);
}

.ipp-differe > th:first-child {
	background: var(--ipp-surligne);
	border-left: 2px solid var(--ipp-bleu);
}

.ipp-commun > th,
.ipp-commun > td {
	color: var(--ipp-graphite);
}

.ipp-col-n {
	font-family: var(--ipp-mono);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ipp-col-chiffres th,
.ipp-col-chiffres td {
	border-top: 1px solid var(--ipp-filigrane);
}

.ipp-col-communes {
	all: unset;
	cursor: pointer;
	font-family: var(--ipp-mono);
	font-size: 11.5px;
	color: var(--ipp-graphite);
	border: 1px solid var(--ipp-filigrane);
	border-radius: var(--ipp-rayon);
	padding: 8px 12px;
	min-height: 24px;
	margin-top: 10px;
	display: inline-block;
}

.ipp-col-communes:hover,
.ipp-col-communes:focus-visible {
	border-color: var(--ipp-bleu);
	color: var(--ipp-bleu);
}

.ipp-col-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
}

.ipp-col-actions .ipp-copier {
	margin-top: 0;
}

.ipp-col-vider {
	all: unset;
	cursor: pointer;
	font-family: var(--ipp-mono);
	font-size: 12px;
	color: var(--ipp-graphite);
	border: 1px solid var(--ipp-filigrane);
	border-radius: var(--ipp-rayon);
	padding: 9px 13px;
	min-height: 24px;
}

.ipp-col-vider:hover,
.ipp-col-vider:focus-visible {
	border-color: var(--ipp-rouge);
	color: var(--ipp-rouge);
}

/* ---------------------------------------------------------- téléphone */

@media (max-width: 560px) {

	.ipp-duplication,
	.ipp-colonnes {
		padding: 12px;
	}

	.ipp-dup-ligne {
		gap: 8px;
	}

	.ipp-dup-qte,
	.ipp-dup-bouton {
		flex: 1 1 100%;
	}

	/* À 360 px, quatre colonnes côte à côte sont illisibles : on garde la
	   colonne des caractéristiques collée à gauche et on fait défiler les
	   configurations une à une, d'un cran à l'autre. Les lignes identiques
	   sont repliées par défaut : il ne reste à l'écran que ce qui change. */
	.ipp-col-table {
		font-size: 13px;
	}

	.ipp-col-table th,
	.ipp-col-table td {
		padding: 8px 10px;
	}

	.ipp-col-table th:first-child {
		min-width: 6.5rem;
		font-size: 12.5px;
	}

	.ipp-col-table td,
	.ipp-col-entete {
		min-width: 8.5rem;
	}

	.ipp-col-actions .ipp-copier,
	.ipp-col-vider,
	.ipp-col-communes {
		flex: 1 1 100%;
		width: 100%;
		text-align: center;
	}
}

.ipp-col-lettre {
	font-family: var(--ipp-titre);
	font-size: 17px;
	font-weight: 600;
}