/*
 * SuperTrophy — système de design.
 *
 *  1. Variables et reset
 *  2. Typographie
 *  3. Mise en page (conteneurs)
 *  4. Boutons, icônes, cadres d'attente
 *  5. En-tête et navigation
 *  6. Réassurance, fil d'Ariane
 *  7. Cartes, tuiles, grilles
 *  8. Contenu éditorial (piliers, articles)
 *  9. Pied de page SEO
 * 10. Accessibilité et impression
 *
 * Or : #e09900 en aplat uniquement. Pour du TEXTE, toujours #8a5a00 (WCAG AA).
 *
 * Anatomie reprise de new-theme-prompt.md, transposée dans la palette de
 * marque : page crème, surfaces blanches, or à la place de l'orange, tuile
 * chaude (--stp-warm) derrière les visuels produit, action secondaire sur
 * surface neutre (--stp-soft) pour que l'or reste réservé aux CTA primaires.
 */

/* ==========================================================================
   1. Variables et reset
   ========================================================================== */

:root {
	--stp-ink: #17140f;
	--stp-ink2: #4b453c;
	--stp-mute: #7c7365;
	--stp-cream: #faf7f1;
	/* Fond de page : la crème passe du bandeau à la page entière, les cartes
	   blanches se détachent dessus (page #F8F8F8 / carte #FFF du brief). */
	--stp-bg: #faf7f1;
	--stp-surface: #fff;
	/* Signature visuelle : la tuile chaude derrière chaque visuel produit,
	   équivalent de marque du pêche #F6DAB0. */
	--stp-warm: #f4ecdc;
	/* Action secondaire : surface neutre, jamais l'or — celui-ci reste au CTA
	   primaire (« ne pas utiliser l'accent pour Ajouter au panier »). */
	--stp-soft: #f1ede4;
	--stp-soft-hi: #e6dfd0;
	--stp-gold-soft: #fdf3e0;
	--stp-line: #e8dfcd;
	--stp-gold: #e09900;
	--stp-gold-dk: #8a5a00;
	--stp-white: #fff;
	--stp-r: 16px;
	--stp-r-sm: 12px;
	--stp-r-btn: 8px;
	--stp-pill: 100px;
	--stp-max: 1180px;
	--stp-read: 780px;
	--stp-pad: 1.25rem;
	--stp-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--stp-font-head: Fraunces, Georgia, "Times New Roman", serif;
	--stp-shadow: 0 1px 2px rgba(23, 20, 15, 0.05);
	--stp-shadow-lg: 0 14px 30px rgba(23, 20, 15, 0.1);
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--stp-bg);
	color: var(--stp-ink2);
	font-family: var(--stp-font);
	font-size: 1.0625rem;
	line-height: 1.7;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

img {
	display: block;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

table {
	border-collapse: collapse;
	width: 100%;
}

a {
	color: var(--stp-gold-dk);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

a:hover {
	color: var(--stp-ink);
}

:focus-visible {
	outline: 3px solid var(--stp-gold-dk);
	outline-offset: 2px;
	border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   2. Typographie
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--stp-font-head);
	font-weight: 700;
	color: var(--stp-ink);
	line-height: 1.18;
	letter-spacing: -0.015em;
	margin: 0 0 0.6em;
	text-wrap: balance;
}

h1 {
	font-size: clamp(1.9rem, 3.2vw, 2.5rem);
}

h2 {
	font-size: clamp(1.35rem, 2.2vw, 1.8rem);
}

h3 {
	font-size: 1.15rem;
	letter-spacing: -0.005em;
}

p,
ul,
ol {
	margin: 0 0 1.15rem;
}

strong {
	color: var(--stp-ink);
	font-weight: 600;
}

small,
.stp-small {
	font-size: 0.86rem;
}

.stp-lead {
	color: var(--stp-ink2);
	font-size: 1.02rem;
	line-height: 1.65;
	margin: 0;
}

.stp-eyebrow {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--stp-gold-dk);
	margin: 0 0 0.7rem;
}

.stp-note {
	font-size: 0.8rem;
	color: var(--stp-mute);
}

/* ==========================================================================
   3. Mise en page
   ========================================================================== */

.stp-wrap {
	max-width: var(--stp-max);
	margin-inline: auto;
	padding-inline: var(--stp-pad);
}

.stp-sec {
	max-width: var(--stp-max);
	margin: 3.6rem auto;
	padding-inline: var(--stp-pad);
}

/* Bandeau de rupture : la page étant crème, c'est le blanc qui détache. */
.stp-sec--cream {
	max-width: none;
	background: var(--stp-surface);
	border-block: 1px solid var(--stp-line);
	padding: 3.4rem var(--stp-pad);
	margin: 3.6rem 0;
}

