/*
 * Charte AIT Minerals — section 7 du brief.
 *
 * Aucune couleur hors palette. Tout texte tient 4,5:1 sur son fond réel
 * (3:1 admis au-delà de 18,66 px en gras). Les paires sont vérifiées par
 * wordpress/tools/check-contrast.mjs.
 *
 * Deux couleurs sont sous surveillance :
 *   #96806A — bannie du projet, ne passe nulle part sous 14 px.
 *   #A9773F — décoratif seul, ou texte à partir de 14,5 px.
 */

:root {
	--aitm-page: #FBF7F2;
	--aitm-alt: #F7F1E8;
	--aitm-ink: #2B1E13;
	--aitm-ink-2: #4A3A28;
	--aitm-muted: #6B5B49;
	--aitm-accent: #6B4A22;
	--aitm-deco: #A9773F;
	--aitm-gold: #C9A96A;
	--aitm-cream: #F3E6D6;
	--aitm-cream-2: #FFF6E9;
	--aitm-surface: #FFFFFF;
	--aitm-surface-2: #F1E4D4;
	--aitm-surface-3: #F5E8D8;
	--aitm-warm: linear-gradient(160deg, #F7EBDB, #EFDCC3);
	--aitm-dark: linear-gradient(180deg, #3E2C1B, #2B1E13);
	--aitm-flash: linear-gradient(90deg, #5A3D1C, #7D5423);
	--aitm-shadow: 0 20px 44px -32px rgba(62, 44, 27, 0.42);
	--aitm-radius-pill: 999px;
	--aitm-radius-card: 24px;
	--aitm-radius-card-lg: 40px;
}

/* Chiffres alignés : exigence non négociable du brief sur prix,
   quantités et références. */
.aitm-tier-table td,
.aitm-tier-table th,
.aitm-spec-table td,
.aitm-pro-grid td,
.aitm-price,
.aitm-sku,
.aitm-cart-tier,
.aitm-cart-next-tier {
	font-variant-numeric: tabular-nums;
}

.aitm-sku {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
	letter-spacing: 0.01em;
}

/* --- Tableau des trois paliers, fiche produit --- */

.aitm-tier-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 10px;
	background: var(--aitm-surface);
	border-radius: var(--aitm-radius-card);
	overflow: hidden;
	box-shadow: var(--aitm-shadow);
}

.aitm-tier-table caption {
	text-align: left;
	font-family: Outfit, system-ui, sans-serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--aitm-ink);
	padding: 0 0 6px;
}

.aitm-tier-table thead th {
	font-size: 12px;
	font-weight: 600;
	text-align: left;
	/* 12 px : #6B5B49 sur blanc, au-dessus de 4,5:1. */
	color: var(--aitm-muted);
	padding: 10px 14px 8px;
}

.aitm-tier-table tbody th,
.aitm-tier-table tbody td {
	font-size: 14.5px;
	color: var(--aitm-ink-2);
	padding: 10px 14px;
	border-top: 1px solid var(--aitm-surface-2);
	text-align: left;
}

.aitm-tier-table tbody th {
	font-weight: 600;
	color: var(--aitm-ink);
}

.aitm-tier-table tr.is-active {
	background: var(--aitm-surface-3);
}

.aitm-tier-table .aitm-price {
	font-weight: 600;
	color: var(--aitm-ink);
}

.aitm-tier-table s {
	color: var(--aitm-muted);
	margin-right: 6px;
	font-weight: 400;
}

.aitm-tier-note {
	font-size: 13px;
	line-height: 1.5;
	/* 13 px : jamais #A9773F ni #96806A ici. */
	color: var(--aitm-muted);
	margin: 0 0 18px;
}

/* --- Caractéristiques --- */

.aitm-spec-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 18px;
}

.aitm-spec-table caption {
	text-align: left;
	font-family: Outfit, system-ui, sans-serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--aitm-ink);
	padding: 0 0 6px;
}

.aitm-spec-table th {
	text-align: left;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--aitm-muted);
	padding: 8px 0;
	width: 40%;
}

.aitm-spec-table td {
	font-size: 14px;
	color: var(--aitm-ink);
	padding: 8px 0;
	border-bottom: 1px solid var(--aitm-surface-2);
}

/* --- Badges --- */

/* Le badge se positionne sur la vignette : le conteneur doit lui servir
   de référence, ce que WooCommerce ne fait pas par défaut. */
.woocommerce ul.products li.product,
.wc-block-grid__product {
	position: relative;
}

