/*
Theme Name: TheMatcha - Lubii
Theme URI: https://thematcha.fr
Description: Thème enfant Twenty Twenty-Five — DA wabi-sabi × glassmorphism.
Author: TheMatcha
Author URI: https://thematcha.fr
Template: twentytwentyfive
Version: 3.0.0
Text Domain: matcha-child
*/

/* ==========================================================================
   FONTS - FRAUNCES
   ========================================================================== */
/* fraunces-300 */
@font-face {
  font-display: swap;
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300;
  src: url('assets/fonts/fraunces-v38-latin-300.woff2') format('woff2');
}
/* fraunces-regular (500) */
@font-face {
  font-display: swap;
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  src: url('assets/fonts/fraunces-v38-latin-regular.woff2') format('woff2');
}
/* fraunces-italic (500i) */
@font-face {
  font-display: swap;
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  src: url('assets/fonts/fraunces-v38-latin-italic.woff2') format('woff2');
}
/* fraunces-500 */
@font-face {
  font-display: swap;
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  src: url('assets/fonts/fraunces-v38-latin-500.woff2') format('woff2');
}
/* fraunces-700 */
@font-face {
  font-display: swap;
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  src: url('assets/fonts/fraunces-v38-latin-700.woff2') format('woff2');
}
/* fraunces-700italic */
@font-face {
  font-display: swap;
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 700;
  src: url('assets/fonts/fraunces-v38-latin-700italic.woff2') format('woff2');
}
/* fraunces-800 */
@font-face {
  font-display: swap;
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 800;
  src: url('assets/fonts/fraunces-v38-latin-800.woff2') format('woff2');
}
/* fraunces-900 */
@font-face {
  font-display: swap;
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 900;
  src: url('assets/fonts/fraunces-v38-latin-900.woff2') format('woff2');
}

/* ==========================================================================
   FONTS - PLUS JAKARTA SANS
   ========================================================================== */
/* plus-jakarta-sans-300 */
@font-face {
  font-display: swap;
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300;
  src: url('assets/fonts/plus-jakarta-sans-v12-latin-300.woff2') format('woff2');
}
/* plus-jakarta-sans-regular (500) */
@font-face {
  font-display: swap;
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  src: url('assets/fonts/plus-jakarta-sans-v12-latin-regular.woff2') format('woff2');
}
/* plus-jakarta-sans-500 */
@font-face {
  font-display: swap;
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  src: url('assets/fonts/plus-jakarta-sans-v12-latin-500.woff2') format('woff2');
}
/* plus-jakarta-sans-600 */
@font-face {
  font-display: swap;
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  src: url('assets/fonts/plus-jakarta-sans-v12-latin-600.woff2') format('woff2');
}
/* plus-jakarta-sans-700 */
@font-face {
  font-display: swap;
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  src: url('assets/fonts/plus-jakarta-sans-v12-latin-700.woff2') format('woff2');
}
/* plus-jakarta-sans-800 */
@font-face {
  font-display: swap;
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  src: url('assets/fonts/plus-jakarta-sans-v12-latin-800.woff2') format('woff2');
}
/* ==========================================================================
   VARIABLES
   ========================================================================== */
:root {
	/* Palette "Chashitsu au crépuscule" */
	--tatami: #c7b98a;
	--tatami-light: #ddd3b1;
	--tatami-pale: #ede8d8;
	--tatami-deep: #a89860;
	--hinoki: #d4a86a;
	--hinoki-deep: #b8854a;
	--hinoki-dark: #8a6234;
	--sugi: #6b4c3b;
	--sugi-deep: #4a3428;
	--kuro-nuri: #1a1714;
	--sumi: #2c2824;
	--sumi-soft: #3d3832;
	--shikkoku: #0d0d0d;
	--shiro: #f5f2eb;
	--kinari: #ede4d3;
	--washi: #f0ebe0;
	--rikyucha: #897858;
	--matcha-usu: #8b9e5a;
	--matcha-koi: #3c5709;
	--matcha-bright: #7a9a44;
	--matcha-pale: #e8eed8;
	--sabi: #7c6c5c;
	--hai: #8a8478;
	--nezumi: #6e6b65;
	--bengara: #8b3a2a;
	--matcha-drip: #7c9f4c;
	--matcha-light: #e5efd4;

	/* Aliases sémantiques */
	--primary: var(--matcha-koi);
	--primary-light: var(--matcha-usu);
	--primary-dark: #4a5c2a;
	--primary-bg: var(--matcha-pale);
	--accent: var(--hinoki);
	--accent-light: var(--tatami-light);
	--accent-bg: rgba(212, 168, 106, 0.08);

	/* Palette beige legacy */
	--beige: #f5f0e8;
	--beige-dark: var(--kinari);
	--brown: var(--sugi);
	--brown-light: var(--rikyucha);
	--green: var(--matcha-koi);
	--green-light: var(--matcha-pale);
	--red-light: #fdeeed;
	--red: #c0392b;
	--border: var(--tatami-light);

	/* Texte — WCAG AA */
	--text-primary: var(--sumi);
	--text-secondary: var(--sabi);
	--text-muted: var(--sabi);
	--text-light: var(--rikyucha);
	--text: var(--sugi-deep);

	/* Fonds */
	--bg-white: #ffffff;
	--bg-light: var(--shiro);
	--bg-gray: var(--tatami-pale);

	/* Bordures */
	--border-light: rgba(44, 40, 36, 0.08);
	--border-medium: rgba(44, 40, 36, 0.15);
	--border-dark: rgba(44, 40, 36, 0.25);

	/* États */
	--success: var(--matcha-usu);
	--success-bg: var(--matcha-pale);
	--warning: #b88a10;
	--warning-bg: #fdf8eb;
	--error: #b5332e;
	--error-bg: #fef2f2;
	--info: #4a7ca8;
	--info-bg: #eff6ff;

	/* Couleurs legacy matcha (Tailwind compat) */
	--matcha-50: var(--matcha-pale);
	--matcha-100: #d4e8c0;
	--matcha-200: #bdd8a4;
	--matcha-300: #a0c57e;
	--matcha-500: var(--matcha-bright);
	--matcha-500: var(--matcha-usu);
	--matcha-600: var(--matcha-koi);
	--matcha-700: #4a5c2a;
	--matcha-800: #3a4a22;
	--matcha-900: #2a3618;
	--bg-emerald: var(--sumi);

	/* Typographie */
	--font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-serif: var(--font-display);
	--font-mono: 'SF Mono', Monaco, 'Cascadia Code', monospace;

	/* Espacements */
	--spacing-xs: 0.25rem;
	--spacing-sm: 0.5rem;
	--spacing-md: 1rem;
	--spacing-lg: 1.5rem;
	--spacing-xl: 2rem;
	--spacing-2xl: 3rem;

	/* Rayons */
	--radius-sm: 5px;
	--radius-md: 10px;
	--radius-lg: 14px;
	--radius-xl: 20px;
	--radius-full: 9999px;

	/* Ombres */
	--shadow-sm: 0 1px 3px rgba(44, 40, 36, 0.06);
	--shadow-md: 0 4px 12px rgba(44, 40, 36, 0.08);
	--shadow-lg: 0 10px 24px rgba(44, 40, 36, 0.10);
	--shadow-xl: 0 20px 40px rgba(44, 40, 36, 0.12);

	/* Glass */
	--glass-washi: rgba(240, 235, 224, 0.55);
	--glass-washi-strong: rgba(240, 235, 224, 0.72);
	--glass-border: rgba(255, 255, 255, 0.5);

	/* Transitions */
	--transition-fast: 150ms ease;
	--transition-normal: 250ms ease;
	--transition-slow: 350ms ease;
}