.stp-sec--cream > .stp-in {
	max-width: var(--stp-max);
	margin-inline: auto;
}

.stp-head {
	text-align: center;
	max-width: 740px;
	margin: 0 auto 2rem;
}

.stp-head h2 {
	margin-bottom: 0.5rem;
}

.stp-headrow {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.6rem;
	flex-wrap: wrap;
}

.stp-headrow h2 {
	margin: 0;
}

.stp-headrow .stp-lead {
	margin-top: 0.3rem;
	font-size: 0.95rem;
}

/* Chapô de la page des articles : lisible, centré, avant la grille. */
.stp-blog-intro {
	max-width: var(--stp-read);
	margin: 0 auto 2.6rem;
}

/* Une seule colonne lisible : piliers, articles, pages légales. */
.stp-article {
	max-width: var(--stp-read);
	margin: 2.4rem auto 3.5rem;
	padding-inline: var(--stp-pad);
}

/* ==========================================================================
   4. Boutons, icônes, cadres d'attente
   ========================================================================== */

.stp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.9rem 1.7rem;
	border: 2px solid transparent;
	border-radius: var(--stp-r-btn);
	font-family: var(--stp-font);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.15;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.16s, background 0.16s, border-color 0.16s, color 0.16s;
}

.stp-btn--primary {
	background: var(--stp-gold);
	color: var(--stp-ink);
	box-shadow: 0 6px 18px rgba(224, 153, 0, 0.28);
}

.stp-btn--primary:hover {
	background: #f5a800;
	color: var(--stp-ink);
	transform: translateY(-2px);
}

.stp-btn--ghost {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.5);
}

.stp-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: #fff;
	color: #fff;
	transform: translateY(-2px);
}

.stp-btn--out {
	background: #fff;
	color: var(--stp-ink);
	border-color: var(--stp-line);
}

.stp-btn--out:hover {
	border-color: var(--stp-gold);
	color: var(--stp-gold-dk);
}

/* Action secondaire — « ajouter à ma demande ». Surface neutre volontairement
   sans or : l'or signale l'action primaire (devis, recherche, envoi). */
.stp-btn--soft {
	background: var(--stp-soft);
	color: var(--stp-ink);
	font-weight: 600;
}

.stp-btn--soft:hover {
	background: var(--stp-soft-hi);
	color: var(--stp-ink);
}

.stp-btn--block {
	width: 100%;
}

/* Bouton carré d'appoint (voir la fiche), à côté d'une action secondaire. */
.stp-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	padding: 0;
	border: 0;
	border-radius: var(--stp-r-btn);
	background: var(--stp-soft);
	color: var(--stp-mute);
	cursor: pointer;
	text-decoration: none;
	transition: background 0.16s, color 0.16s;
}

.stp-iconbtn:hover {
	background: var(--stp-soft-hi);
	color: var(--stp-ink);
}

/* Pastilles de filtre : gammes sous la recherche, tri du catalogue. */
.stp-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.stp-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.4rem 1rem;
	border: 1px solid var(--stp-line);
	border-radius: var(--stp-pill);
	background: var(--stp-surface);
	color: var(--stp-ink2);
	font-size: 0.9rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.16s, border-color 0.16s, color 0.16s;
}

.stp-pill:hover {
	background: var(--stp-gold-soft);
	border-color: var(--stp-gold);
	color: var(--stp-gold-dk);
}

.stp-pill--on,
.stp-pill[aria-current="page"] {
	background: var(--stp-gold);
	border-color: var(--stp-gold);
	color: var(--stp-ink);
	font-weight: 600;
}

.stp-pill--on:hover,
.stp-pill[aria-current="page"]:hover {
	background: #f5a800;
	border-color: #f5a800;
	color: var(--stp-ink);
}

/* Libellé à gauche, lien « voir tout » à droite, au-dessus des pastilles. */
.stp-pillbar {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 0.75rem;
}

.stp-pillbar__label {
	margin: 0;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--stp-ink2);
}

.stp-pillbar__more {
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--stp-gold-dk);
	text-decoration: none;
	white-space: nowrap;
}

.stp-pillbar__more:hover {
	text-decoration: underline;
}

.stp-btn--sm {
	padding: 0.58rem 1.15rem;
	font-size: 0.92rem;
}

.stp-ico {
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	display: inline-block;
	vertical-align: -4px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.stp-ico--sm {
	width: 16px;
	height: 16px;
	flex-basis: 16px;
}

.stp-media {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--stp-r);
}

