/*
Theme Name: Sakura
Theme URI: https://example.com/sakura
Author: Benjamin C
Author URI: https://example.com
Description: Thème léger et élégant à l'esthétique japonaise. Blog minimaliste avec accents rouges, support du dark mode, entièrement sans Elementor.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sakura
Update URI: false
Tags: blog, japanese, minimal, dark-mode, red, elegant
*/
:root{
--color-bg:#FAFAF7;
--color-bg-alt:#F2F1EC;
--color-surface:#FFFFFF;
--color-border:#E0DDD5;
--color-text:#1A1714;
--color-text-muted:#6B6560;
--color-text-light:#9E9890;
--color-accent:#C0392B;
--color-accent-dark:#96231A;
--color-accent-light:#E8544A;
--color-accent-pale:#F9ECEA;
--font-display:'Noto Serif','Georgia',serif;
--font-body:'Lora','Georgia',serif;
--font-ui:'DM Sans','Helvetica Neue',sans-serif;
--font-mono:'JetBrains Mono','Courier New',monospace;
--font-size-xs:0.75rem;
--font-size-sm:0.875rem;
--font-size-base:1.0625rem;
--font-size-md:1.125rem;
--font-size-lg:1.375rem;
--font-size-xl:1.75rem;
--font-size-2xl:2.25rem;
--font-size-3xl:3rem;
--font-size-4xl:4rem;
--line-height-tight:1.2;
--line-height-normal:1.6;
--line-height-loose:1.9;
--space-1:0.25rem;
--space-2:0.5rem;
--space-3:0.75rem;
--space-4:1rem;
--space-5:1.25rem;
--space-6:1.5rem;
--space-8:2rem;
--space-10:2.5rem;
--space-12:3rem;
--space-16:4rem;
--space-20:5rem;
--space-24:6rem;
--max-width:780px;
--max-width-wide:1160px;
--sidebar-width:300px;
--radius-sm:4px;
--radius-md:8px;
--radius-lg:16px;
--shadow-sm:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
--shadow-md:0 4px 16px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.04);
--shadow-lg:0 12px 40px rgba(0,0,0,.12);
--transition:150ms ease;
}
[data-theme="dark"],
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
--color-bg:#111010;
--color-bg-alt:#1A1918;
--color-surface:#1E1D1C;
--color-border:#2E2C2A;
--color-text:#F0EDE8;
--color-text-muted:#9E9890;
--color-text-light:#6B6560;
--color-accent:#E8544A;
--color-accent-dark:#C0392B;
--color-accent-light:#FF7068;
--color-accent-pale:#2A1715;
--shadow-sm:0 1px 3px rgba(0,0,0,.3);
--shadow-md:0 4px 16px rgba(0,0,0,.4);
--shadow-lg:0 12px 40px rgba(0,0,0,.5);
}
}
[data-theme="dark"]{
--color-bg:#111010;
--color-bg-alt:#1A1918;
--color-surface:#1E1D1C;
--color-border:#2E2C2A;
--color-text:#F0EDE8;
--color-text-muted:#9E9890;
--color-text-light:#6B6560;
--color-accent:#E8544A;
--color-accent-dark:#C0392B;
--color-accent-light:#FF7068;
--color-accent-pale:#2A1715;
--shadow-sm:0 1px 3px rgba(0,0,0,.3);
--shadow-md:0 4px 16px rgba(0,0,0,.4);
--shadow-lg:0 12px 40px rgba(0,0,0,.5);
}
*,*::before,*::after{
box-sizing:border-box;
margin:0;
padding:0;
}
html{
font-size:16px;
scroll-behavior:smooth;
-webkit-text-size-adjust:100%;
}
body{
font-family:var(--font-body);
font-size:var(--font-size-base);
line-height:var(--line-height-loose);
color:var(--color-text);
background-color:var(--color-bg);
transition:background-color 0.3s ease,color 0.3s ease;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
#main-content{
overflow-x:clip;
max-width:100vw;
}
img,svg,video{
display:block;
max-width:100%;
height:auto;
}
h1,h2,h3,h4,h5,h6{
font-family:var(--font-display);
font-weight:700;
line-height:var(--line-height-tight);
color:var(--color-text);
letter-spacing:-0.02em;
}
h1{font-size:var(--font-size-3xl);}
h2{font-size:var(--font-size-2xl);}
h3{font-size:var(--font-size-xl);}
h4{font-size:var(--font-size-lg);}
h5{font-size:var(--font-size-md);}
h6{font-size:var(--font-size-base);}
p{margin-bottom:var(--space-5);}
p:last-child{margin-bottom:0;}
a{
color:var(--color-accent);
text-decoration:none;
transition:color var(--transition),opacity var(--transition);
}
a:hover{
color:var(--color-accent-light);
text-decoration:underline;
text-underline-offset:3px;
}
a:focus-visible{
outline:2px solid var(--color-accent);
outline-offset:3px;
border-radius:2px;
}
strong,b{font-weight:700;}
em,i{font-style:italic;}
blockquote,
.wp-block-quote{
position:relative;
margin:var(--space-8) 0;
padding:var(--space-5) var(--space-6) var(--space-5) var(--space-8);
background:var(--color-accent-pale);
border-left:3px solid var(--color-accent);
border-radius:0 var(--radius-md) var(--radius-md) 0;
font-style:italic;
font-size:1rem;
color:var(--color-text-muted);
}
blockquote::before,
.wp-block-quote::before{
content:none !important;
display:none !important;
}
blockquote p:last-child,
.wp-block-quote p:last-child{margin-bottom:0;}
code{
font-family:var(--font-mono);
font-size:0.875em;
padding:0.1em 0.4em;
background:var(--color-bg-alt);
border:1px solid var(--color-border);
border-radius:var(--radius-sm);
color:var(--color-accent);
}
pre{
background:var(--color-bg-alt);
border:1px solid var(--color-border);
border-radius:var(--radius-md);
padding:var(--space-6);
overflow-x:auto;
margin:var(--space-6) 0;
}
pre code{
padding:0;
background:none;
border:none;
color:var(--color-text);
font-size:var(--font-size-sm);
line-height:1.7;
}
hr{
border:none;
border-top:1px solid var(--color-border);
margin:var(--space-12) auto;
max-width:120px;
position:relative;
}
hr::after{
content:'⌘';
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background:var(--color-bg);
color:var(--color-accent);
padding:0 var(--space-3);
font-size:var(--font-size-xs);
}
ul,ol{
padding:0;
margin:0;
list-style:none;
}
li{margin:0;}
.entry-content ul,
.entry-content ol{
padding-left:var(--space-6);
margin-bottom:var(--space-5);
list-style:revert;
}
.entry-content li{margin-bottom:var(--space-2);}
.entry-content li::marker{color:var(--color-accent);}
table{border-collapse:collapse;}
.entry-content .wp-block-table{
margin:var(--space-6) 0;
border-radius:10px;
overflow:hidden;
border:1px solid var(--color-border);
box-shadow:0 2px 8px rgba(0,0,0,0.07);
}
.entry-content .wp-block-table table{
margin:0;
}
.sakura-table-wrap{
margin:var(--space-6) 0;
border-radius:10px;
overflow:hidden;
border:1px solid var(--color-border);
box-shadow:0 2px 8px rgba(0,0,0,0.07);
}
.sakura-table-wrap table{
margin:0 !important;
}
.entry-content table:not(.episode-table){
width:100%;
font-size:var(--font-size-sm);
border-collapse:collapse;
}
.entry-content table:not(.episode-table) th,
.entry-content table:not(.episode-table) td{
padding:var(--space-3) var(--space-4);
border-bottom:1px solid var(--color-border);
border-right:1px solid var(--color-border);
text-align:left;
vertical-align:top;
}
.entry-content table:not(.episode-table) th:last-child,
.entry-content table:not(.episode-table) td:last-child{
border-right:none;
}
.entry-content table:not(.episode-table) tr:last-child th,
.entry-content table:not(.episode-table) tr:last-child td{
border-bottom:none;
}
.entry-content table:not(.episode-table) th{
background:var(--color-accent);
color:#fff;
font-family:var(--font-ui);
font-weight:700;
font-size:var(--font-size-xs);
text-transform:uppercase;
letter-spacing:0.07em;
border-bottom-color:rgba(0,0,0,0.15);
border-right-color:rgba(255,255,255,0.20);
}
.entry-content table:not(.episode-table) tr:nth-child(odd) td{
background:var(--color-surface);
}
.entry-content table:not(.episode-table) tr:nth-child(even) td{
background:var(--color-bg-alt);
}
.entry-content table:not(.episode-table) tbody tr:hover td{
background:color-mix(in srgb,var(--color-accent) 7%,var(--color-surface));
}
[data-theme="dark"] .entry-content .wp-block-table,
[data-theme="dark"] .sakura-table-wrap{
border-color:var(--color-border);
box-shadow:0 2px 10px rgba(0,0,0,0.30);
}
[data-theme="dark"] .entry-content table:not(.episode-table) tbody tr:hover td{
background:color-mix(in srgb,var(--color-accent) 12%,var(--color-surface));
}
.entry-content .wp-block-table,
.sakura-table-wrap{
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}
.container{
width:100%;
max-width:var(--max-width-wide);
margin:0 auto;
padding:0 var(--space-6);
}
.container--narrow{
max-width:var(--max-width);
}
.site-layout{
display:grid;
grid-template-columns:1fr 300px;
gap:var(--space-10);
align-items:start;
max-width:var(--max-width-wide);
margin:0 auto;
padding:var(--space-12) var(--space-6);
}
.site-layout--full{
grid-template-columns:1fr;
max-width:var(--max-width-wide);
width:100%;
box-sizing:border-box;
}
.site-main{min-width:0;}
.site-header{
position:sticky;
top:0;
z-index:100;
background:var(--color-bg);
border-bottom:1px solid var(--color-border);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
transition:background-color 0.3s ease,border-color 0.3s ease;
}
.site-header__inner{
display:flex;
align-items:center;
justify-content:space-between;
height:64px;
gap:var(--space-6);
}
.site-logo{
display:flex;
align-items:center;
gap:var(--space-3);
text-decoration:none;
flex-shrink:0;
padding:10px 0;
}
.site-logo:hover{text-decoration:none;opacity:0.88;}
.site-logo__mark{
width:32px;
height:32px;
background:var(--color-accent);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:16px;
font-weight:700;
flex-shrink:0;
transition:transform 0.2s ease,background-color 0.3s ease;
}
.site-logo:hover .site-logo__mark{transform:scale(1.1);}
.site-logo__text{
font-family:var(--font-display);
font-size:var(--font-size-lg);
font-weight:700;
color:var(--color-text);
letter-spacing:-0.03em;
}
.site-logo__text span{
color:var(--color-accent);
}
header.site-header a.site-logo img,
header.site-header a.site-logo img.site-logo__img,
.site-header__inner a.site-logo img,
img.site-logo__img{
display:block !important;
height:44px !important;
max-height:44px !important;
width:auto !important;
max-width:none !important;
object-fit:contain !important;
}
footer.site-footer a.site-logo img,
footer.site-footer a.site-logo img.site-logo__img,
.footer-brand a.site-logo img,
img.site-logo__img--footer{
display:block !important;
height:40px !important;
max-height:40px !important;
width:auto !important;
max-width:none !important;
object-fit:contain !important;
}
@media (max-width:768px){
header.site-header a.site-logo img,
img.site-logo__img{
height:36px !important;
max-height:36px !important;
}
}
@media (max-width:480px){
header.site-header a.site-logo img,
img.site-logo__img{
height:30px !important;
max-height:30px !important;
}
}
.site-nav{
display:flex;
align-items:center;
}
#site-nav .nav-menu{
display:flex !important;
flex-direction:row !important;
align-items:center !important;
gap:var(--space-1) !important;
list-style:none !important;
padding:0 !important;
margin:0 !important;
}
#site-nav .nav-menu li{
display:list-item;
list-style:none !important;
margin:0 !important;
padding:0 !important;
position:relative;
}
#site-nav .nav-menu li::before,
#site-nav .nav-menu li::marker{
content:none !important;
display:none !important;
}
#site-nav .nav-menu > li > a{
display:block !important;
font-family:var(--font-ui) !important;
font-size:var(--font-size-sm) !important;
font-weight:500 !important;
color:var(--color-text-muted) !important;
padding:var(--space-2) var(--space-3) !important;
border-radius:var(--radius-sm) !important;
text-decoration:none !important;
white-space:nowrap !important;
transition:color var(--transition),background var(--transition);
letter-spacing:0.02em;
}
#site-nav .nav-menu > li > a:hover,
#site-nav .nav-menu .current-menu-item > a,
#site-nav .nav-menu .current-page-ancestor > a,
#site-nav .nav-menu .current_page_item > a{
color:var(--color-accent) !important;
background:var(--color-accent-pale) !important;
text-decoration:none !important;
}
#site-nav .nav-menu > li.menu-item-has-children > a::after{
content:'';
display:inline-block;
width:0;
height:0;
border-left:4px solid transparent;
border-right:4px solid transparent;
border-top:5px solid currentColor;
margin-left:6px;
vertical-align:middle;
opacity:0.6;
transition:transform 0.2s ease,opacity 0.2s ease;
}
#site-nav .nav-menu > li.menu-item-has-children:hover > a::after{
transform:rotate(180deg);
opacity:1;
}
#site-nav .nav-menu ul{
display:none;
position:absolute !important;
top:100%;
left:0;
flex-direction:column;
min-width:220px;
background:var(--color-surface) !important;
border:1px solid var(--color-border) !important;
border-radius:var(--radius-md);
box-shadow:var(--shadow-md);
padding:var(--space-2) 0 !important;
margin:0 !important;
list-style:none !important;
z-index:500;
}
#site-nav .nav-menu li.menu-item-has-children{
padding-bottom:8px;
}
#site-nav .nav-menu li.menu-item-has-children > ul{
top:calc(100% - 8px);
}
#site-nav .nav-menu li:hover > ul,
#site-nav .nav-menu li:focus-within > ul{
display:flex !important;
}
#site-nav .nav-menu ul li{width:100%;}
#site-nav .nav-menu ul a{
display:block !important;
padding:var(--space-2) var(--space-5) !important;
font-family:var(--font-ui);
font-size:var(--font-size-sm);
color:var(--color-text-muted) !important;
text-decoration:none !important;
white-space:nowrap;
}
#site-nav .nav-menu ul a:hover{
color:var(--color-accent) !important;
background:var(--color-accent-pale) !important;
}
#site-nav .nav-menu ul li{
position:relative;
}
#site-nav .nav-menu ul li.menu-item-has-children > a::after{
content:'';
position:absolute;
right:var(--space-4);
top:50%;
transform:translateY(-50%);
width:0;
height:0;
border-top:4px solid transparent;
border-bottom:4px solid transparent;
border-left:5px solid currentColor;
opacity:0.5;
}
#site-nav .nav-menu ul li.menu-item-has-children:hover > a::after{
opacity:1;
}
#site-nav .nav-menu ul ul{
top:-4px !important;
left:100% !important;
padding:var(--space-2) 0 !important;
}
#site-nav .nav-menu ul li.menu-item-has-children{
padding-bottom:0;
}
#site-nav .nav-menu ul li.menu-item-has-children > ul{
top:0 !important;
}
.header-actions{
display:flex;
align-items:center;
gap:var(--space-3);
}
.theme-toggle{
display:flex;
align-items:center;
justify-content:center;
width:36px;
height:36px;
border:1px solid var(--color-border);
border-radius:var(--radius-md);
background:var(--color-surface);
cursor:pointer;
color:var(--color-text-muted);
transition:all var(--transition);
font-size:16px;
flex-shrink:0;
}
.theme-toggle:hover{
border-color:var(--color-accent);
color:var(--color-accent);
background:var(--color-accent-pale);
}
.theme-toggle .icon-moon{display:block;}
.theme-toggle .icon-sun{display:none;}
[data-theme="dark"] .theme-toggle .icon-moon{display:none;}
[data-theme="dark"] .theme-toggle .icon-sun{display:block;}
.site-hero{
background:var(--color-bg-alt);
border-bottom:1px solid var(--color-border);
padding:var(--space-20) 0;
text-align:center;
position:relative;
overflow:hidden;
}
.site-hero::before{
content:'';
position:absolute;
inset:0;
background:radial-gradient(ellipse 60% 80% at 50% 120%,rgba(192,57,43,.12) 0%,transparent 70%);
pointer-events:none;
}
.site-hero::after{
content:'桜';
position:absolute;
right:-40px;
top:50%;
transform:translateY(-50%);
font-size:260px;
color:var(--color-accent);
opacity:0.04;
line-height:1;
pointer-events:none;
user-select:none;
}
.site-hero__kicker{
display:inline-block;
font-family:var(--font-ui);
font-size:var(--font-size-xs);
font-weight:600;
text-transform:uppercase;
letter-spacing:0.14em;
color:var(--color-accent);
margin-bottom:var(--space-4);
padding:var(--space-1) var(--space-4);
border:1px solid var(--color-accent);
border-radius:999px;
}
.site-hero__title{
font-size:clamp(2.5rem,5vw,var(--font-size-4xl));
max-width:720px;
margin:0 auto var(--space-5);
letter-spacing:-0.04em;
}
.site-hero__description{
font-size:var(--font-size-md);
color:var(--color-text-muted);
max-width:520px;
margin:0 auto;
line-height:var(--line-height-normal);
}
.posts-grid{
display:grid;
gap:20px;
grid-template-columns:repeat(5,1fr);
}
.posts-grid--masonry{
grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
gap:var(--space-8);
}
@media (max-width:1280px){
.posts-grid{grid-template-columns:repeat(4,1fr);}
}
@media (max-width:960px){
.posts-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:640px){
.posts-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
}
@media (max-width:400px){
.posts-grid{grid-template-columns:1fr;}
}
.posts-grid .post-card__excerpt,
.posts-grid .post-card__footer,
.posts-grid .post-card__author,
.posts-grid .post-card__read-more{
display:none !important;
}
.posts-grid .post-card{
display:flex;
flex-direction:column;
height:100%;
min-width:0;
}
.posts-grid .post-card__body{flex:1;}
.posts-grid--masonry .post-card__excerpt,
.posts-grid--masonry .post-card__footer,
.posts-grid--masonry .post-card__author,
.posts-grid--masonry .post-card__read-more{
display:revert;
}
.post-card{
background:var(--color-surface);
border:1px solid var(--color-border);
border-radius:var(--radius-lg);
overflow:hidden;
transition:transform 0.2s ease,box-shadow 0.2s ease,border-color 0.2s ease;
}
.post-card:hover{
transform:translateY(-3px);
box-shadow:var(--shadow-md);
border-color:var(--color-accent);
}
.post-card__thumbnail{
aspect-ratio:16 / 9;
overflow:hidden;
background:var(--color-bg-alt);
}
.post-card__thumbnail img{
width:100%;
height:100%;
object-fit:cover;
transition:transform 0.4s ease;
}
.post-card:hover .post-card__thumbnail img{transform:scale(1.04);}
.post-card__no-image{
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
font-size:3rem;
color:var(--color-accent);
opacity:0.25;
}
.post-card__body{
padding:var(--space-6);
}
.post-card__meta{
display:flex;
align-items:center;
gap:var(--space-3);
margin-bottom:var(--space-3);
flex-wrap:wrap;
}
.post-card__category{
font-family:var(--font-ui);
font-size:var(--font-size-xs);
font-weight:600;
text-transform:uppercase;
letter-spacing:0.1em;
color:var(--color-accent);
text-decoration:none;
}
.post-card__category:hover{text-decoration:underline;}
.post-card__date{
font-family:var(--font-ui);
font-size:var(--font-size-xs);
color:var(--color-text-light);
}
.post-card__title{
font-size:var(--font-size-md);
margin-bottom:var(--space-2);
letter-spacing:-0.01em;
line-height:1.3;
}
.post-card__title a{
color:var(--color-text);
text-decoration:none;
}
.post-card__title a:hover{color:var(--color-accent);}
.post-card__excerpt{
font-size:var(--font-size-sm);
color:var(--color-text-muted);
line-height:var(--line-height-normal);
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
margin-bottom:0;
}
.post-card__footer{
padding:var(--space-4) var(--space-6);
border-top:1px solid var(--color-border);
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--space-4);
}
.post-card__author{
display:flex;
align-items:center;
gap:var(--space-2);
font-family:var(--font-ui);
font-size:var(--font-size-xs);
color:var(--color-text-muted);
text-decoration:none;
}
.post-card__author img{
width:24px;
height:24px;
border-radius:50%;
object-fit:cover;
}
.post-card__read-more{
font-family:var(--font-ui);
font-size:var(--font-size-xs);
font-weight:600;
color:var(--color-accent);
text-decoration:none;
display:flex;
align-items:center;
gap:var(--space-1);
transition:gap var(--transition);
}
.post-card__read-more:hover{gap:var(--space-2);text-decoration:none;}
.post-card--featured{
grid-column:1 / -1;
display:grid;
grid-template-columns:1fr 1fr;
}
.post-card--featured .post-card__thumbnail{
aspect-ratio:auto;
}
.post-card--featured .post-card__title{font-size:var(--font-size-2xl);}
.article-header{
margin-bottom:var(--space-12);
padding-bottom:var(--space-10);
border-bottom:1px solid var(--color-border);
}
.article-header__kicker{
display:flex;
align-items:center;
gap:var(--space-3);
margin-bottom:var(--space-5);
}
.article-category-badge{
font-family:var(--font-ui);
font-size:var(--font-size-xs);
font-weight:600;
text-transform:uppercase;
letter-spacing:0.1em;
color:var(--color-accent);
text-decoration:none;
padding:var(--space-1) var(--space-3);
background:var(--color-accent-pale);
border-radius:999px;
border:1px solid transparent;
transition:border-color var(--transition);
}
.article-category-badge:hover{border-color:var(--color-accent);text-decoration:none;}
.article-header__title{
font-size:clamp(2rem,4vw,3rem);
line-height:1.15;
letter-spacing:-0.03em;
margin-bottom:var(--space-6);
}
.article-header__subtitle{
font-size:var(--font-size-md);
color:var(--color-text-muted);
line-height:var(--line-height-normal);
margin-bottom:var(--space-6);
}
.article-meta{
display:flex;
flex-direction:column;
gap:var(--space-1);
}
.article-meta__row{
display:flex;
flex-direction:row;
align-items:center;
flex-wrap:wrap;
gap:6px;
font-family:var(--font-ui);
font-size:var(--font-size-sm);
color:var(--color-text-muted);
}
.article-author{
display:flex;
align-items:center;
gap:var(--space-3);
text-decoration:none;
color:inherit;
}
.article-author:hover{text-decoration:none;}
.article-author__avatar{
width:44px;
height:44px;
border-radius:50%;
object-fit:cover;
border:2px solid var(--color-border);
}
.article-author__info{line-height:1.3;}
.article-author__name{
font-family:var(--font-ui);
font-weight:600;
font-size:var(--font-size-sm);
color:var(--color-text);
display:block;
}
.article-author__role{
font-family:var(--font-ui);
font-size:var(--font-size-xs);
color:var(--color-text-muted);
display:block;
}
.article-meta__sep{
color:var(--color-border);
font-size:var(--font-size-xs);
}
.article-meta__date,
.article-meta__reading-time{
font-family:var(--font-ui);
font-size:var(--font-size-sm);
color:var(--color-text-muted);
}
.article-featured-image{
margin-bottom:var(--space-12);
border-radius:var(--radius-lg);
overflow:hidden;
line-height:0;
}
.article-featured-image figcaption.wp-caption-text{
line-height:var(--line-height-base);
font-family:var(--font-ui);
font-size:var(--font-size-xs);
color:var(--color-text-muted);
text-align:center;
padding:var(--space-2) var(--space-4) var(--space-3);
background:var(--color-bg-alt);
border-bottom-left-radius:var(--radius-lg);
border-bottom-right-radius:var(--radius-lg);
font-style:italic;
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:center;
gap:var(--space-2);
}
.article-featured-image img,
.article-featured-image figure img,
.single .post-thumbnail img{
width:100% !important;
height:auto !important;
max-width:100% !important;
aspect-ratio:16 / 9 !important;
display:block !important;
object-fit:cover !important;
object-position:center !important;
}
.entry-content{
font-size:var(--font-size-base);
line-height:var(--line-height-loose);
color:var(--color-text);
}
.entry-content > * + *{margin-top:var(--space-5);}
.entry-content h2{
font-size:var(--font-size-2xl);
margin-top:var(--space-12);
margin-bottom:var(--space-4);
}
.entry-content h3{
font-size:var(--font-size-xl);
margin-top:var(--space-10);
margin-bottom:var(--space-3);
}
.entry-content h4{
font-size:var(--font-size-lg);
margin-top:var(--space-8);
margin-bottom:var(--space-2);
}
.entry-content img{
border-radius:var(--radius-md);
box-shadow:var(--shadow-md);
}
.entry-content .wp-caption{
max-width:100%;
}
.entry-content .wp-caption-text{
font-family:var(--font-ui);
font-size:var(--font-size-xs);
color:var(--color-text-muted);
text-align:center;
margin-top:var(--space-2);
font-style:italic;
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:center;
gap:var(--space-2);
}
.entry-tags{
display:flex;
flex-wrap:wrap;
gap:var(--space-2);
margin-top:var(--space-10);
padding-top:var(--space-6);
border-top:1px solid var(--color-border);
}
.entry-tag{
font-family:var(--font-ui);
font-size:var(--font-size-xs);
color:var(--color-text-muted);
text-decoration:none;
padding:var(--space-1) var(--space-3);
border:1px solid var(--color-border);
border-radius:999px;
transition:all var(--transition);
}
.entry-tag:hover{
color:var(--color-accent);
border-color:var(--color-accent);
background:var(--color-accent-pale);
text-decoration:none;
}
.post-navigation{display:none;}
.related-posts{
margin-top:var(--space-12);
margin-bottom:var(--space-12);
padding-top:var(--space-8);
border-top:1px solid var(--color-border);
}
.related-posts__title{
font-family:var(--font-display);
font-size:1.25rem;
font-weight:700;
color:var(--color-text);
border-left:4px solid var(--color-accent);
padding:var(--space-2) 0 var(--space-2) var(--space-4);
margin:0 0 var(--space-5) 0;
display:flex;
align-items:center;
gap:var(--space-2);
}
.related-posts__title-icon{
color:var(--color-accent);
font-size:0.9em;
}
.site-sidebar{
position:sticky;
top:calc(64px + var(--space-6));
width:300px;
min-width:300px;
display:flex;
flex-direction:column;
gap:var(--space-8);
align-self:start;
}
.widget{
background:var(--color-surface);
border:1px solid var(--color-border);
border-radius:var(--radius-lg);
overflow:hidden;
}
.widget__header{
padding:var(--space-4) var(--space-6);
border-bottom:1px solid var(--color-border);
display:flex;
align-items:center;
gap:var(--space-3);
}
.widget__title{
font-family:var(--font-ui);
font-size:var(--font-size-xs);
font-weight:700;
text-transform:uppercase;
letter-spacing:0.1em;
color:var(--color-text-muted);
}
.widget__title-icon{color:var(--color-accent);font-size:0.9rem;}
.widget__body{padding:var(--space-5) var(--space-6);}
.widget-posts{display:flex;flex-direction:column;gap:0;}
.widget-post-item{
display:flex;
gap:var(--space-3);
padding:var(--space-4) 0;
border-bottom:1px solid var(--color-border);
text-decoration:none;
}
.widget-post-item:last-child{border-bottom:none;padding-bottom:0;}
.widget-post-item:first-child{padding-top:0;}
.widget-post-item:hover{text-decoration:none;}
.widget-post-item__thumb{
width:64px;
height:48px;
border-radius:var(--radius-sm);
overflow:hidden;
flex-shrink:0;
background:var(--color-bg-alt);
}
.widget-post-item__thumb img{
width:100%;
height:100%;
object-fit:cover;
transition:transform 0.3s ease;
}
.widget-post-item:hover .widget-post-item__thumb img{transform:scale(1.1);}
.widget-post-item__content{}
.widget-post-item__title{
font-family:var(--font-ui);
font-size:var(--font-size-sm);
font-weight:600;
color:var(--color-text);
line-height:var(--line-height-tight);
margin-bottom:var(--space-1);
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
transition:color var(--transition);
}
.widget-post-item:hover .widget-post-item__title{color:var(--color-accent);}
.widget-post-item__date{
font-family:var(--font-ui);
font-size:var(--font-size-xs);
color:var(--color-text-light);
}
.widget-categories{list-style:none;padding:0;}
.widget-categories li{
border-bottom:1px solid var(--color-border);
}
.widget-categories li:last-child{border-bottom:none;}
.widget-categories a{
display:flex;
align-items:center;
justify-content:space-between;
padding:var(--space-3) 0;
font-family:var(--font-ui);
font-size:var(--font-size-sm);
color:var(--color-text-muted);
text-decoration:none;
transition:color var(--transition);
}
.widget-categories a:hover{color:var(--color-accent);}
.widget-categories .count{
font-size:var(--font-size-xs);
color:var(--color-text-light);
background:var(--color-bg-alt);
padding:1px 8px;
border-radius:999px;
}
.widget-about{text-align:center;}
.widget-about__avatar{
width:72px;
height:72px;
border-radius:50%;
object-fit:cover;
border:3px solid var(--color-accent);
margin:0 auto var(--space-3);
}
.widget-about__name{
font-family:var(--font-display);
font-weight:700;
font-size:var(--font-size-md);
margin-bottom:var(--space-2);
}
.widget-about__bio{
font-size:var(--font-size-sm);
color:var(--color-text-muted);
line-height:var(--line-height-normal);
margin-bottom:0;
}
.comment-list{list-style:none;padding:0;}
.comment{
padding:var(--space-6) 0;
border-bottom:1px solid var(--color-border);
}
.comment:last-child{border-bottom:none;}
.comment-body{display:flex;gap:var(--space-4);}
.comment-author .avatar{
width:48px;
height:48px;
border-radius:50%;
flex-shrink:0;
}
.comment-content{flex:1;}
.comment-metadata{
display:flex;
align-items:center;
gap:var(--space-3);
margin-bottom:var(--space-3);
}
.comment-author b a{
font-family:var(--font-ui);
font-weight:700;
font-size:var(--font-size-sm);
color:var(--color-text);
}
.comment-metadata time{
font-family:var(--font-ui);
font-size:var(--font-size-xs);
color:var(--color-text-light);
}
.comment-text p{font-size:var(--font-size-sm);margin-bottom:var(--space-2);}
.comment-text p:last-child{margin-bottom:0;}
.reply a{
font-family:var(--font-ui);
font-size:var(--font-size-xs);
font-weight:600;
color:var(--color-accent);
}
.comment-form{
margin-top:var(--space-10);
}
.comment-form p{margin-bottom:var(--space-4);}
.comment-form label{
display:block;
font-family:var(--font-ui);
font-size:var(--font-size-sm);
font-weight:600;
color:var(--color-text-muted);
margin-bottom:var(--space-2);
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea{
width:100%;
padding:var(--space-3) var(--space-4);
background:var(--color-surface);
border:1px solid var(--color-border);
border-radius:var(--radius-md);
color:var(--color-text);
font-family:var(--font-body);
font-size:var(--font-size-base);
transition:border-color var(--transition),box-shadow var(--transition);
outline:none;
appearance:none;
}
.comment-form input:focus,
.comment-form textarea:focus{
border-color:var(--color-accent);
box-shadow:0 0 0 3px rgba(192,57,43,.1);
}
.comment-form textarea{height:140px;resize:vertical;}
.btn,
.comment-form input[type="submit"],
button[type="submit"]{
display:inline-flex;
align-items:center;
justify-content:center;
gap:var(--space-2);
font-family:var(--font-ui);
font-size:var(--font-size-sm);
font-weight:600;
padding:var(--space-3) var(--space-6);
border-radius:var(--radius-md);
cursor:pointer;
border:1px solid transparent;
transition:all 0.2s ease;
text-decoration:none;
letter-spacing:0.01em;
white-space:nowrap;
}
.btn--primary,
.comment-form input[type="submit"],
button[type="submit"]{
background:var(--color-accent);
color:#fff;
}
.btn--primary:hover,
.comment-form input[type="submit"]:hover,
button[type="submit"]:hover{
background:var(--color-accent-dark);
color:#fff;
text-decoration:none;
transform:translateY(-1px);
box-shadow:0 4px 12px rgba(192,57,43,.3);
}
.btn--outline{
background:transparent;
color:var(--color-accent);
border-color:var(--color-accent);
}
.btn--outline:hover{
background:var(--color-accent-pale);
text-decoration:none;
}
.pagination{
display:flex;
align-items:center;
justify-content:center;
gap:var(--space-2);
margin-top:var(--space-12);
}
.pagination .current{
background:var(--color-accent);
color:#fff;
border-color:var(--color-accent);
}
.pagination .dots{
background:none;
border:none;
color:var(--color-text-light);
}
.site-footer{
background:var(--color-bg-alt);
border-top:1px solid var(--color-border);
margin-top:var(--space-24);
padding:var(--space-16) 0 var(--space-8);
}
.site-footer__grid{
display:grid;
grid-template-columns:2fr 1fr 1fr 1fr;
gap:var(--space-10);
margin-bottom:var(--space-12);
}
.footer-brand .site-logo{
display:inline-flex;
margin-bottom:var(--space-4);
padding:0;
}
.footer-brand__description{
font-size:var(--font-size-sm);
color:var(--color-text-muted);
line-height:var(--line-height-normal);
max-width:280px;
}
.footer-col__title{
font-family:var(--font-ui);
font-size:var(--font-size-xs);
font-weight:700;
text-transform:uppercase;
letter-spacing:0.1em;
color:var(--color-text);
margin-bottom:var(--space-5);
}
.footer-links{
list-style:none;
padding:0;
display:flex;
flex-direction:column;
gap:var(--space-3);
}
.footer-links a{
font-family:var(--font-ui);
font-size:var(--font-size-sm);
color:var(--color-text-muted);
text-decoration:none;
transition:color var(--transition);
}
.footer-links a:hover{color:var(--color-accent);}
.footer-bottom{
padding-top:var(--space-6);
border-top:1px solid var(--color-border);
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--space-4);
flex-wrap:wrap;
}
.footer-bottom__copy{
font-family:var(--font-ui);
font-size:var(--font-size-sm);
color:var(--color-text-muted);
}
.footer-bottom__haiku{
font-family:var(--font-display);
font-size:var(--font-size-sm);
font-style:italic;
color:var(--color-text-muted);
text-align:right;
}
.footer-bottom__haiku span{
color:var(--color-accent);
display:block;
}
.error-page{
text-align:center;
padding:var(--space-24) var(--space-6);
}
@media (max-width:480px){
.error-page{
padding-left:var(--space-4);
padding-right:var(--space-4);
}
}
.error-page__code{
font-family:var(--font-display);
font-size:8rem;
font-weight:900;
color:var(--color-accent);
opacity:0.15;
line-height:1;
letter-spacing:-0.04em;
margin-bottom:-2rem;
}
.error-page__title{
font-size:var(--font-size-2xl);
margin-bottom:var(--space-4);
}
.error-page__text{
color:var(--color-text-muted);
margin-bottom:var(--space-8);
}
.error-page__search{
display:flex;
flex-direction:row;
gap:var(--space-2);
margin-top:var(--space-12);
width:100%;
box-sizing:border-box;
}
.error-page__search-input{
flex:1 1 0;
min-width:0;
box-sizing:border-box;
padding:var(--space-3) var(--space-4);
background:var(--color-surface);
border:1px solid var(--color-border);
border-radius:var(--radius-md);
color:var(--color-text);
font-family:var(--font-body);
font-size:var(--font-size-base);
outline:none;
transition:border-color var(--transition);
appearance:none;
}
.error-page__search-input:focus{
border-color:var(--color-accent);
box-shadow:0 0 0 3px rgba(192,57,43,.1);
}
.error-page__search-btn{
flex:0 0 auto;
display:inline-flex;
align-items:center;
gap:var(--space-2);
padding:var(--space-3) var(--space-4);
background:var(--color-accent);
color:#fff;
border:none;
border-radius:var(--radius-md);
font-family:var(--font-ui);
font-size:var(--font-size-md);
font-weight:700;
cursor:pointer;
white-space:nowrap;
transition:background var(--transition);
}
.error-page__search-btn:hover{
background:var(--color-accent-dark);
}
.search-form{
display:flex;
gap:var(--space-3);
max-width:480px;
width:100%;
margin:0 auto;
box-sizing:border-box;
overflow:hidden;
}
.search-form input[type="search"],
.search-form .search-field{
flex:1 1 0;
min-width:0;
box-sizing:border-box;
padding:var(--space-3) var(--space-5);
background:var(--color-surface);
border:1px solid var(--color-border);
border-radius:var(--radius-md);
color:var(--color-text);
font-family:var(--font-body);
font-size:var(--font-size-base);
outline:none;
transition:border-color var(--transition);
appearance:none;
}
.search-form input[type="search"]:focus,
.search-form .search-field:focus{
border-color:var(--color-accent);
box-shadow:0 0 0 3px rgba(192,57,43,.1);
}
.search-form .search-submit{
flex:0 0 auto;
white-space:nowrap;
box-sizing:border-box;
}
.sr-only{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border-width:0;
}
.text-accent{color:var(--color-accent);}
.text-muted{color:var(--color-text-muted);}
.jp-ornament{
text-align:center;
color:var(--color-accent);
opacity:0.4;
font-size:1.25rem;
letter-spacing:0.5em;
margin:var(--space-8) 0;
user-select:none;
}
.search-toggle{
display:flex !important;
visibility:visible !important;
align-items:center;
justify-content:center;
width:36px;
height:36px;
border:1px solid var(--color-border);
border-radius:var(--radius-md);
background:var(--color-surface);
cursor:pointer;
color:var(--color-text);
transition:all var(--transition);
flex-shrink:0;
opacity:1;
}
.search-toggle svg{
display:block;
width:18px;
height:18px;
stroke:currentColor;
}
.search-toggle:hover{
border-color:var(--color-accent);
color:var(--color-accent);
background:var(--color-accent-pale);
}
.search-overlay{
position:fixed;
inset:0;
z-index:1000;
background:var(--color-bg);
display:flex;
align-items:center;
justify-content:center;
opacity:0;
pointer-events:none;
transition:opacity 0.25s ease;
}
.search-overlay.is-open{
opacity:1;
pointer-events:all;
}
.search-overlay__close{
position:absolute;
top:var(--space-6);
right:var(--space-6);
width:44px;
height:44px;
display:flex;
align-items:center;
justify-content:center;
border:none;
background:none;
color:var(--color-text-muted);
cursor:pointer;
border-radius:var(--radius-md);
transition:background var(--transition),color var(--transition);
}
.search-overlay__close:hover{
background:var(--color-accent-pale);
color:var(--color-accent);
}
.search-overlay__inner{
width:100%;
max-width:640px;
padding:0 var(--space-6);
transform:translateY(16px);
transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.search-overlay.is-open .search-overlay__inner{
transform:translateY(0);
}
.search-overlay__label{
font-family:var(--font-ui);
font-size:var(--font-size-xs);
font-weight:600;
text-transform:uppercase;
letter-spacing:0.12em;
color:var(--color-accent);
margin-bottom:var(--space-4);
}
.search-overlay .search-form{
display:flex;
gap:0;
border:2px solid var(--color-border);
border-radius:var(--radius-lg);
overflow:hidden;
transition:border-color 0.2s ease;
background:var(--color-surface);
padding:0;
}
.search-overlay .search-form:focus-within{
border-color:var(--color-accent);
box-shadow:0 0 0 3px rgba(192,57,43,0.12);
}
.search-overlay .search-field,
.search-overlay input[type="search"],
.search-overlay input[type="text"]{
flex:1;
border:none !important;
box-shadow:none !important;
background:transparent;
padding:var(--space-4) var(--space-5);
font-family:var(--font-display);
font-size:var(--font-size-lg);
color:var(--color-text);
outline:none;
min-width:0;
border-radius:0 !important;
}
.search-overlay .search-field::placeholder{
color:var(--color-text-light);
opacity:0.5;
}
.search-overlay .search-submit{
display:flex;
align-items:center;
justify-content:center;
padding:var(--space-4) var(--space-6);
background:var(--color-accent);
border:none;
border-radius:0;
color:white;
cursor:pointer;
font-family:var(--font-ui);
font-size:var(--font-size-sm);
font-weight:600;
letter-spacing:0.03em;
transition:background var(--transition);
white-space:nowrap;
flex-shrink:0;
transform:none !important;
margin:0 !important;
position:static;
}
.search-overlay .search-submit:hover,
.search-overlay .search-submit:focus,
.search-overlay .search-submit:active{
background:var(--color-accent-light);
transform:none !important;
box-shadow:none !important;
outline:none;
}
.hamburger-line{
display:block;
width:20px;
height:2px;
background:currentColor;
border-radius:2px;
transition:transform 0.25s ease,opacity 0.25s ease;
pointer-events:none;
}
.nav-toggle{
display:none;
flex-direction:column;
align-items:center;
justify-content:center;
gap:5px;
width:36px;
height:36px;
border:1px solid var(--color-border);
border-radius:var(--radius-md);
background:var(--color-surface);
cursor:pointer;
color:var(--color-text-muted);
transition:border-color var(--transition),color var(--transition);
padding:0;
}
.nav-toggle:hover{border-color:var(--color-accent);color:var(--color-accent);}
.nav-toggle.is-open .hamburger-line:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.is-open .hamburger-line:nth-child(2){opacity:0;transform:scaleX(0);}
.nav-toggle.is-open .hamburger-line:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-overlay{
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,0.55);
z-index:998;
opacity:0;
transition:opacity 0.3s ease;
backdrop-filter:blur(2px);
}
.mobile-overlay.is-visible{
display:block;
opacity:1;
}
.mobile-drawer{
position:fixed;
top:0;
left:0;
width:90vw;
max-width:400px;
height:100dvh;
height:100vh;
z-index:999;
background:var(--color-surface);
transform:translateX(-100%);
box-shadow:none;
transition:transform 0.35s cubic-bezier(0.4,0,0.2,1),
box-shadow 0.35s ease;
overflow:hidden;
display:flex;
}
.mobile-drawer.is-open{
transform:translateX(0);
box-shadow:4px 0 40px rgba(0,0,0,.3);
}
.mobile-panel{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
background:var(--color-surface);
transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
will-change:transform;
}
#mobile-panel-main{
transform:translateX(0);
z-index:1;
}
.mobile-panel--sub{
transform:translateX(100%);
z-index:2;
}
.mobile-panel--deep{
transform:translateX(100%);
z-index:3;
}
.mobile-drawer.sub-open #mobile-panel-main{
transform:translateX(-30%);
}
.mobile-drawer.sub-open .mobile-panel--sub{
transform:translateX(0);
}
.mobile-drawer.deep-open .mobile-panel--sub{
transform:translateX(-30%);
}
.mobile-drawer.deep-open .mobile-panel--deep{
transform:translateX(0);
}
.mobile-panel__header{
display:flex;
align-items:center;
justify-content:space-between;
padding:0 var(--space-5);
height:64px;
border-bottom:1px solid var(--color-border);
flex-shrink:0;
gap:var(--space-3);
}
.mobile-panel__title{
font-family:var(--font-display);
font-size:var(--font-size-base);
font-weight:700;
color:var(--color-text);
letter-spacing:-0.02em;
flex:1;
text-align:center;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.mobile-drawer-close{
display:flex;
align-items:center;
justify-content:center;
width:36px;
height:36px;
border:none;
background:none;
color:var(--color-text-muted);
cursor:pointer;
border-radius:var(--radius-md);
transition:background var(--transition),color var(--transition);
flex-shrink:0;
padding:0;
}
.mobile-drawer-close:hover{
background:var(--color-accent-pale);
color:var(--color-accent);
}
.mobile-back{
display:flex;
align-items:center;
gap:var(--space-2);
border:none;
background:none;
color:var(--color-accent);
cursor:pointer;
font-family:var(--font-ui);
font-size:var(--font-size-sm);
font-weight:600;
padding:var(--space-2) 0;
flex-shrink:0;
transition:opacity var(--transition);
}
.mobile-back:hover{opacity:0.7;}
.mobile-back svg{flex-shrink:0;}
.mobile-panel__body{
flex:1;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
overscroll-behavior:contain;
}
.mobile-menu{
list-style:none !important;
padding:var(--space-4) 0 !important;
margin:0 !important;
}
.mobile-menu > li{
list-style:none !important;
margin:0 !important;
padding:0 !important;
border-bottom:1px solid var(--color-border);
}
.mobile-menu > li:first-child{
border-top:none;
}
.mobile-menu > li:last-child{
border-bottom:none;
}
.mobile-menu > li > .mobile-item-row{
display:flex;
align-items:center;
}
.mobile-menu > li > a,
.mobile-menu > li > .mobile-item-row > a{
display:block !important;
flex:1;
padding:var(--space-4) var(--space-5) !important;
font-family:var(--font-ui) !important;
font-size:var(--font-size-md) !important;
font-weight:500 !important;
color:var(--color-text) !important;
text-decoration:none !important;
transition:color var(--transition) !important;
}
.mobile-menu > li > a:hover,
.mobile-menu > li > .mobile-item-row > a:hover,
.mobile-menu .current-menu-item > a,
.mobile-menu .current-menu-item > .mobile-item-row > a{
color:var(--color-accent) !important;
}
.mobile-sub-trigger{
display:flex;
align-items:center;
justify-content:center;
width:52px;
height:52px;
flex-shrink:0;
border:none;
background:none;
color:var(--color-text-muted);
cursor:pointer;
border-left:1px solid var(--color-border);
transition:background var(--transition),color var(--transition);
padding:0;
}
.mobile-sub-trigger:hover{
background:var(--color-accent-pale);
color:var(--color-accent);
}
.mobile-menu .sub-menu{
display:none !important;
}
.mobile-submenu{
list-style:none !important;
padding:var(--space-2) 0 !important;
margin:0 !important;
}
.mobile-submenu li{
list-style:none !important;
margin:0 !important;
padding:0 !important;
border-bottom:1px solid var(--color-border);
}
.mobile-submenu li:first-child{border-top:1px solid var(--color-border);}
.mobile-submenu a{
display:block !important;
padding:var(--space-4) var(--space-5) !important;
font-family:var(--font-ui) !important;
font-size:var(--font-size-md) !important;
font-weight:500 !important;
color:var(--color-text) !important;
text-decoration:none !important;
transition:color var(--transition) !important;
}
.mobile-submenu a:hover{color:var(--color-accent) !important;}
.mobile-submenu .mobile-item-row{
display:flex !important;
align-items:center !important;
}
.mobile-submenu .mobile-item-row > a{
display:block !important;
flex:1 !important;
padding:var(--space-4) var(--space-5) !important;
font-family:var(--font-ui) !important;
font-size:var(--font-size-md) !important;
font-weight:500 !important;
color:var(--color-text) !important;
text-decoration:none !important;
transition:color var(--transition) !important;
}
.mobile-submenu .mobile-item-row > a:hover{
color:var(--color-accent) !important;
}
.mobile-submenu .mobile-sub-trigger{
height:100%;
min-height:56px;
}
.mobile-panel__footer{
flex-shrink:0;
padding:var(--space-5);
border-top:1px solid var(--color-border);
}
.theme-toggle--drawer{
display:flex;
align-items:center;
gap:var(--space-3);
width:100%;
padding:var(--space-3) var(--space-4);
border:1px solid var(--color-border);
border-radius:var(--radius-md);
background:var(--color-bg-alt);
cursor:pointer;
font-family:var(--font-ui);
font-size:var(--font-size-sm);
font-weight:500;
color:var(--color-text-muted);
transition:all var(--transition);
}
.theme-toggle--drawer:hover{
border-color:var(--color-accent);
color:var(--color-accent);
background:var(--color-accent-pale);
}
.theme-label-dark{display:block;}
.theme-label-light{display:none;}
[data-theme="dark"] .theme-label-dark{display:none;}
[data-theme="dark"] .theme-label-light{display:block;}
@media (max-width:1100px){
.site-layout{
grid-template-columns:1fr 300px;
gap:var(--space-8);
padding:var(--space-10) var(--space-4);
}
.site-layout--full{
grid-template-columns:1fr !important;
}
}
@media (max-width:1024px){
.site-footer__grid{
grid-template-columns:1fr 1fr;
gap:var(--space-8);
}
}
@media (max-width:900px){
.site-layout{
grid-template-columns:1fr !important;
padding:var(--space-8) var(--space-4);
}
.site-sidebar{
position:static !important;
width:100% !important;
min-width:unset !important;
}
}
@media (max-width:768px){
:root{--font-size-base:1rem;}
h1{font-size:var(--font-size-2xl);}
h2{font-size:var(--font-size-xl);}
#site-nav{display:none !important;}
.nav-toggle{display:flex !important;}
.post-card--featured{
grid-template-columns:1fr;
}
.post-navigation{
grid-template-columns:1fr;
}
.site-footer__grid{
grid-template-columns:1fr;
gap:var(--space-6);
}
.footer-bottom{
flex-direction:column;
text-align:center;
}
.site-layout{
padding:var(--space-8) var(--space-4);
}
}
@media (max-width:480px){
.posts-grid--masonry{
grid-template-columns:1fr;
}
.article-header__title{
font-size:var(--font-size-xl);
}
}
@keyframes fadeUp{
from{opacity:0;transform:translateY(16px);}
to{opacity:1;transform:translateY(0);}
}
.animate-fade-up{
animation:fadeUp 0.5s ease both;
}
.animate-fade-up:nth-child(1){animation-delay:0ms;}
.animate-fade-up:nth-child(2){animation-delay:80ms;}
.animate-fade-up:nth-child(3){animation-delay:160ms;}
.animate-fade-up:nth-child(4){animation-delay:240ms;}
.animate-fade-up:nth-child(5){animation-delay:320ms;}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:0.01ms !important;
transition-duration:0.01ms !important;
}
}
.alignleft{float:left;margin-right:var(--space-6);margin-bottom:var(--space-4);}
.alignright{float:right;margin-left:var(--space-6);margin-bottom:var(--space-4);}
.aligncenter{display:block;margin-left:auto;margin-right:auto;}
.alignwide{max-width:1100px;margin-left:auto;margin-right:auto;}
.alignfull{width:100vw;margin-left:calc(-50vw + 50%);max-width:none;}
.wp-block-image figcaption{
font-family:var(--font-ui);
font-size:var(--font-size-xs);
color:var(--color-text-muted);
text-align:center;
margin-top:var(--space-2);
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:center;
gap:var(--space-2);
font-style:italic;
}
/* Lien source dans les légendes ([source url="..."]Pixabay[/source]) */
.caption-source{
font-style:normal;
display:inline-flex;
align-items:center;
gap:0.25em;
color:var(--color-text-light);
font-size:var(--font-size-xs);
padding:1px var(--space-2);
border-left:2px solid var(--color-border);
margin-left:var(--space-1);
}
.caption-source__link{
color:var(--color-accent);
text-decoration:none;
font-weight:500;
transition:color 0.15s;
}
.caption-source__link:hover{
color:var(--color-accent-light);
text-decoration:underline;
}
/* Lien source dans le lightbox */
.sakura-lightbox__caption .caption-source{
border-left-color:rgba(255,255,255,0.25);
color:rgba(255,255,255,0.5);
}
.sakura-lightbox__caption .caption-source__link{
color:rgba(255,255,255,0.85);
}
.sakura-lightbox__caption .caption-source__link:hover{
color:#fff;
}
.reading-progress{
position:fixed;
top:64px;
left:0;
width:0%;
height:2px;
background:var(--color-accent);
z-index:200;
transition:width 0.1s linear;
}
.sakura-timeline{
position:relative;
padding:var(--space-6) 0 var(--space-6) 0;
margin:var(--space-10) 0;
}
@keyframes sakura-fade-up{
from{opacity:0;transform:translateY(22px);}
to{opacity:1;transform:translateY(0);}
}
.sakura-timeline__event{
display:grid;
grid-template-columns:56px 1fr;
gap:0 var(--space-6);
margin-bottom:var(--space-2);
opacity:0;
animation:sakura-fade-up 0.5s ease forwards;
}
.js-timeline-ready .sakura-timeline__event{
opacity:0;
transform:translateY(24px);
}
.js-timeline-ready .sakura-timeline__event.is-visible{
opacity:1;
transform:translateY(0);
}
.sakura-timeline__marker{
display:flex;
flex-direction:column;
align-items:center;
gap:0;
}
.sakura-timeline__dot{
width:44px;
height:44px;
border-radius:50%;
background:var(--color-surface);
border:2px solid var(--color-border);
display:flex;
align-items:center;
justify-content:center;
font-size:1rem;
color:var(--color-text-muted);
flex-shrink:0;
position:relative;
z-index:1;
transition:border-color 0.3s,background 0.3s,color 0.3s;
}
.sakura-timeline__event--accent .sakura-timeline__dot{
background:var(--color-accent);
border-color:var(--color-accent);
color:#fff;
box-shadow:0 0 0 4px rgba(192,57,43,0.15);
}
.sakura-timeline__line{
width:2px;
flex:1;
min-height:32px;
background:linear-gradient(to bottom,var(--color-border),transparent);
margin:0 auto;
}
.sakura-timeline__event:last-child .sakura-timeline__line{
display:none;
}
.sakura-timeline__body{
padding-bottom:var(--space-8);
padding-top:8px;
}
.sakura-timeline__year{
font-family:var(--font-ui);
font-size:var(--font-size-xs);
font-weight:700;
letter-spacing:0.12em;
text-transform:uppercase;
color:var(--color-accent);
margin-bottom:var(--space-1);
}
.sakura-timeline__event--accent .sakura-timeline__year{
color:var(--color-accent);
}
.sakura-timeline__title{
font-family:var(--font-display);
font-size:1.25rem;
font-weight:700;
color:var(--color-text);
margin:0 0 var(--space-2);
line-height:1.3;
}
.sakura-timeline__event--accent .sakura-timeline__title{
color:var(--color-accent);
}
.sakura-timeline__desc{
font-size:var(--font-size-sm);
color:var(--color-text-muted);
line-height:var(--line-height-relaxed);
}
.sakura-timeline__desc p{
margin:0;
}
.sakura-timeline__event--accent .sakura-timeline__body{
background:var(--color-accent-pale);
border:1px solid rgba(192,57,43,0.18);
border-radius:12px;
padding:var(--space-5) var(--space-6) var(--space-5);
margin-bottom:var(--space-4);
}
[data-theme="dark"] .sakura-timeline__dot{
background:var(--color-surface);
border-color:var(--color-border);
}
[data-theme="dark"] .sakura-timeline__event--accent .sakura-timeline__dot{
background:var(--color-accent);
border-color:var(--color-accent);
}
[data-theme="dark"] .sakura-timeline__event--accent .sakura-timeline__body{
background:rgba(192,57,43,0.12);
border-color:rgba(192,57,43,0.25);
}
@media (max-width:480px){
.sakura-timeline__event{
grid-template-columns:36px 1fr;
gap:0 var(--space-4);
}
.sakura-timeline__dot{
width:34px;
height:34px;
font-size:0.8rem;
}
.sakura-timeline__title{
font-size:1.05rem;
}
}
@keyframes nebula-breathe{
0%,100%{opacity:0.80;}
50%{opacity:1.00;}
}
.sakura-btn{
display:inline-flex;
align-items:center;
justify-content:center;
position:relative;
padding:0.52em 1.45em;
font-family:var(--font-ui);
font-size:0.79rem;
font-weight:600;
letter-spacing:0.06em;
text-transform:uppercase;
color:rgba(255,230,220,0.92);
text-decoration:none;
border:none;
border-radius:999px;
cursor:pointer;
overflow:hidden;
isolation:isolate;
background:
radial-gradient(ellipse at 22% 65%,#7A0D0D 0%,transparent 52%),
radial-gradient(ellipse at 76% 28%,#620818 0%,transparent 48%),
radial-gradient(ellipse at 52% 95%,#550A0A 0%,transparent 44%),
radial-gradient(ellipse at 48% 5%,#9B1E18 0%,transparent 52%),
linear-gradient(148deg,#721010 0%,#580C0E 38%,#671212 68%,#7E1414 100%);
box-shadow:
0 0 0 1px rgba(180,50,38,0.30),
0 2px 10px rgba(150,20,15,0.45),
0 0 24px rgba(170,25,18,0.14),
inset 0 1px 0 rgba(255,140,110,0.08);
transition:transform 0.22s ease,box-shadow 0.22s ease;
}
.sakura-btn .nebula{
position:absolute;
inset:0;
border-radius:inherit;
background:
radial-gradient(ellipse at 28% 42%,rgba(240,70,45,0.16) 0%,transparent 58%),
radial-gradient(ellipse at 68% 58%,rgba(190,18,35,0.13) 0%,transparent 52%);
z-index:0;
pointer-events:none;
animation:nebula-breathe 5s ease-in-out infinite;
}
.sakura-btn span{
position:relative;
z-index:2;
text-shadow:
0 0 10px rgba(255,110,80,0.40),
0 1px 2px rgba(0,0,0,0.50);
}
.sakura-btn:hover{
transform:translateY(-1.5px);
box-shadow:
0 0 0 1px rgba(200,60,45,0.40),
0 4px 16px rgba(160,25,18,0.55),
0 0 32px rgba(180,30,20,0.18),
inset 0 1px 0 rgba(255,160,130,0.10);
color:rgba(255,240,230,1);
text-decoration:none;
}
.sakura-btn:active{
transform:translateY(0);
box-shadow:
0 0 0 1px rgba(160,40,30,0.28),
0 1px 6px rgba(130,18,14,0.40),
inset 0 1px 0 rgba(255,120,100,0.06);
}
.sakura-btn-wrap{
text-align:center;
margin:var(--space-8) 0;
}
[data-theme="dark"] .sakura-btn{
background:
radial-gradient(ellipse at 22% 65%,#8A1010 0%,transparent 52%),
radial-gradient(ellipse at 76% 28%,#720A1C 0%,transparent 48%),
radial-gradient(ellipse at 52% 95%,#620C0C 0%,transparent 44%),
radial-gradient(ellipse at 48% 5%,#AE231C 0%,transparent 52%),
linear-gradient(148deg,#841212 0%,#680E10 38%,#781414 68%,#901818 100%);
box-shadow:
0 0 0 1px rgba(210,60,45,0.35),
0 2px 12px rgba(170,25,18,0.52),
0 0 28px rgba(190,30,22,0.16),
inset 0 1px 0 rgba(255,160,130,0.10);
}
.sakura-read-also{
display:flex;
align-items:center;
gap:var(--space-4);
margin:var(--space-8) 0;
padding:var(--space-4) var(--space-5);
background:var(--color-surface);
border:1px solid var(--color-border);
border-left:4px solid var(--color-accent);
border-radius:0 var(--radius-md) var(--radius-md) 0;
text-decoration:none;
color:inherit;
transition:border-color 0.2s ease,box-shadow 0.2s ease;
}
.sakura-read-also:hover{
border-left-color:var(--color-accent-light);
box-shadow:0 4px 16px rgba(0,0,0,0.08);
text-decoration:none;
color:inherit;
}
.sakura-read-also__thumb{
flex-shrink:0;
width:80px;
height:60px;
border-radius:var(--radius-sm);
overflow:hidden;
background:var(--color-bg-alt);
}
.sakura-read-also__thumb img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.sakura-read-also__body{
flex:1;
min-width:0;
}
.sakura-read-also__label{
display:block;
font-family:var(--font-ui);
font-size:var(--font-size-xs);
font-weight:700;
text-transform:uppercase;
letter-spacing:0.1em;
color:var(--color-accent);
margin-bottom:var(--space-1);
}
.sakura-read-also__title{
display:block;
font-family:var(--font-display);
font-size:var(--font-size-md);
font-weight:600;
color:var(--color-text);
line-height:1.4;
white-space:normal !important;
overflow:visible !important;
text-overflow:clip !important;
word-break:break-word;
}
.sakura-read-also:hover .sakura-read-also__title{
color:var(--color-accent);
}
.sakura-alert{
position:relative;
margin:var(--space-6) 0;
padding:var(--space-4) var(--space-5) var(--space-4) calc(var(--space-5) + 28px + var(--space-3));
border-radius:0 var(--radius-md) var(--radius-md) 0;
border-left:4px solid;
font-family:var(--font-ui);
font-size:var(--font-size-sm);
line-height:1.6;
}
.sakura-alert::before{
content:attr(data-icon);
position:absolute;
left:var(--space-4);
top:50%;
transform:translateY(-50%);
font-size:1.25rem;
line-height:1;
}
.sakura-alert p{margin:0;}
.sakura-alert strong{font-weight:700;}
.sakura-alert--warning{
background:#FFFBEB;
border-color:#F59E0B;
color:#78350F;
}
.sakura-alert--success{
background:#F0FDF4;
border-color:#22C55E;
color:#14532D;
}
.sakura-alert--danger{
background:var(--color-accent-pale);
border-color:var(--color-accent);
color:#7F1D1D;
}
[data-theme="dark"] .sakura-alert--warning{
background:rgba(245,158,11,0.12);
color:#FDE68A;
border-color:#F59E0B;
}
[data-theme="dark"] .sakura-alert--success{
background:rgba(34,197,94,0.10);
color:#BBF7D0;
border-color:#22C55E;
}
[data-theme="dark"] .sakura-alert--danger{
background:var(--color-accent-pale);
color:#FCA5A5;
border-color:var(--color-accent);
}
.sakura-alert--info{
background:#EFF6FF;
border-color:#3B82F6;
color:#1E3A5F;
}
[data-theme="dark"] .sakura-alert--info{
background:rgba(59,130,246,0.12);
color:#BFDBFE;
border-color:#3B82F6;
}
.breadcrumb{
margin-bottom:var(--space-6);
}
.breadcrumb__list{
display:flex;
flex-direction:row;
flex-wrap:wrap;
align-items:center;
gap:0 4px;
list-style:none;
padding:0;
margin:0;
font-family:var(--font-ui);
font-size:var(--font-size-xs);
color:var(--color-text-muted);
line-height:1.5;
}
.breadcrumb__item,
.breadcrumb__sep-item{
display:inline-flex;
align-items:center;
}
.breadcrumb__link{
color:var(--color-text-muted);
text-decoration:none;
transition:color 0.15s ease;
white-space:nowrap;
}
.breadcrumb__link:hover{
color:var(--color-accent);
text-decoration:none;
}
.breadcrumb__sep{
color:var(--color-text-light);
font-size:0.9em;
margin:0 2px;
}
.breadcrumb__current{
color:var(--color-text);
font-weight:500;
}
.article-meta__modified{
display:inline-flex;
align-items:center;
gap:4px;
font-style:italic;
}
.article-meta__modified svg{
display:block;
flex-shrink:0;
}
.wp-embed-responsive .wp-embed-aspect-4-3 .wp-block-embed__wrapper::before,
.wp-embed-responsive .wp-has-aspect-ratio .wp-block-embed__wrapper::before{
padding-top:0 !important;
content:none !important;
display:none !important;
}
.entry-content .wp-block-embed{
border-radius:var(--radius-lg);
overflow:hidden;
margin-left:0;
margin-right:0;
}
.entry-content .wp-block-embed__wrapper{
border-radius:var(--radius-lg);
overflow:hidden;
}
.entry-content .sakura-yt-facade{
border-radius:0;
}
.entry-content .wp-block-embed__wrapper:not(:has(.sakura-yt-facade)){
position:relative;
padding-bottom:56.25%;
height:0;
}
.entry-content .wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper:not(:has(.sakura-yt-facade)){
padding-bottom:75%;
}
.entry-content .wp-block-embed__wrapper:not(:has(.sakura-yt-facade)) iframe,
.entry-content .wp-block-embed__wrapper:not(:has(.sakura-yt-facade)) video,
.entry-content .wp-block-embed__wrapper:not(:has(.sakura-yt-facade)) embed,
.entry-content .wp-block-embed__wrapper:not(:has(.sakura-yt-facade)) object{
position:absolute;
top:0;
left:0;
width:100% !important;
height:100% !important;
display:block;
}
.entry-content figure.wp-block-embed > iframe{
border-radius:var(--radius-lg);
display:block;
width:100%;
}
.episode-table{
width:100%;
border-collapse:collapse;
table-layout:fixed;
font-family:var(--font-ui);
font-size:var(--font-size-sm);
border-radius:var(--radius-md);
overflow:hidden;
border:1px solid var(--color-border);
margin:var(--space-6) 0;
}
.episode-table th,
.episode-table td{
padding:8px 12px;
border:1px solid var(--color-border);
text-align:left;
vertical-align:middle;
}
.episode-table thead tr{
background-color:var(--color-bg-alt);
}
.episode-table thead th{
font-size:var(--font-size-xs);
font-weight:700;
text-transform:uppercase;
letter-spacing:0.06em;
color:var(--color-text-muted);
border-bottom:2px solid var(--color-border);
}
.episode-table tbody tr{
background-color:var(--color-surface);
transition:background 0.15s ease;
}
.episode-table tbody tr:hover{
background-color:var(--color-bg-alt);
}
.episode-table tr.canon{
background-color:var(--color-surface);
}
.episode-table tr.hors-serie{
background-color:var(--color-accent-pale);
}
.episode-table tr.hors-serie td{
color:var(--color-accent-dark);
}
.episode-table tr.semi-filler{
background-color:#FFF8EC;
}
.episode-table tr.semi-filler td{
color:#7A5500;
}
.episode-table td:nth-child(1),
.episode-table th:nth-child(1){
width:80px;
text-align:center;
font-weight:600;
color:var(--color-text-muted);
}
.episode-table td:nth-child(2){
word-break:break-word;
}
.episode-table td:nth-child(3),
.episode-table th:nth-child(3){
width:120px;
}
.episode-table td:nth-child(4),
.episode-table th:nth-child(4){
width:110px;
color:var(--color-text-muted);
font-size:var(--font-size-xs);
}
.episode-table .tag,
.episode-tag{
display:inline-block;
width:100%;
padding:3px 8px;
font-size:10px;
font-family:var(--font-ui);
font-weight:700;
letter-spacing:0.05em;
border-radius:var(--radius-sm);
text-transform:uppercase;
text-align:center;
box-sizing:border-box;
}
.canon-tag{
background-color:#4CAF50;
color:#fff;
}
.hs-tag{
background-color:var(--color-accent);
color:#fff;
}
.semi-tag{
background-color:#FFCC80;
color:#5C3D00;
}
[data-theme="dark"] .episode-table tr.hors-serie td{
color:var(--color-accent-light);
}
[data-theme="dark"] .episode-table tr.semi-filler{
background-color:rgba(255,200,100,0.10);
}
[data-theme="dark"] .episode-table tr.semi-filler td{
color:#FFD080;
}
@media (max-width:600px){
.episode-table td:nth-child(4),
.episode-table th:nth-child(4){
display:none;
}
}
.anime-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:var(--space-3);
margin:var(--space-6) 0;
}
.anime-card{
position:relative;
display:block;
border-radius:var(--radius-md);
overflow:hidden;
aspect-ratio:3 / 4;
text-decoration:none;
background:var(--color-bg-alt);
transition:transform 0.2s ease,box-shadow 0.2s ease;
}
.anime-card:hover{
transform:translateY(-3px) scale(1.02);
box-shadow:0 8px 24px rgba(0,0,0,0.25);
text-decoration:none;
}
.anime-card img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform 0.35s ease;
}
.anime-card:hover img{
transform:scale(1.06);
}
.anime-card__overlay{
position:absolute;
inset:0;
background:linear-gradient(
to top,
rgba(0,0,0,0.80) 0%,
rgba(0,0,0,0.35) 45%,
transparent 100%
);
transition:background 0.2s ease;
}
.anime-card:hover .anime-card__overlay{
background:linear-gradient(
to top,
rgba(0,0,0,0.88) 0%,
rgba(0,0,0,0.45) 50%,
rgba(0,0,0,0.10) 100%
);
}
.anime-card__title{
position:absolute;
bottom:0;
left:0;
right:0;
padding:var(--space-3) var(--space-3) var(--space-4);
color:#fff;
font-family:var(--font-ui);
font-size:20px;
font-weight:700;
line-height:1.3;
text-align:center;
text-shadow:0 1px 4px rgba(0,0,0,0.6);
}
.anime-card__tag{
position:absolute;
top:var(--space-2);
right:var(--space-2);
background:var(--color-accent);
color:#fff;
font-family:var(--font-ui);
font-size:0.68rem;
font-weight:700;
padding:3px 10px;
border-radius:20px;
text-transform:uppercase;
letter-spacing:0.07em;
z-index:2;
box-shadow:0 2px 6px rgba(0,0,0,0.30);
}
.anime-card__tag[data-status="termine"]{background:#27ae60;}
.anime-card__tag[data-status="en-cours"]{background:#2980b9;}
.anime-card__tag[data-status="pause"]{background:#e67e22;}
.anime-card__tag[data-status="abandonne"]{background:#7f8c8d;}
.anime-card__tag[data-status="a-voir"]{background:#8e44ad;}
.anime-grid--3col{grid-template-columns:repeat(3,1fr);}
.anime-grid--2col{grid-template-columns:repeat(2,1fr);}
.anime-grid--5col{grid-template-columns:repeat(5,1fr);}
.anime-grid--6col{grid-template-columns:repeat(6,1fr);}
@media (max-width:700px){
.anime-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-2);}
.anime-grid--3col{grid-template-columns:repeat(2,1fr);}
.anime-grid--5col{grid-template-columns:repeat(3,1fr);}
.anime-grid--6col{grid-template-columns:repeat(3,1fr);}
.anime-card__title{font-size:0.875rem;padding:var(--space-2) var(--space-2) var(--space-3);}
}
@media (max-width:400px){
.anime-grid{grid-template-columns:repeat(2,1fr);}
.anime-grid--5col{grid-template-columns:repeat(2,1fr);}
.anime-grid--6col{grid-template-columns:repeat(2,1fr);}
}
.sakura-lightbox{
display:none;
position:fixed;
inset:0;
z-index:9999;
background:rgba(0,0,0,0.92);
align-items:center;
justify-content:center;
cursor:zoom-out;
backdrop-filter:blur(4px);
}
.sakura-lightbox.is-open{
display:flex;
animation:lightbox-in 0.2s ease;
}
@keyframes lightbox-in{
from{opacity:0;}
to{opacity:1;}
}
.sakura-lightbox__img{
max-width:92vw;
max-height:90vh;
object-fit:contain;
border-radius:var(--radius-md);
box-shadow:0 24px 80px rgba(0,0,0,0.6);
cursor:default;
user-select:none;
}
.sakura-lightbox__close{
position:fixed;
top:16px;
right:20px;
width:40px;
height:40px;
border-radius:50%;
background:rgba(255,255,255,0.15);
border:none;
color:#fff;
font-size:22px;
line-height:1;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:background 0.15s;
z-index:10000;
}
.sakura-lightbox__close:hover{background:rgba(255,255,255,0.28);}
.sakura-lightbox__caption{
position:fixed;
bottom:20px;
left:50%;
transform:translateX(-50%);
color:rgba(255,255,255,0.75);
font-family:var(--font-ui);
font-size:var(--font-size-sm);
text-align:center;
max-width:600px;
padding:0 16px;
}
.entry-content img:not(.no-lightbox){
cursor:zoom-in;
transition:opacity 0.15s ease;
}
.entry-content img:not(.no-lightbox):hover{
opacity:0.92;
}
.sakura-links{
display:grid;
grid-template-columns:auto 1fr;
gap:var(--space-2) var(--space-4);
align-items:center;
margin:var(--space-8) 0;
padding:var(--space-5) var(--space-6);
background:var(--color-bg-alt);
border-radius:var(--radius-lg);
border:1px solid var(--color-border);
}
.sakura-links__label{
font-family:var(--font-ui);
font-size:var(--font-size-xs);
font-weight:700;
text-transform:uppercase;
letter-spacing:0.08em;
color:var(--color-text-muted);
white-space:nowrap;
align-self:start;
padding-top:8px;
}
.sakura-links__buttons{
display:flex;
flex-wrap:wrap;
gap:var(--space-2);
align-items:center;
}
.sakura-link-btn{
display:inline-flex;
align-items:center;
gap:7px;
padding:7px 14px;
border-radius:var(--radius-md);
font-family:var(--font-ui);
font-size:var(--font-size-sm);
font-weight:600;
text-decoration:none;
transition:all 0.18s ease;
white-space:nowrap;
border:1.5px solid transparent;
}
.sakura-link-btn svg{
width:15px;
height:15px;
flex-shrink:0;
}
.sakura-link-btn--official{
background:var(--color-accent);
color:#fff;
border-color:var(--color-accent);
}
.sakura-link-btn--official:hover{
background:var(--color-accent-dark);
border-color:var(--color-accent-dark);
color:#fff;
text-decoration:none;
transform:translateY(-1px);
box-shadow:0 4px 12px rgba(192,57,43,0.3);
}
.sakura-link-btn--x{
background:#000;
color:#fff;
border-color:#000;
}
.sakura-link-btn--x:hover{
background:#222;
color:#fff;
text-decoration:none;
transform:translateY(-1px);
box-shadow:0 4px 12px rgba(0,0,0,0.25);
}
.sakura-link-btn--default{
background:var(--color-surface);
color:var(--color-text);
border-color:var(--color-border);
}
.sakura-link-btn--default:hover{
background:var(--color-bg-alt);
border-color:var(--color-text-muted);
color:var(--color-text);
text-decoration:none;
transform:translateY(-1px);
}
[data-theme="dark"] .sakura-link-btn--x{
background:#fff;
color:#000;
border-color:#fff;
}
[data-theme="dark"] .sakura-link-btn--default{
background:var(--color-bg-alt);
border-color:var(--color-border);
color:var(--color-text);
}
.manga-grid{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:var(--space-3);
margin:var(--space-6) 0;
}
.manga-card{
display:block;
text-decoration:none;
border-radius:var(--radius-md);
overflow:hidden;
background:var(--color-surface);
border:1px solid var(--color-border);
transition:transform 0.18s ease,box-shadow 0.18s ease;
}
.manga-card:hover{
transform:translateY(-4px);
box-shadow:0 8px 20px rgba(0,0,0,0.12);
text-decoration:none;
}
.manga-card__cover{
width:100%;
aspect-ratio:2 / 3;
object-fit:cover;
display:block;
}
.manga-card__label{
display:block;
text-align:center;
font-family:var(--font-ui);
font-size:11px;
font-weight:600;
color:var(--color-text);
padding:5px 4px 6px;
background:var(--color-surface);
border-top:1px solid var(--color-border);
}
.manga-card:hover .manga-card__label{
color:var(--color-accent);
}
.manga-grid__amazon-note{
font-family:var(--font-ui);
font-size:var(--font-size-xs);
color:var(--color-text-muted);
text-align:center;
margin-bottom:var(--space-3);
margin-top:0;
}
@media (max-width:700px){
.manga-grid{grid-template-columns:repeat(4,1fr);gap:var(--space-2);}
}
@media (max-width:480px){
.manga-grid{grid-template-columns:repeat(3,1fr);}
}
.sakura-linkliste{
margin:var(--space-8) 0;
}
.sakura-linkliste__section{
margin-bottom:var(--space-10);
}
.sakura-linkliste__section-title,
.entry-content .sakura-linkliste__section-title{
font-family:var(--font-display);
font-size:1.25rem !important;
font-weight:700;
color:var(--color-text);
border-left:4px solid var(--color-accent);
padding:var(--space-2) 0 var(--space-2) var(--space-4);
margin:0 0 var(--space-5) 0 !important;
margin-top:0 !important;
display:flex;
align-items:center;
gap:var(--space-3);
}
.sakura-adult-toggle{
display:inline-flex;
align-items:center;
gap:6px;
font-size:0.8rem;
font-weight:600;
font-family:var(--font-ui);
background:var(--color-surface-raised);
border:1px solid var(--color-border);
border-radius:999px;
padding:3px 12px 3px 8px;
cursor:pointer;
color:var(--color-text-muted);
transition:background 0.2s,color 0.2s;
white-space:nowrap;
flex-shrink:0;
}
.sakura-adult-toggle:hover{
background:var(--color-accent);
color:#fff;
border-color:var(--color-accent);
}
.sakura-adult-toggle__icon{
font-size:1rem;
line-height:1;
}
[data-adult="hidden"] .sakura-linkliste__section[data-adult="1"] .sakura-liencard__thumb img{
filter:blur(16px);
transform:scale(1.05);
}
[data-adult="hidden"] .sakura-linkliste__section[data-adult="1"] .sakura-liencard__thumb{
position:relative;
overflow:hidden;
}
[data-adult="hidden"] .sakura-linkliste__section[data-adult="1"] .sakura-liencard__thumb::after{
content:"🔞";
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
font-size:2rem;
background:rgba(0,0,0,0.35);
border-radius:inherit;
pointer-events:none;
}
[data-adult="hidden"] .sakura-linkliste__section[data-adult="1"] .sakura-liencard__thumb--empty::after{
content:"🔞";
}
.sakura-liencard__thumb img{
transition:filter 0.3s ease,transform 0.3s ease;
}
.sakura-linkliste__grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:var(--space-4);
}
.sakura-linkliste__grid > * + *{
margin-top:0 !important;
}
.sakura-liencard{
display:flex;
flex-direction:column;
text-decoration:none;
color:inherit;
background:var(--color-surface);
border:1px solid var(--color-border);
border-radius:var(--radius-md);
overflow:hidden;
transition:transform 0.18s ease,box-shadow 0.18s ease,border-color 0.18s ease;
}
.sakura-liencard:hover{
transform:translateY(-4px);
box-shadow:0 8px 24px rgba(0,0,0,0.10);
border-color:var(--color-accent);
text-decoration:none;
color:inherit;
}
.sakura-liencard__thumb{
width:100%;
aspect-ratio:16 / 9;
overflow:hidden;
background:var(--color-accent-pale);
flex-shrink:0;
position:relative;
}
.sakura-liencard__thumb img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform 0.3s ease;
}
.sakura-liencard:hover .sakura-liencard__thumb img{
transform:scale(1.04);
}
.sakura-liencard__thumb--empty{
display:flex;
align-items:center;
justify-content:center;
font-size:2rem;
}
.sakura-liencard__body{
padding:var(--space-3) var(--space-4);
flex:1;
display:flex;
align-items:center;
}
.sakura-liencard__title{
font-family:var(--font-ui);
font-size:0.875rem;
font-weight:600;
color:var(--color-text);
line-height:1.4;
margin:0;
transition:color 0.15s ease;
}
.sakura-liencard:hover .sakura-liencard__title{
color:var(--color-accent);
}
@media (max-width:900px){
.sakura-linkliste__grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:540px){
.sakura-linkliste__grid{grid-template-columns:1fr;}
.sakura-liencard{flex-direction:row;align-items:center;}
.sakura-liencard__thumb{width:90px;height:68px;aspect-ratio:unset;flex-shrink:0;}
.sakura-liencard__body{padding:var(--space-2) var(--space-3);}
}
.sakura-hp{
padding-bottom:var(--space-16);
padding-top:var(--space-4);
}
.sakura-hp__section{
padding:var(--space-12) 0;
}
.sakura-hp__section--alt{
background:var(--color-bg-alt);
}
.sakura-hp__container{
width:100%;
max-width:var(--max-width-wide);
margin:0 auto;
padding:0 var(--space-6);
}
.sakura-hp__header{
display:flex;
align-items:baseline;
justify-content:space-between;
gap:var(--space-4);
margin-bottom:var(--space-8);
padding-bottom:var(--space-4);
border-bottom:2px solid var(--color-border);
position:relative;
}
.sakura-hp__title{
font-family:var(--font-display);
font-size:var(--font-size-xl);
font-weight:700;
color:var(--color-text);
margin:0;
}
.sakura-hp__header::after{
content:'';
position:absolute;
bottom:-2px;
left:0;
width:3rem;
height:2px;
background:var(--color-accent);
}
.sakura-hp__more{
font-family:var(--font-ui);
font-size:var(--font-size-sm);
font-weight:600;
color:var(--color-accent);
text-decoration:none;
white-space:nowrap;
flex-shrink:0;
transition:color 0.15s ease;
}
.sakura-hp__more:hover{
color:var(--color-accent-dark);
text-decoration:none;
}
.sakura-hp__grid{
display:grid;
gap:var(--space-6);
}
.sakura-hp__grid > *{
min-width:0;
max-width:100%;
}
.sakura-hp__grid--2{grid-template-columns:repeat(2,1fr);}
.sakura-hp__grid--3{grid-template-columns:repeat(3,1fr);}
.sakura-hp__grid--4{grid-template-columns:repeat(4,1fr);}
.sakura-hp__grid .post-card__thumbnail{
width:100%;
overflow:hidden;
}
.sakura-hp__grid .post-card__thumbnail img{
width:100%;
max-width:100%;
height:100%;
object-fit:cover;
display:block;
}
@media (max-width:900px){
.sakura-hp__grid--4{grid-template-columns:repeat(2,1fr);}
.sakura-hp__grid--3{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:540px){
.sakura-hp__grid--2,
.sakura-hp__grid--3,
.sakura-hp__grid--4{grid-template-columns:1fr;}
}
.sakura-hp__empty{
color:var(--color-text-muted);
font-style:italic;
font-family:var(--font-ui);
}
.sakura-hp__grid{
align-items:stretch;
}
.sakura-hp__grid .post-card{
display:flex;
flex-direction:column;
height:100%;
}
.sakura-hp__grid .post-card__body{
flex:1;
display:flex;
flex-direction:column;
}
.sakura-hp__grid .post-card__title{
flex:1;
}
.sakura-hp__grid .post-card__footer,
.post-card__footer{
display:none !important;
}
.sakura-archive-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:20px;
align-items:start;
width:100%;
}
.sakura-archive-grid .post-card{
display:flex;
flex-direction:column;
height:100%;
min-width:0;
}
.sakura-archive-grid .post-card__body{
flex:1;
}
.sakura-archive-grid .post-card__excerpt,
.sakura-archive-grid .post-card__footer,
.sakura-archive-grid .post-card__author,
.sakura-archive-grid .post-card__read-more{
display:none !important;
}
@media (max-width:1280px){
.sakura-archive-grid{grid-template-columns:repeat(4,1fr);}
}
@media (max-width:960px){
.sakura-archive-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:640px){
.sakura-archive-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
}
@media (max-width:400px){
.sakura-archive-grid{grid-template-columns:1fr;}
}
.archive-header{
padding:32px 0 28px;
border-bottom:2px solid var(--color-border);
margin-bottom:48px;
}
.archive-header__title{
font-size:var(--font-size-xl);
font-weight:700;
margin:0 0 6px;
}
.archive-header__desc{
color:var(--color-text-muted);
font-size:var(--font-size-sm);
margin:0;
}
.page-numbers{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:4px;
list-style:none;
padding:0;
margin:48px 0 0;
justify-content:center;
}
.page-numbers li a,
.page-numbers li span.current,
.page-numbers li span.dots{
display:flex;
align-items:center;
justify-content:center;
min-width:36px;
height:36px;
padding:0 10px;
border-radius:var(--radius-sm);
font-size:var(--font-size-sm);
font-weight:600;
text-decoration:none;
transition:background .15s,color .15s;
}
.page-numbers li a{
color:var(--color-text-muted);
background:transparent;
border:none;
}
.page-numbers li a:hover{
background:var(--color-accent);
color:#fff;
}
.page-numbers li span.current{
background:var(--color-accent);
color:#fff;
border:none;
}
.page-numbers li span.dots{
color:var(--color-text-muted);
background:none;
border:none;
min-width:20px;
}
.comments-area{
margin-top:var(--space-16);
padding-top:var(--space-12);
border-top:1px solid var(--color-border);
}
.comments-header{
margin-bottom:var(--space-8);
}
.comments-title{
display:flex;
align-items:center;
gap:var(--space-3);
font-family:var(--font-display);
font-size:var(--font-size-xl);
font-weight:700;
color:var(--color-text);
margin:0;
}
.comments-title__icon{
color:var(--color-accent);
font-size:0.9em;
}
.comment-list{
list-style:none;
padding:0;
margin:0;
display:flex;
flex-direction:column;
gap:var(--space-5);
}
.comment-list .children{
list-style:none;
padding:0;
margin:var(--space-4) 0 0 calc(var(--space-8) + 24px);
display:flex;
flex-direction:column;
gap:var(--space-3);
position:relative;
}
.comment-list .children::before{
content:'';
position:absolute;
left:calc(-1 * var(--space-5));
top:0;
bottom:0;
width:2px;
background:linear-gradient(to bottom,var(--color-accent),transparent 90%);
opacity:0.25;
border-radius:2px;
}
@media (max-width:600px){
.comment-list .children{
margin-left:var(--space-6);
}
}
.comment-card{
display:flex;
gap:var(--space-4);
padding:var(--space-5) var(--space-6);
background:var(--color-surface);
border:1px solid var(--color-border);
border-radius:var(--radius-lg);
transition:border-color 0.2s ease;
}
.comment-card:hover{
border-color:color-mix(in srgb,var(--color-accent) 30%,var(--color-border));
}
.comment--reply > .comment-card{
background:var(--color-bg-alt);
border-left:3px solid var(--color-accent);
border-radius:0 var(--radius-lg) var(--radius-lg) 0;
padding-left:var(--space-5);
}
.comment-card--author{
background:color-mix(in srgb,var(--color-accent) 4%,var(--color-surface));
border-color:color-mix(in srgb,var(--color-accent) 25%,var(--color-border));
}
.comment-card--author:hover{
border-color:color-mix(in srgb,var(--color-accent) 40%,var(--color-border));
}
.comment--reply > .comment-card--author{
background:color-mix(in srgb,var(--color-accent) 5%,var(--color-bg-alt));
border-color:color-mix(in srgb,var(--color-accent) 25%,var(--color-border));
}
.comment-card__body{
flex:1;
min-width:0;
}
.comment-card__header{
margin-bottom:var(--space-3);
display:flex;
flex-direction:column;
gap:var(--space-1);
}
.comment-card__meta{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:var(--space-3);
}
.comment-card__name{
font-family:var(--font-ui);
font-weight:700;
font-size:var(--font-size-sm);
color:var(--color-text);
display:flex;
align-items:center;
gap:var(--space-2);
}
.comment-card__name a{
color:inherit;
text-decoration:none;
}
.comment-card__name a:hover{
color:var(--color-accent);
text-decoration:none;
}
.comment-card__name--author{
color:var(--color-accent);
}
.comment-author-label{
display:inline-flex;
align-items:center;
gap:4px;
font-family:var(--font-ui);
font-size:var(--font-size-xs);
font-weight:600;
text-transform:uppercase;
letter-spacing:0.07em;
color:var(--color-accent);
background:color-mix(in srgb,var(--color-accent) 10%,transparent);
padding:2px 9px;
border-radius:999px;
}
.comment-author-label::before{
content:'✦';
font-size:8px;
}
.comment-card__date{
font-family:var(--font-ui);
font-size:var(--font-size-xs);
color:var(--color-text-light);
}
.comment-pending{
display:inline-flex;
align-items:center;
gap:5px;
font-family:var(--font-ui);
font-size:var(--font-size-xs);
color:var(--color-text-muted);
font-style:italic;
}
.comment-card__text{
font-size:var(--font-size-sm);
color:var(--color-text);
line-height:var(--line-height-normal);
}
.comment-card__text p{
margin-bottom:var(--space-2);
}
.comment-card__text p:last-child{
margin-bottom:0;
}
.comment-card__footer{
margin-top:var(--space-3);
}
.comment-reply-link{
display:inline-flex;
align-items:center;
gap:5px;
font-family:var(--font-ui);
font-size:var(--font-size-xs);
font-weight:600;
color:var(--color-text-muted);
text-decoration:none;
padding:4px 10px;
border:1px solid var(--color-border);
border-radius:999px;
transition:all 0.18s ease;
}
.comment-reply-link:hover{
color:var(--color-accent);
border-color:var(--color-accent);
background:var(--color-accent-pale);
text-decoration:none;
}
.comments-closed{
display:flex;
align-items:center;
gap:var(--space-2);
font-family:var(--font-ui);
font-size:var(--font-size-sm);
color:var(--color-text-muted);
font-style:italic;
margin-top:var(--space-6);
}
.comment-form-wrap{
margin-top:var(--space-10);
padding-top:0;
}
.comment-form-header{
margin-bottom:var(--space-6);
}
.comment-form-title{
display:flex;
align-items:center;
gap:var(--space-3);
font-family:var(--font-display);
font-size:var(--font-size-lg);
font-weight:700;
color:var(--color-text);
margin:0 0 var(--space-1) 0;
}
.comment-form-title__icon{
color:var(--color-accent);
font-size:0.9em;
}
.comment-form-subtitle{
font-family:var(--font-ui);
font-size:var(--font-size-xs);
color:var(--color-text-muted);
margin:0;
}
.comment-form{
display:flex;
flex-direction:column;
gap:var(--space-5);
}
.comment-form > p{
margin:0;
}
.comment-fields-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:var(--space-4);
}
@media (max-width:540px){
.comment-fields-row{
grid-template-columns:1fr;
}
}
.comment-field-group{
display:flex;
flex-direction:column;
gap:var(--space-2);
}
.comment-field-group--full{
grid-column:1 / -1;
}
.comment-field-label{
display:block;
font-family:var(--font-ui);
font-size:var(--font-size-sm);
font-weight:600;
color:var(--color-text-muted);
}
.comment-field-label .required{
color:var(--color-accent);
margin-left:2px;
}
.comment-field-input{
width:100%;
padding:var(--space-3) var(--space-4);
background:var(--color-surface);
border:1px solid var(--color-border);
border-radius:var(--radius-md);
color:var(--color-text);
font-family:var(--font-body);
font-size:var(--font-size-base);
transition:border-color var(--transition),box-shadow var(--transition);
outline:none;
appearance:none;
}
.comment-field-input::placeholder{
color:var(--color-text-light);
opacity:0.7;
}
.comment-field-input:focus{
border-color:var(--color-accent);
box-shadow:0 0 0 3px rgba(192,57,43,0.10);
}
.comment-field-input--textarea{
resize:vertical;
min-height:130px;
line-height:var(--line-height-normal);
}
.comment-form .form-submit{
margin:0 0 var(--space-10) 0;
}
.comment-form .form-submit input[type="submit"]{
cursor:pointer;
}
#cancel-comment-reply-link{
font-family:var(--font-ui);
font-size:var(--font-size-sm);
color:var(--color-text-muted);
margin-left:var(--space-4);
text-decoration:none;
transition:color var(--transition);
}
#cancel-comment-reply-link:hover{
color:var(--color-accent);
}
[data-theme="dark"] .comment-card{
border-color:var(--color-border);
}
[data-theme="dark"] .comment--reply > .comment-card{
background:var(--color-bg-alt);
}
[data-theme="dark"] .comment-card--author{
background:color-mix(in srgb,var(--color-accent) 6%,var(--color-surface));
border-color:color-mix(in srgb,var(--color-accent) 30%,var(--color-border));
}
[data-theme="dark"] .comment--reply > .comment-card--author{
background:color-mix(in srgb,var(--color-accent) 7%,var(--color-bg-alt));
}
[data-theme="dark"] .comment-avatar{
border-color:var(--color-border) !important;
}
[data-theme="dark"] .comment-author-badge{
border-color:var(--color-bg-alt);
}
@media (max-width:480px){
.comment-card{
flex-direction:column;
gap:var(--space-3);
padding:var(--space-4);
}
.comment-card__avatar{
display:flex;
align-items:center;
gap:var(--space-3);
}
.comment-card__meta{
gap:var(--space-2);
}
}
.article-header__subtitle{display:none;}

/* ===== PUBLICITÉ SIDEBAR STICKY ===== */
.sidebar-ad-sticky {
    display: none;
}
@media (min-width: 900px) {
    /* La sidebar prend toute la hauteur du grid pour que sticky fonctionne */
    .site-sidebar {
        align-self: stretch !important;
        position: static !important;
    }
    .sidebar-ad-sticky {
        display: block;
        position: sticky;
        top: 80px;
    }
}
/* ===== FIN PUBLICITÉ SIDEBAR ===== */