/* ==========================================================================
   BASE — Reset & Body
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}
.cards-scroll{
  display:flex;
  gap:18px;
  overflow-x:auto;
  padding:4px 4px 14px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.cards-scroll::-webkit-scrollbar{
  display:none;
}

.swipe-card{
  flex:0 0 340px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  text-decoration:none;
  color:#1f1a17;
  scroll-snap-align:start;
}

.swipe-img{
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:16px;
  background:#f7f3ee;
}

.swipe-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  transform:scale(1.08);
  transform-origin:center center;
  display:block;
}

.swipe-card h3{
  margin:12px 0 0;
  font-size:1rem;
  line-height:1.25;
  font-weight:500;
  color:#1f1a17;
}

.typo-price{
  margin-top:6px;
  font-size:.95rem;
  color:#1f1a17;
}

.typo-price small{
  display:block;
  margin-top:2px;
  font-size:.78rem;
  color:#8b7f73;
}

.aff-note{
  margin-top:10px;
  font-size:.85rem;
  color:#7b6e5f;
}

/* Par où commencer */
.start-grid{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.start-card{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:#1f1a17;
}

.start-card .start-img{
  width:100%;
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:16px;
  background:#f7f3ee;
}

.start-card .start-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.start-card h3{
  margin:10px 0 0;
  text-align:center;
  font-size:1rem;
  font-weight:500;
  line-height:1.25;
}

/* Mobile: 2x2 */
@media (max-width: 768px){
  .start-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
  }
}

@media (min-width: 769px){
  .swipe-card{
    flex-basis:280px;
  }
}

html {
	overflow-x: hidden;
	max-width: 100%;
}
body {
	font-family: var(--font-sans);
	font-weight: 500; /* Ajout du "petit gras" (Medium) */
	color: var(--text-primary);
	background: var(--shiro);
	max-width: 100%;
	font-size: 1.2rem; /* Remplacement de l'unité px par rem */
	-webkit-text-size-adjust: 100%;
}

img,
video,
iframe,
table,
pre,
code {
	max-width: 100%;
}


.tm-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.tm-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}
.entry-content img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.35s ease;
	transform-origin: center center;
}

.entry-content img:hover {
	transform: scale(1.06);
}

.wp-block-image {
	overflow: hidden;
	border-radius: 16px;
}

.entry-content img:hover {
	transform: scale(1.06);
}
/* Anti-CLS : les images avec width/height explicites gardent leur ratio */
img[width][height] {
	height: auto;
}

img {
	display: block;
	margin: 0 auto;
	height: auto;
}

figure {
	display: block;
	margin: 0;
}

figure img {
	display: block;
	width: 100%;
	height: auto;
}

figcaption {
	display: block;
	width: 100%;
	margin-top: 8px;
	font-size: 0.9rem;
	line-height: 1.5;
}

.tm-frontpage * {
	box-sizing: border-box;
}