.stp-ph {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	min-height: 150px;
	padding: 0.9rem;
	text-align: center;
	font-size: 0.72rem;
	/* Le conteneur d'image annule l'interligne : sans cela, les deux lignes
	   du cadre d'attente se superposent. */
	line-height: 1.35;
	color: #9c8f77;
	background: repeating-linear-gradient(135deg, #f6f1e6, #f6f1e6 12px, #f1ebdd 12px, #f1ebdd 24px);
	border: 1px dashed #d8c9a9;
	border-radius: var(--stp-r);
}

.stp-ph b {
	display: block;
	color: #7d7059;
	font-size: 0.78rem;
}

.stp-ph--dark {
	background: repeating-linear-gradient(135deg, #2a241d, #2a241d 12px, #332c23 12px, #332c23 24px);
	border-color: #5d5140;
	color: #a2937b;
}

.stp-ph--dark b {
	color: #c9b89a;
}

/* ==========================================================================
   5. En-tête et navigation
   ========================================================================== */

.stp-topbar {
	background: var(--stp-surface);
	border-bottom: 1px solid var(--stp-line);
	color: var(--stp-ink2);
	font-size: 0.82rem;
}

.stp-topbar__in {
	max-width: var(--stp-max);
	margin-inline: auto;
	padding: 0.5rem var(--stp-pad);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.stp-topbar a {
	color: var(--stp-ink2);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.stp-topbar a:hover {
	color: var(--stp-gold-dk);
	text-decoration: underline;
}

.stp-topbar strong {
	color: var(--stp-ink);
	font-weight: 700;
}

.stp-topbar .stp-ico {
	width: 15px;
	height: 15px;
	flex-basis: 15px;
	color: var(--stp-gold-dk);
}

.stp-topbar__contact {
	display: flex;
	gap: 1.2rem;
	align-items: center;
	flex-wrap: wrap;
}

/* Pas de filet bas : le fond crème de la page suffit à détacher l'en-tête. */
.stp-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(255, 255, 255, 0.97);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--stp-line);
}

/* En-tête sur une seule ligne : marque, menu (les 6 gammes regroupées sous
   « Nos produits »), puis les deux actions poussées à droite. Sous 860 px, le
   menu bascule dans le panneau du hamburger. */
.stp-header__in {
	max-width: 1280px;
	margin-inline: auto;
	padding: 0.6rem var(--stp-pad);
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.stp-brand {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
	color: var(--stp-ink);
	flex: 0 0 auto;
}

.stp-brand img {
	max-height: 44px;
	width: auto;
}

.stp-brand__txt {
	font-family: var(--stp-font-head);
	font-weight: 700;
	font-size: 1.25rem;
	letter-spacing: -0.02em;
}

.stp-nav {
	min-width: 0;
}

.stp-nav ul {
	display: flex;
	align-items: center;
	gap: 0.15rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.stp-nav a {
	display: block;
	padding: 0.5rem 0.7rem;
	border-radius: 8px;
	color: var(--stp-ink);
	font-size: 0.95rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.stp-nav a:hover,
.stp-nav .current-menu-item > a,
.stp-nav .current_page_item > a,
.stp-nav .current-menu-parent > a,
.stp-nav .current-menu-ancestor > a {
	background: var(--stp-gold-soft);
	color: var(--stp-gold-dk);
}

/* Chevron sur l'entrée déroulante « Nos produits ». */
.stp-nav .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 0.42em;
	height: 0.42em;
	margin-left: 0.4em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-0.16em) rotate(45deg);
	opacity: 0.6;
}

.stp-header__actions {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex: 0 0 auto;
	margin-left: auto;
}

/* Badge « Ma demande (n) » — la liste de devis vit en session WooCommerce. */
.stp-quotebadge {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.5rem 0.85rem;
	border: 1px solid var(--stp-line);
	border-radius: var(--stp-r-btn);
	background: var(--stp-surface);
	color: var(--stp-ink);
	font-size: 0.88rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.stp-quotebadge:hover {
	border-color: var(--stp-gold);
	background: var(--stp-gold-soft);
	color: var(--stp-gold-dk);
}

.stp-quotebadge__n {
	position: absolute;
	top: -8px;
	right: -8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 0.3rem;
	border: 2px solid var(--stp-surface);
	border-radius: var(--stp-pill);
	background: var(--stp-gold);
	color: var(--stp-ink);
	font-size: 0.72rem;
	font-weight: 700;
}

.stp-quotebadge--empty .stp-quotebadge__n {
	display: none;
}

/* Sous 900 px, le badge se réduit à son icône — mais reste une pastille dorée,
   nettement distincte du carré neutre du hamburger (source de confusion avant). */
@media (max-width: 900px) {
	.stp-quotebadge > span:not(.stp-quotebadge__n) {
		border: 0;
		clip-path: inset(50%);
		height: 1px;
		width: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
	}

	.stp-quotebadge {
		padding: 0.55rem;
		border-color: var(--stp-gold);
		background: var(--stp-gold-soft);
		color: var(--stp-gold-dk);
	}

	.stp-quotebadge .stp-ico {
		width: 22px;
		height: 22px;
	}
}

.stp-cta-short {
	display: none;
}

.stp-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 1px solid var(--stp-line);
	border-radius: var(--stp-r-sm);
	color: var(--stp-ink);
	cursor: pointer;
	flex: 0 0 auto;
}

.stp-burger .stp-ico {
	width: 24px;
	height: 24px;
	flex-basis: 24px;
}

/* ===== Bureau (≥ 861 px) : menu en ligne + volet déroulant au survol ===== */
@media (min-width: 861px) {
	.stp-nav {
		display: block !important;
	}

	.stp-nav > ul {
		flex-wrap: nowrap;
	}

	.stp-nav .menu-item-has-children {
		position: relative;
	}

	.stp-nav .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		flex-direction: column;
		align-items: stretch;
		min-width: 232px;
		margin: 0;
		padding: 0.4rem;
		background: #fff;
		border: 1px solid var(--stp-line);
		border-radius: 12px;
		box-shadow: 0 18px 40px -18px rgba(20, 16, 8, 0.32);
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
		z-index: 70;
	}

	/* Pont invisible : le survol ne se coupe pas dans l'écart parent/volet. */
	.stp-nav .sub-menu::before {
		content: "";
		position: absolute;
		top: -10px;
		left: 0;
		right: 0;
		height: 10px;
	}

	.stp-nav .menu-item-has-children:hover > .sub-menu,
	.stp-nav .menu-item-has-children:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.stp-nav .sub-menu a {
		white-space: nowrap;
		font-size: 0.92rem;
		border-radius: 8px;
	}

	.stp-nav .sub-menu a:hover {
		background: var(--stp-gold-soft);
		color: var(--stp-gold-dk);
	}
}

/* ===== Mobile (≤ 860 px) : hamburger + panneau vertical ===== */
@media (max-width: 860px) {
	.stp-header__in {
		flex-wrap: wrap;
	}

	.stp-burger {
		display: inline-flex;
		order: 1;
	}

	.stp-brand {
		order: 2;
	}

	.stp-header__actions {
		order: 3;
		margin-left: auto;
	}

	.stp-nav {
		order: 4;
		flex: 1 0 100%;
		display: none;
		margin-top: 0.5rem;
		border-top: 1px solid var(--stp-line);
	}

	.stp-nav.is-open {
		display: block;
	}

	.stp-nav > ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.stp-nav li {
		display: block;
	}

	.stp-nav a {
		padding: 0.9rem 0.4rem;
		border-radius: 0;
		border-bottom: 1px solid var(--stp-line);
		font-size: 1rem;
	}

	/* Sous-menu déployé et indenté : pas d'accordéon, aucun piège JS. */
	.stp-nav .sub-menu {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin: 0;
		padding: 0;
		background: var(--stp-surface);
	}

	.stp-nav .sub-menu a {
		padding-left: 1.6rem;
		font-size: 0.95rem;
		color: var(--stp-muted, var(--stp-ink));
	}

	.stp-nav .menu-item-has-children > a::after {
		display: none;
	}
}

@media (max-width: 430px) {
	.stp-header__in {
		gap: 0.5rem;
	}

	.stp-brand img {
		max-height: 38px;
	}

	.stp-header__cta {
		padding-inline: 0.8rem;
	}

	.stp-cta-full {
		display: none;
	}

	.stp-cta-short {
		display: inline;
	}
}

@media (max-width: 620px) {
	.stp-header__cta {
		padding-inline: 0.85rem;
		font-size: 0.86rem;
	}

	.stp-brand {
		min-width: 0;
	}

	.stp-topbar__in {
		justify-content: center;
		text-align: center;
		gap: 0.3rem 1rem;
	}

	.stp-topbar__baseline {
		display: none;
	}

	.stp-brand img {
		max-height: 42px;
	}
}

/* ==========================================================================
   6. Réassurance, fil d'Ariane
   ========================================================================== */

.stp-reass {
	background: var(--stp-surface);
	border-block: 1px solid var(--stp-line);
}

.stp-reass__in {
	max-width: var(--stp-max);
	margin-inline: auto;
	padding-inline: var(--stp-pad);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.stp-reass__it {
	position: relative;
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	padding: 0.95rem 1.2rem;
}

.stp-reass__it + .stp-reass__it::before {
	content: "";
	position: absolute;
	left: 0;
	top: 18%;
	bottom: 18%;
	width: 1px;
	background: var(--stp-line);
}

.stp-reass__it .stp-ico {
	color: var(--stp-gold-dk);
	margin-top: 0.15rem;
}

.stp-reass__it b {
	display: block;
	font-size: 0.88rem;
	color: var(--stp-ink);
	line-height: 1.3;
}

.stp-reass__it span {
	display: block;
	font-size: 0.79rem;
	color: var(--stp-ink2);
	line-height: 1.35;
}

.stp-crumbs {
	font-size: 0.82rem;
	color: var(--stp-mute);
	margin: 0 0 1.4rem;
	padding-bottom: 0.7rem;
	border-bottom: 1px solid #ece3d3;
	line-height: 1.5;
}

.stp-crumbs a {
	color: var(--stp-ink2);
	text-decoration: none;
}

.stp-crumbs a:hover {
	color: var(--stp-gold-dk);
	text-decoration: underline;
}

.stp-crumbs .stp-crumbs__last,
.stp-crumbs .breadcrumb_last {
	color: var(--stp-ink);
	font-weight: 600;
}

/* ==========================================================================
   7. Cartes, tuiles, grilles
   ========================================================================== */

.stp-grid2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.stp-grid3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.stp-grid4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

/* Carte : cadre de 6 px autour d'une tuile d'image chaude, corps de texte,
   rangée d'actions en pied. La carte ne coupe plus ses enfants (le badge et
   le menu d'actions en dépassent), c'est la tuile qui masque le zoom. */
.stp-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--stp-surface);
	border: 1px solid var(--stp-line);
	border-radius: var(--stp-r);
	padding: 6px;
	text-decoration: none;
	color: var(--stp-ink);
	box-shadow: var(--stp-shadow);
	transition: transform 0.16s, box-shadow 0.16s, border-color 0.16s;
}

.stp-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--stp-shadow-lg);
	border-color: #ddceb2;
	color: var(--stp-ink);
}