.aitm-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	padding: 5px 11px;
	border-radius: var(--aitm-radius-pill);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.03em;
}

.aitm-badge--new {
	background: var(--aitm-ink);
	color: var(--aitm-cream);
}

.aitm-badge--flash {
	background: #7D5423;
	color: var(--aitm-cream-2);
}

/* --- Jauge de livraison offerte --- */

.aitm-gauge {
	background: var(--aitm-surface);
	border-radius: var(--aitm-radius-card);
	padding: 18px 20px;
	margin: 0 0 22px;
	box-shadow: var(--aitm-shadow);
}

.aitm-gauge__label {
	margin: 0 0 10px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--aitm-ink-2);
}

.aitm-gauge__track {
	height: 8px;
	border-radius: var(--aitm-radius-pill);
	background: var(--aitm-surface-2);
	overflow: hidden;
}

.aitm-gauge__fill {
	display: block;
	height: 100%;
	/* Élément décoratif : #A9773F ne porte aucun texte. */
	background: var(--aitm-deco);
	border-radius: var(--aitm-radius-pill);
	transition: width 320ms ease;
}

/* --- Panier : palier atteint et palier suivant --- */

.aitm-cart-tier {
	display: block;
	margin-top: 4px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--aitm-accent);
}

.aitm-cart-next-tier {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	color: var(--aitm-muted);
}

/* --- Grille tarifaire professionnelle --- */

.aitm-pro-grid {
	width: 100%;
	border-collapse: collapse;
	background: var(--aitm-surface);
	border-radius: var(--aitm-radius-card);
	overflow: hidden;
	box-shadow: var(--aitm-shadow);
}

.aitm-pro-grid caption {
	text-align: left;
	font-family: Outfit, system-ui, sans-serif;
	font-size: 19px;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--aitm-ink);
	padding: 0 0 10px;
}

.aitm-pro-grid thead th {
	font-size: 12.5px;
	font-weight: 600;
	text-align: left;
	color: var(--aitm-muted);
	padding: 12px 14px;
	border-bottom: 1px solid var(--aitm-surface-2);
	white-space: nowrap;
}

.aitm-pro-grid td {
	font-size: 14px;
	color: var(--aitm-ink-2);
	padding: 10px 14px;
	border-top: 1px solid var(--aitm-alt);
}

.aitm-pro-grid td.aitm-price {
	text-align: right;
	font-weight: 600;
	color: var(--aitm-ink);
	white-space: nowrap;
}

.aitm-pro-grid__note {
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--aitm-muted);
}

/* Les tableaux larges défilent dans leur conteneur, jamais la page. */
@media (max-width: 720px) {
	.aitm-pro-grid {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}
}

/* --- Formulaires pro et devis --- */

.aitm-pro-form label,
.aitm-quote-form label {
	display: block;
	margin-bottom: 5px;
	font-size: 14px;
	font-weight: 500;
	color: var(--aitm-ink-2);
}

.aitm-quote-form fieldset {
	border: 1px solid var(--aitm-surface-2);
	border-radius: var(--aitm-radius-card);
	padding: 20px 22px;
	margin: 0 0 20px;
}

.aitm-quote-form legend {
	font-family: Outfit, system-ui, sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--aitm-ink);
	padding: 0 8px;
}

.aitm-quote-form .description,
.aitm-pro-form .description {
	font-size: 13.5px;
	color: var(--aitm-muted);
}

