/* tenkara-bootstrap — frontend styles pour les pages installees */
/* Ces classes complètent celles fournies par tenkara-child */
.tk-home-hero { position: relative; overflow: hidden; }
.tk-hero-kana-watermark {
position: absolute;
top: -20px;
right: -20px;
font-family: 'Noto Serif JP', serif;
font-size: clamp(120px, 18vw, 200px);
color: rgba(185, 48, 26, 0.06);
letter-spacing: 8px;
pointer-events: none;
line-height: 1;
user-select: none;
z-index: 0;
}
.tk-hero-headline {
font-size: clamp(40px, 7vw, 64px) !important;
line-height: 1.04 !important;
max-width: 720px;
margin-bottom: 22px !important;
position: relative;
}
.tk-hero-headline em { font-style: italic; color: var(--tk-stone, #888780); }
.tk-hero-lede {
max-width: 520px;
font-size: 16px;
line-height: 1.65;
margin-bottom: 30px !important;
position: relative;
}
.tk-hero-ctas { gap: 12px !important; flex-wrap: wrap; position: relative; }
/* Eyebrow stone variant pour sections */
.tk-eyebrow-stone { color: var(--tk-stone, #888780) !important; }
/* PILIERS sur l'accueil */
.tk-home-pillars h2 { font-size: clamp(28px, 4vw, 36px); margin-bottom: 30px !important; }
.tk-pillars-grid { gap: 14px !important; }
.tk-pillar-card {
background: var(--tk-white, #fff);
border: 0.5px solid rgba(0,0,0,0.1);
border-radius: 6px;
padding: 24px 22px 22px;
height: 100%;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
}
.tk-pillar-card:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0,0,0,0.06);
border-color: rgba(185, 48, 26, 0.2);
}
.tk-pillar-num {
font-family: 'Noto Serif Display', Georgia, serif;
font-size: 12px;
color: var(--tk-shu, #B9301A);
margin-bottom: 14px;
letter-spacing: 1px;
}
.tk-pillar-title {
font-family: 'Noto Serif Display', Georgia, serif;
font-size: 24px;
color: var(--tk-sumi, #0a0a0a);
margin: 0 0 6px;
font-weight: 500;
line-height: 1.15;
}
.tk-pillar-jp {
font-family: 'Noto Serif JP', serif;
font-size: 10px;
color: var(--tk-stone, #888780);
letter-spacing: 2.5px;
margin-bottom: 14px;
}
.tk-pillar-desc {
font-size: 13px;
line-height: 1.6;
color: var(--tk-ink, #3a3a3a);
margin-bottom: 16px;
}
.tk-pillar-link {
font-size: 11px;
color: var(--tk-shu, #B9301A) !important;
letter-spacing: 0.5px;
text-decoration: none !important;
transition: gap 0.2s;
display: inline-flex;
align-items: center;
gap: 4px;
}
.tk-pillar-link:hover { gap: 8px; }
/* Pillar pages (Apprendre / Explorer / S'outiller) */
.tk-pillar-jp-big {
font-family: 'Noto Serif JP', serif;
font-size: 16px;
letter-spacing: 4px;
color: var(--tk-shu, #B9301A);
margin-bottom: 24px !important;
}
.tk-pillar-lede {
font-size: 18px;
line-height: 1.55;
color: var(--tk-ink, #3a3a3a);
}
.tk-pillar-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1px;
background: rgba(0,0,0,0.08);
border: 0.5px solid rgba(0,0,0,0.08);
border-radius: 6px;
overflow: hidden;
}
.tk-pillar-link-card {
background: var(--tk-white, #fff);
padding: 22px 24px;
display: flex;
align-items: center;
gap: 14px;
text-decoration: none !important;
transition: all 0.25s ease;
color: var(--tk-sumi, #0a0a0a);
}
.tk-pillar-link-card:hover {
background: var(--tk-shu, #B9301A);
color: var(--tk-washi, #F7F2E7) !important;
}
.tk-pillar-link-card:hover .tk-pillar-link-num,
.tk-pillar-link-card:hover .tk-pillar-link-arrow { color: var(--tk-washi, #F7F2E7); }
.tk-pillar-link-num {
font-family: 'Noto Serif Display', Georgia, serif;
font-size: 13px;
color: var(--tk-shu, #B9301A);
width: 30px;
flex-shrink: 0;
transition: color 0.25s;
}
.tk-pillar-link-title {
flex: 1;
font-size: 16px;
font-weight: 500;
}
.tk-pillar-link-arrow {
color: var(--tk-stone, #888780);
transition: color 0.25s;
font-size: 18px;
}
/* Newsletter */
.tk-home-newsletter {
color: var(--tk-washi, #F7F2E7) !important;
}
.tk-newsletter-wrap {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
}
.tk-newsletter-text { flex: 1; min-width: 260px; }
.tk-newsletter-title {
font-family: 'Noto Serif Display', Georgia, serif;
font-size: 26px;
color: var(--tk-washi, #F7F2E7);
margin: 0 0 8px;
font-weight: 400;
}
.tk-newsletter-desc {
font-size: 13px;
color: rgba(247,242,231,0.65);
margin: 0;
}
.tk-newsletter-form { display: flex; max-width: 380px; flex: 1; min-width: 260px; }
.tk-newsletter-input {
flex: 1;
padding: 13px 16px;
background: transparent;
border: 0.5px solid rgba(247,242,231,0.3);
border-right: none;
border-radius: 3px 0 0 3px;
color: var(--tk-washi, #F7F2E7);
font-family: inherit;
font-size: 13px;
}
.tk-newsletter-input::placeholder { color: rgba(247,242,231,0.4); }
.tk-newsletter-btn {
padding: 13px 22px;
background: var(--tk-shu, #B9301A);
color: var(--tk-washi, #F7F2E7);
border: none;
border-radius: 0 3px 3px 0;
font-family: inherit;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
}
.tk-newsletter-btn:hover { background: var(--tk-shu-bright, #E85D04); }
/* Manifeste */
.tk-manifesto-lede {
font-family: 'Noto Serif Display', Georgia, serif;
font-size: 22px;
color: var(--tk-ink, #3a3a3a);
line-height: 1.4;
margin-bottom: 16px !important;
font-style: italic;
}
.tk-manifesto-signature { font-family: 'Noto Serif Display', serif; color: var(--tk-stone, #888780); font-size: 14px; }
/* ============================================================
v0.2.0 — Hero divider, Map Leaflet, Masters & Ambassadeurs
============================================================ */
/* Hero content wrapper pour z-index sur watermark */
.tk-hero-content { position: relative; z-index: 1; }
/* Hero divider japonais — line · 毛鉤 · line */
.tk-hero-divider {
display: flex;
align-items: center;
gap: 16px;
margin: 28px 0;
max-width: 320px;
}
.tk-hero-divider-line {
flex: 1;
height: 0.5px;
background: var(--tk-stone, #888780);
opacity: 0.4;
}
.tk-hero-divider-kana {
font-family: 'Noto Serif JP', serif;
font-size: 13px;
color: var(--tk-shu, #B9301A);
letter-spacing: 4px;
}
/* Section header (centré, generous spacing) */
.tk-section-header {
text-align: center;
max-width: 720px;
margin: 0 auto 48px;
}
.tk-section-title {
font-family: 'Noto Serif Display', Georgia, serif !important;
font-size: clamp(28px, 4vw, 40px) !important;
color: var(--tk-sumi, #0a0a0a) !important;
margin: 8px 0 18px !important;
font-weight: 400 !important;
line-height: 1.1 !important;
}
.tk-section-lede {
font-size: 15px;
line-height: 1.65;
color: var(--tk-ink, #3a3a3a);
max-width: 600px;
margin: 0 auto;
}
/* Section washi-deep (deeper paper) */
.tk-section-washi-deep { background: var(--tk-washi-deep, #EFE9D9); }
/* ============= MAP Leaflet ============= */
.tk-map-wrap {
position: relative;
border-radius: 8px;
overflow: hidden;
border: 0.5px solid rgba(0,0,0,0.1);
background: var(--tk-white, #fff);
box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.tk-map-canvas {
width: 100%;
background: var(--tk-washi, #F7F2E7);
}
.tk-map-canvas .leaflet-container {
font-family: 'Inter', sans-serif !important;
background: var(--tk-washi, #F7F2E7);
}
.tk-map-canvas .leaflet-control-attribution {
background: rgba(247, 242, 231, 0.8);
font-size: 10px;
color: var(--tk-stone, #888780);
}
.tk-map-canvas .leaflet-control-zoom a {
background: var(--tk-white, #fff) !important;
border: 0.5px solid rgba(0,0,0,0.1) !important;
color: var(--tk-sumi, #0a0a0a) !important;
font-weight: 300 !important;
}
/* Markers custom */
.tk-map-marker { background: transparent !important; border: none !important; }
.tk-map-marker-dot {
display: block;
width: 18px; height: 18px;
border-radius: 50%;
border: 2.5px solid var(--tk-washi, #F7F2E7);
box-shadow: 0 2px 6px rgba(0,0,0,0.25);
transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.tk-map-marker:hover .tk-map-marker-dot { transform: scale(1.2); }
/* Popup styling */
.tk-map-leaflet-popup .leaflet-popup-content-wrapper {
background: var(--tk-white, #fff);
border-radius: 6px;
border: 0.5px solid rgba(0,0,0,0.1);
box-shadow: 0 6px 24px rgba(0,0,0,0.12) !important;
padding: 0;
}
.tk-map-leaflet-popup .leaflet-popup-content {
margin: 0 !important;
width: auto !important;
line-height: 1.5;
}
.tk-map-leaflet-popup .leaflet-popup-tip { background: var(--tk-white, #fff); }
.tk-map-popup { padding: 18px 20px; }
.tk-map-popup-eyebrow {
font-size: 9px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--tk-shu, #B9301A);
margin-bottom: 6px;
font-weight: 500;
}
.tk-map-popup-title {
font-family: 'Noto Serif Display', Georgia, serif;
font-size: 18px;
margin: 0 0 8px !important;
color: var(--tk-sumi, #0a0a0a);
font-weight: 400;
}
.tk-map-popup-species {
font-size: 12px !important;
color: var(--tk-ink, #3a3a3a) !important;
margin: 0 0 10px !important;
}
.tk-map-popup-desc {
font-size: 12px !important;
color: var(--tk-ink, #3a3a3a) !important;
line-height: 1.55 !important;
margin: 0 0 14px !important;
}
.tk-map-popup-meta {
display: flex; flex-direction: column; gap: 4px;
padding-top: 12px;
border-top: 0.5px solid rgba(0,0,0,0.08);
font-size: 11px;
color: var(--tk-stone, #888780);
}
.tk-map-popup-meta strong { color: var(--tk-sumi, #0a0a0a); margin-right: 4px; }
/* Legend */
.tk-map-legend {
position: absolute;
top: 16px;
left: 16px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(8px);
border: 0.5px solid rgba(0,0,0,0.08);
border-radius: 4px;
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 5px;
font-size: 11px;
color: var(--tk-ink, #3a3a3a);
z-index: 500;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.tk-map-legend-item { display: flex; align-items: center; gap: 7px; }
.tk-map-dot {
display: inline-block;
width: 10px; height: 10px;
border-radius: 50%;
}
.tk-map-dot-trout { background: #B9301A; }
.tk-map-dot-salmon { background: #1D9E75; }
.tk-map-dot-mixed { background: #3a3a3a; }
.tk-map-legend-stats {
border-top: 0.5px solid rgba(0,0,0,0.08);
padding-top: 5px;
margin-top: 3px;
font-size: 10px;
color: var(--tk-stone, #888780);
letter-spacing: 0.3px;
}
.tk-map-legend-stats strong { color: var(--tk-shu, #B9301A); }
@media (max-width: 600px) {
.tk-map-legend {
position: relative;
top: auto; left: auto;
margin: 12px;
flex-direction: row;
flex-wrap: wrap;
gap: 12px;
}
.tk-map-legend-stats { border-top: none; padding-top: 0; margin-top: 0; }
}
.tk-map-foot {
text-align: center;
margin-top: 26px;
}
.tk-btn-link {
color: var(--tk-shu, #B9301A) !important;
text-decoration: none !important;
font-size: 13px;
letter-spacing: 0.3px;
border-bottom: 0.5px solid var(--tk-shu, #B9301A);
padding-bottom: 2px;
transition: opacity 0.2s;
}
.tk-btn-link:hover { opacity: 0.7; }
/* ============= MASTERS & AMBASSADEURS ============= */
.tk-masters-wrap { display: flex; flex-direction: column; gap: 56px; }
/* Featured master (Danièle Beaulieu) */
.tk-master-featured {
background: var(--tk-white, #fff);
border: 0.5px solid rgba(0,0,0,0.08);
border-radius: 8px;
padding: 48px;
display: grid;
grid-template-columns: 200px 1fr;
gap: 48px;
align-items: start;
box-shadow: 0 2px 12px rgba(0,0,0,0.04);
position: relative;
overflow: hidden;
}
@media (max-width: 768px) {
.tk-master-featured { grid-template-columns: 1fr; padding: 32px 28px; gap: 24px; }
}
.tk-master-featured-portrait {
width: 200px;
height: 200px;
background: linear-gradient(135deg, var(--tk-shu, #B9301A) 0%, #8E2515 100%);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
transform: rotate(-2deg);
box-shadow: 0 8px 24px rgba(185, 48, 26, 0.2);
}
@media (max-width: 768px) {
.tk-master-featured-portrait { width: 140px; height: 140px; margin: 0 auto; }
}
.tk-master-portrait-kana {
font-family: 'Noto Serif JP', serif;
font-size: 56px;
color: var(--tk-washi, #F7F2E7);
font-weight: 500;
letter-spacing: 2px;
}
.tk-master-featured-eyebrow {
font-size: 10px;
letter-spacing: 2.5px;
color: var(--tk-shu, #B9301A);
text-transform: uppercase;
font-weight: 500;
margin-bottom: 14px;
}
.tk-master-featured-name {
font-family: 'Noto Serif Display', Georgia, serif !important;
font-size: 32px !important;
color: var(--tk-sumi, #0a0a0a);
margin: 0 0 16px !important;
font-weight: 400 !important;
line-height: 1.15 !important;
}
.tk-master-featured-nickname {
font-style: italic;
color: var(--tk-stone, #888780);
font-size: 18px;
font-weight: 300;
display: inline-block;
margin-left: 6px;
}
.tk-master-featured-bio {
font-size: 14px !important;
line-height: 1.7 !important;
color: var(--tk-ink, #3a3a3a);
margin-bottom: 22px !important;
}
.tk-master-featured-quote {
border-left: 2.5px solid var(--tk-shu, #B9301A);
padding: 4px 0 4px 18px;
margin: 22px 0 !important;
font-family: 'Noto Serif Display', Georgia, serif;
font-style: italic;
font-size: 17px;
color: var(--tk-sumi, #0a0a0a);
line-height: 1.5;
}
.tk-master-featured-quote p { margin: 0 !important; }
.tk-master-featured-link {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--tk-shu, #B9301A) !important;
text-decoration: none !important;
font-size: 13px;
border-bottom: 0.5px solid var(--tk-shu, #B9301A);
padding-bottom: 2px;
transition: gap 0.2s, opacity 0.2s;
}
.tk-master-featured-link:hover { gap: 8px; opacity: 0.75; }
/* Grid des autres maitres */
.tk-masters-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1px;
background: rgba(0,0,0,0.08);
border: 0.5px solid rgba(0,0,0,0.08);
border-radius: 8px;
overflow: hidden;
}
.tk-master-card {
background: var(--tk-white, #fff);
padding: 28px 26px 26px;
transition: background 0.25s ease;
position: relative;
}
.tk-master-card:hover {
background: var(--tk-paper, #FCFAF4);
}
.tk-master-card-kanji {
font-family: 'Noto Serif JP', serif;
font-size: 38px;
color: var(--tk-shu, #B9301A);
line-height: 1;
margin-bottom: 18px;
opacity: 0.9;
}
.tk-master-card-eyebrow {
font-size: 9px;
letter-spacing: 2px;
color: var(--tk-stone, #888780);
text-transform: uppercase;
margin-bottom: 6px;
}
.tk-master-card-name {
font-family: 'Noto Serif Display', Georgia, serif !important;
font-size: 18px !important;
color: var(--tk-sumi, #0a0a0a);
margin: 0 0 10px !important;
font-weight: 400 !important;
}
.tk-master-card-bio {
font-size: 12px !important;
line-height: 1.6 !important;
color: var(--tk-ink, #3a3a3a);
margin: 0 !important;
}
/* ============= NEWSLETTER (re-styled, rendu par shortcode) ============= */
.tk-newsletter-section {
background: var(--tk-night, #1a1a1a);
color: var(--tk-washi, #F7F2E7);
padding: 64px 32px;
}
.tk-newsletter-wrap {
max-width: 1140px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
flex-wrap: wrap;
}
.tk-newsletter-text { flex: 1; min-width: 260px; }
.tk-newsletter-title {
font-family: 'Noto Serif Display', Georgia, serif !important;
font-size: clamp(26px, 3.5vw, 32px) !important;
color: var(--tk-washi, #F7F2E7) !important;
margin: 0 0 12px !important;
font-weight: 400 !important;
line-height: 1.15 !important;
}
.tk-newsletter-desc {
font-size: 14px !important;
color: rgba(247,242,231,0.6) !important;
margin: 0 !important;
max-width: 440px;
line-height: 1.6 !important;
}
.tk-newsletter-form {
display: flex;
max-width: 440px;
flex: 1;
min-width: 280px;
}
.tk-newsletter-input {
flex: 1;
padding: 14px 16px;
background: rgba(255,255,255,0.04);
border: 0.5px solid rgba(255,255,255,0.18);
border-right: none;
border-radius: 3px 0 0 3px;
color: var(--tk-washi, #F7F2E7);
font-family: 'Inter', sans-serif;
font-size: 13px;
}
.tk-newsletter-input::placeholder { color: rgba(247,242,231,0.4); }
.tk-newsletter-input:focus { outline: none; border-color: var(--tk-shu, #B9301A); }
.tk-newsletter-btn {
padding: 14px 22px;
background: var(--tk-shu, #B9301A);
color: var(--tk-washi, #F7F2E7);
border: none;
border-radius: 0 3px 3px 0;
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.3px;
cursor: pointer;
transition: background 0.2s ease;
}
.tk-newsletter-btn:hover { background: #E85D04; }
/* ============================================================
v0.3.0 — Page profil maitre (Daniele Beaulieu)
============================================================ */
.tk-section-night { background: var(--tk-night, #1a1a1a); color: var(--tk-washi, #F7F2E7); }
.tk-section-night h2, .tk-section-night h3 { color: var(--tk-washi, #F7F2E7) !important; }
.tk-section-night p { color: rgba(247, 242, 231, 0.75) !important; }
/* HERO de la page profil */
.tk-master-page-hero { position: relative; overflow: hidden; }
.tk-mp-hero-grid {
display: grid;
grid-template-columns: 280px 1fr;
gap: 56px;
align-items: center;
}
@media (max-width: 768px) {
.tk-mp-hero-grid { grid-template-columns: 1fr; gap: 32px; text-align: center; }
}
.tk-mp-hero-portrait {
width: 280px;
height: 280px;
background: linear-gradient(135deg, #B9301A 0%, #8E2515 50%, #6E1D13 100%);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(-2deg);
box-shadow: 0 12px 36px rgba(185, 48, 26, 0.28);
position: relative;
}
@media (max-width: 768px) {
.tk-mp-hero-portrait { width: 180px; height: 180px; margin: 0 auto; }
}
.tk-mp-hero-portrait::before {
content: '';
position: absolute;
top: 8px; left: 8px; right: 8px; bottom: 8px;
border: 1px solid rgba(247, 242, 231, 0.15);
border-radius: 2px;
pointer-events: none;
}
.tk-mp-hero-portrait-kana {
font-family: 'Noto Serif Display', Georgia, serif;
font-size: 92px;
color: var(--tk-washi, #F7F2E7);
letter-spacing: 4px;
line-height: 1;
}
@media (max-width: 768px) { .tk-mp-hero-portrait-kana { font-size: 56px; } }
.tk-mp-eyebrow { margin-bottom: 14px; }
.tk-mp-backlink {
color: var(--tk-stone, #888780) !important;
text-decoration: none !important;
font-size: 12px;
letter-spacing: 1px;
transition: color 0.2s;
}
.tk-mp-backlink:hover { color: var(--tk-shu, #B9301A) !important; }
.tk-mp-role {
font-size: 10px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--tk-shu, #B9301A);
font-weight: 500;
margin-bottom: 14px;
}
.tk-mp-name {
font-family: 'Noto Serif Display', Georgia, serif !important;
font-size: clamp(40px, 6vw, 56px) !important;
color: var(--tk-sumi, #0a0a0a) !important;
margin: 0 0 10px !important;
font-weight: 400 !important;
line-height: 1 !important;
}
.tk-mp-nickname {
font-family: 'Noto Serif Display', Georgia, serif;
font-size: 22px;
font-style: italic;
color: var(--tk-stone, #888780);
margin-bottom: 24px;
}
.tk-mp-divider {
display: flex;
align-items: center;
gap: 14px;
margin: 24px 0;
max-width: 280px;
}
@media (max-width: 768px) { .tk-mp-divider { margin: 24px auto; } }
.tk-mp-divider-line {
flex: 1;
height: 0.5px;
background: var(--tk-stone, #888780);
opacity: 0.4;
}
.tk-mp-divider-kana {
font-family: 'Noto Serif JP', serif;
font-size: 14px;
color: var(--tk-shu, #B9301A);
letter-spacing: 4px;
}
.tk-mp-lede {
font-size: 17px;
line-height: 1.6;
color: var(--tk-ink, #3a3a3a);
max-width: 520px;
}
@media (max-width: 768px) { .tk-mp-lede { margin: 0 auto; } }
/* STATS */
.tk-mp-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: rgba(0,0,0,0.08);
border-top: 0.5px solid rgba(0,0,0,0.08);
border-bottom: 0.5px solid rgba(0,0,0,0.08);
}
@media (max-width: 600px) { .tk-mp-stats-grid { grid-template-columns: repeat(2, 1fr); } }
.tk-mp-stat {
background: var(--tk-paper, #FCFAF4);
padding: 28px 24px;
text-align: center;
}
.tk-mp-stat-num {
font-family: 'Noto Serif Display', Georgia, serif;
font-size: 36px;
color: var(--tk-sumi, #0a0a0a);
line-height: 1;
margin-bottom: 8px;
font-weight: 400;
}
.tk-mp-stat-label {
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--tk-stone, #888780);
}
/* BIO section */
.tk-mp-bio h2 {
font-size: clamp(28px, 4vw, 36px) !important;
margin-bottom: 28px !important;
line-height: 1.15 !important;
}
.tk-mp-bio p {
font-size: 15px !important;
line-height: 1.75 !important;
margin-bottom: 18px !important;
}
.tk-mp-bio strong { color: var(--tk-sumi, #0a0a0a); font-weight: 600; }
.tk-mp-bio em { color: var(--tk-shu, #B9301A); font-style: italic; }
/* GROSSE CITATION */
.tk-mp-quote { text-align: center; position: relative; }
.tk-mp-bigquote {
border: none;
margin: 0 !important;
padding: 0;
text-align: center;
}
.tk-mp-bigquote-mark {
font-family: 'Noto Serif Display', Georgia, serif !important;
font-size: 120px !important;
color: var(--tk-shu, #B9301A);
line-height: 0.8 !important;
margin: 0 0 -20px !important;
opacity: 0.4;
}
.tk-mp-bigquote-text {
font-family: 'Noto Serif Display', Georgia, serif !important;
font-size: clamp(24px, 3.5vw, 36px) !important;
line-height: 1.35 !important;
color: var(--tk-sumi, #0a0a0a) !important;
font-style: italic !important;
margin: 0 0 24px !important;
max-width: 720px;
margin-left: auto !important;
margin-right: auto !important;
}
.tk-mp-bigquote-cite {
font-style: normal;
font-size: 13px;
letter-spacing: 2px;
color: var(--tk-stone, #888780);
}
/* EVENEMENT MONTMORENCY 2017 */
.tk-mp-event-card {
background: var(--tk-white, #fff);
border: 0.5px solid rgba(0,0,0,0.08);
border-radius: 8px;
padding: 0;
display: grid;
grid-template-columns: 200px 1fr;
gap: 0;
align-items: stretch;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
@media (max-width: 768px) {
.tk-mp-event-card { grid-template-columns: 1fr; }
}
.tk-mp-event-badge {
background: var(--tk-sumi, #0a0a0a);
color: var(--tk-shu, #B9301A);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Noto Serif Display', Georgia, serif;
font-size: 64px;
font-weight: 400;
letter-spacing: -2px;
position: relative;
}
.tk-mp-event-badge::after {
content: '';
position: absolute;
top: 20px; bottom: 20px; right: 0;
width: 1px;
background: rgba(247, 242, 231, 0.1);
}
@media (max-width: 768px) {
.tk-mp-event-badge { padding: 32px 24px; }
.tk-mp-event-badge::after { display: none; }
}
.tk-mp-event-body { padding: 36px 40px; }
.tk-mp-event-eyebrow {
font-size: 10px;
letter-spacing: 2.5px;
color: var(--tk-shu, #B9301A);
text-transform: uppercase;
font-weight: 500;
margin-bottom: 12px;
}
.tk-mp-event-title {
font-family: 'Noto Serif Display', Georgia, serif !important;
font-size: 22px !important;
color: var(--tk-sumi, #0a0a0a) !important;
margin: 0 0 14px !important;
font-weight: 400 !important;
line-height: 1.25 !important;
}
.tk-mp-event-desc {
font-size: 14px !important;
line-height: 1.65 !important;
color: var(--tk-ink, #3a3a3a) !important;
margin: 0 0 16px !important;
}
.tk-mp-event-link {
color: var(--tk-shu, #B9301A) !important;
text-decoration: none !important;
font-size: 13px;
border-bottom: 0.5px solid var(--tk-shu, #B9301A);
padding-bottom: 2px;
transition: gap 0.2s;
}
.tk-mp-event-link:hover { opacity: 0.75; }
/* SHOP section (zone night) */
.tk-mp-shop-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 48px;
align-items: center;
}
@media (max-width: 768px) { .tk-mp-shop-grid { grid-template-columns: 1fr; gap: 32px; } }
.tk-mp-shop-eyebrow {
font-size: 10px;
letter-spacing: 2.5px;
color: var(--tk-shu, #B9301A);
text-transform: uppercase;
margin-bottom: 14px;
}
.tk-mp-shop-title {
font-family: 'Noto Serif Display', Georgia, serif !important;
font-size: clamp(26px, 4vw, 32px) !important;
color: var(--tk-washi, #F7F2E7) !important;
margin: 0 0 16px !important;
font-weight: 400 !important;
line-height: 1.2 !important;
}
.tk-mp-shop-desc {
font-size: 14px !important;
line-height: 1.7 !important;
color: rgba(247, 242, 231, 0.7) !important;
margin: 0 0 24px !important;
max-width: 540px;
}
.tk-mp-shop-cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 22px;
background: var(--tk-shu, #B9301A);
color: var(--tk-washi, #F7F2E7) !important;
text-decoration: none !important;
border-radius: 3px;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.3px;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.tk-mp-shop-cta:hover {
background: #E85D04;
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(232, 93, 4, 0.25);
}
.tk-mp-shop-contacts {
display: flex;
flex-direction: column;
gap: 22px;
padding: 28px;
background: rgba(255, 255, 255, 0.04);
border-radius: 4px;
border: 0.5px solid rgba(255, 255, 255, 0.08);
}
.tk-mp-shop-label {
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--tk-shu, #B9301A);
margin-bottom: 6px;
}
.tk-mp-shop-value {
color: var(--tk-washi, #F7F2E7) !important;
text-decoration: none !important;
font-size: 15px;
transition: color 0.2s;
word-break: break-word;
}
.tk-mp-shop-value:hover { color: var(--tk-shu, #B9301A) !important; }
/* PODCAST FOSSES NOUVELLES */
.tk-mp-podcast-card {
background: var(--tk-white, #fff);
border: 0.5px solid rgba(185, 48, 26, 0.2);
border-radius: 8px;
padding: 36px 40px;
position: relative;
overflow: hidden;
}
.tk-mp-podcast-card::before {
content: '🎙';
position: absolute;
top: -10px; right: -10px;
font-size: 120px;
opacity: 0.04;
transform: rotate(-15deg);
pointer-events: none;
}
.tk-mp-podcast-eyebrow {
font-size: 10px;
letter-spacing: 2.5px;
color: var(--tk-shu, #B9301A);
text-transform: uppercase;
font-weight: 500;
margin-bottom: 14px;
}
.tk-mp-podcast-title {
font-family: 'Noto Serif Display', Georgia, serif !important;
font-size: clamp(22px, 3vw, 28px) !important;
color: var(--tk-sumi, #0a0a0a) !important;
margin: 0 0 16px !important;
font-weight: 400 !important;
line-height: 1.25 !important;
}
.tk-mp-podcast-desc {
font-size: 14px !important;
line-height: 1.7 !important;
color: var(--tk-ink, #3a3a3a) !important;
margin: 0 0 22px !important;
}
.tk-mp-podcast-cta {
color: var(--tk-shu, #B9301A) !important;
text-decoration: none !important;
font-size: 13px;
border-bottom: 0.5px solid var(--tk-shu, #B9301A);
padding-bottom: 2px;
transition: opacity 0.2s;
}
.tk-mp-podcast-cta:hover { opacity: 0.7; }
/* FOOTER CTA */
.tk-mp-cta { text-align: center; }
.tk-mp-cta-inner { max-width: 580px; margin: 0 auto; }
.tk-mp-cta-title {
font-family: 'Noto Serif Display', Georgia, serif !important;
font-size: clamp(26px, 3.5vw, 32px) !important;
color: var(--tk-sumi, #0a0a0a) !important;
margin: 12px 0 14px !important;
font-weight: 400 !important;
line-height: 1.2 !important;
}
.tk-mp-cta-text {
font-size: 14px !important;
line-height: 1.65 !important;
color: var(--tk-ink, #3a3a3a) !important;
margin: 0 0 28px !important;
}
.tk-mp-cta .tk-btn-secondary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 22px;
border: 0.5px solid var(--tk-sumi, #0a0a0a);
color: var(--tk-sumi, #0a0a0a) !important;
text-decoration: none !important;
border-radius: 3px;
font-size: 13px;
font-weight: 500;
background: transparent;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.tk-mp-cta .tk-btn-secondary:hover {
background: var(--tk-sumi, #0a0a0a);
color: var(--tk-washi, #F7F2E7) !important;
}
/* ============================================================
v0.4.0 — Kanji watermark background (Option C)
山水釣魚川毛鉤 — montagne, eau, pêche, poisson, rivière, kebari
============================================================ */
/* Désactive l'ancien watermark テンカラ géant en haut-droite */
.tk-hero-kana-watermark { display: none !important; }
/* Pattern kanji en filigrane sur le hero — composition asymétrique éditoriale */
.tk-home-hero::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
pointer-events: none;
user-select: none;
z-index: 0;
}
/* Hero content reste au-dessus du watermark */
.tk-home-hero .tk-hero-content,
.tk-home-hero > .wp-block-buttons,
.tk-home-hero > p,
.tk-home-hero > h1 {
position: relative;
z-index: 1;
}
/* Toggle global : ajouter cette classe au body pour désactiver le filigrane */
body.tk-no-kanji-bg .tk-home-hero::before { display: none !important; }
/* Mobile : pattern compressé et plus léger pour ne pas surcharger */
@media (max-width: 640px) {
.tk-home-hero::before {
background-size: 220% auto;
background-position: 60% center;
opacity: 0.85;
}
}
/* Bonus : appliquer le même pattern (plus discret) au manifeste pour cohérence */
.tk-pillar-hero { position: relative; overflow: hidden; }
.tk-pillar-hero::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
pointer-events: none;
z-index: 0;
}
.tk-pillar-hero > * { position: relative; z-index: 1; }
/* ============================================================
v0.4.2 — Featured Rivers (3 spots en vedette)
============================================================ */
.tk-featured-rivers {
padding: 80px 32px;
max-width: 1240px;
margin: 0 auto;
}
.tk-featured-rivers-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
@media (max-width: 900px) {
.tk-featured-rivers-grid { grid-template-columns: 1fr; }
}
.tk-featured-river {
position: relative;
background: var(--tk-white, #fff);
border: 0.5px solid rgba(0,0,0,0.1);
border-radius: 8px;
padding: 32px 28px 28px;
overflow: hidden;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s;
}
.tk-featured-river:hover {
transform: translateY(-4px);
box-shadow: 0 16px 40px rgba(0,0,0,0.08);
border-color: rgba(185, 48, 26, 0.3);
}
.tk-featured-river-kanji {
position: absolute;
top: -10px;
right: -8px;
font-family: 'Noto Serif JP', serif;
font-size: 140px;
color: rgba(185, 48, 26, 0.08);
line-height: 1;
pointer-events: none;
user-select: none;
}
.tk-featured-river-trout .tk-featured-river-kanji { color: rgba(185, 48, 26, 0.08); }
.tk-featured-river-salmon .tk-featured-river-kanji { color: rgba(29, 158, 117, 0.10); }
.tk-featured-river-num {
font-family: 'Noto Serif Display', Georgia, serif;
font-size: 12px;
color: var(--tk-shu, #B9301A);
letter-spacing: 1px;
margin-bottom: 14px;
position: relative;
}
.tk-featured-river-label {
font-size: 9px;
letter-spacing: 2.5px;
color: var(--tk-stone, #888780);
text-transform: uppercase;
margin-bottom: 10px;
font-weight: 500;
position: relative;
}
.tk-featured-river-name {
font-family: 'Noto Serif Display', Georgia, serif;
font-size: 26px;
color: var(--tk-sumi, #0a0a0a);
margin: 0 0 6px;
font-weight: 400;
line-height: 1.15;
position: relative;
}
.tk-featured-river-jp {
font-family: 'Noto Serif JP', serif;
font-size: 11px;
color: var(--tk-stone, #888780);
letter-spacing: 1.5px;
margin-bottom: 22px;
position: relative;
}
.tk-featured-river-meta {
display: flex;
flex-direction: column;
gap: 6px;
padding: 14px 0;
border-top: 0.5px solid rgba(0,0,0,0.08);
border-bottom: 0.5px solid rgba(0,0,0,0.08);
margin-bottom: 18px;
position: relative;
}
.tk-featured-river-meta-item {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
font-size: 12px;
}
.tk-featured-river-meta-item span {
color: var(--tk-stone, #888780);
text-transform: uppercase;
letter-spacing: 1px;
font-size: 10px;
}
.tk-featured-river-meta-item strong {
color: var(--tk-sumi, #0a0a0a);
font-weight: 500;
text-align: right;
}
.tk-featured-river-desc {
font-size: 13px;
line-height: 1.65;
color: var(--tk-ink, #3a3a3a);
margin: 0 0 20px;
position: relative;
}
.tk-featured-river-link {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: var(--tk-shu, #B9301A) !important;
text-decoration: none !important;
border-bottom: 0.5px solid var(--tk-shu, #B9301A);
padding-bottom: 2px;
transition: gap 0.2s, opacity 0.2s;
position: relative;
}
.tk-featured-river-link:hover { gap: 8px; opacity: 0.75; }
.tk-featured-river-salmon .tk-featured-river-link {
color: #0f7a5a !important;
border-bottom-color: #0f7a5a;
}
/* ============================================================
v0.5.0 — CONTENU DES 5 PAGES PILIERS
============================================================ */
/* Hero des pages piliers */
.tk-pillar-hero h1 {
font-family: 'Noto Serif Display', Georgia, serif !important;
font-size: clamp(48px, 7vw, 84px) !important;
color: var(--tk-sumi, #0a0a0a) !important;
line-height: 0.95 !important;
margin: 0 0 24px !important;
font-weight: 400 !important;
}
.tk-pillar-lede {
font-size: 18px !important;
line-height: 1.55 !important;
color: var(--tk-ink, #3a3a3a) !important;
max-width: 660px;
}
/* === 6 TECHNIQUES (Apprendre) === */
.tk-tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(0,0,0,0.08); margin-top: 40px; }
@media (max-width: 900px) { .tk-tech-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tk-tech-grid { grid-template-columns: 1fr; } }
.tk-tech-card { background: var(--tk-white, #fff); padding: 32px 28px; position: relative; }
.tk-tech-num { font-family: 'Noto Serif Display', Georgia, serif; font-size: 14px; color: var(--tk-shu, #B9301A); letter-spacing: 1.5px; margin-bottom: 14px; }
.tk-tech-name { font-family: 'Noto Serif Display', Georgia, serif !important; font-size: 22px !important; color: var(--tk-sumi, #0a0a0a) !important; margin: 0 0 4px !important; font-weight: 400 !important; line-height: 1.2 !important; }
.tk-tech-jp { font-family: 'Noto Serif JP', serif; font-size: 12px; color: var(--tk-stone, #888780); letter-spacing: 1.5px; margin-bottom: 16px; }
.tk-tech-desc { font-size: 13px !important; line-height: 1.65 !important; color: var(--tk-ink, #3a3a3a) !important; margin: 0 !important; }
/* === GLOSSAIRE AUDIO === */
.tk-glossary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 768px) { .tk-glossary { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .tk-glossary { grid-template-columns: 1fr; } }
.tk-gloss-card { background: var(--tk-white, #fff); border: 0.5px solid rgba(0,0,0,0.1); border-radius: 8px; padding: 20px 18px; text-align: center; transition: border-color 0.2s, transform 0.2s; }
.tk-gloss-card:hover { border-color: var(--tk-shu, #B9301A); transform: translateY(-2px); }
.tk-gloss-jp { font-family: 'Noto Serif JP', serif; font-size: 32px; color: var(--tk-sumi, #0a0a0a); line-height: 1.2; margin-bottom: 6px; letter-spacing: 1px; }
.tk-gloss-romaji { font-family: 'Noto Serif Display', Georgia, serif; font-style: italic; font-size: 15px; color: var(--tk-shu, #B9301A); margin-bottom: 6px; }
.tk-gloss-fr { font-size: 12px; color: var(--tk-ink, #3a3a3a); line-height: 1.5; margin-bottom: 12px; min-height: 32px; }
.tk-gloss-play { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: transparent; border: 0.5px solid var(--tk-sumi, #0a0a0a); border-radius: 20px; font-size: 11px; cursor: pointer; transition: all 0.2s; }
.tk-gloss-play:hover { background: var(--tk-sumi, #0a0a0a); color: var(--tk-washi, #F7F2E7); }
.tk-gloss-play.is-playing { background: var(--tk-shu, #B9301A); color: var(--tk-washi, #F7F2E7); border-color: var(--tk-shu, #B9301A); }
.tk-gloss-play-icon { font-size: 8px; }
.tk-gloss-note { font-size: 12px; color: var(--tk-stone, #888780); margin-top: 20px; text-align: center; }
/* === CARROUSEL MAITRES === */
.tk-masters-carousel { margin-top: 32px; }
.tk-mc-viewport { overflow: hidden; border-radius: 8px; background: rgba(255,255,255,0.04); }
.tk-mc-track { display: flex; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.tk-mc-slide { min-width: 100%; padding: 48px 40px; display: grid; grid-template-columns: 200px 1fr; gap: 40px; align-items: center; }
@media (max-width: 768px) { .tk-mc-slide { grid-template-columns: 1fr; text-align: center; padding: 32px 24px; } }
.tk-mc-portrait { width: 200px; height: 200px; background: linear-gradient(135deg, #B9301A 0%, #6E1D13 100%); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-family: 'Noto Serif Display', Georgia, serif; font-size: 56px; color: var(--tk-washi, #F7F2E7); transform: rotate(-2deg); letter-spacing: 4px; }
@media (max-width: 768px) { .tk-mc-portrait { margin: 0 auto; width: 140px; height: 140px; font-size: 40px; } }
.tk-mc-role { font-size: 10px; letter-spacing: 2.5px; color: var(--tk-shu, #B9301A); text-transform: uppercase; margin-bottom: 10px; }
.tk-mc-name { font-family: 'Noto Serif Display', Georgia, serif !important; font-size: 32px !important; color: var(--tk-washi, #F7F2E7) !important; margin: 0 0 6px !important; font-weight: 400 !important; }
.tk-mc-jp { font-family: 'Noto Serif JP', serif; font-size: 14px; color: rgba(247, 242, 231, 0.5); letter-spacing: 2px; margin-bottom: 20px; }
.tk-mc-bio { font-size: 14px !important; line-height: 1.65 !important; color: rgba(247, 242, 231, 0.75) !important; margin: 0 0 20px !important; }
.tk-mc-quote { font-family: 'Noto Serif Display', Georgia, serif; font-style: italic; font-size: 16px; color: var(--tk-shu, #B9301A); padding-left: 16px; border-left: 2px solid var(--tk-shu, #B9301A); margin: 0; }
.tk-mc-controls { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 24px; }
.tk-mc-prev, .tk-mc-next { background: transparent; border: 0.5px solid rgba(247, 242, 231, 0.3); color: var(--tk-washi, #F7F2E7); width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 16px; transition: all 0.2s; }
.tk-mc-prev:hover, .tk-mc-next:hover { background: var(--tk-shu, #B9301A); border-color: var(--tk-shu, #B9301A); }
.tk-mc-dots { display: flex; gap: 8px; }
.tk-mc-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(247, 242, 231, 0.2); border: none; cursor: pointer; transition: background 0.2s; padding: 0; }
.tk-mc-dot.is-active { background: var(--tk-shu, #B9301A); }
/* === PARCOURS APPRENDRE === */
.tk-journey-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
@media (max-width: 900px) { .tk-journey-grid { grid-template-columns: 1fr; } }
.tk-journey-step { background: var(--tk-white, #fff); border: 0.5px solid rgba(0,0,0,0.1); border-radius: 8px; padding: 28px 24px; position: relative; }
.tk-journey-step::before { content: ''; position: absolute; left: 0; top: 24px; bottom: 24px; width: 3px; background: var(--tk-shu, #B9301A); border-radius: 0 2px 2px 0; }
.tk-journey-period { font-size: 11px; letter-spacing: 2px; color: var(--tk-shu, #B9301A); text-transform: uppercase; margin-bottom: 8px; }
.tk-journey-title { font-family: 'Noto Serif Display', Georgia, serif !important; font-size: 22px !important; color: var(--tk-sumi, #0a0a0a) !important; margin: 0 0 18px !important; font-weight: 400 !important; }
.tk-journey-checks { list-style: none; padding: 0; margin: 0; }
.tk-journey-checks li { font-size: 13px; line-height: 1.55; color: var(--tk-ink, #3a3a3a); padding: 6px 0 6px 22px; position: relative; border-bottom: 0.5px solid rgba(0,0,0,0.06); }
.tk-journey-checks li:last-child { border-bottom: none; }
.tk-journey-checks li::before { content: '○'; position: absolute; left: 0; top: 6px; color: var(--tk-shu, #B9301A); font-size: 12px; }
/* === SENTIERS THEMATIQUES (Explorer) === */
.tk-trails-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
@media (max-width: 900px) { .tk-trails-grid { grid-template-columns: 1fr; } }
.tk-trail-card { background: rgba(247, 242, 231, 0.04); border: 0.5px solid rgba(247, 242, 231, 0.1); border-radius: 8px; padding: 28px 24px; transition: border-color 0.2s, transform 0.2s; }
.tk-trail-card:hover { border-color: var(--tk-shu, #B9301A); transform: translateY(-3px); }
.tk-trail-num { font-family: 'Noto Serif Display', Georgia, serif; font-size: 13px; color: var(--tk-shu, #B9301A); margin-bottom: 14px; letter-spacing: 1.5px; }
.tk-trail-name { font-family: 'Noto Serif Display', Georgia, serif !important; font-size: 22px !important; color: var(--tk-washi, #F7F2E7) !important; margin: 0 0 6px !important; font-weight: 400 !important; line-height: 1.2 !important; }
.tk-trail-meta { font-size: 11px; color: var(--tk-shu, #B9301A); letter-spacing: 1px; margin-bottom: 16px; }
.tk-trail-desc { font-size: 13px !important; line-height: 1.65 !important; color: rgba(247, 242, 231, 0.7) !important; margin: 0 0 18px !important; }
.tk-trail-link { font-size: 12px; color: var(--tk-shu, #B9301A) !important; text-decoration: none !important; border-bottom: 0.5px solid var(--tk-shu, #B9301A); padding-bottom: 2px; }
/* === SELECTEUR DE CANNE === */
.tk-rod-selector { margin-top: 32px; }
.tk-rs-question { margin-bottom: 32px; }
.tk-rs-label { font-family: 'Noto Serif Display', Georgia, serif; font-size: 18px; color: var(--tk-sumi, #0a0a0a); margin-bottom: 16px; font-weight: 400; }
.tk-rs-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 600px) { .tk-rs-options { grid-template-columns: 1fr; } }
.tk-rs-option { background: var(--tk-white, #fff); border: 0.5px solid rgba(0,0,0,0.15); border-radius: 6px; padding: 16px 18px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 4px; transition: all 0.2s; font-family: inherit; }
.tk-rs-option:hover { border-color: var(--tk-shu, #B9301A); background: rgba(185, 48, 26, 0.03); }
.tk-rs-option.is-selected { background: var(--tk-sumi, #0a0a0a); color: var(--tk-washi, #F7F2E7); border-color: var(--tk-sumi, #0a0a0a); }
.tk-rs-opt-label { font-size: 14px; font-weight: 500; }
.tk-rs-opt-hint { font-size: 11px; color: var(--tk-stone, #888780); }
.tk-rs-option.is-selected .tk-rs-opt-hint { color: rgba(247, 242, 231, 0.6); }
.tk-rs-result { background: var(--tk-sumi, #0a0a0a); color: var(--tk-washi, #F7F2E7); border-radius: 8px; padding: 32px; margin-top: 32px; opacity: 0; pointer-events: none; transition: opacity 0.4s; }
.tk-rs-result.is-visible { opacity: 1; pointer-events: auto; }
.tk-rs-result-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 0.5px solid rgba(247, 242, 231, 0.15); }
.tk-rs-result-eyebrow { font-size: 11px; letter-spacing: 2.5px; color: var(--tk-shu, #B9301A); }
.tk-rs-reset { background: transparent; border: 0.5px solid rgba(247, 242, 231, 0.3); color: var(--tk-washi, #F7F2E7); padding: 6px 14px; border-radius: 20px; cursor: pointer; font-size: 11px; }
.tk-rs-rec-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 0.5px solid rgba(247, 242, 231, 0.1); font-size: 14px; }
.tk-rs-rec-row span { color: rgba(247, 242, 231, 0.6); }
.tk-rs-rec-row strong { color: var(--tk-washi, #F7F2E7); font-weight: 500; text-align: right; }
.tk-rs-rec-models { margin-top: 20px; }
.tk-rs-rec-models-label { font-size: 11px; letter-spacing: 2px; color: var(--tk-shu, #B9301A); margin-bottom: 12px; }
.tk-rs-model { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 0.5px solid rgba(247, 242, 231, 0.08); font-size: 13px; gap: 12px; }
.tk-rs-model span { color: rgba(247, 242, 231, 0.55); font-size: 11px; }
.tk-rs-model-price { color: var(--tk-shu, #B9301A); font-weight: 500; }
/* === CALCULATEUR LIGNE === */
.tk-line-calc { margin-top: 32px; }
.tk-lc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
@media (max-width: 768px) { .tk-lc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .tk-lc-grid { grid-template-columns: 1fr; } }
.tk-lc-field label { display: block; font-size: 11px; letter-spacing: 1.5px; color: var(--tk-stone, #888780); text-transform: uppercase; margin-bottom: 8px; }
.tk-lc-field select { width: 100%; padding: 10px 12px; border: 0.5px solid rgba(0,0,0,0.15); border-radius: 4px; font-family: inherit; font-size: 14px; background: var(--tk-white, #fff); cursor: pointer; }
.tk-lc-field select:focus { outline: none; border-color: var(--tk-shu, #B9301A); }
.tk-lc-result { background: var(--tk-paper, #FCFAF4); border: 0.5px solid rgba(185, 48, 26, 0.2); border-radius: 8px; padding: 28px; }
.tk-lc-rec-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 0.5px solid rgba(0,0,0,0.08); font-size: 14px; }
.tk-lc-rec-row:last-child { border-bottom: none; }
.tk-lc-rec-row span { color: var(--tk-stone, #888780); }
.tk-lc-rec-row strong { color: var(--tk-sumi, #0a0a0a); font-weight: 500; }
.tk-lc-note { margin-top: 16px; padding: 14px 16px; background: rgba(185, 48, 26, 0.06); border-left: 3px solid var(--tk-shu, #B9301A); font-size: 13px; color: var(--tk-ink, #3a3a3a); line-height: 1.55; border-radius: 0 4px 4px 0; }
/* === KEBARI GRID === */
.tk-kebari-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 36px; }
@media (max-width: 900px) { .tk-kebari-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .tk-kebari-grid { grid-template-columns: 1fr; } }
.tk-kebari-card { background: rgba(247, 242, 231, 0.04); border: 0.5px solid rgba(247, 242, 231, 0.12); border-radius: 8px; padding: 24px 20px; }
.tk-kebari-name { font-family: 'Noto Serif Display', Georgia, serif !important; font-size: 22px !important; color: var(--tk-washi, #F7F2E7) !important; margin: 0 0 4px !important; font-weight: 400 !important; }
.tk-kebari-jp { font-family: 'Noto Serif JP', serif; font-size: 12px; color: var(--tk-shu, #B9301A); letter-spacing: 2px; margin-bottom: 14px; }
.tk-kebari-desc { font-size: 13px !important; line-height: 1.6 !important; color: rgba(247, 242, 231, 0.7) !important; margin: 0 0 14px !important; }
.tk-kebari-tags { font-size: 11px; color: var(--tk-shu, #B9301A); border-top: 0.5px solid rgba(247, 242, 231, 0.1); padding-top: 12px; font-style: italic; }
/* === RESEAU SENSEI === */
.tk-sensei-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
@media (max-width: 900px) { .tk-sensei-grid { grid-template-columns: 1fr; } }
.tk-sensei-card { background: var(--tk-white, #fff); border-radius: 8px; padding: 28px 24px; border: 0.5px solid rgba(0,0,0,0.08); }
.tk-sensei-num { font-family: 'Noto Serif Display', Georgia, serif; font-size: 36px; color: var(--tk-shu, #B9301A); line-height: 1; margin-bottom: 14px; }
.tk-sensei-title { font-family: 'Noto Serif Display', Georgia, serif !important; font-size: 20px !important; color: var(--tk-sumi, #0a0a0a) !important; margin: 0 0 12px !important; font-weight: 400 !important; }
.tk-sensei-desc { font-size: 13px !important; line-height: 1.65 !important; color: var(--tk-ink, #3a3a3a) !important; margin: 0 !important; }
/* === LEADERBOARD === */
.tk-leaderboard-placeholder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 32px 0 20px; }
@media (max-width: 700px) { .tk-leaderboard-placeholder { grid-template-columns: 1fr; } }
.tk-leader-card { background: var(--tk-paper, #FCFAF4); border: 0.5px solid rgba(0,0,0,0.08); border-radius: 8px; padding: 24px 20px; display: flex; align-items: center; gap: 16px; }
.tk-leader-rank { font-family: 'Noto Serif JP', serif; font-size: 36px; color: var(--tk-shu, #B9301A); line-height: 1; }
.tk-leader-body { flex: 1; }
.tk-leader-label { font-size: 10px; letter-spacing: 2px; color: var(--tk-stone, #888780); text-transform: uppercase; margin-bottom: 4px; }
.tk-leader-name { font-family: 'Noto Serif Display', Georgia, serif; font-size: 18px; color: var(--tk-sumi, #0a0a0a); font-style: italic; opacity: 0.5; }
/* === EVENEMENTS === */
.tk-events-list { display: flex; flex-direction: column; gap: 1px; background: rgba(247, 242, 231, 0.08); margin-top: 32px; border-radius: 8px; overflow: hidden; }
.tk-event-card { background: rgba(255, 255, 255, 0.02); padding: 24px 28px; display: grid; grid-template-columns: 100px 1fr; gap: 28px; align-items: center; transition: background 0.2s; }
.tk-event-card:hover { background: rgba(185, 48, 26, 0.05); }
@media (max-width: 600px) { .tk-event-card { grid-template-columns: 1fr; gap: 14px; padding: 20px; } }
.tk-event-date { text-align: center; border-right: 0.5px solid rgba(247, 242, 231, 0.1); padding-right: 20px; }
@media (max-width: 600px) { .tk-event-date { border-right: none; border-bottom: 0.5px solid rgba(247, 242, 231, 0.1); padding-right: 0; padding-bottom: 10px; text-align: left; } }
.tk-event-month { font-family: 'Noto Serif Display', Georgia, serif; font-size: 24px; color: var(--tk-shu, #B9301A); letter-spacing: 2px; line-height: 1; }
.tk-event-year { font-size: 11px; color: rgba(247, 242, 231, 0.5); margin-top: 4px; letter-spacing: 1px; }
.tk-event-title { font-family: 'Noto Serif Display', Georgia, serif !important; font-size: 20px !important; color: var(--tk-washi, #F7F2E7) !important; margin: 0 0 6px !important; font-weight: 400 !important; }
.tk-event-meta { font-size: 12px; color: var(--tk-shu, #B9301A); margin-bottom: 8px; letter-spacing: 0.5px; }
.tk-event-detail { font-size: 13px; color: rgba(247, 242, 231, 0.6); }
/* === 10 PRINCIPES MANIFESTE === */
.tk-principles-list { list-style: none; padding: 0; margin: 40px 0 0; counter-reset: principle; }
.tk-principle { display: grid; grid-template-columns: 80px 1fr; gap: 24px; padding: 28px 0; border-bottom: 0.5px solid rgba(0,0,0,0.08); }
.tk-principle:last-child { border-bottom: none; }
@media (max-width: 600px) { .tk-principle { grid-template-columns: 1fr; gap: 8px; } }
.tk-principle-num { font-family: 'Noto Serif Display', Georgia, serif; font-size: 48px; color: var(--tk-shu, #B9301A); line-height: 1; font-weight: 400; }
.tk-principle-title { font-family: 'Noto Serif Display', Georgia, serif !important; font-size: 22px !important; color: var(--tk-sumi, #0a0a0a) !important; margin: 0 0 10px !important; font-weight: 400 !important; line-height: 1.25 !important; }
.tk-principle-desc { font-size: 14px !important; line-height: 1.65 !important; color: var(--tk-ink, #3a3a3a) !important; margin: 0 !important; font-style: italic; }
/* === QUIZ PHILOSOPHIE === */
.tk-quiz { margin-top: 32px; }
.tk-q-progress { height: 3px; background: rgba(0,0,0,0.08); border-radius: 2px; margin-bottom: 32px; overflow: hidden; }
.tk-q-progress-bar { height: 100%; background: var(--tk-shu, #B9301A); transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1); width: 20%; }
.tk-q-step { display: none; }
.tk-q-step.is-active { display: block; animation: tk-q-fadein 0.4s ease; }
@keyframes tk-q-fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.tk-q-num { font-size: 11px; letter-spacing: 2px; color: var(--tk-shu, #B9301A); text-transform: uppercase; margin-bottom: 16px; }
.tk-q-text { font-family: 'Noto Serif Display', Georgia, serif !important; font-size: 26px !important; color: var(--tk-sumi, #0a0a0a) !important; margin: 0 0 28px !important; font-weight: 400 !important; line-height: 1.25 !important; }
.tk-q-options { display: flex; flex-direction: column; gap: 10px; }
.tk-q-option { background: var(--tk-white, #fff); border: 0.5px solid rgba(0,0,0,0.15); border-radius: 6px; padding: 16px 20px; text-align: left; cursor: pointer; font-size: 14px; line-height: 1.5; color: var(--tk-ink, #3a3a3a); font-family: inherit; transition: all 0.2s; }
.tk-q-option:hover { border-color: var(--tk-shu, #B9301A); background: rgba(185, 48, 26, 0.03); }
.tk-q-option.is-selected { background: var(--tk-shu, #B9301A); color: var(--tk-washi, #F7F2E7); border-color: var(--tk-shu, #B9301A); }
.tk-q-result { display: none; }
.tk-q-result.is-visible { display: block; animation: tk-q-fadein 0.5s ease; }
.tk-q-result-eyebrow { font-size: 11px; letter-spacing: 2.5px; color: var(--tk-shu, #B9301A); margin-bottom: 14px; }
.tk-q-result-name { font-family: 'Noto Serif Display', Georgia, serif !important; font-size: 42px !important; color: var(--tk-sumi, #0a0a0a) !important; margin: 0 0 6px !important; font-weight: 400 !important; }
.tk-q-result-jp { font-family: 'Noto Serif JP', serif; font-size: 14px; color: var(--tk-stone, #888780); letter-spacing: 2px; margin-bottom: 24px; }
.tk-q-result-desc { font-size: 15px !important; line-height: 1.7 !important; color: var(--tk-ink, #3a3a3a) !important; margin: 0 0 28px !important; }
.tk-q-restart { background: transparent; border: 0.5px solid var(--tk-sumi, #0a0a0a); color: var(--tk-sumi, #0a0a0a); padding: 10px 22px; border-radius: 20px; cursor: pointer; font-size: 13px; transition: all 0.2s; }
.tk-q-restart:hover { background: var(--tk-sumi, #0a0a0a); color: var(--tk-washi, #F7F2E7); }
/* === CITATION FINALE MANIFESTE === */
.tk-final-quote { text-align: center; border: none; margin: 0; padding: 0; }
.tk-final-quote-mark { font-family: 'Noto Serif Display', Georgia, serif !important; font-size: 140px !important; color: var(--tk-shu, #B9301A); line-height: 0.8 !important; margin: 0 0 -10px !important; opacity: 0.5; }
.tk-final-quote-text { font-family: 'Noto Serif Display', Georgia, serif !important; font-size: clamp(28px, 4vw, 42px) !important; color: var(--tk-washi, #F7F2E7) !important; font-style: italic !important; line-height: 1.3 !important; margin: 0 0 28px !important; }
.tk-final-quote-cite { font-style: normal; font-size: 14px; color: rgba(247, 242, 231, 0.6); letter-spacing: 2px; }
/* === CTA RÉUTILISABLE === */
.tk-page-cta { text-align: center; }
.tk-page-cta-title { font-family: 'Noto Serif Display', Georgia, serif !important; font-size: clamp(28px, 4vw, 36px) !important; color: var(--tk-sumi, #0a0a0a) !important; margin: 0 0 14px !important; font-weight: 400 !important; line-height: 1.2 !important; }
.tk-page-cta-desc { font-size: 15px !important; line-height: 1.65 !important; color: var(--tk-ink, #3a3a3a) !important; margin: 0 0 28px !important; }
.tk-btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; background: var(--tk-shu, #B9301A); color: var(--tk-washi, #F7F2E7) !important; text-decoration: none !important; border-radius: 3px; font-size: 14px; font-weight: 500; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.tk-btn-primary:hover { background: #E85D04; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(232, 93, 4, 0.25); }
/* ============================================================
v0.6.0 — HERO IMMERSIF FULL-BLEED
Kinfolk + Nature : scene crepusculaire SVG en background
[v0.7.4] CSS remis au propre : le wrapper PHP n a plus de contentSize,
donc on n a besoin que de width:100% — fini les hacks 100vw
============================================================ */
.tk-home-hero-immersive {
position: relative;
min-height: 720px;
overflow: hidden;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
color: var(--tk-washi, #F7F2E7);
box-sizing: border-box;
}
/* Scène crépusculaire en couches SVG/CSS pures */
.tk-hero-scene {
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(180deg, #586860 0%, #3F4D45 40%, #1F2A24 100%);
}
/* Soleil crépusculaire */
.tk-hero-sun {
position: absolute;
top: 130px;
right: 130px;
width: 80px;
height: 80px;
border-radius: 50%;
background: radial-gradient(circle, #D85A30 0%, #E85D04 40%, rgba(232, 93, 4, 0.4) 70%, transparent 100%);
filter: blur(2px);
}
/* Montagnes en silhouettes superposées (SVG inline data-URI) */
.tk-hero-mountains {
position: absolute;
bottom: 200px;
left: 0;
right: 0;
height: 320px;
background-image: url("data:image/svg+xml;utf8,");
background-size: cover;
background-position: bottom center;
background-repeat: no-repeat;
}
/* Eau / rivière */
.tk-hero-water {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 260px;
background:
linear-gradient(180deg, #2A3530 0%, #161E1A 100%);
}
.tk-hero-water::before, .tk-hero-water::after {
content: '';
position: absolute;
left: 0;
right: 0;
height: 1px;
background: rgba(255, 255, 255, 0.06);
box-shadow:
0 30px 0 rgba(255,255,255,0.04),
0 65px 0 rgba(255,255,255,0.05),
0 95px 0 rgba(255,255,255,0.03),
0 125px 0 rgba(255,255,255,0.04),
0 165px 0 rgba(255,255,255,0.03);
top: 30px;
}
/* Silhouette pêcheur tenkara */
.tk-hero-fisher {
position: absolute;
bottom: 200px;
left: 50%;
transform: translateX(-30%);
width: 80px;
height: 60px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
}
/* Overlay sombre pour lisibilité du titre */
.tk-hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.5) 100%);
}
/* Contenu du hero */
.tk-hero-content-immersive {
position: relative;
z-index: 2;
max-width: 1140px;
margin: 0 auto;
padding: 120px 40px 80px;
}
.tk-eyebrow-light {
color: rgba(255, 255, 255, 0.92) !important;
font-size: 11px !important;
letter-spacing: 3.5px !important;
text-transform: uppercase;
margin-bottom: 32px;
font-weight: 500;
}
.tk-hero-headline-stacked {
font-family: 'Noto Serif Display', Georgia, serif !important;
font-size: clamp(48px, 7.5vw, 84px) !important;
color: #FFFFFF !important;
line-height: 0.98 !important;
margin: 0 !important;
font-weight: 400 !important;
}
.tk-hero-headline-stacked span {
display: block;
}
.tk-hero-shu-rule {
width: 64px;
height: 1px;
background: #E85D04;
margin: 28px 0 24px;
}
.tk-hero-subtitle {
font-family: 'Noto Serif Display', Georgia, serif !important;
font-style: italic !important;
font-size: clamp(20px, 2.8vw, 26px) !important;
color: rgba(255, 255, 255, 0.7) !important;
margin: 0 0 22px !important;
font-weight: 400 !important;
}
.tk-hero-lede-immersive {
font-size: 15px !important;
line-height: 1.6 !important;
color: rgba(255, 255, 255, 0.85) !important;
margin: 0 0 40px !important;
max-width: 540px;
}
.tk-hero-ctas {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 60px;
}
.tk-btn-secondary-light {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 22px;
background: rgba(255, 255, 255, 0.08);
color: #FFFFFF !important;
border: 0.5px solid rgba(255, 255, 255, 0.3);
text-decoration: none !important;
border-radius: 3px;
font-size: 13px;
font-weight: 500;
transition: all 0.2s;
}
.tk-btn-secondary-light:hover {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.5);
}
.tk-hero-scroll-cue {
font-size: 11px;
letter-spacing: 3px;
color: rgba(255, 255, 255, 0.6);
text-transform: uppercase;
animation: tk-cue-bob 2.4s ease-in-out infinite;
}
@keyframes tk-cue-bob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(4px); }
}
@media (max-width: 768px) {
.tk-home-hero-immersive { min-height: 640px; }
.tk-hero-content-immersive { padding: 100px 28px 64px; }
.tk-hero-sun { top: 90px; right: 60px; width: 60px; height: 60px; }
.tk-hero-fisher { transform: translateX(-50%); }
}
/* ============================================================
v0.6.0 — TROIS CHEMINS (cartes naturelles D4)
============================================================ */
.tk-home-pillars-natural { background: var(--tk-washi, #F7F2E7); }
.tk-home-pillars-natural .tk-section-header { text-align: left; margin-bottom: 48px; }
.tk-home-pillars-natural .tk-section-title {
font-family: 'Noto Serif Display', Georgia, serif !important;
font-size: clamp(36px, 5vw, 48px) !important;
color: var(--tk-sumi, #0a0a0a) !important;
margin: 8px 0 6px !important;
font-weight: 400 !important;
line-height: 1.1 !important;
}
.tk-home-pillars-natural .tk-section-lede-it {
font-family: 'Noto Serif Display', Georgia, serif;
font-style: italic;
font-size: 20px;
color: var(--tk-stone, #888780);
margin: 0;
}
.tk-pillars-natural-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 56px;
}
@media (max-width: 900px) { .tk-pillars-natural-grid { grid-template-columns: 1fr; } }
.tk-pillar-natural {
display: block;
background: var(--tk-white, #fff);
border: 0.5px solid rgba(0,0,0,0.08);
border-radius: 4px;
padding: 0;
text-decoration: none !important;
color: inherit;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s, border-color 0.3s;
overflow: hidden;
}
.tk-pillar-natural:hover {
transform: translateY(-4px);
box-shadow: 0 16px 40px rgba(0,0,0,0.06);
border-color: rgba(185, 48, 26, 0.25);
}
.tk-pillar-illu {
width: 100%;
height: 130px;
background: rgba(247, 242, 231, 0.4);
display: flex;
align-items: center;
justify-content: center;
border-bottom: 0.5px solid rgba(0,0,0,0.06);
}
.tk-pillar-illu svg { width: 85%; height: 100%; }
.tk-pillar-natural .tk-pillar-num {
margin: 24px 28px 0 !important;
font-family: 'Noto Serif Display', Georgia, serif;
font-size: 12px;
color: var(--tk-shu, #B9301A);
letter-spacing: 1.5px;
}
.tk-pillar-natural .tk-pillar-name {
font-family: 'Noto Serif Display', Georgia, serif !important;
font-size: 28px !important;
color: var(--tk-sumi, #0a0a0a) !important;
margin: 16px 28px 4px !important;
font-weight: 400 !important;
line-height: 1.1 !important;
}
.tk-pillar-natural .tk-pillar-jp {
font-family: 'Noto Serif JP', serif;
font-style: italic;
font-size: 13px;
color: var(--tk-stone, #888780);
margin: 0 28px 18px;
letter-spacing: 1px;
}
.tk-pillar-desc-short {
margin: 0 28px 22px !important;
font-size: 12px !important;
color: var(--tk-ink, #3a3a3a) !important;
line-height: 1.55 !important;
}
.tk-pillar-natural .tk-pillar-arrow {
display: block;
margin: 0 28px 24px;
font-size: 11px;
color: var(--tk-shu, #B9301A);
letter-spacing: 1.5px;
font-weight: 500;
transition: gap 0.2s;
}
.tk-pillar-natural:hover .tk-pillar-arrow { letter-spacing: 2px; }
/* ============================================================
v0.6.0 — SECTION MAÎTRES (Danièle featured + 3 japonais)
============================================================ */
.tk-home-masters-v2 { background: var(--tk-washi, #F7F2E7); }
.tk-home-masters-v2 .tk-section-header { text-align: left; margin-bottom: 56px; }
.tk-home-masters-v2 .tk-section-title {
font-family: 'Noto Serif Display', Georgia, serif !important;
font-size: clamp(36px, 5vw, 48px) !important;
color: var(--tk-sumi, #0a0a0a) !important;
margin: 8px 0 14px !important;
font-weight: 400 !important;
line-height: 1.1 !important;
}
.tk-home-masters-v2 .tk-section-lede {
font-size: 15px !important;
color: var(--tk-stone, #888780) !important;
max-width: 620px;
line-height: 1.6 !important;
margin: 0 !important;
}
/* Featured Danièle */
.tk-master-featured {
background: #0E0E0C;
border-radius: 4px;
padding: 56px 56px 56px 0;
display: grid;
grid-template-columns: 280px 1fr;
gap: 48px;
align-items: center;
margin-bottom: 64px;
overflow: hidden;
}
@media (max-width: 768px) {
.tk-master-featured { grid-template-columns: 1fr; padding: 40px 32px; gap: 32px; }
}
.tk-master-featured-portrait {
padding-left: 56px;
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 768px) { .tk-master-featured-portrait { padding-left: 0; justify-content: flex-start; } }
.tk-master-hanko {
width: 200px;
height: 240px;
background: linear-gradient(135deg, #B9301A 0%, #8E2515 50%, #6E1D13 100%);
border-radius: 2px;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(-2.5deg);
/* [v0.7.3] Ombre plus tenue pour eviter l effet de carte dedoublee */
box-shadow: 0 4px 14px rgba(185, 48, 26, 0.18);
font-family: 'Noto Serif Display', Georgia, serif;
font-size: 64px;
color: var(--tk-washi, #F7F2E7);
letter-spacing: 6px;
position: relative;
}
.tk-master-hanko::before {
content: '';
position: absolute;
inset: 10px;
border: 0.5px solid rgba(247, 242, 231, 0.18);
border-radius: 1px;
pointer-events: none;
}
.tk-master-role {
font-size: 10px;
letter-spacing: 2.8px;
color: #E85D04;
font-weight: 500;
margin-bottom: 14px;
}
.tk-master-name {
font-family: 'Noto Serif Display', Georgia, serif !important;
font-size: clamp(30px, 4vw, 38px) !important;
color: var(--tk-washi, #F7F2E7) !important;
margin: 0 0 6px !important;
font-weight: 400 !important;
line-height: 1.1 !important;
}
.tk-master-nickname {
font-family: 'Noto Serif Display', Georgia, serif;
font-style: italic;
font-size: 17px;
color: rgba(247, 242, 231, 0.5);
margin-bottom: 22px;
}
.tk-master-shu-rule {
width: 40px;
height: 1px;
background: #E85D04;
margin: 0 0 24px;
}
.tk-master-bio {
font-size: 13.5px !important;
line-height: 1.7 !important;
color: rgba(247, 242, 231, 0.78) !important;
margin: 0 0 24px !important;
max-width: 580px;
}
.tk-master-quote {
font-family: 'Noto Serif Display', Georgia, serif;
font-style: italic;
font-size: 15px;
color: rgba(247, 242, 231, 0.7);
border-left: 2px solid #E85D04;
padding-left: 18px;
margin: 0 0 24px;
line-height: 1.55;
}
.tk-master-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: #E85D04 !important;
text-decoration: none !important;
font-size: 12px;
letter-spacing: 1.5px;
font-weight: 500;
transition: opacity 0.2s;
}
.tk-master-link:hover { opacity: 0.7; }
/* 3 maîtres japonais */
.tk-masters-japan-eyebrow {
margin: 0 0 24px;
text-align: left;
}
.tk-masters-japan-eyebrow .tk-eyebrow-stone {
color: var(--tk-stone, #888780) !important;
font-size: 11px !important;
letter-spacing: 3px !important;
}
.tk-masters-japan-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 48px;
}
@media (max-width: 900px) { .tk-masters-japan-grid { grid-template-columns: 1fr; } }
.tk-master-japan-card {
background: var(--tk-white, #fff);
border: 0.5px solid rgba(0,0,0,0.08);
border-radius: 4px;
padding: 32px 28px 36px;
position: relative;
overflow: hidden;
min-height: 360px;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s, border-color 0.3s;
}
.tk-master-japan-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 32px rgba(0,0,0,0.05);
border-color: rgba(185, 48, 26, 0.2);
}
.tk-master-japan-role {
font-size: 10px;
letter-spacing: 2.5px;
color: var(--tk-shu, #B9301A);
font-weight: 500;
margin-bottom: 28px;
}
.tk-master-japan-firstname,
.tk-master-japan-lastname {
font-family: 'Noto Serif Display', Georgia, serif !important;
font-size: 28px !important;
color: var(--tk-sumi, #0a0a0a) !important;
margin: 0 !important;
font-weight: 400 !important;
line-height: 1.05 !important;
}
.tk-master-japan-lastname { margin-bottom: 18px !important; }
.tk-master-japan-shu-rule {
width: 32px;
height: 1px;
background: var(--tk-shu, #B9301A);
margin: 0 0 22px;
}
.tk-master-japan-bio {
font-size: 12.5px !important;
line-height: 1.65 !important;
color: var(--tk-ink, #3a3a3a) !important;
margin: 0 !important;
position: relative;
z-index: 2;
}
/* Signature japonaise (calligraphie discrète, signature à la main) */
.tk-master-japan-signature {
position: absolute;
bottom: 18px;
right: 22px;
font-family: 'Noto Serif JP', serif;
font-size: 64px;
color: var(--tk-shu, #B9301A);
opacity: 0.22;
letter-spacing: -4px;
line-height: 1;
transform: rotate(-3deg);
pointer-events: none;
user-select: none;
transition: opacity 0.3s, transform 0.3s;
}
.tk-master-japan-card:hover .tk-master-japan-signature {
opacity: 0.4;
transform: rotate(-2deg) scale(1.04);
}
/* Légères variations d'angle par maître */
.tk-sig-sebata { transform: rotate(-4deg); }
.tk-sig-ishigaki { transform: rotate(-2deg); }
.tk-sig-saigo { transform: rotate(-5deg); }
.tk-master-japan-card:hover .tk-sig-sebata { transform: rotate(-3deg) scale(1.04); }
.tk-master-japan-card:hover .tk-sig-ishigaki { transform: rotate(-1deg) scale(1.04); }
.tk-master-japan-card:hover .tk-sig-saigo { transform: rotate(-4deg) scale(1.04); }
.tk-masters-foot {
text-align: center;
padding-top: 16px;
}
.tk-masters-foot .tk-btn-link {
color: var(--tk-shu, #B9301A) !important;
text-decoration: none !important;
font-size: 13px;
letter-spacing: 1px;
border-bottom: 0.5px solid var(--tk-shu, #B9301A);
padding-bottom: 2px;
}
/* ============================================================
v0.6.0 — LETTRE DU DIMANCHE (section newsletter premium)
============================================================ */
.tk-home-letter { background: #0E0E0C; color: var(--tk-washi, #F7F2E7); text-align: center; }
.tk-letter-inner { max-width: 580px; margin: 0 auto; }
.tk-eyebrow-shu {
color: #E85D04 !important;
font-size: 11px !important;
letter-spacing: 3px !important;
margin-bottom: 28px;
}
.tk-letter-title {
font-family: 'Noto Serif Display', Georgia, serif !important;
font-size: clamp(36px, 5vw, 48px) !important;
color: var(--tk-washi, #F7F2E7) !important;
margin: 0 0 18px !important;
font-weight: 400 !important;
line-height: 1.1 !important;
}
.tk-letter-lede {
font-size: 15px !important;
line-height: 1.65 !important;
color: rgba(247, 242, 231, 0.75) !important;
margin: 0 0 36px !important;
}
.tk-newsletter-form-dark { display: flex; gap: 10px; max-width: 480px; margin: 0 auto; flex-wrap: wrap; }
.tk-newsletter-form-dark input[type="email"] {
flex: 1;
min-width: 220px;
padding: 14px 18px;
background: rgba(247, 242, 231, 0.05);
border: 0.5px solid rgba(247, 242, 231, 0.15);
color: var(--tk-washi, #F7F2E7);
border-radius: 3px;
font-size: 14px;
font-family: inherit;
}
.tk-newsletter-form-dark input[type="email"]:focus {
outline: none;
border-color: #E85D04;
background: rgba(247, 242, 231, 0.08);
}
.tk-newsletter-form-dark button {
padding: 14px 24px;
background: #E85D04;
color: var(--tk-washi, #F7F2E7);
border: none;
border-radius: 3px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
font-family: inherit;
transition: background 0.2s;
}
.tk-newsletter-form-dark button:hover { background: #FF6B0A; }
.tk-letter-promise {
font-size: 11px;
color: rgba(247, 242, 231, 0.4);
margin: 20px 0 0 !important;
letter-spacing: 1px;
}
/* ============================================================
v0.6.0 — CITATION SEBATA EN PIED DE HOME
============================================================ */
.tk-home-citation { background: var(--tk-washi, #F7F2E7); text-align: center; }
.tk-citation-block { border: none; margin: 0; padding: 0; }
.tk-citation-text {
font-family: 'Noto Serif Display', Georgia, serif !important;
font-style: italic !important;
/* [v0.7.3] +50% par rapport a 24-32px = 36-48px */
font-size: clamp(32px, 4.6vw, 46px) !important;
color: var(--tk-sumi, #0a0a0a) !important;
line-height: 1.35 !important;
margin: 0 0 36px !important;
font-weight: 400 !important;
/* [v0.7.6] Largeur portee a 1000px pour accomoder
"Le tenkara n enseigne pas a pecher :" sur une seule ligne */
max-width: 1000px;
margin-left: auto !important;
margin-right: auto !important;
}
.tk-citation-cite {
font-style: normal !important;
font-size: 12px !important;
letter-spacing: 3.5px !important;
color: var(--tk-stone, #888780);
}
/* ============================================================
v0.6.0 — CARTE LETTRE (rendu shortcode [tk_letter])
============================================================ */
.tk-letter-card {
background: var(--tk-paper, #FCFAF4);
border: 0.5px solid rgba(0,0,0,0.08);
border-radius: 6px;
padding: 40px 36px;
max-width: 680px;
margin: 32px auto;
}
.tk-letter-header { display: flex; align-items: baseline; gap: 16px; margin-bottom: 14px; }
.tk-letter-num { font-size: 10px; letter-spacing: 2px; color: var(--tk-stone, #888780); text-transform: uppercase; }
.tk-letter-kanji { font-family: 'Noto Serif JP', serif; font-size: 28px; color: var(--tk-shu, #B9301A); line-height: 1; }
.tk-letter-romaji { font-family: 'Noto Serif Display', Georgia, serif; font-style: italic; font-size: 14px; color: var(--tk-ink, #3a3a3a); }
.tk-letter-card-title { font-family: 'Noto Serif Display', Georgia, serif !important; font-size: 24px !important; color: var(--tk-sumi, #0a0a0a) !important; margin: 6px 0 4px !important; font-weight: 400 !important; }
.tk-letter-concept { font-family: 'Noto Serif Display', Georgia, serif; font-style: italic; color: var(--tk-stone, #888780); margin-bottom: 22px; font-size: 14px; }
.tk-letter-body { font-size: 14px; line-height: 1.75; color: var(--tk-ink, #3a3a3a); }
.tk-letter-body p { margin: 0 0 14px; }
.tk-letter-sep { text-align: center; color: var(--tk-shu, #B9301A); font-size: 11px; letter-spacing: 3px; margin: 24px 0; }
/* ============================================================
v0.7.0 — HEADER HANKO (Option C)
Fond washi, sceau rouge avec kanji 天, brand +50%, sticky scroll
============================================================ */
.tk-hanko-header {
position: sticky;
top: 0;
z-index: 9999;
background: var(--tk-washi, #F7F2E7);
border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
transition: padding 0.3s ease, background 0.3s ease;
padding: 18px 0;
width: 100%;
}
.tk-hanko-header.tk-hanko-scrolled {
padding: 8px 0;
background: rgba(247, 242, 231, 0.96);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 1px 16px rgba(0, 0, 0, 0.04);
}
.tk-hanko-header-inner {
max-width: 1240px;
margin: 0 auto;
padding: 0 32px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
}
/* ===== Hanko + brand ===== */
.tk-hanko-brand {
display: flex;
align-items: center;
gap: 18px;
text-decoration: none !important;
color: inherit;
transition: transform 0.3s ease;
}
.tk-hanko-brand:hover {
transform: translateY(-1px);
}
.tk-hanko-seal {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #B9301A 0%, #8E2515 100%);
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(-2.5deg);
box-shadow: 0 6px 18px rgba(185, 48, 26, 0.22);
position: relative;
transition: width 0.3s, height 0.3s;
}
.tk-hanko-seal::before {
content: '';
position: absolute;
inset: 4px;
border: 0.5px solid rgba(247, 242, 231, 0.22);
border-radius: 2px;
pointer-events: none;
}
.tk-hanko-kanji {
font-family: 'Noto Serif JP', serif;
font-size: 40px;
color: var(--tk-washi, #F7F2E7);
font-weight: 400;
line-height: 1;
margin-top: -2px;
transition: font-size 0.3s;
}
.tk-hanko-scrolled .tk-hanko-seal { width: 44px; height: 44px; }
.tk-hanko-scrolled .tk-hanko-kanji { font-size: 28px; }
.tk-hanko-brand-text {
display: flex;
flex-direction: column;
gap: 4px;
transition: gap 0.3s;
}
.tk-hanko-name {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 21px; /* +50% vs ancien 14px */
font-weight: 500;
color: var(--tk-sumi, #0a0a0a);
letter-spacing: -0.3px;
line-height: 1;
transition: font-size 0.3s;
}
.tk-hanko-baseline {
font-family: Georgia, 'Noto Serif Display', serif;
font-style: italic;
font-size: 11px;
/* [v0.7.1] Meme couleur que le hanko (shu) au lieu de stone gris */
color: var(--tk-shu, #B9301A);
letter-spacing: 2px;
line-height: 1;
transition: opacity 0.3s;
}
.tk-hanko-scrolled .tk-hanko-name { font-size: 17px; }
.tk-hanko-scrolled .tk-hanko-baseline { opacity: 0; height: 0; margin: 0; overflow: hidden; }
/* ===== Navigation ===== */
.tk-hanko-nav {
display: flex;
align-items: center;
}
.tk-hanko-menu {
display: flex;
align-items: center;
gap: 28px;
list-style: none;
margin: 0;
padding: 0;
}
.tk-hanko-menu li { list-style: none; }
.tk-hanko-menu a {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 13px;
color: var(--tk-sumi, #0a0a0a) !important;
text-decoration: none !important;
font-weight: 400;
transition: color 0.2s ease;
padding: 4px 0;
position: relative;
}
.tk-hanko-menu a:hover { color: var(--tk-shu, #B9301A) !important; }
.tk-hanko-menu .current-menu-item a,
.tk-hanko-menu .current_page_item a {
color: var(--tk-shu, #B9301A) !important;
}
.tk-hanko-menu .current-menu-item a::after,
.tk-hanko-menu .current_page_item a::after {
content: '';
position: absolute;
bottom: -3px;
left: 0;
right: 0;
height: 1px;
background: var(--tk-shu, #B9301A);
}
/* Style spécifique pour l'item 家 Accueil */
.tk-hanko-menu .tk-menu-home a {
letter-spacing: -0.3px;
}
/* ===== Mobile ===== */
@media (max-width: 900px) {
.tk-hanko-header-inner { flex-wrap: wrap; gap: 16px; }
.tk-hanko-nav { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tk-hanko-menu { gap: 20px; padding-bottom: 4px; }
.tk-hanko-baseline { display: none; }
.tk-hanko-seal { width: 48px; height: 48px; }
.tk-hanko-kanji { font-size: 30px; }
.tk-hanko-name { font-size: 18px; }
/* [v0.8.6] Sur mobile, retirer le 家 du menu Accueil : il cree un bug d'espace
et le sceau dans le logo brand assure deja la signature visuelle japonaise */
.tk-hanko-menu .tk-menu-home a {
font-size: 0; /* cache le texte original "家 Accueil" */
}
.tk-hanko-menu .tk-menu-home a::before {
content: "Accueil";
font-size: 13px;
letter-spacing: 1.5px;
}
}
/* ============================================================
v0.7.0 — BREADCRUMB ÉPURÉ
Format : 家 Accueil / [page actuelle]
============================================================ */
.tk-breadcrumb {
background: rgba(247, 242, 231, 0.5);
border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
padding: 10px 0;
}
.tk-breadcrumb-inner {
max-width: 1240px;
margin: 0 auto;
padding: 0 32px;
display: flex;
align-items: center;
gap: 12px;
font-size: 12px;
line-height: 1.4;
}
.tk-bread-home {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--tk-stone, #888780) !important;
text-decoration: none !important;
transition: color 0.2s;
}
.tk-bread-home:hover { color: var(--tk-shu, #B9301A) !important; }
.tk-bread-kanji {
font-family: 'Noto Serif JP', serif;
font-size: 14px;
color: var(--tk-shu, #B9301A);
line-height: 1;
}
.tk-bread-label {
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
letter-spacing: 0.3px;
}
.tk-bread-sep {
color: rgba(0, 0, 0, 0.2);
font-weight: 300;
}
.tk-bread-current {
color: var(--tk-sumi, #0a0a0a);
font-weight: 500;
letter-spacing: 0.3px;
}
@media (max-width: 600px) {
.tk-breadcrumb-inner { padding: 0 20px; font-size: 11px; gap: 8px; }
.tk-bread-current {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 220px;
}
}
/* ============================================================
v0.7.0 — CACHER LE HEADER NATIF HELLO ELEMENTOR
Notre header hanko prend le relais
[v0.7.2] Selecteurs renforces — capture les variantes Hello/Astra/etc
[v0.7.3] Cible specifique du menu externe tk-header-menu / tk-header-link
(probablement un ancien plugin ou widget Elementor)
============================================================ */
/* CIBLE PRINCIPALE v0.7.3 : le menu externe avec classes tk-header-* */
.tk-header-menu,
ul.tk-header-menu,
.tk-header-link,
a.tk-header-link,
.tk-header-link-label {
/* On masque le menu, mais on doit aussi remonter au CONTAINER parent */
}
/* On cache TOUT element ancestor qui contient .tk-header-menu */
:has(> .tk-header-menu),
:has(> ul.tk-header-menu) {
display: none !important;
}
/* Fallback pour navigateurs sans :has() — masque le menu lui-meme,
son parent direct, et le parent du parent */
ul.tk-header-menu,
ul.tk-header-menu *,
nav:has(.tk-header-link),
header:has(.tk-header-link),
div:has(> ul.tk-header-menu) {
display: none !important;
visibility: hidden !important;
height: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
}
/* Si :has() n est pas supporte, on masque a minima le menu */
@supports not (selector(:has(*))) {
ul.tk-header-menu {
display: none !important;
}
/* Et on tente de masquer les parents typiques */
[class*="header"]:has-descendant(.tk-header-menu),
[class*="navigation"]:has-descendant(.tk-header-menu) {
display: none !important;
}
}
/* Autres headers natifs (Hello Elementor / Astra / etc) */
body > #site-header,
body > header.site-header:not(.tk-hanko-header),
body > header[role="banner"]:not(.tk-hanko-header),
body header.elementor-location-header,
body .elementor-location-header,
body header.ehp-header,
body .ehp-header,
body .site-navigation,
body .main-navigation,
body #masthead,
body header#masthead,
body .ast-primary-header-bar,
body .ast-above-header,
body .site-header-section,
body .menu-toggle,
/* [v0.8.6] AGRESSIF — Hello Elementor templates de header */
body .elementor-section.elementor-section-stretched header,
body div[data-elementor-type="header"],
body .elementor-element[data-element_type="section"][data-elementor-type="header"],
body header.hello-elementor-template,
body .hello-header,
body .ehf-template-hello-elementor,
body .ehf-header {
display: none !important;
visibility: hidden !important;
height: 0 !important;
overflow: hidden !important;
position: absolute !important;
left: -9999px !important;
}
/* [v0.8.12] WPML / Polylang switchers : NE PAS cacher — Erme veut les garder visibles
dans la zone superieure du theme (FR · EN). Si doublon visible, utiliser
l'Inspecteur de header pour cacher manuellement les selecteurs en doublon. */
/* [v0.8.12] Liens "Mon carnet"/"my-account" : NE PAS cacher — ils sont
renommes en "Contact" via JS (cf. Header_Inspector::inject_dom_transform_js).
Aucun masquage CSS ici. */
/* Forcer le body a commencer en haut, sans padding du theme */
body.tk-has-hanko-header { padding-top: 0 !important; margin-top: 0 !important; }
body.tk-has-hanko-header .site-content { padding-top: 0 !important; }
body.tk-has-hanko-header main { padding-top: 0 !important; }
/* ============================================================
v0.7.7 — FLIP BOX 6 TECHNIQUES (remplace l ancienne modale)
Hover : contour shu, carte reste blanche
Click : flip 3D pour reveler les details au verso
============================================================ */
.tk-tech-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
perspective: 1400px; /* profondeur 3D pour le flip */
}
@media (max-width: 920px) { .tk-tech-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tk-tech-grid { grid-template-columns: 1fr; } }
.tk-tech-flip {
position: relative;
min-height: 320px;
cursor: pointer;
border: none;
background: transparent;
outline: none;
-webkit-tap-highlight-color: transparent;
}
.tk-tech-flip:focus-visible {
outline: 2px solid var(--tk-shu, #B9301A);
outline-offset: 4px;
border-radius: 4px;
}
.tk-tech-flip-inner {
position: relative;
width: 100%;
height: 100%;
min-height: 320px;
transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
transform-style: preserve-3d;
}
.tk-tech-flip.is-flipped .tk-tech-flip-inner {
transform: rotateY(180deg);
}
/* Faces communes */
.tk-tech-flip-front,
.tk-tech-flip-back {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
border-radius: 4px;
padding: 28px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
/* RECTO : carte blanche, contour fin */
.tk-tech-flip-front {
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.08);
transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.tk-tech-flip:hover .tk-tech-flip-front {
/* Hover : SEUL le contour change (shu), la carte reste blanche */
border-color: var(--tk-shu, #B9301A);
border-width: 1.5px;
box-shadow: 0 14px 32px rgba(185, 48, 26, 0.08);
transform: translateY(-2px);
}
.tk-tech-flip .tk-tech-num {
font-family: 'Noto Serif Display', Georgia, serif;
font-size: 32px;
color: var(--tk-shu, #B9301A);
line-height: 1;
margin-bottom: 12px;
font-weight: 400;
}
.tk-tech-flip .tk-tech-name {
font-family: 'Noto Serif Display', Georgia, serif !important;
font-size: 22px !important;
color: var(--tk-sumi, #0a0a0a) !important;
margin: 0 0 4px !important;
font-weight: 400 !important;
line-height: 1.2 !important;
}
.tk-tech-flip .tk-tech-jp {
font-family: 'Noto Serif JP', serif;
font-style: italic;
font-size: 13px;
color: var(--tk-stone, #888780);
margin-bottom: 16px;
}
.tk-tech-flip .tk-tech-desc {
font-size: 13.5px !important;
line-height: 1.6 !important;
color: var(--tk-ink, #3a3a3a) !important;
margin: 0 0 auto !important;
flex-grow: 1;
}
.tk-tech-flip .tk-tech-cta {
margin-top: 16px;
color: var(--tk-shu, #B9301A);
font-size: 11px;
letter-spacing: 1.8px;
font-weight: 500;
transition: letter-spacing 0.2s;
}
.tk-tech-flip:hover .tk-tech-cta {
letter-spacing: 2.2px;
}
/* VERSO : fond sumi noir avec contenu blanc */
.tk-tech-flip-back {
transform: rotateY(180deg);
background: #0E0E0C;
border: 1px solid rgba(185, 48, 26, 0.3);
color: var(--tk-washi, #F7F2E7);
overflow-y: auto;
}
.tk-tech-back-header {
display: flex;
align-items: baseline;
gap: 14px;
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 0.5px solid rgba(247, 242, 231, 0.15);
}
.tk-tech-back-num {
font-family: 'Noto Serif Display', Georgia, serif;
font-size: 22px;
color: #E85D04;
font-weight: 400;
}
.tk-tech-back-name {
font-family: 'Noto Serif Display', Georgia, serif !important;
font-size: 18px !important;
color: var(--tk-washi, #F7F2E7) !important;
margin: 0 !important;
font-weight: 400 !important;
}
.tk-tech-back-body {
flex: 1;
}
.tk-tech-back-section {
margin-bottom: 14px;
}
.tk-tech-back-section h5 {
font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
font-size: 10px !important;
letter-spacing: 2.5px !important;
color: #E85D04 !important;
text-transform: uppercase;
margin: 0 0 5px !important;
font-weight: 600 !important;
}
.tk-tech-back-section p {
font-size: 12.5px !important;
line-height: 1.5 !important;
color: rgba(247, 242, 231, 0.85) !important;
margin: 0 !important;
}
.tk-tech-back-warning h5 {
color: #FF8C5A !important;
}
.tk-tech-back-warning p {
color: rgba(247, 242, 231, 0.7) !important;
font-style: italic;
}
.tk-tech-back-flip {
margin-top: 16px;
padding-top: 12px;
border-top: 0.5px solid rgba(247, 242, 231, 0.15);
color: #E85D04;
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 500;
display: inline-block;
}
/* Animations d arrivee */
@keyframes tk-tech-card-in {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.tk-tech-flip {
animation: tk-tech-card-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.tk-tech-flip:nth-child(2) { animation-delay: 0.08s; }
.tk-tech-flip:nth-child(3) { animation-delay: 0.16s; }
.tk-tech-flip:nth-child(4) { animation-delay: 0.24s; }
.tk-tech-flip:nth-child(5) { animation-delay: 0.32s; }
.tk-tech-flip:nth-child(6) { animation-delay: 0.40s; }
/* Neutraliser l ancien CSS de la modale (au cas ou des restes traineraient) */
.tk-tech-modal { display: none !important; }
.tk-tech-card-clickable { display: none !important; }
/* Modale technique */
.tk-tech-modal {
position: fixed;
inset: 0;
z-index: 10000;
display: none;
align-items: center;
justify-content: center;
}
.tk-tech-modal.is-open {
display: flex;
}
.tk-tech-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(14, 14, 12, 0.7);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
animation: tk-fade-in 0.25s ease;
}
.tk-tech-modal-content {
position: relative;
background: var(--tk-paper, #FCFAF4);
border-radius: 6px;
max-width: 640px;
width: calc(100% - 48px);
max-height: 88vh;
overflow-y: auto;
padding: 48px 48px 40px;
box-shadow: 0 40px 80px rgba(0,0,0,0.3);
animation: tk-modal-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.tk-tech-modal-close {
position: absolute;
top: 18px;
right: 18px;
width: 36px;
height: 36px;
background: rgba(0,0,0,0.04);
border: none;
border-radius: 50%;
font-size: 22px;
cursor: pointer;
color: var(--tk-sumi, #0a0a0a);
transition: background 0.2s;
line-height: 1;
}
.tk-tech-modal-close:hover {
background: var(--tk-shu, #B9301A);
color: var(--tk-washi, #F7F2E7);
}
.tk-tech-modal-num {
font-family: 'Noto Serif Display', Georgia, serif;
font-size: 11px;
color: var(--tk-shu, #B9301A);
letter-spacing: 2.5px;
margin-bottom: 8px;
}
.tk-tech-modal-name {
font-family: 'Noto Serif Display', Georgia, serif !important;
font-size: 32px !important;
color: var(--tk-sumi, #0a0a0a) !important;
margin: 0 0 4px !important;
font-weight: 400 !important;
line-height: 1.1 !important;
}
.tk-tech-modal-jp {
font-family: 'Noto Serif JP', serif;
font-style: italic;
font-size: 14px;
color: var(--tk-stone, #888780);
margin-bottom: 18px;
}
.tk-tech-modal-shu-rule {
width: 40px;
height: 1px;
background: var(--tk-shu, #B9301A);
margin: 0 0 24px;
}
.tk-tech-modal-desc {
font-size: 15px;
line-height: 1.65;
color: var(--tk-ink, #3a3a3a);
margin: 0 0 32px;
padding-left: 16px;
border-left: 2px solid rgba(185, 48, 26, 0.3);
}
.tk-tech-modal-section {
margin-bottom: 24px;
}
.tk-tech-modal-section h4 {
font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
font-size: 11px !important;
letter-spacing: 2.5px !important;
text-transform: uppercase;
color: var(--tk-shu, #B9301A) !important;
margin: 0 0 8px !important;
font-weight: 600 !important;
}
.tk-tech-modal-section p {
font-size: 14px;
line-height: 1.65;
color: var(--tk-ink, #3a3a3a);
margin: 0;
}
.tk-tech-modal-warning h4 {
color: #9C2A0A !important;
}
.tk-tech-modal-warning p {
color: #5a5a5a;
font-style: italic;
}
@keyframes tk-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes tk-modal-in {
from { opacity: 0; transform: translateY(20px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 600px) {
.tk-tech-modal-content { padding: 36px 28px 28px; }
.tk-tech-modal-name { font-size: 26px !important; }
}
/* ============================================================
v0.7.0 — PARCOURS 6 SEMAINES EN ACCORDÉON
============================================================ */
.tk-journey-accordion {
display: flex;
flex-direction: column;
gap: 12px;
}
.tk-journey-step {
background: var(--tk-white, #fff);
border: 0.5px solid rgba(0,0,0,0.08);
border-radius: 4px;
overflow: hidden;
transition: border-color 0.3s;
}
.tk-journey-step[open] {
border-color: rgba(185, 48, 26, 0.25);
box-shadow: 0 6px 24px rgba(0,0,0,0.04);
}
.tk-journey-summary {
list-style: none;
cursor: pointer;
padding: 22px 28px;
display: grid;
grid-template-columns: 60px 1fr auto auto;
align-items: center;
gap: 16px;
transition: background 0.2s;
}
.tk-journey-summary::-webkit-details-marker { display: none; }
.tk-journey-summary:hover {
background: rgba(247, 242, 231, 0.5);
}
.tk-journey-step-num {
font-family: 'Noto Serif Display', Georgia, serif;
font-size: 24px;
color: var(--tk-shu, #B9301A);
line-height: 1;
}
.tk-journey-step-period {
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 11px;
letter-spacing: 2.5px;
color: var(--tk-stone, #888780);
text-transform: uppercase;
margin-right: 16px;
}
.tk-journey-step-title {
font-family: 'Noto Serif Display', Georgia, serif;
font-size: 19px;
color: var(--tk-sumi, #0a0a0a);
font-weight: 400;
}
.tk-journey-step-toggle {
width: 28px;
height: 28px;
background: rgba(0,0,0,0.04);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 300;
color: var(--tk-sumi, #0a0a0a);
transition: transform 0.3s, background 0.2s;
line-height: 1;
}
.tk-journey-step[open] .tk-journey-step-toggle {
transform: rotate(45deg);
background: var(--tk-shu, #B9301A);
color: var(--tk-washi, #F7F2E7);
}
.tk-journey-body {
padding: 8px 28px 32px;
border-top: 0.5px solid rgba(0,0,0,0.06);
margin-top: 8px;
}
.tk-journey-goal {
font-size: 14px;
color: var(--tk-ink, #3a3a3a);
margin: 16px 0 20px !important;
padding: 14px 18px;
background: rgba(232, 93, 4, 0.05);
border-left: 3px solid #E85D04;
border-radius: 0 4px 4px 0;
}
.tk-journey-goal strong {
color: #B9301A;
letter-spacing: 0.5px;
}
.tk-journey-tasks {
list-style: none !important;
padding: 0 !important;
margin: 0 0 24px !important;
}
.tk-journey-tasks li {
list-style: none !important;
padding: 12px 0 12px 32px;
border-bottom: 0.5px solid rgba(0,0,0,0.06);
font-size: 14px;
line-height: 1.65;
color: var(--tk-ink, #3a3a3a);
position: relative;
}
.tk-journey-tasks li::before {
content: '□';
position: absolute;
left: 0;
top: 11px;
color: var(--tk-shu, #B9301A);
font-size: 18px;
line-height: 1;
}
.tk-journey-tasks li:last-child { border-bottom: none; }
.tk-journey-milestone {
margin-top: 20px;
padding: 18px 22px;
background: #0E0E0C;
color: var(--tk-washi, #F7F2E7);
border-radius: 4px;
}
.tk-journey-milestone-label {
font-size: 10px;
letter-spacing: 2.5px;
color: #E85D04;
font-weight: 500;
display: block;
margin-bottom: 6px;
}
.tk-journey-milestone p {
font-family: 'Noto Serif Display', Georgia, serif;
font-style: italic;
font-size: 15px;
color: rgba(247, 242, 231, 0.85);
margin: 0 !important;
}
@media (max-width: 700px) {
.tk-journey-summary {
grid-template-columns: 48px 1fr auto;
padding: 18px 20px;
}
.tk-journey-step-period { display: none; }
.tk-journey-step-title { font-size: 16px; }
.tk-journey-body { padding: 8px 20px 24px; }
}
/* ============================================================
v0.7.0 — CTA TRIVIO sur fiche Sensei
============================================================ */
.tk-mp-trivio-cta {
background: #0E0E0C !important;
color: var(--tk-washi, #F7F2E7);
text-align: center;
}
.tk-trivio-cta-inner {
max-width: 580px;
margin: 0 auto;
}
.tk-trivio-cta-eyebrow {
font-size: 11px;
letter-spacing: 3px;
color: #E85D04;
font-weight: 500;
margin-bottom: 18px;
}
.tk-trivio-cta-title {
font-family: 'Noto Serif Display', Georgia, serif !important;
font-size: clamp(32px, 4vw, 42px) !important;
color: var(--tk-washi, #F7F2E7) !important;
margin: 0 0 16px !important;
font-weight: 400 !important;
line-height: 1.1 !important;
}
.tk-trivio-cta-lede {
font-size: 15px !important;
line-height: 1.6 !important;
color: rgba(247, 242, 231, 0.78) !important;
margin: 0 0 32px !important;
}
.tk-trivio-cta-btn {
display: inline-block;
padding: 16px 32px;
background: #E85D04;
color: var(--tk-washi, #F7F2E7) !important;
border-radius: 3px;
text-decoration: none !important;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.3px;
transition: background 0.2s, transform 0.2s;
}
.tk-trivio-cta-btn:hover {
background: #FF6B0A;
transform: translateY(-1px);
}
.tk-trivio-cta-note {
font-size: 11px !important;
color: rgba(247, 242, 231, 0.4) !important;
margin: 24px 0 0 !important;
letter-spacing: 0.5px;
font-style: italic;
}
/* ============================================================
v0.7.0 — GRILLE JOURNAL DES LETTRES
============================================================ */
.tk-letters-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
@media (max-width: 720px) {
.tk-letters-grid { grid-template-columns: 1fr; }
}
.tk-letter-card-link {
text-decoration: none !important;
color: inherit;
display: block;
}
.tk-letter-grid-card {
background: var(--tk-paper, #FCFAF4);
border: 0.5px solid rgba(0,0,0,0.08);
border-radius: 6px;
padding: 32px 28px;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s, border-color 0.3s;
height: 100%;
}
.tk-letter-card-link:hover .tk-letter-grid-card {
transform: translateY(-3px);
box-shadow: 0 12px 32px rgba(0,0,0,0.05);
border-color: rgba(185, 48, 26, 0.25);
}
.tk-letter-grid-header {
display: flex;
align-items: baseline;
gap: 14px;
margin-bottom: 14px;
}
.tk-letter-grid-num {
font-size: 10px;
letter-spacing: 2px;
color: var(--tk-stone, #888780);
font-weight: 500;
}
.tk-letter-grid-kanji {
font-family: 'Noto Serif JP', serif;
font-size: 22px;
color: var(--tk-shu, #B9301A);
line-height: 1;
}
.tk-letter-grid-title {
font-family: 'Noto Serif Display', Georgia, serif !important;
font-size: 22px !important;
color: var(--tk-sumi, #0a0a0a) !important;
margin: 0 0 4px !important;
font-weight: 400 !important;
line-height: 1.2 !important;
}
.tk-letter-grid-concept {
font-family: 'Noto Serif Display', Georgia, serif;
font-style: italic;
font-size: 13px;
color: var(--tk-stone, #888780);
margin-bottom: 14px;
}
.tk-letter-grid-teaser {
font-size: 13.5px !important;
line-height: 1.6 !important;
color: var(--tk-ink, #3a3a3a) !important;
margin: 0 0 18px !important;
}
.tk-letter-grid-cta {
font-size: 11px;
color: var(--tk-shu, #B9301A);
letter-spacing: 1.5px;
font-weight: 500;
}
.tk-letters-grid-empty {
text-align: center;
padding: 80px 32px;
color: var(--tk-stone, #888780);
}
.tk-letters-grid-empty em {
font-family: 'Noto Serif Display', Georgia, serif;
font-size: 16px;
}
/* ============================================================
v0.7.2 — MASQUER FOOTER NEWSLETTER EXTERNE
La barre noire "La lettre du dimanche" dupliquee en pied
provient d un widget Elementor global du theme.
On la masque ici via CSS (signature : footer noir + bouton S'abonner)
============================================================ */
/* Cible le widget footer si Elementor : section qui contient un form newsletter
apres la section citation Sebata */
body > footer .elementor-widget-form,
body footer .ehp-footer .newsletter,
body footer .footer-newsletter,
body footer [class*="newsletter"]:not(.tk-letter-inner):not(.tk-home-letter),
body footer [class*="subscribe"]:not(.tk-letter-inner):not(.tk-home-letter) {
display: none !important;
}
/* Si une barre noire en pied de page contient une inscription email,
on la cache (signature CSS : couleur sombre + email input) */
body footer.site-footer .footer-bar,
body footer .footer-cta,
body .ehp-footer__newsletter,
body .ehp-footer__bottom {
display: none !important;
}
/* ============================================================
v0.7.2 — RETOUR AJAX FORMULAIRE NEWSLETTER
============================================================ */
.tk-newsletter-form {
position: relative;
}
.tk-newsletter-result {
flex-basis: 100%;
margin-top: 14px;
padding: 10px 14px;
font-size: 13px;
line-height: 1.5;
border-radius: 3px;
display: none;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.tk-newsletter-result:not(:empty) {
display: block;
}
.tk-newsletter-result.tk-newsletter-success {
background: rgba(232, 93, 4, 0.1);
color: #B9301A;
border-left: 3px solid #E85D04;
}
.tk-newsletter-result.tk-newsletter-error {
background: rgba(185, 48, 26, 0.1);
color: #8E2515;
border-left: 3px solid #B9301A;
}
.tk-newsletter-form-dark .tk-newsletter-result.tk-newsletter-success {
background: rgba(232, 93, 4, 0.15);
color: #FFB37A;
}
.tk-newsletter-form-dark .tk-newsletter-result.tk-newsletter-error {
background: rgba(232, 93, 4, 0.1);
color: #FFA07A;
}
/* ============================================================
v0.7.3 — ELIMINER LES GAPS BLANCS ENTRE SECTIONS
============================================================ */
/* Pas de marge en bas du body pour ne pas creer de bande blanche
avant le footer du theme */
body.tk-has-hanko-header {
background: var(--tk-washi, #F7F2E7);
}
/* Les sections doivent etre collees, pas de marge entre elles */
.tk-home-letter,
.tk-home-citation,
.tk-home-masters-v2,
.tk-home-pillars-natural {
margin: 0 !important;
}
/* Le footer du site (s il existe encore apres notre masquage) ne doit pas
creer de bande blanche au-dessus */
body.tk-has-hanko-header footer,
body.tk-has-hanko-header .site-footer,
body.tk-has-hanko-header [class*="footer"]:not(.tk-hanko-header) {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Forcer le bas de la derniere section a etre colle au footer */
.tk-home-citation {
border-bottom: none !important;
margin-bottom: 0 !important;
padding-bottom: 120px !important;
}
/* La section newsletter noire ne doit pas avoir de gap apres */
.tk-home-letter {
margin-bottom: 0 !important;
}
/* Si un footer noir externe persiste apres notre masquage agressif,
au moins il sera colle (pas de bande blanche entre lui et le contenu) */
body.tk-has-hanko-header > * {
margin-top: 0;
margin-bottom: 0;
}
/* ============================================================
v0.7.5 — HINT ROMAJI (fallback ultime audio)
============================================================ */
.tk-gloss-audio-hint {
display: block;
margin-top: 6px;
font-size: 11px;
color: var(--tk-stone, #888780);
font-style: italic;
letter-spacing: 1px;
}
/* ============================================================
v0.7.6 — PORTRAIT DANIELE WOW : SVG hanko composé
Remplace l ancien .tk-master-hanko (D · B simple)
============================================================ */
.tk-master-hanko-svg {
display: block;
width: 100%;
max-width: 280px;
height: auto;
margin: 0 auto;
}
/* Neutraliser l ancien CSS du hanko qui pouvait créer la duplication */
.tk-master-featured-portrait .tk-master-hanko {
display: none !important;
}
.tk-master-featured-portrait {
display: flex;
align-items: center;
justify-content: center;
}
/* ============================================================
v0.7.7 — MASQUER TITRES DE PAGE PAR DEFAUT (REGLE ERME PERMANENTE)
Sur TOUS les sites WP d Erme, jamais de titre de page par defaut.
Les titres sont dans le contenu via wp:heading.
============================================================ */
body.page .entry-title,
body.page .page-title,
body.page h1.entry-title,
body.page h1.page-title,
body.page header.entry-header,
body.page header.page-header,
body.page .elementor-page-title,
body.page .elementor-widget-theme-post-title,
body.page .ast-archive-title,
body.page .ast-post-title,
body.page .ehp-page-title,
body.page .ehp-header__title,
body.page .site-content > header,
body.page main > header.entry-header,
body.single-page .entry-title,
.page .post-title.page-title {
display: none !important;
visibility: hidden !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* ============================================================
v0.7.8 — TOPBAR (lang FR/EN + Contact) au-dessus du hanko
============================================================ */
.tk-topbar {
background: var(--tk-sumi, #0a0a0a);
color: var(--tk-washi, #F7F2E7);
border-bottom: 0.5px solid rgba(247, 242, 231, 0.08);
position: relative;
z-index: 10000;
}
.tk-topbar-inner {
max-width: 1240px;
margin: 0 auto;
padding: 7px 32px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
letter-spacing: 1.5px;
}
.tk-topbar-lang {
display: flex;
align-items: center;
gap: 8px;
}
.tk-lang-link {
color: rgba(247, 242, 231, 0.55) !important;
text-decoration: none !important;
font-weight: 500;
letter-spacing: 1.5px;
transition: color 0.2s;
}
.tk-lang-link:hover { color: var(--tk-washi, #F7F2E7) !important; }
.tk-lang-active { color: #E85D04 !important; }
.tk-lang-sep { color: rgba(247, 242, 231, 0.25); }
.tk-topbar-contact {
color: var(--tk-washi, #F7F2E7) !important;
text-decoration: none !important;
font-weight: 500;
letter-spacing: 2.5px;
padding: 2px 0;
border-bottom: 1px solid transparent;
transition: border-color 0.2s, color 0.2s;
}
.tk-topbar-contact:hover {
color: #E85D04 !important;
border-bottom-color: #E85D04;
}
@media (max-width: 600px) {
.tk-topbar-inner { padding: 6px 20px; font-size: 10px; }
.tk-topbar-contact { letter-spacing: 2px; }
}
/* ============================================================
v0.7.8 — PAGE CONTACT (grand format editorial)
============================================================ */
.tk-contact-lede {
font-family: 'Noto Serif Display', Georgia, serif !important;
font-size: clamp(18px, 2.4vw, 22px) !important;
line-height: 1.55 !important;
color: var(--tk-ink, #3a3a3a) !important;
font-style: italic !important;
margin: 16px 0 0 !important;
}
.tk-contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
@media (max-width: 700px) { .tk-contact-grid { grid-template-columns: 1fr; } }
.tk-contact-card {
background: #fff;
border: 1px solid rgba(0,0,0,0.08);
border-radius: 6px;
padding: 36px;
transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.tk-contact-card:hover {
border-color: var(--tk-shu, #B9301A);
transform: translateY(-3px);
box-shadow: 0 14px 32px rgba(185, 48, 26, 0.08);
}
.tk-contact-card-email .tk-contact-icon {
color: var(--tk-shu, #B9301A);
margin-bottom: 20px;
}
.tk-contact-card-community .tk-contact-icon {
color: #E85D04;
margin-bottom: 20px;
}
.tk-contact-label {
font-size: 10px;
letter-spacing: 3px;
font-weight: 600;
color: var(--tk-shu, #B9301A);
margin-bottom: 8px;
}
.tk-contact-title {
font-family: 'Noto Serif Display', Georgia, serif !important;
font-size: 26px !important;
color: var(--tk-sumi, #0a0a0a) !important;
margin: 0 0 14px !important;
font-weight: 400 !important;
line-height: 1.15 !important;
}
.tk-contact-desc {
font-size: 14px !important;
line-height: 1.6 !important;
color: var(--tk-ink, #3a3a3a) !important;
margin: 0 0 20px !important;
}
.tk-contact-mail-link {
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 14px;
color: var(--tk-shu, #B9301A) !important;
text-decoration: none !important;
font-weight: 500;
border-bottom: 1px solid var(--tk-shu, #B9301A);
padding-bottom: 2px;
transition: color 0.2s, border-color 0.2s;
}
.tk-contact-mail-link:hover {
color: #E85D04 !important;
border-bottom-color: #E85D04;
}
.tk-contact-postal-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
}
@media (max-width: 700px) { .tk-contact-postal-grid { grid-template-columns: 1fr; gap: 32px; } }
.tk-contact-postal-address {
font-size: 14px !important;
line-height: 1.65 !important;
color: var(--tk-ink, #3a3a3a) !important;
margin: 12px 0 !important;
}
.tk-contact-postal-address a {
color: var(--tk-shu, #B9301A) !important;
}
/* ============================================================
v0.7.8 — FLIP CARDS 3 ROUTES THEMATIQUES
============================================================ */
.tk-routes-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
perspective: 1600px;
}
@media (max-width: 1024px) { .tk-routes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .tk-routes-grid { grid-template-columns: 1fr; } }
.tk-route-flip {
position: relative;
min-height: 420px;
cursor: pointer;
border: none;
background: transparent;
outline: none;
}
.tk-route-flip:focus-visible {
outline: 2px solid #E85D04;
outline-offset: 4px;
border-radius: 4px;
}
.tk-route-flip-inner {
position: relative;
width: 100%;
height: 100%;
min-height: 420px;
transition: transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1);
transform-style: preserve-3d;
}
.tk-route-flip.is-flipped .tk-route-flip-inner {
transform: rotateY(180deg);
}
.tk-route-flip-front,
.tk-route-flip-back {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
border-radius: 4px;
padding: 36px 32px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
/* RECTO : carte avec kanji watermark */
.tk-route-flip-front {
background: rgba(247, 242, 231, 0.04);
border: 1px solid rgba(247, 242, 231, 0.18);
overflow: hidden;
position: relative;
transition: border-color 0.3s, background 0.3s;
}
.tk-route-flip:hover .tk-route-flip-front {
border-color: #E85D04;
background: rgba(232, 93, 4, 0.06);
}
.tk-route-kanji {
position: absolute;
right: 24px;
bottom: 8px;
font-family: 'Noto Serif JP', serif;
font-size: 180px;
line-height: 1;
color: rgba(232, 93, 4, 0.08);
pointer-events: none;
font-weight: 400;
}
.tk-route-num {
font-family: 'Noto Serif Display', Georgia, serif;
font-size: 36px;
color: var(--tk-shu, #B9301A);
line-height: 1;
margin-bottom: 6px;
z-index: 2;
}
.tk-route-romaji {
font-size: 10px;
letter-spacing: 4px;
color: rgba(247, 242, 231, 0.5);
margin-bottom: 18px;
z-index: 2;
}
.tk-route-name {
font-family: 'Noto Serif Display', Georgia, serif !important;
font-size: 26px !important;
color: var(--tk-washi, #F7F2E7) !important;
margin: 0 0 10px !important;
font-weight: 400 !important;
line-height: 1.15 !important;
z-index: 2;
}
.tk-route-meta {
font-size: 11px;
color: rgba(247, 242, 231, 0.55);
letter-spacing: 1px;
margin-bottom: 20px;
z-index: 2;
}
.tk-route-desc {
font-size: 13.5px !important;
line-height: 1.65 !important;
color: rgba(247, 242, 231, 0.78) !important;
margin: 0 0 auto !important;
flex-grow: 1;
z-index: 2;
position: relative;
}
.tk-route-cta {
margin-top: 20px;
color: #E85D04;
font-size: 11px;
letter-spacing: 2px;
font-weight: 600;
z-index: 2;
}
/* VERSO : itineraire detaille */
.tk-route-flip-back {
transform: rotateY(180deg);
background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
border: 1px solid rgba(232, 93, 4, 0.35);
color: var(--tk-washi, #F7F2E7);
overflow-y: auto;
padding: 28px 26px;
}
.tk-route-back-header {
display: flex;
align-items: baseline;
gap: 14px;
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 0.5px solid rgba(247, 242, 231, 0.15);
}
.tk-route-back-num {
font-family: 'Noto Serif Display', Georgia, serif;
font-size: 24px;
color: #E85D04;
}
.tk-route-back-name {
font-family: 'Noto Serif Display', Georgia, serif !important;
font-size: 18px !important;
color: var(--tk-washi, #F7F2E7) !important;
margin: 0 !important;
font-weight: 400 !important;
line-height: 1.2 !important;
}
.tk-route-back-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 20px;
padding: 14px;
background: rgba(247, 242, 231, 0.04);
border-radius: 3px;
}
.tk-route-back-stats > div {
text-align: center;
}
.tk-route-back-stats span {
display: block;
font-size: 9px;
letter-spacing: 1.5px;
color: rgba(232, 93, 4, 0.85);
margin-bottom: 4px;
}
.tk-route-back-stats strong {
font-family: 'Noto Serif Display', Georgia, serif;
font-size: 12px;
color: var(--tk-washi, #F7F2E7);
font-weight: 400;
line-height: 1.2;
display: block;
}
.tk-route-back-stops {
list-style: none !important;
padding: 0 !important;
margin: 0 0 20px !important;
counter-reset: stops;
}
.tk-route-back-stops li {
counter-increment: stops;
list-style: none !important;
padding: 10px 0 10px 28px;
border-bottom: 0.5px solid rgba(247, 242, 231, 0.1);
position: relative;
font-size: 12px;
}
.tk-route-back-stops li:last-child { border-bottom: none; }
.tk-route-back-stops li::before {
content: counter(stops);
position: absolute;
left: 0;
top: 12px;
width: 20px;
height: 20px;
background: rgba(232, 93, 4, 0.15);
color: #E85D04;
border-radius: 50%;
font-family: 'Noto Serif Display', Georgia, serif;
font-size: 11px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.tk-route-stop-name {
display: block;
color: var(--tk-washi, #F7F2E7);
font-weight: 500;
font-size: 13px;
margin-bottom: 2px;
}
.tk-route-stop-day {
display: block;
color: rgba(247, 242, 231, 0.6);
font-size: 11px;
font-style: italic;
}
.tk-route-back-tips {
padding: 12px 14px;
background: rgba(232, 93, 4, 0.08);
border-left: 2px solid #E85D04;
border-radius: 0 3px 3px 0;
margin-bottom: 14px;
}
.tk-route-tips-label {
font-size: 9px;
letter-spacing: 1.5px;
color: #E85D04;
font-weight: 600;
margin-bottom: 4px;
}
.tk-route-back-tips p {
font-size: 11.5px !important;
line-height: 1.5 !important;
color: rgba(247, 242, 231, 0.85) !important;
margin: 0 !important;
font-style: italic;
}
.tk-route-back-flip {
color: #E85D04;
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 500;
margin-top: auto;
padding-top: 10px;
border-top: 0.5px solid rgba(247, 242, 231, 0.15);
}
/* Neutraliser l ancien CSS tk-trail-* */
.tk-trail-card, .tk-trails-grid { display: none !important; }
/* ============================================================
v0.7.8 — STATS LEGEND : Ajustement police pour 60+ spots
============================================================ */
.tk-map-legend-stats {
font-size: 11px !important;
white-space: nowrap;
}
/* ============================================================
v0.8.0 — CARTE INTERACTIVE STYLE TRIVIO
Header + controls + sidebar legend + canvas
============================================================ */
.tk-map-app {
background: var(--tk-paper, #FCFAF4);
border: 0.5px solid rgba(0, 0, 0, 0.08);
border-radius: 6px;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
margin: 24px 0;
}
/* Mode plein-ecran fallback (si Fullscreen API echoue) */
.tk-map-app.is-fullscreen-fallback {
position: fixed;
inset: 0;
z-index: 100000;
margin: 0;
border-radius: 0;
background: var(--tk-washi, #F7F2E7);
}
.tk-map-app.is-fullscreen-fallback .tk-map-canvas {
height: calc(100vh - 80px) !important;
}
.tk-map-app:fullscreen .tk-map-canvas {
height: calc(100vh - 80px) !important;
}
/* === HEADER === */
.tk-map-app-header {
background: var(--tk-sumi, #0a0a0a);
color: var(--tk-washi, #F7F2E7);
padding: 18px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
border-bottom: 0.5px solid rgba(247, 242, 231, 0.1);
}
.tk-map-app-title-wrap {
display: flex;
align-items: center;
gap: 16px;
}
.tk-map-app-kanji {
font-family: 'Noto Serif JP', serif;
font-size: 32px;
color: var(--tk-shu, #B9301A);
line-height: 1;
opacity: 0.85;
}
.tk-map-app-eyebrow {
font-size: 10px;
letter-spacing: 2.5px;
color: #E85D04;
font-weight: 600;
margin-bottom: 4px;
}
.tk-map-app-title {
font-family: 'Noto Serif Display', Georgia, serif !important;
font-size: 18px !important;
color: var(--tk-washi, #F7F2E7) !important;
margin: 0 !important;
font-weight: 400 !important;
line-height: 1.2 !important;
}
/* === CONTROLS === */
.tk-map-app-controls {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.tk-map-control-label {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(247, 242, 231, 0.08);
border-radius: 3px;
padding: 0 4px 0 10px;
color: rgba(247, 242, 231, 0.7);
}
.tk-map-control-icon {
display: inline-flex;
}
.tk-map-layer-selector {
background: transparent;
color: var(--tk-washi, #F7F2E7);
border: none;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 12px;
letter-spacing: 0.4px;
padding: 8px 10px;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23F7F2E7' stroke-width='1.8'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
padding-right: 26px;
}
.tk-map-layer-selector:focus { outline: 1px solid #E85D04; }
.tk-map-layer-selector option { background: #1a1a1a; color: #F7F2E7; }
.tk-map-control-btn {
background: rgba(247, 242, 231, 0.08);
color: var(--tk-washi, #F7F2E7);
border: none;
border-radius: 3px;
padding: 8px 14px;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 12px;
letter-spacing: 0.5px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 7px;
transition: background 0.2s;
}
.tk-map-control-btn:hover { background: rgba(232, 93, 4, 0.25); }
.tk-map-control-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.tk-map-control-btn.is-loading { opacity: 0.6; cursor: wait; }
.tk-map-control-btn.is-loading svg { animation: tk-spin 1s linear infinite; }
@keyframes tk-spin { to { transform: rotate(360deg); } }
@media (max-width: 720px) {
.tk-map-app-controls .tk-map-control-btn span { display: none; }
.tk-map-app-controls .tk-map-control-btn { padding: 8px 10px; }
}
/* === BODY (sidebar + canvas) === */
.tk-map-app-body {
display: grid;
grid-template-columns: 280px 1fr;
gap: 0;
}
@media (max-width: 900px) {
.tk-map-app-body { grid-template-columns: 1fr; }
}
/* === SIDEBAR === */
.tk-map-app-sidebar {
background: var(--tk-washi, #F7F2E7);
padding: 24px 20px;
border-right: 0.5px solid rgba(0, 0, 0, 0.08);
display: flex;
flex-direction: column;
gap: 24px;
}
@media (max-width: 900px) {
.tk-map-app-sidebar { border-right: none; border-bottom: 0.5px solid rgba(0, 0, 0, 0.08); }
}
.tk-map-app-stats { text-align: left; }
.tk-map-stat {
margin-bottom: 14px;
}
.tk-map-stat-num {
font-family: 'Noto Serif Display', Georgia, serif;
font-size: 42px;
color: var(--tk-shu, #B9301A);
line-height: 1;
font-weight: 400;
}
.tk-map-stat-label {
font-size: 11px;
color: var(--tk-stone, #888780);
letter-spacing: 1.5px;
margin-top: 4px;
text-transform: uppercase;
}
.tk-map-stat-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
padding-top: 14px;
border-top: 0.5px solid rgba(0, 0, 0, 0.08);
}
.tk-map-stat-mini {
text-align: center;
}
.tk-map-stat-mini strong {
display: block;
font-family: 'Noto Serif Display', Georgia, serif;
font-size: 18px;
color: var(--tk-sumi, #0a0a0a);
font-weight: 400;
}
.tk-map-stat-mini span {
display: block;
font-size: 9.5px;
letter-spacing: 1.5px;
color: var(--tk-stone, #888780);
text-transform: uppercase;
margin-top: 2px;
}
.tk-map-app-legend {
border-top: 0.5px solid rgba(0, 0, 0, 0.08);
padding-top: 20px;
}
.tk-map-legend-title {
font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
font-size: 10px !important;
letter-spacing: 2.5px !important;
color: var(--tk-shu, #B9301A) !important;
margin: 0 0 14px !important;
text-transform: uppercase;
font-weight: 600 !important;
}
.tk-map-legend-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.tk-map-legend-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 3px;
cursor: pointer;
transition: background 0.2s;
border: 0.5px solid transparent;
}
.tk-map-legend-item[data-filter]:hover {
background: rgba(0, 0, 0, 0.03);
}
.tk-map-legend-item.is-active {
background: rgba(185, 48, 26, 0.06);
border-color: rgba(185, 48, 26, 0.2);
}
.tk-map-legend-signature {
cursor: default;
}
.tk-map-legend-dot {
width: 12px;
height: 12px;
border-radius: 50%;
flex-shrink: 0;
border: 1.5px solid #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.tk-map-legend-dot-sig {
background: linear-gradient(135deg, #E85D04 0%, #B9301A 100%);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 8px;
line-height: 1;
}
.tk-map-legend-label {
font-size: 12px;
color: var(--tk-ink, #3a3a3a);
line-height: 1.4;
}
.tk-map-legend-hint {
font-size: 10px !important;
color: var(--tk-stone, #888780) !important;
font-style: italic;
margin: 10px 0 0 !important;
line-height: 1.4 !important;
}
.tk-map-app-credit {
margin-top: auto;
padding-top: 20px;
border-top: 0.5px solid rgba(0, 0, 0, 0.06);
font-size: 10px;
color: var(--tk-stone, #888780);
letter-spacing: 0.5px;
}
.tk-map-app-credit strong {
color: var(--tk-sumi, #0a0a0a);
font-weight: 600;
margin-left: 4px;
}
/* === CANVAS === */
.tk-map-app-canvas-wrap {
position: relative;
}
.tk-map-app-canvas-wrap .tk-map-canvas {
width: 100%;
background: #e8e3d4;
}
/* === MARKERS amélioration === */
.tk-map-marker-signature .tk-map-marker-dot {
width: 16px !important;
height: 16px !important;
border: 2px solid #fff;
box-shadow: 0 2px 6px rgba(185, 48, 26, 0.4);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.tk-map-marker-star {
position: absolute;
color: #FFD700;
font-size: 10px;
line-height: 1;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}
.tk-map-marker-self-dot {
background: #2563EB !important;
border: 3px solid #fff !important;
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.25) !important;
animation: tk-pulse-self 2s ease-in-out infinite;
}
@keyframes tk-pulse-self {
0%, 100% { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.25); }
50% { box-shadow: 0 0 0 10px rgba(37, 99, 235, 0.05); }
}
.tk-map-popup-sig-badge {
display: inline-block;
font-size: 9px;
letter-spacing: 1.5px;
background: linear-gradient(135deg, #E85D04 0%, #B9301A 100%);
color: #fff;
padding: 2px 6px;
border-radius: 2px;
margin-left: 8px;
vertical-align: middle;
font-weight: 600;
}
/* === Neutraliser ancienne UI map === */
.tk-map-wrap > .tk-map-legend:not(.tk-map-app-legend) { display: none !important; }
/* ============================================================
v0.8.1 — S'OUTILLER : ACTIONS / LONGUEURS / KEBARI FLIP / SHOPS
============================================================ */
/* === 1. ACTIONS DE CANNE (SVG + liste) === */
.tk-rods-actions-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 48px;
align-items: start;
margin-top: 40px;
}
@media (max-width: 900px) {
.tk-rods-actions-grid { grid-template-columns: 1fr; gap: 32px; }
}
.tk-rods-actions-illustration {
background: rgba(247, 242, 231, 0.04);
border: 1px solid rgba(247, 242, 231, 0.1);
border-radius: 6px;
padding: 20px;
position: relative;
}
.tk-rods-svg {
width: 100%;
height: auto;
display: block;
}
.tk-rods-actions-list {
display: flex;
flex-direction: column;
gap: 18px;
}
.tk-rod-action-item {
background: rgba(247, 242, 231, 0.04);
border: 0.5px solid rgba(247, 242, 231, 0.12);
border-radius: 4px;
padding: 18px 22px;
transition: border-color 0.3s, background 0.3s;
}
.tk-rod-action-item:hover {
border-color: rgba(232, 93, 4, 0.3);
}
.tk-rod-action-reco {
background: rgba(185, 48, 26, 0.08);
border-color: var(--tk-shu, #B9301A);
}
.tk-rod-action-header {
display: flex;
align-items: baseline;
gap: 16px;
margin-bottom: 8px;
flex-wrap: wrap;
}
.tk-rod-action-ratio {
font-family: 'Noto Serif Display', Georgia, serif;
font-size: 32px;
line-height: 1;
font-weight: 400;
}
.tk-rod-action-label {
color: var(--tk-washi, #F7F2E7);
font-size: 15px;
font-weight: 500;
}
.tk-rod-action-badge {
background: #E85D04;
color: #fff;
font-size: 9px;
letter-spacing: 1.5px;
padding: 3px 8px;
border-radius: 2px;
font-weight: 600;
}
.tk-rod-action-desc {
color: rgba(247, 242, 231, 0.8) !important;
font-size: 13px !important;
line-height: 1.55 !important;
margin: 0 0 8px !important;
}
.tk-rod-action-desc strong { color: #E85D04; }
.tk-rod-action-usecase {
font-size: 11.5px;
color: rgba(247, 242, 231, 0.6);
font-style: italic;
line-height: 1.4;
}
.tk-rod-action-usecase strong {
color: rgba(232, 93, 4, 0.85);
font-style: normal;
letter-spacing: 0.5px;
}
/* === 2. LONGUEURS / CATEGORIES === */
.tk-rod-lengths-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 14px;
margin-top: 40px;
}
@media (max-width: 1100px) { .tk-rod-lengths-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .tk-rod-lengths-grid { grid-template-columns: 1fr; } }
.tk-rod-length-card {
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 4px;
padding: 0 20px 22px;
position: relative;
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.tk-rod-length-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}
.tk-rod-length-card-reco {
border-color: var(--tk-shu, #B9301A);
box-shadow: 0 4px 14px rgba(185, 48, 26, 0.08);
}
.tk-rod-length-bar {
height: 4px;
margin: 0 -20px 22px;
width: calc(100% + 40px);
}
.tk-rod-length-size {
font-family: 'Noto Serif Display', Georgia, serif;
font-size: 28px;
color: var(--tk-sumi, #0a0a0a);
line-height: 1;
margin-bottom: 6px;
}
.tk-rod-length-label {
font-size: 11px;
letter-spacing: 1.5px;
color: var(--tk-shu, #B9301A);
font-weight: 600;
margin-bottom: 14px;
text-transform: uppercase;
}
.tk-rod-length-desc {
font-size: 12px !important;
line-height: 1.55 !important;
color: var(--tk-ink, #3a3a3a) !important;
margin: 0 0 14px !important;
}
.tk-rod-length-desc strong { color: var(--tk-shu, #B9301A); }
.tk-rod-length-use {
font-size: 11px;
color: var(--tk-stone, #888780);
font-style: italic;
padding-top: 10px;
border-top: 0.5px solid rgba(0, 0, 0, 0.08);
line-height: 1.4;
}
/* === 3. ROD SELECTOR : amélioration du résultat (liens d'achat) === */
.tk-rs-model {
display: grid;
grid-template-columns: 1fr auto;
gap: 20px;
align-items: center;
padding: 14px 0;
border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
}
.tk-rs-model:last-child { border-bottom: none; }
.tk-rs-model-info strong {
display: block;
font-size: 14px;
color: var(--tk-sumi, #0a0a0a);
margin-bottom: 2px;
}
.tk-rs-model-info span {
font-size: 12px;
color: var(--tk-stone, #888780);
line-height: 1.45;
}
.tk-rs-model-right {
text-align: right;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
}
.tk-rs-model-price {
font-family: 'Noto Serif Display', Georgia, serif;
font-size: 15px;
color: var(--tk-shu, #B9301A);
white-space: nowrap;
}
.tk-rs-model-link {
display: inline-block;
background: var(--tk-shu, #B9301A);
color: #fff !important;
font-size: 10px;
letter-spacing: 1.5px;
padding: 4px 10px;
border-radius: 2px;
text-decoration: none !important;
font-weight: 600;
transition: background 0.2s;
}
.tk-rs-model-link:hover { background: #E85D04; }
.tk-rs-rec-disclaimer {
margin-top: 18px;
padding-top: 14px;
border-top: 0.5px dashed rgba(0, 0, 0, 0.15);
font-size: 11px;
color: var(--tk-stone, #888780);
font-style: italic;
line-height: 1.5;
}
/* === 4. CALCULATEUR : ligne 'Pourquoi' === */
.tk-lc-rec-reason em {
font-style: italic;
color: var(--tk-stone, #888780) !important;
font-weight: 400;
line-height: 1.5;
font-size: 12.5px;
text-align: right;
}
.tk-trivio-hint {
margin-top: 24px !important;
padding-top: 16px;
border-top: 0.5px dashed rgba(0, 0, 0, 0.12);
font-size: 12.5px !important;
color: var(--tk-stone, #888780) !important;
font-style: italic;
text-align: center;
}
.tk-trivio-hint a {
color: var(--tk-shu, #B9301A) !important;
text-decoration: none !important;
border-bottom: 1px solid currentColor;
}
/* === 5. KEBARI FLIP CARDS === */
.tk-kebari-flip-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
margin-top: 40px;
perspective: 1600px;
}
@media (max-width: 1100px) { .tk-kebari-flip-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tk-kebari-flip-grid { grid-template-columns: 1fr; } }
.tk-kebari-flip {
position: relative;
min-height: 380px;
cursor: pointer;
border: none;
background: transparent;
outline: none;
}
.tk-kebari-flip:focus-visible {
outline: 2px solid #E85D04;
outline-offset: 4px;
border-radius: 4px;
}
.tk-kebari-flip-inner {
position: relative;
width: 100%;
height: 100%;
min-height: 380px;
transition: transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1);
transform-style: preserve-3d;
}
.tk-kebari-flip.is-flipped .tk-kebari-flip-inner {
transform: rotateY(180deg);
}
.tk-kebari-flip-front,
.tk-kebari-flip-back {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
border-radius: 4px;
padding: 24px 20px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
/* RECTO : illustration SVG */
.tk-kebari-flip-front {
background: rgba(247, 242, 231, 0.06);
border: 1px solid rgba(247, 242, 231, 0.18);
align-items: center;
text-align: center;
transition: border-color 0.3s, background 0.3s;
}
.tk-kebari-flip:hover .tk-kebari-flip-front {
border-color: rgba(232, 93, 4, 0.5);
background: rgba(232, 93, 4, 0.04);
}
.tk-kebari-flip-svg {
width: 100%;
margin-bottom: 16px;
background: #FCFAF4;
border-radius: 3px;
padding: 12px 8px;
}
.tk-kebari-svg {
width: 100%;
height: auto;
display: block;
}
.tk-kebari-flip-name {
font-family: 'Noto Serif Display', Georgia, serif !important;
font-size: 19px !important;
color: var(--tk-washi, #F7F2E7) !important;
margin: 0 0 4px !important;
font-weight: 400 !important;
line-height: 1.2 !important;
}
.tk-kebari-flip-jp {
font-family: 'Noto Serif JP', serif;
font-size: 16px;
color: #E85D04;
margin-bottom: 12px;
}
.tk-kebari-flip-tagline {
font-size: 12px;
line-height: 1.5;
color: rgba(247, 242, 231, 0.75);
margin-bottom: auto;
}
.tk-kebari-flip-cta {
color: #E85D04;
font-size: 10px;
letter-spacing: 2px;
font-weight: 600;
margin-top: 16px;
}
/* VERSO : recette */
.tk-kebari-flip-back {
transform: rotateY(180deg);
background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
border: 1px solid rgba(232, 93, 4, 0.4);
overflow-y: auto;
padding: 20px 18px;
}
.tk-kebari-flip-back-name {
font-family: 'Noto Serif Display', Georgia, serif !important;
font-size: 17px !important;
color: var(--tk-washi, #F7F2E7) !important;
margin: 0 0 2px !important;
font-weight: 400 !important;
}
.tk-kebari-flip-back-jp {
font-family: 'Noto Serif JP', serif;
font-size: 13px;
color: #E85D04;
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 0.5px solid rgba(247, 242, 231, 0.12);
}
.tk-kebari-flip-back-master,
.tk-kebari-flip-back-when {
margin-bottom: 10px;
}
.tk-kebari-flip-back-label {
display: block;
font-size: 9px;
letter-spacing: 1.5px;
color: rgba(232, 93, 4, 0.85);
margin-bottom: 3px;
}
.tk-kebari-flip-back-master strong,
.tk-kebari-flip-back-when strong {
font-size: 12px;
color: var(--tk-washi, #F7F2E7);
font-weight: 500;
line-height: 1.3;
display: block;
}
.tk-kebari-flip-back-desc {
font-size: 11.5px !important;
line-height: 1.55 !important;
color: rgba(247, 242, 231, 0.78) !important;
margin: 12px 0 14px !important;
}
.tk-kebari-flip-back-recipe {
padding: 10px 12px;
background: rgba(232, 93, 4, 0.08);
border-left: 2px solid #E85D04;
border-radius: 0 3px 3px 0;
margin-bottom: 14px;
}
.tk-kebari-flip-back-recipe p {
font-size: 11px !important;
line-height: 1.5 !important;
color: rgba(247, 242, 231, 0.9) !important;
margin: 0 !important;
font-style: italic;
}
.tk-kebari-flip-back-flip {
margin-top: auto;
padding-top: 10px;
color: #E85D04;
font-size: 9px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 500;
border-top: 0.5px solid rgba(247, 242, 231, 0.12);
}
/* Désactiver l'ancienne grille .tk-kebari-grid */
.tk-kebari-grid { display: none !important; }
/* === 6. SHOPS QC === */
.tk-shops-section {
margin-top: 56px;
}
.tk-shops-section-minor { margin-top: 40px; }
.tk-shops-section-title {
display: flex;
align-items: baseline;
gap: 14px;
margin-bottom: 16px;
padding-bottom: 14px;
border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
}
.tk-shops-section-num {
font-family: 'Noto Serif Display', Georgia, serif;
font-size: 22px;
color: var(--tk-shu, #B9301A);
line-height: 1;
}
.tk-shops-section-title h3 {
font-family: 'Noto Serif Display', Georgia, serif !important;
font-size: 20px !important;
color: var(--tk-sumi, #0a0a0a) !important;
margin: 0 !important;
font-weight: 400 !important;
}
.tk-shops-section-lede {
font-size: 14px !important;
color: var(--tk-ink, #3a3a3a) !important;
margin: 0 0 24px !important;
line-height: 1.55 !important;
}
.tk-shops-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.tk-shops-grid-3 {
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1024px) { .tk-shops-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .tk-shops-grid-3 { grid-template-columns: 1fr; } }
.tk-shop-card {
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 4px;
padding: 22px 22px 18px;
display: flex;
flex-direction: column;
transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.tk-shop-card:hover {
border-color: rgba(185, 48, 26, 0.3);
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.04);
}
.tk-shop-card-featured {
background: linear-gradient(135deg, rgba(185, 48, 26, 0.05) 0%, rgba(232, 93, 4, 0.04) 100%);
border: 1px solid rgba(185, 48, 26, 0.4);
padding: 28px;
}
.tk-shop-flag {
display: inline-block;
background: var(--tk-shu, #B9301A);
color: #fff;
font-size: 9px;
letter-spacing: 2px;
padding: 4px 10px;
border-radius: 2px;
font-weight: 600;
margin-bottom: 12px;
align-self: flex-start;
}
.tk-shop-name {
font-family: 'Noto Serif Display', Georgia, serif !important;
font-size: 18px !important;
color: var(--tk-sumi, #0a0a0a) !important;
margin: 0 0 4px !important;
font-weight: 400 !important;
line-height: 1.2 !important;
}
.tk-shop-card-featured .tk-shop-name { font-size: 22px !important; }
.tk-shop-loc {
font-size: 11px;
letter-spacing: 1px;
color: var(--tk-stone, #888780);
text-transform: uppercase;
margin-bottom: 12px;
}
.tk-shop-desc {
font-size: 13px !important;
line-height: 1.6 !important;
color: var(--tk-ink, #3a3a3a) !important;
margin: 0 0 14px !important;
flex-grow: 1;
}
.tk-shop-desc strong { color: var(--tk-sumi, #0a0a0a); }
.tk-shop-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 14px;
}
.tk-shop-tags span {
font-size: 10px;
letter-spacing: 0.5px;
padding: 3px 8px;
background: rgba(185, 48, 26, 0.08);
color: var(--tk-shu, #B9301A);
border-radius: 2px;
font-weight: 500;
}
.tk-shop-link {
color: var(--tk-shu, #B9301A) !important;
font-size: 12px;
font-weight: 500;
text-decoration: none !important;
border-bottom: 1px solid currentColor;
padding-bottom: 1px;
align-self: flex-start;
transition: color 0.2s;
}
.tk-shop-link:hover { color: #E85D04 !important; }
.tk-shops-list-minor {
display: flex;
flex-direction: column;
gap: 10px;
font-size: 13px;
color: var(--tk-ink, #3a3a3a);
background: rgba(0, 0, 0, 0.02);
padding: 18px 22px;
border-radius: 4px;
border: 0.5px solid rgba(0, 0, 0, 0.06);
}
.tk-shops-list-minor div { line-height: 1.5; }
.tk-shops-list-minor strong { color: var(--tk-sumi, #0a0a0a); }
.tk-shops-list-minor a {
color: var(--tk-shu, #B9301A) !important;
}
/* === 7. Daniele : guide page ajustement === */
.tk-mp-shop-value-list {
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
font-size: 12px !important;
font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
color: rgba(247, 242, 231, 0.85) !important;
text-decoration: none !important;
border: none !important;
padding: 0 !important;
line-height: 1.5 !important;
}
.tk-mp-shop-value-list span {
display: block;
}
/* ============================================================
v0.8.2 — JOURNAL : articles longs bilingues
============================================================ */
/* === ARTICLE HEADER === */
.tk-article {
background: var(--tk-washi, #F7F2E7);
}
.tk-article-header {
background-size: cover;
background-position: center;
background-color: var(--tk-sumi, #0a0a0a);
color: var(--tk-washi, #F7F2E7);
padding: 120px 32px 80px;
min-height: 480px;
display: flex;
align-items: flex-end;
}
.tk-article-header-inner {
max-width: 880px;
margin: 0 auto;
width: 100%;
}
.tk-article-eyebrow {
font-size: 11px;
letter-spacing: 3px;
color: #E85D04;
font-weight: 600;
margin-bottom: 18px;
}
.tk-article-title {
font-family: 'Noto Serif Display', Georgia, serif !important;
font-size: clamp(32px, 5vw, 56px) !important;
line-height: 1.1 !important;
color: var(--tk-washi, #F7F2E7) !important;
margin: 0 0 24px !important;
font-weight: 400 !important;
}
.tk-article-lede {
font-family: 'Noto Serif Display', Georgia, serif !important;
font-size: clamp(17px, 2vw, 22px) !important;
line-height: 1.5 !important;
color: rgba(247, 242, 231, 0.88) !important;
font-style: italic !important;
margin: 0 0 28px !important;
max-width: 720px;
}
.tk-article-meta {
display: flex;
align-items: center;
gap: 22px;
flex-wrap: wrap;
font-size: 12px;
color: rgba(247, 242, 231, 0.7);
letter-spacing: 0.4px;
}
.tk-article-meta-item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.tk-article-meta-langs {
margin-left: auto;
display: inline-flex;
gap: 6px;
}
.tk-article-meta-lang {
color: rgba(247, 242, 231, 0.55) !important;
text-decoration: none !important;
padding: 2px 8px;
border: 0.5px solid rgba(247, 242, 231, 0.2);
border-radius: 2px;
font-size: 11px;
letter-spacing: 1px;
transition: all 0.2s;
}
.tk-article-meta-lang.is-active {
color: #E85D04 !important;
border-color: #E85D04;
}
.tk-article-meta-lang:hover { color: var(--tk-washi, #F7F2E7) !important; }
/* === ARTICLE BODY (sidebar + content) === */
.tk-article-body {
max-width: 1180px;
margin: 0 auto;
padding: 64px 32px 80px;
display: grid;
grid-template-columns: 240px 1fr;
gap: 64px;
}
@media (max-width: 900px) {
.tk-article-body { grid-template-columns: 1fr; gap: 32px; padding: 48px 24px; }
}
.tk-article-aside {
position: sticky;
top: 100px;
align-self: start;
}
.tk-article-toc {
border-left: 1.5px solid var(--tk-shu, #B9301A);
padding-left: 20px;
margin-bottom: 36px;
}
.tk-article-toc-label {
font-size: 10px;
letter-spacing: 3px;
color: var(--tk-shu, #B9301A);
font-weight: 600;
margin-bottom: 14px;
text-transform: uppercase;
}
.tk-article-toc-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.tk-article-toc-list li {
list-style: none !important;
padding: 6px 0 !important;
margin: 0 !important;
line-height: 1.4 !important;
}
.tk-article-toc-list .tk-toc-h3 { padding-left: 14px !important; font-size: 12px !important; }
.tk-article-toc-list a {
color: var(--tk-ink, #3a3a3a) !important;
text-decoration: none !important;
font-size: 13px;
transition: color 0.2s;
border: none !important;
}
.tk-article-toc-list a:hover {
color: var(--tk-shu, #B9301A) !important;
}
.tk-article-share {
border-top: 0.5px solid rgba(0, 0, 0, 0.1);
padding-top: 20px;
}
.tk-article-share-label {
font-size: 10px;
letter-spacing: 3px;
color: var(--tk-stone, #888780);
font-weight: 600;
margin-bottom: 12px;
}
.tk-article-share-buttons {
display: flex;
gap: 10px;
}
.tk-article-share-buttons a,
.tk-article-share-buttons button {
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.05);
border: 0.5px solid rgba(0, 0, 0, 0.1);
color: var(--tk-ink, #3a3a3a);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
text-decoration: none !important;
transition: all 0.2s;
}
.tk-article-share-buttons a:hover,
.tk-article-share-buttons button:hover {
background: var(--tk-shu, #B9301A);
color: #fff;
border-color: var(--tk-shu, #B9301A);
transform: translateY(-1px);
}
.tk-article-content {
max-width: 720px;
font-family: 'Noto Serif Display', Georgia, serif;
}
.tk-article-content .tk-article-intro {
font-size: 19px !important;
line-height: 1.65 !important;
color: var(--tk-sumi, #0a0a0a) !important;
font-style: italic !important;
margin: 0 0 36px !important;
padding-bottom: 36px;
border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
}
.tk-article-content p {
font-size: 17px;
line-height: 1.75;
color: var(--tk-ink, #2a2a2a);
margin: 0 0 22px;
}
.tk-article-content h2 {
font-family: 'Noto Serif Display', Georgia, serif !important;
font-size: 28px !important;
line-height: 1.2 !important;
color: var(--tk-sumi, #0a0a0a) !important;
margin: 48px 0 18px !important;
font-weight: 400 !important;
padding-top: 24px;
border-top: 0.5px solid rgba(0, 0, 0, 0.06);
}
.tk-article-content h3 {
font-family: 'Noto Serif Display', Georgia, serif !important;
font-size: 22px !important;
line-height: 1.25 !important;
color: var(--tk-sumi, #0a0a0a) !important;
margin: 36px 0 14px !important;
font-weight: 400 !important;
}
.tk-article-content ul,
.tk-article-content ol {
margin: 0 0 22px !important;
padding-left: 24px !important;
}
.tk-article-content li {
font-size: 17px;
line-height: 1.7;
color: var(--tk-ink, #2a2a2a);
margin-bottom: 8px;
}
.tk-article-content strong {
color: var(--tk-sumi, #0a0a0a);
font-weight: 600;
}
.tk-article-content em {
font-style: italic;
color: var(--tk-ink, #3a3a3a);
}
.tk-article-content a {
color: var(--tk-shu, #B9301A);
text-decoration: none;
border-bottom: 1px solid var(--tk-shu, #B9301A);
transition: color 0.2s;
}
.tk-article-content a:hover { color: #E85D04; border-color: #E85D04; }
.tk-article-content blockquote {
border-left: 3px solid var(--tk-shu, #B9301A);
padding: 0 0 0 28px;
margin: 32px 0;
font-style: italic;
color: var(--tk-ink, #2a2a2a);
}
.tk-article-tags {
margin-top: 56px;
padding-top: 28px;
border-top: 0.5px solid rgba(0, 0, 0, 0.08);
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.tk-article-tags-label {
font-size: 10px;
letter-spacing: 2px;
color: var(--tk-stone, #888780);
font-weight: 600;
margin-right: 6px;
}
.tk-article-tag {
font-size: 12px;
padding: 4px 10px;
background: rgba(185, 48, 26, 0.08);
color: var(--tk-shu, #B9301A) !important;
border-radius: 2px;
text-decoration: none !important;
border: none !important;
transition: background 0.2s;
}
.tk-article-tag:hover {
background: var(--tk-shu, #B9301A);
color: #fff !important;
}
.tk-article-cta-newsletter {
margin-top: 64px;
padding: 36px;
background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
border-radius: 4px;
text-align: center;
color: var(--tk-washi, #F7F2E7);
}
.tk-article-cta-eyebrow {
font-size: 10px;
letter-spacing: 3px;
color: #E85D04;
font-weight: 600;
margin-bottom: 12px;
}
.tk-article-cta-newsletter h3 {
font-family: 'Noto Serif Display', Georgia, serif !important;
font-size: 28px !important;
color: var(--tk-washi, #F7F2E7) !important;
margin: 0 0 12px !important;
font-weight: 400 !important;
}
.tk-article-cta-newsletter p {
font-size: 14px !important;
color: rgba(247, 242, 231, 0.75) !important;
margin: 0 0 20px !important;
line-height: 1.6 !important;
}
.tk-article-cta-btn {
display: inline-block;
background: #E85D04 !important;
color: #fff !important;
padding: 12px 28px;
border-radius: 2px;
text-decoration: none !important;
font-size: 12px;
letter-spacing: 2px;
font-weight: 600;
border: none !important;
transition: background 0.2s;
}
.tk-article-cta-btn:hover { background: var(--tk-shu, #B9301A) !important; }
/* === RELATED === */
.tk-article-related {
background: rgba(0, 0, 0, 0.02);
padding: 80px 32px;
border-top: 0.5px solid rgba(0, 0, 0, 0.06);
}
.tk-article-related-inner {
max-width: 1180px;
margin: 0 auto;
}
.tk-article-related-title {
font-family: 'Noto Serif Display', Georgia, serif !important;
font-size: 26px !important;
color: var(--tk-sumi, #0a0a0a) !important;
margin: 0 0 32px !important;
font-weight: 400 !important;
}
.tk-article-related-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 900px) {
.tk-article-related-grid { grid-template-columns: 1fr; }
}
.tk-article-related-card {
background: #fff;
border: 0.5px solid rgba(0, 0, 0, 0.08);
border-radius: 4px;
overflow: hidden;
text-decoration: none !important;
color: inherit;
transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
display: block;
}
.tk-article-related-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
border-color: var(--tk-shu, #B9301A);
}
.tk-article-related-img {
height: 180px;
background-size: cover;
background-position: center;
}
.tk-article-related-body {
padding: 20px;
}
.tk-article-related-body h3 {
font-family: 'Noto Serif Display', Georgia, serif !important;
font-size: 17px !important;
color: var(--tk-sumi, #0a0a0a) !important;
margin: 0 0 8px !important;
font-weight: 400 !important;
line-height: 1.3 !important;
}
.tk-article-related-body p {
font-size: 13px !important;
color: var(--tk-ink, #3a3a3a) !important;
margin: 0 0 12px !important;
line-height: 1.5 !important;
}
.tk-article-related-meta {
font-size: 11px;
letter-spacing: 1px;
color: var(--tk-stone, #888780);
text-transform: uppercase;
}
/* === ARCHIVE === */
.tk-journal-archive {
max-width: 1180px;
margin: 0 auto;
padding: 96px 32px 80px;
background: var(--tk-washi, #F7F2E7);
}
.tk-journal-archive-header {
text-align: center;
margin-bottom: 56px;
padding-bottom: 36px;
border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
}
.tk-journal-archive-eyebrow {
font-size: 11px;
letter-spacing: 3px;
color: var(--tk-shu, #B9301A);
font-weight: 600;
margin-bottom: 14px;
}
.tk-journal-archive h1 {
font-family: 'Noto Serif Display', Georgia, serif !important;
font-size: clamp(40px, 6vw, 64px) !important;
color: var(--tk-sumi, #0a0a0a) !important;
margin: 0 0 16px !important;
font-weight: 400 !important;
line-height: 1.05 !important;
}
.tk-journal-archive-lede {
font-family: 'Noto Serif Display', Georgia, serif !important;
font-size: 18px !important;
color: var(--tk-ink, #3a3a3a) !important;
font-style: italic !important;
max-width: 640px;
margin: 0 auto !important;
line-height: 1.5 !important;
}
.tk-journal-archive-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
@media (max-width: 800px) {
.tk-journal-archive-grid { grid-template-columns: 1fr; }
}
.tk-journal-card {
background: #fff;
border: 0.5px solid rgba(0, 0, 0, 0.08);
border-radius: 4px;
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.tk-journal-card:hover {
transform: translateY(-3px);
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.06);
border-color: rgba(185, 48, 26, 0.2);
}
.tk-journal-card-link {
display: block;
text-decoration: none !important;
color: inherit !important;
}
.tk-journal-card-img {
height: 240px;
background-size: cover;
background-position: center;
background-color: #e8e3d4;
}
.tk-journal-card-body {
padding: 28px;
}
.tk-journal-card-topic {
font-size: 10px;
letter-spacing: 2.5px;
color: var(--tk-shu, #B9301A);
font-weight: 600;
margin-bottom: 12px;
}
.tk-journal-card-title {
font-family: 'Noto Serif Display', Georgia, serif !important;
font-size: 24px !important;
line-height: 1.2 !important;
color: var(--tk-sumi, #0a0a0a) !important;
margin: 0 0 12px !important;
font-weight: 400 !important;
}
.tk-journal-card-excerpt {
font-size: 14px !important;
line-height: 1.6 !important;
color: var(--tk-ink, #3a3a3a) !important;
margin: 0 0 16px !important;
}
.tk-journal-card-meta {
display: flex;
gap: 8px;
font-size: 11px;
color: var(--tk-stone, #888780);
letter-spacing: 0.5px;
}
.tk-journal-archive-pagination {
margin-top: 56px;
text-align: center;
}
.tk-journal-archive-pagination .nav-links {
display: inline-flex;
gap: 8px;
}
.tk-journal-archive-pagination a,
.tk-journal-archive-pagination span {
padding: 8px 14px;
border: 0.5px solid rgba(0, 0, 0, 0.15);
border-radius: 2px;
text-decoration: none;
color: var(--tk-ink, #3a3a3a);
font-size: 13px;
}
.tk-journal-archive-pagination .current {
background: var(--tk-shu, #B9301A);
color: #fff;
border-color: var(--tk-shu, #B9301A);
}
/* ============================================================
v0.8.3 — AFFILIATIONS : disclosure + liens sponsored
============================================================ */
/* Disclosure box en bas d'article */
.tk-affiliate-disclosure {
margin: 56px 0 0;
padding: 18px 22px;
background: rgba(0, 0, 0, 0.04);
border-left: 3px solid var(--tk-shu, #B9301A);
border-radius: 2px;
font-size: 13px;
line-height: 1.55;
color: var(--tk-ink, #4a4a4a);
font-style: italic;
font-family: 'Inter', -apple-system, sans-serif;
}
.tk-affiliate-disclosure strong {
color: var(--tk-sumi, #0a0a0a);
font-style: normal;
}
/* Liens d'affiliation : petit icone discret */
.tk-affiliate-link {
position: relative;
color: var(--tk-shu, #B9301A) !important;
text-decoration: none !important;
border-bottom: 1px dotted var(--tk-shu, #B9301A) !important;
padding-right: 14px;
transition: color 0.2s, border-color 0.2s;
}
.tk-affiliate-link::after {
content: "";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 10px;
height: 10px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
opacity: 0.7;
}
.tk-affiliate-link:hover {
color: #E85D04 !important;
border-bottom-color: #E85D04 !important;
}
.tk-affiliate-link:hover::after {
opacity: 1;
}
/* ============================================================
v0.8.6 — PILLAR LINKS : etat published vs upcoming
============================================================ */
/* Etat publie (lien clickable) */
.tk-pillar-link-card.tk-pillar-link-published {
cursor: pointer;
}
.tk-pillar-link-card.tk-pillar-link-published:hover {
transform: translateY(-2px);
border-color: var(--tk-shu, #B9301A) !important;
}
.tk-pillar-link-card.tk-pillar-link-published .tk-pillar-link-arrow {
transition: transform 0.2s;
}
.tk-pillar-link-card.tk-pillar-link-published:hover .tk-pillar-link-arrow {
transform: translateX(4px);
}
/* Etat a venir (non cliquable) */
.tk-pillar-link-card.tk-pillar-link-upcoming {
cursor: default;
opacity: 0.55;
filter: grayscale(40%);
transition: opacity 0.3s, filter 0.3s;
text-decoration: none !important;
}
.tk-pillar-link-card.tk-pillar-link-upcoming:hover {
opacity: 0.8;
transform: none !important;
filter: grayscale(20%);
}
.tk-pillar-link-card.tk-pillar-link-upcoming .tk-pillar-link-title {
color: var(--tk-stone, #888780) !important;
}
.tk-pillar-link-badge {
display: inline-block;
background: rgba(232, 93, 4, 0.15);
color: #E85D04 !important;
font-size: 10px !important;
letter-spacing: 1.5px;
padding: 3px 8px;
border-radius: 2px;
font-weight: 600;
margin-left: auto;
}