.stp-card__img {
	display: block;
	position: relative;
	overflow: hidden;
	line-height: 0;
	aspect-ratio: 1 / 1;
	border-radius: var(--stp-r-sm);
	background: var(--stp-warm);
}

.stp-card__img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 16px;
	transition: transform 0.3s ease;
}

.stp-card:hover .stp-card__img img {
	transform: scale(1.05);
}

.stp-card__img .stp-ph {
	height: 100%;
	min-height: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.stp-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	flex: 1;
	padding: 0.85rem 0.6rem 0.5rem;
}

.stp-card__name {
	display: -webkit-box;
	font-family: var(--stp-font-head);
	font-weight: 600;
	font-size: 1.02rem;
	line-height: 1.3;
	margin-bottom: 0.2rem;
	color: var(--stp-ink);
	text-decoration: none;
	/* Deux lignes maximum : toutes les cartes d'une rangée s'alignent. */
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

/* Toute la carte est cliquable, mais un seul lien porte le nom accessible. */
.stp-stretch::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.stp-card__actions,
.stp-card__actions * {
	position: relative;
	z-index: 2;
}

.stp-card__actions {
	display: flex;
	align-items: stretch;
	gap: 8px;
	margin-top: auto;
	padding-top: 0.75rem;
}

/* Le bouton « ajouter » est un vrai formulaire : c'est lui qui doit prendre
   la place restante, pas seulement son bouton. */
.stp-card__actions .stp-addform {
	flex: 1;
	margin: 0;
}

.stp-card__actions .stp-addform .stp-btn {
	width: 100%;
}

/* Sur une carte de grille il n'y a pas la place pour l'icône : le libellé
   tient sur une ligne, c'est ce qui compte. */
.stp-card__actions .stp-btn {
	padding-inline: 0.7rem;
	font-size: 0.88rem;
}

.stp-card__actions .stp-btn .stp-ico {
	display: none;
}

.stp-card:focus-within {
	border-color: var(--stp-gold);
}

.stp-card__spec {
	font-size: 0.8rem;
	color: var(--stp-ink2);
	line-height: 1.45;
}

/* Rangée de prix : « à partir de » en petit, le montant en accent. Aucun prix
   barré : les tarifs sont dégressifs, pas soldés — la mention du palier tient
   la place du prix de comparaison du brief. */
.stp-card__pricerow {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.2rem 0.45rem;
	margin-top: 0.5rem;
}

.stp-card__from {
	font-size: 0.76rem;
	color: var(--stp-mute);
}

.stp-card__price {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--stp-gold-dk);
}