.aitm-quote-line {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.aitm-quote-sent,
.aitm-pro-granted {
	background: var(--aitm-surface-3);
	border-radius: var(--aitm-radius-card);
	padding: 16px 20px;
	font-size: 14.5px;
	color: var(--aitm-ink-2);
}

.aitm-quote-error,
.aitm-pro-refused {
	background: var(--aitm-cream-2);
	border-left: 4px solid #7D5423;
	border-radius: 0 12px 12px 0;
	padding: 16px 20px;
	font-size: 14.5px;
	color: var(--aitm-ink-2);
}

.aitm-pro-pending {
	background: var(--aitm-alt);
	border-radius: var(--aitm-radius-card);
	padding: 16px 20px;
	font-size: 14.5px;
	color: var(--aitm-ink-2);
}

/* --- Prix masqués --- */

.aitm-price-hidden {
	font-family: Outfit, system-ui, sans-serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
	/* Brun accent : 7,99:1 sur blanc, largement au-dessus du seuil. */
	color: var(--aitm-accent);
}

.aitm-price-hidden a {
	color: var(--aitm-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.aitm-price-hidden a:hover {
	color: var(--aitm-ink);
}

.aitm-price-notice {
	background: var(--aitm-surface-3);
	border-radius: var(--aitm-radius-card);
	padding: 16px 20px;
	margin: 0 0 18px;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--aitm-ink-2);
}

.aitm-price-notice a {
	color: var(--aitm-accent);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.aitm-price-notice a:hover {
	color: var(--aitm-ink);
}

.aitm-quote-button {
	display: inline-block;
	margin-top: 10px;
	background: var(--aitm-surface-2);
	color: var(--aitm-ink);
	border-radius: var(--aitm-radius-pill);
	padding: 12px 22px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.aitm-quote-button:hover {
	background: #E8D6BE;
	color: var(--aitm-ink);
}

/* --- Page d'accueil --- */

.aitm-btn {
	display: inline-block;
	border-radius: var(--aitm-radius-pill);
	padding: 15px 26px;
	font-family: Outfit, system-ui, sans-serif;
	font-size: 15.5px;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-decoration: none;
	margin: 0 8px 8px 0;
}

.aitm-btn--dark {
	background: var(--aitm-dark);
	color: var(--aitm-page);
	box-shadow: 0 18px 34px -14px rgba(43, 30, 19, 0.62);
}

.aitm-btn--dark:hover { color: #FFFFFF; }

.aitm-btn--light {
	background: var(--aitm-surface);
	color: var(--aitm-ink);
	box-shadow: 0 10px 26px -14px rgba(62, 44, 27, 0.45);
}

.aitm-btn--light:hover { background: var(--aitm-cream); color: var(--aitm-ink); }

/* Hero */

.aitm-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: 44px;
	align-items: center;
	margin: 0 0 56px;
}

.aitm-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: var(--aitm-surface);
	padding: 8px 16px 8px 12px;
	border-radius: var(--aitm-radius-pill);
	margin: 0 0 20px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--aitm-accent);
	box-shadow: 0 8px 20px -12px rgba(62, 44, 27, 0.4);
}

.aitm-hero__dot {
	width: 8px;
	height: 8px;
	border-radius: var(--aitm-radius-pill);
	background: var(--aitm-deco);
	flex: none;
}

.aitm-hero__title {
	margin: 0 0 16px;
	font-family: Outfit, system-ui, sans-serif;
	font-size: clamp(30px, 4.4vw, 46px);
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.08;
	color: var(--aitm-ink);
}

.aitm-hero__lead {
	margin: 0 0 26px;
	font-size: 16.5px;
	line-height: 1.65;
	color: var(--aitm-ink-2);
	max-width: 34em;
}

.aitm-hero__actions { margin: 0; }

.aitm-hero__media { min-width: 0; }

.aitm-hero__image {
	width: 100%;
	/* Sans « height: auto », l'attribut height= du HTML l'emporte sur
	   aspect-ratio et l'image sort en pleine hauteur native. */
	height: auto;
	max-height: 620px;
	aspect-ratio: 5 / 6;
	object-fit: cover;
	border-radius: var(--aitm-radius-card-lg);
	box-shadow: 0 40px 70px -34px rgba(62, 44, 27, 0.45);
}

/* Réassurance */

.aitm-reassurance {
	list-style: none;
	margin: 0 0 56px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.aitm-reassurance__item {
	background: var(--aitm-surface);
	border-radius: 22px;
	padding: 20px 22px;
	box-shadow: 0 16px 34px -26px rgba(62, 44, 27, 0.42);
}

.aitm-reassurance__title {
	display: block;
	font-family: Outfit, system-ui, sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--aitm-ink);
	margin-bottom: 6px;
}

.aitm-reassurance__text {
	display: block;
	font-size: 14px;
	line-height: 1.5;
	color: var(--aitm-muted);
}

/* En-tête de section */

.aitm-section { margin: 0 0 56px; }

.aitm-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 20px;
}

.aitm-section__title {
	margin: 0;
	font-family: Outfit, system-ui, sans-serif;
	font-size: clamp(22px, 2.6vw, 28px);
	font-weight: 500;
	letter-spacing: -0.025em;
	color: var(--aitm-ink);
}

.aitm-section__link {
	font-size: 15px;
	font-weight: 600;
	color: var(--aitm-accent);
	text-decoration: none;
}

.aitm-section__link:hover { color: var(--aitm-ink); text-decoration: underline; }

.aitm-section__note {
	font-size: 14px;
	color: var(--aitm-muted);
}

/* Familles */

.aitm-families,
.aitm-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 18px;
}

