/**
 * Espace de suivi du client.
 *
 * Reprend la charte des pages intérieures : fond crème, filets tan, titres
 * Maharlika, texte NeueMontreal Regular. Les familles sont à graisse unique :
 * on change de famille plutôt que de demander un gras.
 */

.auz-suivi {
	--auz-encre: #1a1a1a;
	--auz-accent: #c99c75;
	--auz-lisible: #8f6238;
	--auz-corps: #4b4641;
	--auz-discret: #6b645e;
	--auz-trait: #e4dbcf;
	--auz-fond: #faf6f2;
	max-width: 820px;
	margin: 0 auto;
	font-family: "NeueMontreal Regular", "Helvetica Neue", Arial, sans-serif;
	font-weight: 400;
	color: var(--auz-corps);
}

.auz-suivi-tete {
	padding-bottom: 26px;
	margin-bottom: 30px;
	border-bottom: 1px solid var(--auz-trait);
}

.auz-suivi-ref {
	margin: 0 0 10px;
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--auz-lisible);
}

.auz-suivi .auz-suivi-titre {
	margin: 0 0 12px;
	font-family: "Maharlika-Regular", Georgia, serif;
	font-weight: 400;
	font-size: 34px;
	line-height: 1.2;
	color: var(--auz-encre);
}

.auz-suivi-chapeau {
	margin: 0;
	font-size: 17px;
	line-height: 1.7;
}

/* Avancement */
.auz-suivi-etapes {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 34px;
	padding: 0;
	list-style: none;
	counter-reset: etape;
}

.auz-suivi-etapes li {
	flex: 1 1 150px;
	padding: 12px 14px;
	border: 1px solid var(--auz-trait);
	background: #fff;
	font-size: 13px;
	line-height: 1.4;
	color: var(--auz-discret);
	text-align: center;
}

.auz-suivi-etapes li.est-faite {
	border-color: var(--auz-accent);
	background: var(--auz-fond);
	color: var(--auz-encre);
}

.auz-suivi-etapes li.est-active {
	border-color: var(--auz-encre);
	background: var(--auz-encre);
	color: #fff;
}

/* Blocs */
.auz-suivi-bloc {
	margin: 0 0 36px;
}

.auz-suivi .auz-suivi-bloc h3 {
	margin: 0 0 16px;
	font-family: "Maharlika-Regular", Georgia, serif;
	font-weight: 400;
	font-size: 23px;
	color: var(--auz-encre);
}

.auz-suivi-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.auz-suivi-table th {
	padding: 0 0 10px;
	border-bottom: 1px solid var(--auz-trait);
	font-family: "NeueMontreal Bold", "Helvetica Neue", Arial, sans-serif;
	font-weight: 400;
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--auz-lisible);
	text-align: left;
}

.auz-suivi-table td {
	padding: 14px 0;
	border-bottom: 1px solid var(--auz-trait);
	vertical-align: top;
	color: var(--auz-encre);
}

.auz-suivi-sku {
	font-size: 13px;
	color: var(--auz-discret);
}

.auz-suivi-livraison {
	margin: 16px 0 0;
	font-size: 15px;
}

/* Conversation */
.auz-suivi-fil {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 28px;
}

.auz-bulle {
	max-width: 88%;
	padding: 16px 18px;
	border: 1px solid var(--auz-trait);
	background: #fff;
}

.auz-bulle.est-moi {
	align-self: flex-end;
	background: var(--auz-fond);
	border-color: #d9c7b3;
}

.auz-bulle-meta {
	margin: 0 0 8px;
	font-family: "NeueMontreal Bold", "Helvetica Neue", Arial, sans-serif;
	font-weight: 400;
	font-size: 11px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--auz-lisible);
}

.auz-bulle-texte {
	font-size: 15px;
	line-height: 1.7;
	color: var(--auz-encre);
	white-space: pre-wrap;
}

.auz-suivi-vide {
	margin: 0;
	padding: 22px;
	border: 1px dashed var(--auz-trait);
	font-size: 15px;
	color: var(--auz-discret);
	text-align: center;
}

/* Formulaires */
.auz-suivi-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: flex-start;
	max-width: 520px;
}

.auz-suivi-champ {
	width: 100%;
}

.auz-suivi-champ label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	letter-spacing: .4px;
	color: var(--auz-discret);
}

.auz-suivi-champ input,
.auz-suivi-champ textarea {
	width: 100%;
	padding: 13px 15px;
	border: 1px solid var(--auz-trait);
	border-radius: 0;
	background: #fff;
	font: inherit;
	font-size: 15px;
	color: var(--auz-encre);
}

.auz-suivi-champ input:focus,
.auz-suivi-champ textarea:focus {
	outline: none;
	border-color: var(--auz-accent);
	box-shadow: 0 0 0 3px rgba(201, 156, 117, .18);
}

.auz-suivi-retour {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
}

.auz-suivi-retour.est-ok {
	color: #2f7a4d;
}

.auz-suivi-retour.est-erreur {
	color: #b32d2e;
}

.auz-suivi-alerte {
	margin: 0 0 24px;
	padding: 16px 18px;
	background: var(--auz-fond);
	border-left: 3px solid var(--auz-accent);
	font-size: 15px;
	line-height: 1.6;
	color: var(--auz-encre);
}

.auz-suivi-aide {
	margin: 30px 0 0;
	padding-top: 22px;
	border-top: 1px solid var(--auz-trait);
	font-size: 15px;
	color: var(--auz-discret);
}