.stp-card__pricerow .stp-card__price {
	margin: 0;
}


.stp-card__ship {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.76rem;
	color: var(--stp-mute);
	margin-top: 0.15rem;
}

.stp-card__go {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: auto;
	padding-top: 0.8rem;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--stp-gold-dk);
}

.stp-card__go .stp-ico {
	width: 17px;
	height: 17px;
	flex-basis: 17px;
	transition: transform 0.16s;
}

.stp-card:hover .stp-card__go .stp-ico {
	transform: translateX(3px);
}

.stp-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 3;
	padding: 4px 8px;
	border-radius: 6px;
	background: var(--stp-gold);
	color: var(--stp-ink);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.stp-badge--eco {
	background: #2f5d3a;
	color: #c9e6cf;
}

/* Étapes numérotées — « Comment ça marche » (accueil) et les trois étapes de
   la page de devis. Composant partagé : il vit donc dans la feuille chargée
   partout, pas dans celle du parcours devis. */
.stp-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.stp-steps--3 {
	grid-template-columns: repeat(3, 1fr);
}

.stp-step {
	background: var(--stp-surface);
	border: 1px solid var(--stp-line);
	border-radius: var(--stp-r);
	padding: 1.4rem 1.25rem;
}

.stp-step__n {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--stp-gold);
	color: var(--stp-ink);
	font-weight: 700;
	font-size: 0.95rem;
	margin: 0 0 0.85rem;
}