.aitm-families { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aitm-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.aitm-families__item,
.aitm-cards__item {
	background: var(--aitm-surface);
	border-radius: 28px;
	padding: 13px;
	box-shadow: 0 20px 40px -26px rgba(62, 44, 27, 0.42);
	transition: transform 240ms ease;
}

.aitm-families__item:hover,
.aitm-cards__item:hover { transform: translateY(-4px); }

.aitm-families__link,
.aitm-cards__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.aitm-families__media,
.aitm-cards__media {
	display: block;
	overflow: hidden;
	border-radius: 19px;
	background: var(--aitm-warm);
	margin-bottom: 14px;
}

.aitm-families__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.aitm-cards__image,
.aitm-cards__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 18px;
}

.aitm-families__body { display: block; padding: 0 6px 8px; }

.aitm-families__name,
.aitm-cards__name {
	display: block;
	font-family: Outfit, system-ui, sans-serif;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.015em;
	color: var(--aitm-ink);
	margin-bottom: 6px;
	line-height: 1.25;
}

.aitm-cards__name { font-size: 16.5px; padding: 0 6px; }

.aitm-families__summary {
	display: block;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--aitm-muted);
	margin-bottom: 10px;
}

.aitm-families__count {
	display: inline-block;
	background: var(--aitm-surface-3);
	padding: 6px 12px;
	border-radius: var(--aitm-radius-pill);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--aitm-accent);
	font-variant-numeric: tabular-nums;
}

.aitm-cards__price { display: block; padding: 0 6px 8px; }

/* Bandeau professionnel */

.aitm-pro-banner {
	border-radius: var(--aitm-radius-card-lg);
	background: var(--aitm-warm);
	padding: 44px 40px;
	box-shadow: 0 30px 60px -34px rgba(62, 44, 27, 0.4);
	margin: 0 0 40px;
}

.aitm-pro-banner__tag {
	display: inline-block;
	background: var(--aitm-surface);
	padding: 7px 15px;
	border-radius: var(--aitm-radius-pill);
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--aitm-accent);
}

.aitm-pro-banner__title {
	margin: 0 0 12px;
	font-family: Outfit, system-ui, sans-serif;
	font-size: clamp(22px, 2.8vw, 30px);
	font-weight: 500;
	letter-spacing: -0.025em;
	color: var(--aitm-ink);
}

.aitm-pro-banner__lead {
	margin: 0 0 22px;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--aitm-ink-2);
	max-width: 46em;
}

@media (max-width: 900px) {
	.aitm-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.aitm-reassurance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.aitm-families { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.aitm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.aitm-pro-banner { padding: 32px 24px; }
}

@media (max-width: 560px) {
	.aitm-reassurance,
	.aitm-families,
	.aitm-cards { grid-template-columns: minmax(0, 1fr); }
}

/* --- En-tête et pied de page --- */

.aitm-header {
	border-bottom: 1px solid rgba(43, 30, 19, 0.1);
}

.aitm-header__row {
	gap: 20px 28px;
}

.aitm-header__brand a,
.aitm-footer__brand a {
	font-family: Outfit, system-ui, sans-serif;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--aitm-ink);
	text-decoration: none;
}

.aitm-header__brand a:hover { color: var(--aitm-accent); }

.aitm-header__nav a {
	font-size: 14.5px;
	font-weight: 500;
	color: var(--aitm-ink-2);
	text-decoration: none;
}

.aitm-header__nav a:hover {
	color: var(--aitm-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.aitm-header__nav .wp-block-navigation__container {
	gap: 22px;
}

.aitm-footer {
	border-radius: 48px 48px 0 0;
}

.aitm-footer__cols { gap: 32px; }

.aitm-footer__title {
	margin: 0 0 12px;
	font-family: Outfit, system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--aitm-muted);
}

.aitm-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.aitm-footer__list li { margin: 0 0 9px; }

.aitm-footer__list a {
	font-size: 14.5px;
	color: var(--aitm-ink-2);
	text-decoration: none;
}

.aitm-footer__list a:hover {
	color: var(--aitm-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.aitm-footer__text {
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--aitm-muted);
	max-width: 34em;
}

.aitm-footer__legal {
	margin: 36px 0 0;
	padding-top: 20px;
	border-top: 1px solid rgba(43, 30, 19, 0.1);
	font-size: 13px;
	color: var(--aitm-muted);
}

@media (max-width: 780px) {
	.aitm-footer { border-radius: 32px 32px 0 0; }
}