/*
 * Composants réutilisables : conteneurs, sections, titres, boutons, grilles, cadres d'image.
 * Couleurs : grands titres en couleur de marque (contraste large suffisant), petit texte et aplats en variantes AA.
 */

/* Conteneurs et sections */
.tb-conteneur {
	width: 100%;
	max-width: var(--wp--custom--conteneur);
	margin-inline: auto;
	padding-inline: var(--wp--custom--gouttiere);
}

/* 760 px gouttières comprises, comme la maquette : 648 px de texte à 1280 px, 760 px dans une bande (sans gouttière propre). */
.tb-conteneur--etroit {
	max-width: 760px;
}

/* Entrée de page centrée (Notre histoire) : colonne de 900 px, chapeau de 640 px. */
.tb-section--entree .tb-conteneur--etroit {
	max-width: 900px;
}

.tb-section {
	padding-block: var(--wp--custom--espace-section);
}

.tb-section--moyenne {
	padding-block: clamp(40px, 6.5vw, 70px);
}

.tb-section--entree {
	padding-block: clamp(36px, 6vw, 70px) clamp(20px, 3vw, 30px);
}

/* Entrée centrée (Notre histoire) : 90 px au-dessus et 50 px au-dessous dans la maquette. */
.tb-section--entree.tb-centre {
	padding-block: clamp(48px, 7vw, 90px) clamp(30px, 4vw, 50px);
}

.tb-centre {
	text-align: center;
}

.tb-bande {
	padding: clamp(48px, 8vw, 80px) var(--wp--custom--gouttiere);
}

.tb-bande--alt {
	background: var(--wp--preset--color--creme-alt);
}

.tb-bande--sauge {
	background: var(--wp--preset--color--sauge-aplat);
	color: var(--wp--preset--color--creme);
}

.tb-bande--sauge .tb-h2 {
	color: inherit;
}

/* Un conteneur dans une bande ne double pas la gouttière : la bande la porte déjà. */
.tb-bande > .tb-conteneur {
	padding-inline: 0;
}

.tb-bande--centre {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
}

.tb-pile {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* Grilles */
.tb-deux-colonnes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: clamp(28px, 5vw, 48px);
	align-items: center;
}

.tb-deux-colonnes--haut {
	align-items: start;
}

.tb-deux-colonnes--large {
	gap: clamp(32px, 6vw, 56px);
}

.tb-deux-colonnes--etirees {
	align-items: stretch;
	gap: clamp(28px, 5vw, 40px);
}

.tb-deux-colonnes--photos {
	gap: 20px;
	padding-block: 30px;
}

/* Titres et textes */
.tb-h1,
.tb-h2 {
	font-family: var(--wp--preset--font-family--cormorant);
	line-height: 1.2;
}

.tb-h1 {
	font-size: var(--wp--preset--font-size--titre-page);
	font-weight: 300;
	color: var(--wp--preset--color--texte);
}

.tb-h1 em {
	font-style: italic;
	color: var(--wp--preset--color--sauge);
}

.tb-h1--clair {
	font-size: var(--wp--preset--font-size--grand);
	color: var(--wp--preset--color--creme);
}

.tb-h1--clair em {
	color: inherit;
}

.tb-h2 {
	font-size: var(--wp--preset--font-size--titre-section);
	font-weight: 600;
	color: var(--wp--preset--color--terracotta);
}

.tb-titre-section {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.tb-titre-section--espace {
	margin-bottom: 36px;
}

.tb-surtitre {
	font-size: var(--wp--preset--font-size--etiquette);
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--wp--preset--color--or-texte);
}

.tb-surtitre--sauge {
	color: var(--wp--preset--color--sauge-texte);
}

.tb-surtitre--clair {
	color: var(--wp--preset--color--creme);
}

.tb-chapeau {
	max-width: 520px;
}

.tb-centre .tb-chapeau {
	width: 100%;
	margin-inline: auto;
}

.tb-section--entree.tb-centre .tb-chapeau {
	max-width: 640px;
}

/* Boutique et gammes : chapeau de 560 px dans la maquette (520 px sur les pages vitrine). */
.woocommerce .tb-section--entree .tb-chapeau {
	max-width: 560px;
}

.tb-fil-ariane {
	font-size: var(--wp--preset--font-size--etiquette);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sauge-texte);
}

.tb-fil-ariane a {
	color: inherit;
}

.tb-citation {
	margin: 0;
	padding: 0;
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: var(--wp--preset--font-size--citation);
	font-style: italic;
	font-weight: 300;
	line-height: 1.3;
	color: var(--wp--preset--color--sauge-texte);
}

.tb-citation--centre {
	margin-block: 20px;
	text-align: center;
}

/* Boutons et liens */
.tb-bouton {
	display: inline-block;
	padding: 15px 34px;
	border: 1px solid transparent;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--bouton);
	font-weight: 300;
	letter-spacing: 0.18em;
	line-height: 1.7;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
}

.tb-bouton--auto {
	align-self: flex-start;
}

.tb-bouton--plein {
	background: var(--wp--preset--color--terracotta-aplat);
	color: var(--wp--preset--color--creme);
}

.tb-bouton--plein:hover {
	background: var(--wp--preset--color--texte);
	color: var(--wp--preset--color--creme);
}

.tb-bouton--contour {
	border-color: var(--wp--preset--color--sauge-texte);
	color: var(--wp--preset--color--sauge-texte);
}

.tb-bouton--contour:hover {
	background: var(--wp--preset--color--sauge-aplat);
	color: var(--wp--preset--color--creme);
}

.tb-bouton--clair {
	border-color: var(--wp--preset--color--creme);
	color: var(--wp--preset--color--creme);
}

.tb-bouton--clair:hover {
	background: var(--wp--preset--color--creme);
	color: var(--wp--preset--color--sauge-aplat);
}

.tb-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.tb-lien {
	align-self: flex-start;
	padding-bottom: 3px;
	border-bottom: 1px solid var(--wp--preset--color--terracotta-texte);
	font-size: var(--wp--preset--font-size--bouton);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--terracotta-texte);
}

.tb-labels {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.tb-labels li {
	padding: 10px 18px;
	border: 1px solid var(--wp--preset--color--trait-fort);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sauge-texte);
}

/* Cadres d'image et vignettes d'illustration */
.tb-cadre {
	overflow: hidden;
	background: var(--wp--preset--color--trait);
}

.tb-cadre img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tb-cadre--4-3 {
	aspect-ratio: 4 / 3;
}

.tb-cadre--21-9 {
	aspect-ratio: 21 / 9;
}

@media (max-width: 767px) {
	.tb-cadre--21-9 {
		aspect-ratio: 16 / 9;
	}
}

.tb-vignette {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: var(--wp--preset--color--ivoire);
}

.tb-vignette--haute {
	aspect-ratio: 4 / 5;
}

.tb-vignette__image {
	width: 100%;
	max-width: 380px;
	height: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
}