.stp-step h3 {
	font-size: 1rem;
	margin: 0 0 0.35rem;
}

.stp-step p {
	margin: 0;
	font-size: 0.9rem;
	color: var(--stp-ink2);
	line-height: 1.5;
}

/* Articles */
.stp-posts {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.05rem;
}

.stp-post {
	display: flex;
	flex-direction: column;
	background: var(--stp-surface);
	border: 1px solid var(--stp-line);
	border-radius: var(--stp-r);
	padding: 6px;
	text-decoration: none;
	color: var(--stp-ink);
	transition: transform 0.16s, box-shadow 0.16s;
}

.stp-post:hover {
	transform: translateY(-3px);
	box-shadow: var(--stp-shadow-lg);
	color: var(--stp-ink);
}

.stp-post__img {
	display: block;
	position: relative;
	overflow: hidden;
	line-height: 0;
	border-radius: var(--stp-r-sm);
	background: var(--stp-warm);
}

.stp-post__img img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.stp-post:hover .stp-post__img img {
	transform: scale(1.05);
}

.stp-post__img .stp-ph {
	border: 0;
	border-radius: 0;
	min-height: 132px;
	background: none;
}

.stp-post__body {
	padding: 0.85rem 0.6rem 0.65rem;
}

.stp-post__cat {
	display: block;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--stp-gold-dk);
}

.stp-post__t {
	display: block;
	font-family: var(--stp-font-head);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.35;
	margin-top: 0.3rem;
}

.stp-post__x {
	display: block;
	margin-top: 0.45rem;
	font-size: 0.86rem;
	color: var(--stp-ink2);
	line-height: 1.5;
}

.stp-meta {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	font-size: 0.82rem;
	color: var(--stp-mute);
	margin: 0 0 1.2rem;
}

.stp-meta__cat {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	font-size: 0.72rem;
	color: var(--stp-gold-dk);
	text-decoration: none;
}

/* Accordéon FAQ */
.stp-faq details {
	background: var(--stp-surface);
	border: 1px solid var(--stp-line);
	border-radius: var(--stp-r-sm);
	padding: 0.95rem 1.15rem;
	margin-bottom: 0.65rem;
}

.stp-faq details[open] {
	border-color: #ddceb2;
}

.stp-faq summary {
	list-style: none;
	cursor: pointer;
	font-family: var(--stp-font-head);
	font-weight: 600;
	font-size: 1rem;
	color: var(--stp-ink);
}

.stp-faq summary::-webkit-details-marker {
	display: none;
}

.stp-faq summary::after {
	content: "+";
	float: right;
	color: var(--stp-gold-dk);
	font-weight: 700;
}

.stp-faq details[open] summary::after {
	content: "\2013";
}

.stp-faq details p {
	margin: 0.7rem 0 0;
	font-size: 0.94rem;
	color: var(--stp-ink2);
}

.stp-faq--narrow {
	max-width: 820px;
	margin-inline: auto;
}

/* Bandeau CTA de clôture — bande d'accent pleine largeur, filigrane derrière
   le texte (le « subscribe » du brief devient « devis »). */
.stp-cta {
	position: relative;
	overflow: hidden;
	background: var(--stp-gold);
	color: var(--stp-ink);
	padding: 3.75rem var(--stp-pad);
	text-align: center;
}

.stp-cta::before {
	content: "devis";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--stp-font-head);
	font-weight: 900;
	font-size: clamp(7rem, 24vw, 17rem);
	line-height: 1;
	letter-spacing: -0.05em;
	color: #fff;
	opacity: 0.12;
	white-space: nowrap;
	pointer-events: none;
}

.stp-cta__in {
	position: relative;
	max-width: 760px;
	margin-inline: auto;
}