.auz-suivi-aide a {
	color: var(--auz-encre);
	text-decoration: none;
	border-bottom: 1px solid var(--auz-accent);
}

.auz-suivi-aide a:hover {
	color: var(--auz-lisible);
}

@media (max-width: 640px) {
	.auz-suivi .auz-suivi-titre {
		font-size: 27px;
	}

	.auz-suivi-etapes li {
		flex: 1 1 100%;
		text-align: left;
	}

	.auz-bulle {
		max-width: 100%;
	}

	.auz-suivi-table th:nth-child(2),
	.auz-suivi-table td:nth-child(2) {
		display: none;
	}
}

/* =========================================================================
   1.9.0 — le bloc d'action (devis à accepter, paiement, confirmation) et
   les étapes du parcours dans la conversation.
   ====================================================================== */

.auz-suivi-action {
	margin: 0 0 40px;
	padding: 28px 30px 30px;
	border: 1px solid var(--auz-trait);
	border-top: 3px solid var(--auz-accent);
	background: #fff;
	box-shadow: 0 8px 30px rgba(26, 26, 26, .05);
}

.auz-suivi-action.est-paiement {
	border-top-color: var(--auz-encre);
}

.auz-suivi-action.est-ok {
	border-top-color: #2f7a4d;
	background: #f6fbf8;
}

.auz-suivi-action > p {
	margin: 0 0 14px;
	font-size: 16px;
	line-height: 1.7;
	color: var(--auz-corps);
}

.auz-suivi-action .auz-suivi-action-sur {
	margin: 0 0 8px;
	font-family: "NeueMontreal Bold", "Helvetica Neue", Arial, sans-serif;
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--auz-lisible);
}

.auz-suivi-action.est-ok .auz-suivi-action-sur {
	color: #25603c;
}

.auz-suivi .auz-suivi-action-titre {
	margin: 0 0 16px;
	font-family: "Maharlika-Regular", Georgia, serif;
	font-weight: 400;
	font-size: 28px;
	line-height: 1.25;
	color: var(--auz-encre);
}

.auz-suivi-devis {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0 0 20px;
	border: 1px solid var(--auz-trait);
	background: var(--auz-fond);
}

.auz-suivi-devis > div {
	flex: 1 1 160px;
	padding: 14px 18px;
}

.auz-suivi-devis > div + div {
	border-left: 1px solid var(--auz-trait);
}

.auz-suivi-devis dt {
	margin: 0 0 4px;
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--auz-discret);
}

.auz-suivi-devis dd {
	margin: 0;
	font-size: 16px;
	color: var(--auz-encre);
}

.auz-suivi .auz-suivi-montant {
	font-family: "Maharlika-Regular", Georgia, serif;
	font-size: 26px;
	line-height: 1.2;
	color: var(--auz-encre);
}

.auz-suivi-action > .auz-suivi-montant {
	margin: 0 0 6px;
	font-size: 34px;
}

.auz-suivi-action-boutons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 8px;
}

.auz-suivi-action-boutons .auz-devis-bouton {
	margin: 0;
}

.auz-suivi-accord {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	margin: 22px 0 0;
	padding: 22px 0 0;
	border-top: 1px solid var(--auz-trait);
}

.auz-suivi-accord .auz-devis-bouton {
	margin: 0;
}

.auz-suivi-coche {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--auz-encre);
	cursor: pointer;
}

.auz-suivi-coche input {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--auz-encre);
}

.auz-suivi-coche a {
	color: var(--auz-encre);
	text-decoration: underline;
	text-decoration-color: var(--auz-accent);
	text-underline-offset: 3px;
}

.auz-suivi-action .auz-suivi-action-petit,
.auz-suivi-action-petit {
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--auz-discret);
}

.auz-suivi-action-liens {
	margin: 16px 0 0;
	font-size: 14px;
}

.auz-suivi-action-liens a,
.auz-bulle-pj {
	color: var(--auz-encre);
	text-decoration: underline;
	text-decoration-color: var(--auz-accent);
	text-underline-offset: 3px;
}

.auz-bulle-pj {
	display: inline-block;
	margin: 10px 0 0;
	font-size: 14px;
}

.auz-fil-evenement {
	align-self: center;
	margin: 0;
	padding: 5px 14px;
	background: var(--auz-fond);
	border: 1px solid var(--auz-trait);
	border-radius: 999px;
	font-size: 12px;
	letter-spacing: .3px;
	color: var(--auz-discret);
	text-align: center;
}

.auz-suivi-etapes li.est-active {
	font-family: "NeueMontreal Bold", "Helvetica Neue", Arial, sans-serif;
}

@media (max-width: 640px) {
	.auz-suivi-action {
		padding: 22px 18px 24px;
	}

	.auz-suivi .auz-suivi-action-titre {
		font-size: 24px;
	}

	.auz-suivi-devis > div + div {
		border-left: 0;
		border-top: 1px solid var(--auz-trait);
	}

	.auz-suivi-action .auz-devis-bouton {
		display: block;
		width: 100%;
		text-align: center;
		box-sizing: border-box;
	}
}

/* 1.10.0 — livraison et renvoi des liens par e-mail seul. */
.auz-suivi-action.est-livraison {
	border-top-color: #0f766e;
}

.auz-suivi-action.est-livraison .auz-suivi-action-titre::first-letter {
	text-transform: uppercase;
}

.auz-suivi-facultatif {
	color: var(--auz-discret);
	font-size: 12px;
}

.auz-suivi-aide-champ {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--auz-discret);
}