.diagnostic-hero{
    margin-top:70px;
    margin-bottom:50px;
  position:relative;
  min-height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 20px;
  border-radius:24px;
  overflow:hidden;
  background-image:url('https://thematcha.fr/wp-content/uploads/2026/04/champdematcha.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.diagnostic-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.42));
}

.diagnostic-hero__content{
  position:relative;
  z-index:1;
  max-width:520px;
  text-align:center;
  color:#fff;
  padding:24px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;
}

.diagnostic-kicker{
  margin:0 0 10px;
  font-size:.8rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.85;
}

.diagnostic-hero h2{
  margin:0;
  font-size:clamp(1.7rem, 4vw, 3rem);
  line-height:1.05;
  font-weight:500;
}

.diagnostic-hero p{
  margin:14px 0 0;
  font-size:1rem;
  line-height:1.5;
}

.diagnostic-hero .typo-btn{
  margin-top:20px;
}
.trio{
  display:grid;
  gap:20px;
  max-width:1800px;
  margin:0 auto;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  align-items:start;
}

.trio-card{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  overflow:hidden;
  border-radius:12px;
  min-width:0;
}

.trio-img{
  overflow:hidden;
  background:#f4f1ec;
}

.trio-img img{
    min-width:100%;
    min-height:100%;
  object-fit:cover;
  object-position:center top;
  display:block;
}

.trio-content{
  text-align:center;
  color:#1b2611;
}

.trio-content h3{
  margin:0;
  font-size:0.8rem;
  font-weight:500;
  line-height:1.15;
}

@media (max-width: 768px){
  .trio{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:12px;
  }

  .trio-img{
    aspect-ratio:1 / 1;
  }
  
  
.trio-content h3{
  margin:0;
  font-size:0.5rem;
}
}
/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */


/* H1 */
.entry-content h1, .tm-archive__title {
	font-family: 'Fraunces', Georgia, serif !important;
	font-weight: 900 !important;
	font-size: clamp(2.6rem, 5vw, 4rem);
	line-height: 1.0;
	letter-spacing: -0.035em;
}

/* H2 — partout */
h2,
.entry-content h2,
.post-content h2,
.wp-block-heading h2,
h2.wp-block-heading,
.tldr-box h2,
.pros-box h2,
.cons-box h2,
.cta-box h2,
.test-section h2,
.content-section h2,
.toc h2,
.tm-prose h2 {
	font-family: 'Fraunces', Georgia, serif !important;
	font-weight: 900 !important;
	font-size: clamp(1.9rem, 3.5vw, 2.8rem) !important;
	line-height: 1.06 !important;
	letter-spacing: -0.03em !important;
	border: none !important;
	border-left: none !important;
	padding-left: 0.75rem !important;
	box-shadow: none !important;
}

.note-pastille {
    	font-family: 'Fraunces', Georgia, serif !important;
	font-weight: 900 !important;
	font-size: clamp(1.9rem, 3.5vw, 2.8rem) !important;
	line-height: 1.06 !important;
	letter-spacing: -0.03em !important;
	border: none !important;
	border-left: none !important;
	padding-left: 0.75rem !important;
		background: linear-gradient(90deg, #5a6e34, #8b9e5a, #c7b98a);

	box-shadow: none !important;
}

.wp-block-list{
    	background: linear-gradient(135deg, rgba(109, 179, 63, 0.08), rgba(109, 179, 63, 0.03));
padding:10px;
}
/* Exception TLDR */
.tldr-box h2 {
	font-size: clamp(1.3rem, 2.5vw, 1.7rem) !important;
	color: var(--matcha-koi, #5a6e34) !important;
	margin-bottom: 0.75rem !important;
	margin-top: 0 !important;
}

/* H3 — partout */
h3,
.entry-content h3,
.post-content h3,
h3.wp-block-heading,
.tldr-box h3,
.pros-box h3,
.cons-box h3,
.content-section h3,
.tm-prose h3 {
	font-family: 'Fraunces', Georgia, serif !important;
	font-weight: 700 !important;
	font-size: clamp(1.15rem, 1.8vw, 1.4rem) !important;
	line-height: 1.15 !important;
	letter-spacing: -0.02em !important;
	color: var(--matcha-koi, #5a6e34) !important;
	border: none !important;
	border-left: none !important;
	padding-left: 0 !important;
	padding-bottom: 0.5rem !important;
	border-bottom: 1.5px solid rgba(90, 110, 52, 0.18) !important;
	box-shadow: none !important;
	margin-top: 2rem !important;
	margin-bottom: 0.75rem !important;
}

/* Exception pros/cons */
.pros-box h3,
.cons-box h3 {
	font-size: 1rem !important;
	border-bottom: none !important;
	padding-bottom: 0 !important;
	margin-top: 0 !important;
	color: inherit !important;
}

/* H4 */
.entry-content h4 {
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

/* Suppression globale du | décoratif sur tous les titres */
h1, h2, h3, h4, h5, h6 {
	border-left: none !important;
	box-shadow: none !important;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.wp-block-heading {
	border: none !important;
	border-left: none !important;
	padding-left: 0 !important;
	box-shadow: none !important;
}

/* Paragraphes & listes */
.entry-content p,
.entry-content li,
.post-content p,
.post-content li {
	font-family: 'Plus Jakarta Sans', sans-serif !important;
	font-weight: 500 !important;
	font-size: 1.05rem !important;
	line-height: 1.75 !important;
	letter-spacing: 0.005em !important;
	color: var(--sumi, #2c2824) !important;
}

/* strong / b */
strong, b {
	font-weight: 700 !important;
	font-size: 0.88em;
	letter-spacing: 0.06em;
	color: var(--sumi, #2c2824);
}

.entry-content strong,
.entry-content b {
	font-weight: 600;
}

.entry-content em,
.entry-content i {
	font-style: italic;
}

/* ==========================================================================
   BLOCKQUOTE
   ========================================================================== */
.entry-content blockquote {
	background: #ffffff;
	border-left: none;
	border-radius: 14px;
	padding: 32px 36px 28px;
	margin: 2rem 0;
	position: relative;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(44, 40, 36, 0.05);
}

.entry-content blockquote::before {
	content: '\201C';
	font-family: 'Fraunces', serif;
	font-size: 120px;
	line-height: 0.85;
	color: #5a6e34;
	opacity: 0.12;
	position: absolute;
	top: 16px;
	left: 20px;
	pointer-events: none;
	user-select: none;
}

.entry-content blockquote::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, #5a6e34, #8b9e5a, #c7b98a);
	border-radius: 0 0 14px 14px;
}

.entry-content blockquote p {
	font-family: 'Fraunces', serif !important;
	font-style: italic !important;
	font-weight: 700 !important;
	font-size: 1.35rem !important;
	color: #2c2824 !important;
	line-height: 1.4 !important;
	letter-spacing: -0.02em !important;
	position: relative;
	z-index: 1;
	margin-bottom: 14px !important;
}

.entry-content blockquote cite {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-style: normal;
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #7c6c5c;
	position: relative;
	z-index: 1;
}

.entry-content blockquote cite::before {
	content: '';
	display: block;
	width: 20px;
	height: 1px;
	background: #7c6c5c;
	opacity: 0.4;
}

/* ==========================================================================
   UI — Surcharges de font pour éléments interactifs
   ========================================================================== */
.entry-content,
.post-content,
button,
input,
select,
textarea,
.cta-button,
.cta-btn,
.product-button,
.faq-question,
.faq-q,
summary,
.nav,
.menu,
.label,
.badge,
.criteria-badge,
.label-bio,
.toc,
.toc a,
.tm-nav a,
.tm-mobile-nav a {
	font-family: var(--font-sans);
}

/* ==========================================================================
   HEADER — Navigation & Glassmorphisme
   ========================================================================== */

/* Outer bar — glassmorphisme */
.tm-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: var(--glass-washi);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--glass-border);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset;
	min-height: 56px;
	transition: box-shadow var(--transition-normal), background var(--transition-normal);
}

.tm-header.scrolled {
	background: var(--glass-washi-strong);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, var(--shadow-sm);
}

/* Conteneur flexible */
.tm-header__inner {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	max-width: 1800px;
	margin: 0 auto;
	padding: 0.75rem 1.5rem;
}

/* Wrapper nav — prend l'espace, centre son contenu */
.tm-header__inner > nav {
	flex: 1;
	display: flex;
	justify-content: center;
}

/* Logo */
.tm-header__logo a {
	text-decoration: none;
}

.tm-header__logo-text {
	font-family: 'Fraunces', serif !important;
	font-weight: 800 !important;
	font-size: 1.25rem;
	letter-spacing: 0.01em;
	color: var(--sumi);
}

.tm-header__logo-text span {
	color: var(--matcha-koi, #5a6e34);
}

/* Kanji */
.tm-header__kanji {
	font-family: 'Noto Serif JP', serif;
	font-size: 1.1rem;
	color: var(--sabi, #7c6c5c);
	opacity: 0.7;
	letter-spacing: 0.05em;
}

/* CTA dans le header */
.tm-header__cta {
	font-family: var(--font-sans);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	border-radius: var(--radius-md);
	padding: 0.5rem 1rem;
	background: var(--matcha-koi, #5a6e34);
	color: var(--tatami-light, #ddd3b1) !important;
	text-decoration: none;
	text-transform: uppercase;
	transition: background var(--transition-fast);
	white-space: nowrap;
}

.tm-header__cta:hover {
	background: var(--primary-dark, #4a5c2a);
	color: var(--tatami-light, #ddd3b1) !important;
}

/* Nav desktop */
.tm-nav {
	display: flex;
	align-items: center;
	gap: 0.125rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tm-nav a {
	position: relative;
	font-family: var(--font-sans);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text-secondary, #7c6c5c);
	text-decoration: none;
	padding: 0.5rem 0.85rem;
	border-radius: var(--radius-sm);
	transition: color var(--transition-fast);
}

.tm-nav a::after {
	content: '';
	position: absolute;
	bottom: 4px;
	left: 0.85rem;
	right: 0.85rem;
	height: 1px;
	background: var(--matcha-koi, #5a6e34);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--transition-normal);
}

.tm-nav a:hover {
	color: var(--sumi);
}

.tm-nav a:hover::after {
	transform: scaleX(1);
}

/* Menu items courant */
.tm-nav .current-menu-item > a,
.tm-nav .current_page_item > a {
	color: var(--matcha-koi, #5a6e34);
	font-weight: 600;
}

/* Sub-menu */
.tm-nav .sub-menu {
	display: none;
	position: absolute;
	background: var(--glass-washi-strong);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius-md);
	padding: 0.5rem;
	list-style: none;
	min-width: 180px;
	z-index: 100;
}

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

.tm-nav .menu-item-has-children:hover .sub-menu {
	display: block;
	animation: tm-fade-in 0.2s ease both;
}

@keyframes tm-fade-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Search button */
.tm-header__search-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	cursor: pointer;
	color: var(--sabi, #7c6c5c);
	padding: 0.4rem;
	border-radius: var(--radius-sm);
	transition: color var(--transition-fast), background var(--transition-fast);
}

.tm-header__search-btn:hover {
	color: var(--sumi);
	background: rgba(44, 40, 36, 0.04);
}

/* Burger — hamburger mobile */
.tm-burger {
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0.4rem;
	margin-left: auto;
	line-height: 0;
	align-self: center;
}

.tm-burger span {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--sumi);
	border-radius: 2px;
	transition: transform var(--transition-fast), opacity var(--transition-fast);
}

/* État ouvert du burger (JS toggle .is-open) */
.tm-burger.is-open span:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.tm-burger.is-open span:nth-child(2) {
	opacity: 0;
}

.tm-burger.is-open span:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

@media (min-width: 901px) {
	.tm-burger {
		display: none;
	}
}

/* Nav mobile — cachée par défaut avec animation */
.tm-mobile-nav {
	max-height: 0;
	overflow: hidden;
	visibility: hidden;
	opacity: 0;
	padding: 0 1.5rem;
	background: var(--glass-washi-strong);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-top: 1px solid var(--glass-border);
	list-style: none;
	margin: 0;
	transition:
		max-height 0.35s ease,
		opacity 0.35s ease,
		padding 0.35s ease,
		visibility 0s 0.35s;
}

/* État ouvert (JS toggle .is-open) */
.tm-mobile-nav.is-open {
	max-height: 100vh;
	visibility: visible;
	opacity: 1;
	padding: 1rem 1.5rem;
	transition:
		max-height 0.35s ease,
		opacity 0.35s ease,
		padding 0.35s ease;
}

.tm-mobile-nav a {
	display: block;
	font-family: var(--font-sans);
	font-size: 0.85rem;
	padding: 0.6rem 0;
	color: var(--text-secondary, #7c6c5c);
	text-decoration: none;
	border-bottom: 1px solid var(--border-light);
	transition: color var(--transition-fast);
}

.tm-mobile-nav a:last-child {
	border-bottom: none;
}

.tm-mobile-nav a:hover {
	color: var(--sumi);
}

/* ==========================================================================
   SEARCH OVERLAY
   ========================================================================== */
.tm-search-overlay {
	position: fixed;
	inset: 0;
	z-index: 2000;
	background: rgba(44, 40, 36, 0.6);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	display: flex;
	transition:
		opacity 0.3s ease,
		visibility 0s 0.3s;
}

.tm-search-overlay.is-open,
.tm-search-overlay--open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s ease;
}

.tm-search-overlay__box {
	width: 100%;
	max-width: 640px;
	padding: 1.5rem;
}

.tm-search-overlay__form {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	background: var(--bg-white);
	border-radius: var(--radius-lg);
	padding: 0.75rem 1.25rem;
	box-shadow: var(--shadow-xl);
	border: 1px solid var(--border-light);
}

.tm-search-overlay__form .search-form {
	display: flex;
	flex: 1;
	gap: 0.5rem;
}

.tm-search-overlay__form .search-field {
	flex: 1;
	border: none;
	background: transparent;
	font-family: var(--font-sans);
	font-size: 1rem;
	color: var(--sumi);
	outline: none;
}

.tm-search-overlay__form .search-submit {
	display: none;
}

.tm-search-overlay__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	cursor: pointer;
	color: var(--hai);
	padding: 0.25rem;
	border-radius: var(--radius-sm);
	transition: color var(--transition-fast);
}

.tm-search-overlay__close:hover {
	color: var(--sumi);
}

/* ==========================================================================
   LAYOUT — Containers
   ========================================================================== */
.tm-prose {
	padding: 5px;
	max-width: 1600px;
	margin: 0 auto;
}

.tm-prose table {
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.tm-faq-section {
	margin: 80px auto;
	padding: 40px 20px;
	max-width: 1200px;
}



/* ==========================================================================
   HERO
   ========================================================================== */
.tm-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 10px;
	min-height: 500px;
	background: var(--sumi, #2c2824);
}



.tm-hero__img {
	position: absolute;
	min-width: 100%;
        min-height:100%;
	object-fit: cover;
	object-position: center;
}

.tm-hero::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--hinoki, #d4a86a), var(--tatami, #c7b98a), var(--matcha-usu, #8b9e5a));
}

.tm-hero__bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.5;
	z-index: 1;
}

.tm-hero__content {
    margin:20px;
	position: relative;
	z-index: 2;
	text-align: center;
	max-width: 1200px;
	background: rgba(13, 13, 13, 0.18);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	padding: 24px 18px;
}
.tm-hero__badge {
	display: inline-block;
	background: rgba(240, 235, 224, 0.12);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: var(--tatami-light, #ddd3b1);
	padding: 8px 22px;
	border-radius: 4px;
	font-size: 0.8rem;
	font-weight: 500;
	margin-bottom: 24px;
	border: 1px solid rgba(240, 235, 224, 0.15);
	letter-spacing: 0.5px;
}
.tm-hero__title {
	font-family: 'Fraunces', serif !important;
	font-size: clamp(2rem, 5vw, 2.6rem);
	font-weight: 900;
	color: #fbf6e9;
	margin-bottom: 18px;
	line-height: 1.2;
	text-shadow: 0 2px 4px rgba(0,0,0,0.7), 2px 2px 0 #0d380d;
}
.tm-hero__title2 {
	font-family: 'Fraunces', serif !important;
	font-size: clamp(2rem, 5vw, 2.6rem);
	font-weight: 900;
	color: #fbf6e9;
	margin-bottom: 18px;
	line-height: 1.2;
	text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

.tm-hero__title2 em {
	font-style: normal;
	font-weight: 500;
	color: var(--matcha-usu, #8b9e5a);
}

.tm-hero__subtitle {
	font-size: 1.1rem;
	color: rgba(221, 211, 177, 0.7);
	margin-bottom: 30px;
	line-height: 1.7;
	max-width: 620px;
	margin-left: auto;
	margin-right: auto;
}

.tm-hero__tags {
	display: flex;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 36px;
}

.tm-hero__tag {
	background: rgba(139, 158, 90, 0.12);
	color: rgba(221, 211, 177, 0.8);
	padding: 6px 16px;
	border-radius: 4px;
	font-size: 0.82rem;
	border: 1px solid rgba(139, 158, 90, 0.2);
}

.tm-hero__ctas {
	display: flex;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
}

.tm-btn-primary {
	display: inline-block;
	background: var(--tatami-light, #ddd3b1);
	color: var(--sumi, #2c2824) !important;
	padding: 14px 32px;
	border-radius: 6px;
	font-weight: 500;
	text-decoration: none;
	font-size: 0.95rem;
	transition: background 0.2s, transform 0.15s;
	letter-spacing: 0.02em;
}

.tm-btn-primary:hover {
	background: #fff;
	transform: translateY(-1px);
	color: var(--sumi, #2c2824) !important;
}

.tm-btn-secondary {
	display: inline-block;
	background: transparent;
	color: var(--tatami-light, #ddd3b1) !important;
	padding: 14px 32px;
	border-radius: 6px;
	font-weight: 500;
	text-decoration: none;
	font-size: 0.95rem;
	border: 1px solid rgba(221, 211, 177, 0.2);
	transition: background 0.2s;
}

.tm-btn-secondary:hover {
	background: rgba(221, 211, 177, 0.08);
	color: var(--tatami-light, #ddd3b1) !important;
}

/* ==========================================================================
   ABOUT — Editorial Style
   ========================================================================== */
.tm-about {
	margin: 100px auto;
	padding: 0 40px;
	max-width: 1800px;
	background: transparent;
	border: none;
}

.tm-about__grid {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: 60px;
	align-items: center;
}

.tm-about__img-wrap {
	position: relative;
}

.tm-about__img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
	border-radius: 10px;
}

.tm-about__img-caption {
	font-size: 0.75rem;
	color: var(--sabi, #7c6c5c);
	margin-top: 12px;
	font-family: 'Noto Serif JP', serif;
	font-style: italic;
	opacity: 0.8;
}

.tm-about__label {
	display: block;
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--sabi, #7c6c5c);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	margin-bottom: 24px;
	border-bottom: 1px solid rgba(44, 40, 36, 0.1);
	padding-bottom: 8px;
}

.tm-about__lead {
	font-family: 'Noto Serif JP', serif;
	font-size: 1.6rem;
	color: var(--sumi, #2c2824);
	line-height: 1.4;
	margin-bottom: 24px;
	text-wrap: balance;
}

.tm-about__text {
	font-size: 1rem;
	color: var(--sabi, #7c6c5c);
	line-height: 1.8;
	margin-bottom: 16px;
}

.tm-about__quote {
	font-family: 'Noto Serif JP', serif;
	font-size: 1.3rem;
	font-style: italic;
	color: var(--matcha-koi, #5a6e34);
	margin: 32px 0;
	padding: 0 0 0 24px;
	border-left: 2px solid var(--matcha-koi, #5a6e34);
	line-height: 1.5;
}


/* ==========================================================================
   FAQ
   ========================================================================== */
.tm-faq-container {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 800px;
	margin: 0 auto;
}

.tm-faq-item {
	background: transparent;
	border-bottom: 1px solid rgba(44, 40, 36, 0.06);
}

.tm-faq-question {
	width: 100%;
	background: transparent;
	border: none;
	padding: 20px 10px;
	text-align: left;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 1.1rem;
	color: #2d3748;
	font-weight: 500;
	list-style: none;
}

.tm-faq-icon {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #6db33f;
	border-radius: 50%;
	background: rgba(109, 179, 63, 0.1);
	flex-shrink: 0;
}

.tm-faq-answer {
	padding: 0 10px 20px 10px;
	color: #4a5568;
	line-height: 1.8;
	font-size: 0.95rem;
}

.tm-faq-link {
	color: #6db33f;
	text-decoration: none;
	font-weight: 600;
}

.tm-faq-link:hover {
	text-decoration: underline;
}

/* ==========================================================================
   CARDS — Génériques
   ========================================================================== */
.card,
.card--muted,
.test-section {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	border-radius: 5px;
	overflow: hidden;
	background: white;
	margin: 5px;
	padding: 10px;
	transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.card:hover {
	transform: translateY(-5px);
	box-shadow: 0 14px 34px rgba(44, 40, 36, 0.09);
}

.card:hover .cta svg {
	transform: translateX(4px);
}

.top {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 300px;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
}

.top svg {
	width: 100%;
	height: 100%;
	display: block;
}

.body {
	position: relative;
	z-index: 2;
	padding: 1.35rem;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding-top: 60px;
}

.headline {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.95rem;
}

.meta {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.num {
	font-size: 0.65rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	color: var(--matcha-drip);
}

.badge {
	display: inline-flex;
	align-items: center;
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: var(--radius-full);
	font-family: var(--font-sans);
}

.card .badge {
	background: #f6f2e8;
	padding: 0.25rem 0.6rem;
	font-size: 0.6rem;
	color: var(--matcha-koi);
}

.cardTitle {
	font-family: var(--font-display);
	font-size: 1.22rem;
	font-weight: 500;
	color: var(--sumi);
	line-height: 1.25;
}

.desc {
	font-size: 0.8rem;
	color: var(--sabi);
	line-height: 1.5;
	margin-bottom: 1.35rem;
}

.cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: auto;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--matcha-koi);
}

.cta svg {
	width: 14px;
	height: 14px;
	stroke: currentColor;
	stroke-width: 2;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform var(--transition-slow);
}

.benefit-card,
.product-card,
.content-section {
	background: var(--bg-white);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-lg);
	padding: var(--spacing-lg);
	margin: var(--spacing-lg) 0;
	transition: all var(--transition-normal);
}

.benefit-card:hover,
.product-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.test-section {
	border-radius: var(--radius-lg);
	padding: var(--spacing-lg);
	margin: 10px;
}

.tm-latest-grid {
	column-count: 2;
	column-gap: 1.5rem;
}


.tm-latest-grid .tm-card {
	display: inline-block;
	width: 100%;
	margin: 0 0 1.5rem;
	break-inside: avoid;
	page-break-inside: avoid;
	-webkit-column-break-inside: avoid;
}

.tm-featured-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 900px) {
	.tm-featured-grid {
		grid-template-columns: 3fr 1fr;
		align-items: start;
	}
}



.tm-featured-grid > .tm-feat-main,
.tm-featured-grid > .tm-feat-side {
	display: inline-block;
	width: 100%;
	margin: 0 0 1.5rem;
	break-inside: avoid;
	page-break-inside: avoid;
	-webkit-column-break-inside: avoid;
}


.tm-feat-main,
.tm-feat-side {
	display: block;
	text-decoration: none;
	color: inherit;
	border-radius: 18px;
	overflow: hidden;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.08);
	box-shadow: 0 8px 24px rgba(0,0,0,0.04);
	transition: transform .25s ease, box-shadow .25s ease;
}

.tm-feat-main:hover,
.tm-feat-side:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 34px rgba(0,0,0,0.08);
}

.tm-feat-main img,
.tm-feat-side img {
	display: block;
	width: 100%;
	height: auto;
}

.tm-pack-grid {
	display: grid;
	gap: 1.5rem;
}


.tm-pack-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}



.tm-card {
	display: block;
	text-decoration: none;
	color: inherit;
	border-radius: 18px;
	overflow: hidden;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.08);
	box-shadow: 0 8px 24px rgba(0,0,0,0.04);
	transition: transform .25s ease, box-shadow .25s ease;
}

.tm-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 34px rgba(0,0,0,0.08);
}

.tm-card img {
	display: block;
	width: 100%;
	height: auto;
}

.tm-card__body {
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.tm-card__cat {
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #5a6e34;
}

.tm-card__title {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.25;
	color: #1f241b;
}

.tm-card__meta {
	font-size: 0.75rem;
	color: rgba(31, 36, 27, 0.72);
}
/* ==========================================================================
   EYEBROW & SECTION HEADERS
   ========================================================================== */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	font-family: var(--font-sans);
	font-size: 0.68rem;
	font-weight: 500;
	margin-top:20px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sabi, #7c6c5c);
	margin-bottom: 0.85rem;
}

.eyebrow::before,
.eyebrow::after {
	content: '';
	display: block;
	width: 28px;
	height: 0.5px;
	background: currentColor;
	opacity: 0.35;
}

.tm-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 2.5rem;
}

.tm-section-title {
	margin: 0;
	font-size: clamp(1.5rem, 4vw, 2.25rem);
	color: var(--sumi);
	line-height: 1.2;
}

.tm-section-title em {
	color: var(--matcha);
	font-style: italic;
}

.tm-section-link {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--matcha);
	text-decoration: none;
	transition: opacity 0.2s ease;
	white-space: nowrap;
}

.tm-section-link:hover {
	opacity: 0.7;
}

.tm-section-title-standalone {
	font-family: 'Noto Serif JP', serif;
	font-size: 2rem;
	font-weight: 500;
	color: var(--sumi, #2c2824);
	text-align: center;
	margin: 60px auto 30px;
	max-width: 1200px;
	padding: 0 20px;
	letter-spacing: -0.02em;
}

.title {
	font-family: var(--font-display);
	font-size: clamp(1.8rem, 1.5rem + 2vw, 2.8rem);
	font-weight: 500;
	color: var(--sumi);
	letter-spacing: -0.02em;
	line-height: 1.2;
}

/* ==========================================================================
   TABLES
   ========================================================================== */
.comparison-table,
.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 0.9rem;
	border-radius: 0;
	box-shadow: none;
	overflow: hidden;
}

.comparison-table thead tr,
.entry-content thead tr {
	background: transparent !important;
	border-bottom: 2px solid #2c2824;
}

.comparison-table th,
.entry-content th {
	background: transparent !important;
	color: #7c6c5c !important;
	font-family: 'Plus Jakarta Sans', sans-serif !important;
	font-size: 0.68rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	padding: 10px 16px 12px !important;
	text-align: left !important;
}

.comparison-table tbody tr,
.entry-content tbody tr {
	border-bottom: 1px solid rgba(44, 40, 36, 0.07) !important;
	background: transparent !important;
}

.comparison-table tbody tr:last-child,
.entry-content tbody tr:last-child {
	border-bottom: none !important;
}

.comparison-table tbody tr:hover,
.entry-content tbody tr:hover {
	background: rgba(90, 110, 52, 0.03) !important;
}

.comparison-table td,
.entry-content td {
	padding: 16px !important;
	color: #4a3428 !important;
	line-height: 1.6 !important;
	vertical-align: top !important;
	font-weight: 500 !important;
}

.comparison-table td:first-child,
.entry-content td:first-child {
	font-family: 'Fraunces', serif !important;
	font-weight: 700 !important;
	font-size: 0.95rem !important;
	color: #2c2824 !important;
	letter-spacing: -0.01em !important;
}

.comparison-table tbody tr.highlight {
	background: rgba(90, 110, 52, 0.05) !important;
}

/* ==========================================================================
   CTA BUTTONS
   ========================================================================== */
.cta-button,
.cta-btn,
.product-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: #0d380d;
	color: #ddd3b1 !important;
	padding: 0.875rem 1.75rem;
	border-radius: var(--radius-md);
	font-family: 'Fraunces', Georgia, serif !important;
	font-weight: 500;
	font-size: 0.82rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	transition: all var(--transition-normal);
	border: none;
	cursor: pointer;
	white-space: nowrap;
	min-height: 48px;
}

.cta-button:hover,
.cta-btn:hover {
	background: var(--kuro-nuri);
	color: var(--tatami-light) !important;
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}

.cta-button.full,
.cta-btn.full {
	display: flex;
	width: 100%;
}

/* Variante brune */
.cta-btn.brown {
	background: var(--sugi);
	color: var(--kinari) !important;
	box-shadow: none;
}

.cta-btn.brown:hover {
	background: var(--sugi-deep);
	transform: none;
}

/* Bouton léger (outline) */
.cta-button-light {
	display: inline-block;
	padding: 12px 20px;
	background: var(--bg-light);
	color: var(--text-primary) !important;
	text-decoration: none !important;
	font-size: 0.9rem;
	font-weight: 500;
	border-radius: var(--radius-md);
	border: 1px solid var(--border-light);
	transition: all var(--transition-normal);
	min-height: 44px;
	line-height: 1.4;
}

.cta-button-light:hover {
	background: var(--primary) !important;
	color: #fff !important;
	border-color: var(--primary) !important;
}

/* CTA box */
.cta-box {
	background: white;
	border: 1px solid var(--border-light);
	border-radius: var(--radius-lg);
	padding: 24px;
	text-align: center;
	margin: 32px 0;
}

.cta-box img {
	max-width: 260px;
	border-radius: 8px;
	margin: 0 auto 16px;
	display: block;
}

.cta-box .affiliate-note {
	font-size: 12px;
	color: var(--text-light);
	margin-top: 10px;
}

.cta-buttons {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding: 0;
	gap: 10px;
}

/* ==========================================================================
   BADGES & PILLS
   ========================================================================== */
.criteria-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.3rem 0.9rem;
	font-family: var(--font-sans);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: var(--radius-full);
	background: var(--sumi);
	color: var(--tatami-light);
	line-height: 1.4;
}

.label-bio {
	display: inline-flex;
	align-items: center;
	padding: 0.3rem 0.9rem;
	font-family: var(--font-sans);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	border-radius: var(--radius-full);
	background: rgba(90, 110, 52, 0.07);
	color: var(--matcha-koi);
	border: 0.5px solid rgba(90, 110, 52, 0.2);
}

.label {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--text-light);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-family: var(--font-display);
}

.tag {
	background: var(--kinari);
	color: var(--sugi);
	border-radius: 4px;
	padding: 1px 5px;
	font-size: 0.93em;
}

/* ==========================================================================
   AUTHOR BYLINE
   ========================================================================== */
.author-byline {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.5rem;

}

.author-byline img {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.author-byline-text {
	font-size: 0.75rem;
	line-height: 1.5;
	font-weight: 900 !important;
	color: white;
}

.author-byline-text strong {
		font-family: 'Fraunces', Georgia, serif !important;
	font-size: 0.95rem;	color: white;
		font-weight: 900 !important;



}

.author-meta {
	display: block;
	font-size: 0.65rem;
	font-weight: 300 !important;

	margin-top: 0.2rem;
}

/* ==========================================================================
   TLDR BOX
   ========================================================================== */
.tldr-box {
	background: linear-gradient(135deg, rgba(109, 179, 63, 0.08), rgba(109, 179, 63, 0.03));
	padding: 10px;
	margin: 5px;
}

.tldr-box h3 {
	font-size: 1.1rem;
	color: #2d5a27;
	margin-bottom: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.tldr-box p {
	line-height: 1.7;
}

/* ==========================================================================
   PROS / CONS
   ========================================================================== */
.pros-cons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin: 20px 0;
}

.pros-box,
.pros {
	padding: var(--spacing-md) var(--spacing-lg);
	margin: var(--spacing-lg) 0;
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	border-left: 3px solid var(--matcha-usu);
	background: var(--matcha-pale);
	color: var(--matcha-koi);
}

.cons-box,
.cons {
	padding: var(--spacing-md) var(--spacing-lg);
	margin: var(--spacing-lg) 0;
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	border-left: 3px solid var(--bengara);
	background: var(--error-bg);
	color: #7f1d1d;
}

.pros-cons .pros-box,
.pros-cons .cons-box {
	border-radius: var(--radius-md);
	border-left: none;
	margin: 0;
}

.pros-cons .pros-box {
	background: var(--matcha-pale);
	border: 1px solid rgba(90, 110, 52, 0.15);
	color: inherit;
}

.pros-cons .cons-box {
	background: var(--error-bg);
	border: 1px solid rgba(139, 58, 42, 0.15);
	color: inherit;
}

.pros-box h3,
.cons-box h3 {
	font-size: 14.5px;
	font-weight: 500;
	font-family: var(--font-display);
	margin: 0 0 10px;
	border: none;
	padding: 0;
}

.pros-box h3 {
	color: var(--matcha-koi);
}

.cons-box h3 {
	color: var(--bengara);
}

.pros-box li,
.cons-box li {
	font-size: 14px;
}

/* ==========================================================================
   RATING
   ========================================================================== */
.rating-box {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--kinari);
	border-radius: var(--radius-md);
	padding: 16px 20px;
	margin: 20px 0;
}

.stars {
	font-size: 22px;
}

.rating-label {
	font-family: var(--font-display);
	font-size: 16px;
	color: var(--sugi);
	font-weight: 300;
}

.rating {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.rating-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--tatami-pale);
	border: 2px solid var(--tatami);
}

.rating-dot.active,
.rating-dot.filled {
	background: var(--matcha-usu);
	border-color: var(--matcha-koi);
}

/* ==========================================================================
   UPDATE BOX
   ========================================================================== */
.update-box {
	background: var(--washi);
	border-left: 3px solid var(--tatami);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	padding: 14px 18px;
	margin: 16px 0;
	font-size: 14px;
	color: var(--text-light);
}

.update-box strong {
	color: var(--sugi);
}

/* ==========================================================================
   TOC — Sommaire
   ========================================================================== */
.toc {
	background: var(--washi);
	border-radius: var(--radius-md);
	padding: 20px 24px;
	margin-bottom: 32px;
	font-size: 14px;
	border: 1px solid var(--border-light);
	font-family: var(--font-sans);
}

.toc-title {
	font-weight: 500;
	color: var(--sugi);
	margin-bottom: 10px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-family: var(--font-sans);
}

.toc ol {
	padding-left: 18px;
}

.toc li {
	margin-bottom: 5px;
}

.toc a {
	color: var(--sabi);
	text-decoration: none;
	font-weight: 300;
}

.toc a:hover {
	text-decoration: underline;
	color: var(--matcha-koi);
}

/* ==========================================================================
   TRANSPARENCY FOOTER
   ========================================================================== */
.transparency-footer {
	background: #f7fafc;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 1.2rem 1.5rem;
	margin: 2rem 0;
	font-size: 0.9rem;
	color: #4a5568;
	line-height: 1.6;
}

.transparency-footer strong {
	color: #2d3748;
}

/* ==========================================================================
   CODE
   ========================================================================== */
.entry-content code {
	background: var(--tatami-pale);
	padding: 0.125rem 0.375rem;
	border-radius: var(--radius-sm);
	font-family: var(--font-mono);
	font-size: 0.875em;
}

.entry-content pre {
	background: var(--sumi);
	color: var(--tatami-light);
	padding: var(--spacing-lg);
	border-radius: var(--radius-md);
	overflow-x: auto;
	margin: var(--spacing-lg) 0;
}

.entry-content pre code {
	background: transparent;
	padding: 0;
	color: inherit;
}

/* ==========================================================================
   PAGE LAYOUTS
   ========================================================================== */

/* Meilleurs-matcha page */
body.page-id-1069 .content-container,
body.page-id-1069 #primary,
body.page-id-1069 .content-wrap,
body.page-id-1069 .entry-content-wrap,
body.page-id-1069 .entry-content,
body.page-id-1069 .single-content {
	max-width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
}

body.page-id-1069.content-style-boxed .content-wrap {
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Single posts */
body.single-post .site-container,
.single-post .content-container {
	max-width: 100% !important;
	padding: 0 !important;
}

.single-post .content-wrap {
	max-width: min(1600px, 100%);
	margin: 40px auto !important;
	display: block;
	box-sizing: border-box;
}

body.single-post.content-style-boxed .content-wrap {
	background: var(--bg-white);
	box-shadow: var(--shadow-md);
	border-radius: var(--radius-lg);
	padding: var(--spacing-xl);
	margin-top: var(--spacing-xl);
	margin-bottom: var(--spacing-xl);
}

body.single-post.content-width-narrow .content-wrap {
	max-width: 1600px;
}

/* Pages homepage full-width */
body.page.content-style-boxed .content-wrap,
body.home.content-style-boxed .content-wrap {
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
	max-width: none;
}

body.page.content-style-boxed .entry-content-wrap,
body.home.content-style-boxed .entry-content-wrap {
	padding: 0;
}

.page .entry-content,
.home .entry-content {
	max-width: none;
	padding: 0;
}

body.page .site-container,
body.home .site-container {
	max-width: 100%;
	padding: 0;
}

body.page #primary,
body.home #primary {
	max-width: 100%;
}

body.page.content-width-normal .content-container,
body.home.content-width-normal .content-container {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

body.page .entry-content > *:not(.alignfull):not(.alignwide):not(.wp-block-html):not(.hero-inline) {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--spacing-lg);
	padding-right: var(--spacing-lg);
	box-sizing: border-box;
	width: 100%;
}

body.page .entry-content > .wp-block-html,
body.home .entry-content > .wp-block-html {
	max-width: 100%;
}

/* Inline sections */
.about-inline {
	background: var(--bg-white) !important;
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-lg);
	border: 1px solid var(--border-light);
}

.faq-inline {
	background: var(--shiro) !important;
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-md);
}

/* ==========================================================================
   KADENCE BLOCKS
   ========================================================================== */
.wp-block-heading {
	margin-top: var(--spacing-xl);
	margin-bottom: var(--spacing-md);
}

.wp-block-list {
	margin: var(--spacing-md) 0;
	padding-left: var(--spacing-lg);
}

.wp-block-kadence-column,
.kt-inside-inner-col {
	width: 100%;
}

.wp-block-kadence-rowlayout {
	margin-left: auto;
	margin-right: auto;
}

.wp-block-kadence-rowlayout > .kt-row-layout-inner {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--spacing-lg);
	padding-right: var(--spacing-lg);
}

.wp-block-kadence-rowlayout.alignfull > .kt-row-layout-inner {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.wp-block-kadence-rowlayout.alignwide > .kt-row-layout-inner {
	max-width: 1500px;
}

.is-resized img,
.size-large {
	max-width: 100%;
	height: auto;
}

/* Accordion Kadence */
.wp-block-kadence-pane,
.kt-accordion-pane {
	margin-bottom: var(--spacing-sm);
}

.kt-accordion-header-wrap,
.kt-blocks-accordion-header {
	background: var(--shiro);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.kt-blocks-accordion-title-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--spacing-md) var(--spacing-lg);
	cursor: pointer;
	transition: background var(--transition-fast);
	min-height: 48px;
}

.kt-blocks-accordion-title-wrap:hover {
	background: var(--tatami-pale);
}

.kt-blocks-accordion-title {
	font-weight: 500;
	color: var(--sumi);
	margin: 0;
	font-family: var(--font-display);
}

.kt-blocks-accordion-icon-trigger {
	color: var(--tatami-deep);
	transition: transform var(--transition-fast);
}

.kt-accordion-panel {
	border: 1px solid var(--border-light);
	border-top: none;
	border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.kt-accordion-panel-inner {
	padding: var(--spacing-md) var(--spacing-lg);
}

.kt-acccordion-button-label-show {
	display: none;
}



/* Section */
.section {
	margin: var(--spacing-2xl) 0;
}

.inner-column-1 {
	padding: var(--spacing-md);
}

/* Value / Price */
.value {
	font-weight: 500;
	color: var(--text-primary);
}

.price-highlight {
	color: var(--matcha-koi);
	font-weight: 700;
	font-size: 1.5rem;
}

.excellent {
	color: var(--matcha-koi);
	font-weight: 600;
}

/* Text & BG helpers */
.text-matcha-dark {
	color: var(--matcha-koi);
}

.bg-matcha-dark {
	background-color: var(--sumi);
}

.border-matcha-dark {
	border-color: var(--sumi);
}

/* Callout */
.callout {
	border: none !important;
	margin: 0;
	padding: 0;
}

/* Checklists */
.checklist {
	list-style: none;
	padding: 0;
	margin: var(--spacing-md) 0;
}

.checklist li {
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: 0.5rem;
}

.checklist li::before {
	content: '\2713';
	position: absolute;
	left: 0;
	color: var(--matcha-usu);
	font-weight: bold;
}

/* Links */
.internal-link,
.link-green {
	color: var(--matcha-koi);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba(90, 110, 52, 0.3);
	transition: color var(--transition-fast);
}

.internal-link:hover,
.link-green:hover {
	color: var(--primary-dark);
}

/* Taste data items */
.taste-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--border-light);
}

.taste-item:last-child {
	border-bottom: none;
}

.taste-label {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--text-secondary);
}

.taste-value {
	font-weight: 600;
	color: var(--text-primary);
}

.taste-circle {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--tatami-pale);
	border: 2px solid var(--tatami);
}

.taste-circle.active {
	background: var(--matcha-usu);
	border-color: var(--matcha-koi);
}

.taste-circles {
	display: inline-flex;
	gap: 4px;
	align-items: center;
}

/* Highlights */
.highlight,
.highlight-primary,
.seo-highlight {
	display: inline;
	padding: 0.15em 0.4em;
	border-radius: var(--radius-sm);
	background: var(--washi);
	color: var(--sugi);
	border: none;
}

.highlight-technique {
	background: var(--info-bg);
	color: #0c4a6e;
}

.highlight--block,
.highlight-block {
	display: block;
	margin: var(--spacing-sm) 0;
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Misc */
.text-content {
	line-height: 1.7;
	color: var(--text-primary);
}

.empty {
	color: var(--text-muted);
	font-style: italic;
}

.emoji {
	font-style: normal;
	font-size: 1.1em;
	vertical-align: middle;
}

.fas {
	font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", sans-serif;
	font-weight: 900;
}

.chevron {
	display: inline-block;
	transition: transform var(--transition-fast);
}

.chevron.open,
.chevron.expanded {
	transform: rotate(180deg);
}

/* Article image */
img.article-img {
	border-radius: var(--radius-md);
	margin: 16px 0;
	display: block;
}

/* ==========================================================================
   ACCESSIBILITÉ
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
.cta-button:focus-visible {
	outline: 2px solid var(--matcha-usu);
	outline-offset: 2px;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Header mobile */
@media (max-width: 900px) {
	.tm-header__inner > nav {
		display: none;
	}

	.tm-header__kanji {
		display: none;
	}

	.tm-header__cta {
		display: none;
	}
}

/* CTA buttons mobile */
@media (max-width: 900px) {
	.cta-button,
	.cta-btn {
		padding: 0.75rem 1.25rem;
		font-size: 0.78rem;
		min-height: 44px;
		white-space: normal;
		word-break: break-word;
		line-height: 1.3;
	}
}

/* About & Trio mobile */
@media (max-width: 900px) {
	.tm-about {
		margin: 0;
		padding: 0;
	}

	.tm-about__content {
		padding: 10px;
	}

	.tm-about__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.tm-about__lead {
		font-size: 1.4rem;
	}

	.tm-about__img {
		aspect-ratio: 1 / 1;
	}

	.tm-trio {
		grid-template-columns: 2fr;
		gap: 20px;
		padding: 0 24px;
		margin-bottom: 60px;
	}

	.tm-trio__card {
		aspect-ratio: auto;
		padding: 40px 24px;
	}

	.tm-trio__title {
		font-size: 1.3rem;
	}
}

/* Titres mobile */
@media (max-width: 768px) {
	.entry-content h1 {
		font-size: 2.2rem;
		letter-spacing: -0.03em;
	}

	.entry-content h2 {
		font-size: 1.75rem !important;
		letter-spacing: -0.025em;
	}

	.entry-content h3 {
		font-size: 1.3rem !important;
		letter-spacing: -0.015em;
	}

	.entry-content h4 {
		font-size: 1.1rem;
	}

	body .entry-content p,
	body .entry-content li {
		font-size: 1rem !important;
	}
}

/* Very small screens */
@media (max-width: 480px) {
	.entry-content h1 {
		font-size: 1.9rem;
	}

	.entry-content h2 {
		font-size: 1.5rem !important;
	}

	.entry-content h3 {
		font-size: 1.2rem !important;
	}

	.tm-about__lead {
		font-size: 1.25rem;
	}

	.tm-about__quote {
		font-size: 1.1rem;
		padding-left: 16px;
	}
}