.stp-cta h2 {
	color: var(--stp-ink);
	margin-bottom: 0.8rem;
}

.stp-cta p {
	color: #533f0c;
	margin: 0 0 1.7rem;
	line-height: 1.62;
}

/* Sur l'or, le bouton primaire doré disparaîtrait : on l'inverse. */
.stp-cta .stp-btn--primary {
	background: var(--stp-ink);
	color: #fff;
	box-shadow: 0 6px 18px rgba(23, 20, 15, 0.22);
}

.stp-cta .stp-btn--primary:hover {
	background: #2c241b;
	color: #fff;
}

.stp-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.6rem;
	align-items: center;
	justify-content: center;
	margin: 0;
}

.stp-cta__tel {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--stp-ink);
	font-weight: 700;
	text-decoration: none;
}

.stp-cta__tel:hover {
	color: var(--stp-ink);
	text-decoration: underline;
}

/* ==========================================================================
   8. Contenu éditorial
   ========================================================================== */

.stp-entry {
	color: #2f2921;
	font-size: 1.05rem;
	line-height: 1.75;
}

.stp-entry > * {
	margin-bottom: 1.25rem;
}

.stp-entry h2 {
	position: relative;
	padding-left: 0.95rem;
	margin: 2.5rem 0 0.9rem;
}

.stp-entry h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	bottom: 0.2em;
	width: 4px;
	border-radius: 2px;
	background: var(--stp-gold);
}

.stp-entry h3 {
	margin: 1.7rem 0 0.5rem;
}

.stp-entry ul,
.stp-entry ol {
	padding-left: 1.35rem;
}

.stp-entry li {
	margin-bottom: 0.5rem;
}

.stp-entry ul li::marker {
	color: var(--stp-gold);
}

.stp-entry th {
	background: var(--stp-warm);
	text-align: left;
	padding: 0.75rem 0.85rem;
	border-bottom: 2px solid var(--stp-gold);
	color: var(--stp-ink);
	font-weight: 700;
}

.stp-entry td {
	padding: 0.72rem 0.85rem;
	border-bottom: 1px solid #ece3d3;
	vertical-align: top;
}

.stp-entry table {
	font-size: 0.95rem;
	margin: 1.6rem 0;
}

.stp-entry blockquote {
	margin: 1.6rem 0;
	padding: 0.2rem 0 0.2rem 1.2rem;
	border-left: 4px solid var(--stp-gold);
	color: var(--stp-ink2);
	font-style: normal;
}

.stp-entry img {
	border-radius: var(--stp-r);
}

/* ==========================================================================
   9. Pied de page
   ========================================================================== */

.stp-seofooter {
	background: var(--stp-surface);
	border-top: 1px solid var(--stp-line);
	padding: 3rem var(--stp-pad);
}

.stp-seofooter__in {
	max-width: var(--stp-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
	gap: 1.9rem;
}

.stp-seofooter__title {
	margin: 0 0 0.85rem;
	font-family: var(--stp-font-head);
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--stp-ink);
}

.stp-seofooter ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.stp-seofooter li {
	position: relative;
	margin: 0 0 0.5rem;
	padding-left: 0.85rem;
}

/* Puces d'accent, comme la liste de liens utiles du brief. */
.stp-seofooter li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--stp-gold);
}

.stp-seofooter a {
	color: #2c261f;
	text-decoration: none;
	font-size: 0.93rem;
	line-height: 1.45;
	border-bottom: 1px solid transparent;
	transition: color 0.14s, border-color 0.14s;
}

.stp-seofooter a:hover {
	color: var(--stp-gold-dk);
	border-bottom-color: var(--stp-gold-dk);
}

.stp-seofooter .stp-btn {
	border-bottom: 0;
	color: var(--stp-ink);
}

.stp-seofooter__brand p {
	font-size: 0.9rem;
	color: #413b32;
	margin: 0 0 0.65rem;
	line-height: 1.55;
}

/* Bloc contact : une icône d'accent par ligne (téléphone, mail, horaires,
   atelier), donc pas de puce ronde comme les colonnes de liens. */
.stp-seofooter__contact {
	margin: 0 0 1rem;
	font-size: 0.9rem;
}

.stp-seofooter__contact li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding-left: 0;
	font-weight: 600;
}

.stp-seofooter__contact li::before {
	display: none;
}

.stp-seofooter__contact .stp-ico {
	color: var(--stp-gold-dk);
}

.stp-seofooter__contact span {
	font-weight: 400;
	color: #6b6255;
	font-size: 0.86rem;
}

.stp-legal {
	background: var(--stp-surface);
	border-top: 1px solid var(--stp-line);
	color: var(--stp-mute);
	font-size: 0.82rem;
}

.stp-legal__in {
	max-width: var(--stp-max);
	margin-inline: auto;
	padding: 1.1rem var(--stp-pad);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.6rem 1.5rem;
	flex-wrap: wrap;
}

.stp-legal a {
	color: var(--stp-ink2);
	text-decoration: none;
}

.stp-legal a:hover {
	color: var(--stp-gold-dk);
	text-decoration: underline;
}

.stp-legal ul {
	display: flex;
	gap: 1.2rem;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.stp-legal p {
	margin: 0;
}

/* ==========================================================================
   10. Accessibilité, états, impression
   ========================================================================== */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	clip-path: none;
	background: #fff;
	color: var(--stp-ink);
	display: block;
	font-size: 0.95rem;
	font-weight: 700;
	height: auto;
	left: 6px;
	line-height: normal;
	padding: 0.9rem 1.2rem;
	text-decoration: none;
	top: 6px;
	width: auto;
	z-index: 100000;
	border-radius: var(--stp-r-sm);
	box-shadow: var(--stp-shadow-lg);
}

.stp-notice {
	padding: 0.9rem 1.1rem;
	border-radius: var(--stp-r-btn);
	margin: 1rem 0;
	font-weight: 600;
}

.stp-notice--ok {
	background: #eef7ee;
	border: 1px solid #bfe0c2;
	color: #1f5b2a;
}

.stp-notice--ko {
	background: #fdf0ee;
	border: 1px solid #f0c9c2;
	color: #8a2c1b;
}

/* Barre de recherche en pilule : icône à gauche, bouton d'accent à droite. */
.stp-search {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	max-width: 600px;
	padding: 5px 5px 5px 0.95rem;
	background: var(--stp-surface);
	border: 1px solid var(--stp-line);
	border-radius: var(--stp-pill);
}

.stp-search:focus-within {
	border-color: var(--stp-gold);
	box-shadow: 0 0 0 3px rgba(224, 153, 0, 0.18);
}

.stp-search__ico {
	color: var(--stp-mute);
	flex: 0 0 20px;
}

.stp-search input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: 0.6rem 0.2rem;
	border: 0;
	background: none;
	font-size: 0.98rem;
	-webkit-appearance: none;
	appearance: none;
}

.stp-search input[type="search"]:focus {
	outline: none;
}

.stp-search .stp-btn {
	border-radius: var(--stp-pill);
	flex: 0 0 auto;
}

.stp-pagination {
	margin: 2.5rem 0 0;
	display: flex;
	justify-content: center;
}

.stp-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 0.6rem;
	margin: 0 0.15rem;
	border: 1px solid var(--stp-line);
	border-radius: var(--stp-r-btn);
	background: var(--stp-surface);
	color: var(--stp-ink);
	text-decoration: none;
	font-weight: 600;
}

.stp-pagination .page-numbers:hover,
.stp-pagination .page-numbers.current {
	background: var(--stp-gold);
	border-color: var(--stp-gold);
	color: var(--stp-ink);
}

/* ==========================================================================
   Points de rupture communs
   ========================================================================== */

@media (max-width: 960px) {
	.stp-grid4,
	.stp-grid3,
	.stp-posts,
	.stp-steps {
		grid-template-columns: repeat(2, 1fr);
	}

	.stp-steps--3 {
		grid-template-columns: 1fr;
	}

	.stp-reass__in {
		grid-template-columns: 1fr;
	}

	.stp-reass__it + .stp-reass__it::before {
		display: none;
	}
}

@media (max-width: 700px) {
	/* Les grilles tarifaires des pages piliers sont plus larges qu'un écran :
	   elles défilent dans leur propre boîte, jamais la page entière. */
	.stp-entry table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}
}

@media (max-width: 560px) {
	.stp-sec {
		margin: 2.6rem auto;
	}

	.stp-grid4,
	.stp-grid3,
	.stp-grid2,
	.stp-posts,
	.stp-steps {
		grid-template-columns: 1fr;
	}

	/* En pleine largeur dans le contenu — mais jamais dans une barre : un
	   bouton à 100 % dans l'en-tête ou la barre de recherche pousse la page
	   plus large que l'écran. */
	.stp-btn {
		width: 100%;
	}

	.stp-header .stp-btn,
	.stp-topbar .stp-btn,
	.stp-search .stp-btn,
	.stp-shopbar .stp-btn,
	.stp-card__actions .stp-btn {
		width: auto;
	}

	.stp-legal__in {
		justify-content: center;
		text-align: center;
	}
}

@media print {
	.stp-topbar,
	.stp-header,
	.stp-reass,
	.stp-seofooter,
	.stp-cta,
	.stp-sticky {
		display: none !important;
	}
}