/* ==========================================================================
   Chanbara France — charte graphique « Sport moderne »
   Blanc, bleu France, bleu nuit, rouge torii. Titres Archivo, texte Inter,
   kanji décoratifs Noto Serif JP (sous-ensemble). Mobile d'abord.
   ========================================================================== */

/* ---------- Polices auto-hébergées (licence OFL, voir fonts/OFL.txt) ---------- */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 600; font-display: swap;
    src: url("../fonts/archivo-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 800; font-display: swap;
    src: url("../fonts/archivo-latin-800.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("../fonts/inter-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
    src: url("../fonts/inter-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
    src: url("../fonts/inter-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("../fonts/inter-latin-700.woff2") format("woff2"); }
/* Uniquement 刀 規 帯 語 剣 侍 練 暦 et チャンバラスポン (+ marques de sonorisation). */
@font-face { font-family: "Noto Serif JP"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("../fonts/noto-serif-jp-700-subset.woff2") format("woff2");
    unicode-range: U+3099-309A, U+30B9-30BA, U+30C1-30C2, U+30CF-30D1, U+30DB-30DD, U+30E3, U+30E9, U+30F3,
        U+4F8D, U+5200, U+5263, U+5E2F, U+66A6, U+7DF4, U+898F, U+8A9E; }
/* Kanji et kana du vocabulaire et des fiches (contenus de lancement) : téléchargé seulement sur les pages qui les affichent.
   À régénérer (API Google Fonts, paramètre text=) quand de nouveaux caractères apparaissent. */
@font-face { font-family: "Noto Serif JP"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("../fonts/noto-serif-jp-700-lexique.woff2") format("woff2");
    unicode-range: U+3042, U+3044, U+3046, U+3048, U+304A-3059, U+305B-305D, U+305F-3061, U+3063-3064, U+3066-3072, U+3075-3076,
        U+307B-307F, U+3081-3082, U+3084-308A, U+308C-308D, U+308F, U+3092-3093, U+30A2, U+30A8, U+30BD, U+30C4,
        U+30C8, U+30D5, U+30EA, U+30FB-30FC, U+4E00, U+4E09-4E0B, U+4E21, U+4E2D, U+4E3B, U+4E71, U+4E8C, U+4E92,
        U+4ED8, U+4EE3, U+4F0F, U+4F1A, U+4F1D, U+4F4D, U+4F53, U+4F5C, U+5143, U+5148, U+514D, U+5185, U+5206-5207,
        U+5217, U+521D, U+5224, U+5247, U+526F, U+5287, U+52D5, U+52DD, U+53CD, U+53E4, U+53F7, U+5408, U+56DE,
        U+56F2, U+5730, U+57FA, U+5834, U+58EB, U+5916, U+5927, U+592A, U+59CB, U+5B9A, U+5BE9, U+5BFE, U+5C0F,
        U+5DFB, U+5EA7, U+5EF6, U+5F15, U+5F62, U+5F79, U+5F97, U+5FC3, U+60F3, U+6226, U+6247, U+624B, U+6253,
        U+6280, U+62BC, U+62ED, U+634C, U+639B, U+63AC, U+6559, U+6574, U+6642, U+6728, U+672C, U+6756, U+67C4,
        U+67FB, U+68D2, U+691C, U+696F, U+69CB, U+69CD, U+6A2A, U+6B63, U+6B69, U+6B8B, U+6BB5, U+6C17, U+7136,
        U+7269, U+751F, U+7686, U+76EE, U+76F8, U+7740, U+77ED, U+793C, U+79F0, U+7A2E, U+7A3D, U+7A81, U+7ACB,
        U+7BC4, U+7D0D, U+7D1A, U+7F6E, U+80F4, U+81EA, U+81F4, U+89D2, U+8A31, U+8A66, U+8B70, U+8B77, U+8CA0,
        U+8DB3, U+8EAB, U+8F29, U+8FD4, U+9001, U+9053, U+932C, U+9354, U+9577, U+9593, U+9650, U+9762, U+9ED9; }

/* ---------- Jetons ---------- */
:root {
    --bleu: #0055a4;
    --nuit: #0b2a5b;
    --rouge: #ef4135;         /* torii, dégradés, décors */
    --rouge-texte: #c0291f;   /* texte rouge et fonds de boutons rouges : contraste AA sur blanc */
    --rouge-texte-fonce: #a32219; /* survol des boutons rouges */
    --texte: #0c1b33;
    --texte-2: #5a6782;
    --bord: #e6e9ef;
    --rayon: 14px;

    --blanc: #fff;
    --fond-2: #f5f7fb;        /* fonds légers : tableaux, citations */
    --bleu-pale: #e8f0fb;
    --rouge-pale: #fdecec;
    --bleu-fonce: #00447f;    /* survol des boutons */
    --nav: #33415c;
    --ombre: 0 8px 24px rgba(11, 42, 91, .08);
    --font-titre: "Archivo", "Arial Black", system-ui, sans-serif;
    --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-kanji: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
    color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 17px/1.6 var(--font); color: var(--texte); background: var(--blanc); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--bleu); text-underline-offset: .15em; }
a:hover { color: var(--nuit); }
h1, h2, h3 { font-family: var(--font-titre); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; color: var(--texte); }
h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); margin: .2em 0 .5em; }
h2 { font-size: clamp(1.35rem, 3.2vw, 1.75rem); }
h3 { font-size: 1.15rem; letter-spacing: -.01em; }
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; border-radius: 4px; }
[lang="ja"] { font-family: var(--font-kanji); font-weight: 700; }
.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; background: var(--bleu); color: #fff; padding: 8px 12px; z-index: 30; border-radius: 8px; }
main { padding-block: 16px 56px; }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--bleu); color: #fff;
    border: 2px solid var(--bleu); padding: 10px 18px; border-radius: 10px; font: inherit; font-weight: 600; line-height: 1.2;
    text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.btn:hover { background: var(--bleu-fonce); border-color: var(--bleu-fonce); color: #fff; }
.btn--pill { border-radius: 999px; padding: 9px 18px; font-size: .9rem; }
.btn--ghost, .btn-outline { background: transparent; color: var(--bleu); }
.btn--ghost:hover, .btn-outline:hover { background: var(--bleu-pale); color: var(--bleu); }
.btn--rouge, .btn-danger { background: var(--rouge-texte); border-color: var(--rouge-texte); color: #fff; }
.btn--rouge:hover, .btn-danger:hover { background: var(--rouge-texte-fonce); border-color: var(--rouge-texte-fonce); }
.btn-small { padding: 4px 10px; font-size: .9rem; }

/* ---------- En-tête et navigation ---------- */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--bord);
    backdrop-filter: saturate(1.4) blur(6px); }
.header-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding-block: 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--texte); }
.brand img { width: clamp(28px, 8vw, 34px); height: auto; flex: none; }
.wordmark { font-family: var(--font-titre); font-weight: 800; font-size: clamp(1.15rem, 4.6vw, 1.4rem); letter-spacing: -.03em; line-height: 1; color: var(--texte); }
.wordmark b { color: var(--bleu); font-weight: 800; }
.brand-tag { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--texte-2); }

.nav-toggle { display: inline-flex; align-items: center; gap: 8px; background: var(--blanc); color: var(--texte); border: 1px solid var(--bord);
    border-radius: 999px; padding: 7px 12px; font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; }
.nav-toggle[hidden] { display: none; }
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 16px; height: 2px; background: currentColor; border-radius: 2px; }
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -5px; }
.nav-toggle-bars::after { top: 5px; }
.site-header[data-menu="open"] .nav-toggle-bars { background: transparent; }
.site-header[data-menu="open"] .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
.site-header[data-menu="open"] .nav-toggle-bars::after { top: 0; transform: rotate(-45deg); }

.main-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.main-nav a, .nav-sub summary { color: var(--nav); text-decoration: none; font-weight: 500; padding: 8px 10px; border-radius: 8px; }
.main-nav a:hover, .nav-sub summary:hover { color: var(--bleu); background: var(--bleu-pale); }
.main-nav a[aria-current="page"], .nav-sub summary.is-active { color: var(--bleu); font-weight: 600; }
.main-nav .nav-cta, .main-nav .nav-cta:hover { color: #fff; }
.main-nav .nav-cta:hover { background: var(--bleu-fonce); }
.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-sub details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.nav-sub details > summary::-webkit-details-marker { display: none; }
.nav-sub summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.nav-sub details[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.nav-sub ul { list-style: none; margin: 0; padding: 0; }

/* Mobile : la navigation passe sous le logo, en liste. Repliée derrière « Menu » quand nav.js est actif. */
@media (max-width: 959.98px) {
    .site-header .main-nav--site { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 8px; padding-bottom: 8px; }
    .site-header[data-menu="closed"] .main-nav--site { display: none; }
    .site-header[data-menu="open"] .main-nav--site { max-height: calc(100dvh - 64px); overflow-y: auto; } /* en-tête collant */
    .nav-list { display: grid; }
    .nav-list > li { border-bottom: 1px solid var(--bord); }
    .nav-list a, .nav-sub summary { display: flex; padding: 12px 6px; }
    .nav-sub ul { padding: 0 0 8px 14px; }
    .nav-sub ul a { padding-block: 8px; }
    .main-nav .nav-cta { align-self: flex-start; margin-top: 4px; }
}
/* Grand écran : navigation en ligne, « Découvrir » en menu déroulant. */
@media (min-width: 960px) {
    .header-inner { flex-wrap: nowrap; padding-block: 14px; }
    .main-nav { flex-wrap: nowrap; gap: 18px; }
    .nav-list { display: flex; align-items: center; gap: 2px; }
    .nav-sub { position: relative; }
    .nav-sub ul { position: absolute; top: calc(100% + 10px); left: -8px; min-width: 250px; background: var(--blanc); border: 1px solid var(--bord);
        border-radius: var(--rayon); box-shadow: var(--ombre); padding: 8px; z-index: 25; }
    .nav-sub ul a { display: block; padding: 9px 12px; white-space: nowrap; }
    .nav-toggle { display: none; }
}

/* ---------- Fil d'Ariane ---------- */
.breadcrumb { font-size: .875rem; color: var(--texte-2); margin: 4px 0 8px; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.breadcrumb li { display: inline-flex; align-items: center; gap: 4px; }
.breadcrumb li + li::before { content: "›"; color: #9aa5ba; margin-right: 2px; }
.breadcrumb a { color: var(--texte-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--bleu); text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--texte); font-weight: 500; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; margin: 8px 0 40px; padding: 36px 22px 30px; border-radius: 18px; color: #fff;
    background: linear-gradient(115deg, var(--nuit) 0%, var(--bleu) 55%, var(--rouge) 140%); }
.hero::after { content: "剣"; position: absolute; z-index: -1; right: -10px; bottom: -.32em; font-family: var(--font-kanji); font-weight: 700;
    font-size: clamp(170px, 34vw, 280px); line-height: 1; color: rgba(255, 255, 255, .08); pointer-events: none; }
.hero h1 { color: #fff; margin: 0 0 14px; max-width: 680px; font-size: clamp(1.9rem, 6.4vw, 3.3rem); line-height: 1.06; letter-spacing: -.02em; }
.hero p { margin: 0; max-width: 540px; font-size: 1.05rem; line-height: 1.55; opacity: .92; }
@media (min-width: 720px) { .hero { padding: 56px 48px 48px; } }
.hero .kanji-ico { background: rgba(255, 255, 255, .16); color: #fff; }
.guide-image { display: block; width: 100%; max-height: 380px; object-fit: cover; border-radius: var(--rayon); margin: 0 0 24px; }
.guide-updated { margin-top: 32px; }

/* Raccourcis par profil */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; color: #fff; text-decoration: none;
    font-size: .95rem; font-weight: 500; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28);
    transition: background .15s, border-color .15s; }
.chip::after { content: "→"; opacity: .7; }
.chip:hover { color: #fff; background: rgba(255, 255, 255, .24); border-color: rgba(255, 255, 255, .5); }

/* ---------- Sections ---------- */
.section { margin-bottom: 44px; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 16px; }
.section-head h2 { margin: 0; }
.more { font-weight: 600; text-decoration: none; }
.more:hover { text-decoration: underline; }
.empty { color: var(--texte-2); padding: 20px; border: 1px dashed var(--bord); border-radius: var(--rayon); margin: 0; }
.home-columns { display: grid; gap: 0 32px; }
@media (min-width: 960px) { .home-columns { grid-template-columns: 2fr 1fr; } }

/* ---------- Tuiles « Découvrir » ---------- */
.tiles { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 520px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .tiles { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.tile { display: block; padding: 20px; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--blanc); color: inherit;
    text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.tile:hover { color: inherit; border-color: #cdd6e4; box-shadow: var(--ombre); transform: translateY(-2px); }
.tile h3 { margin: 0 0 6px; font-size: 1.15rem; }
.tile p { margin: 0; font-size: .92rem; line-height: 1.45; color: var(--texte-2); }
/* Largeur libre au-delà de 42 px : les noms d'armes en kanji tiennent sur une ligne (長剣フリー). */
.kanji-ico { display: grid; place-items: center; width: max-content; min-width: 42px; height: 42px; padding: 0 9px; white-space: nowrap; margin-bottom: 12px; border-radius: 10px;
    background: var(--rouge-pale); color: var(--rouge); font-family: var(--font-kanji); font-weight: 700; font-size: 1.3rem; line-height: 1; }
.tiles > :nth-child(even) .kanji-ico { background: var(--bleu-pale); color: var(--bleu); }

/* ---------- Cartes (actualités) ---------- */
.cards { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.card { background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon); overflow: hidden; transition: box-shadow .15s, transform .15s; }
.card:hover { transform: translateY(-2px); box-shadow: var(--ombre); }
.card-link { display: block; color: inherit; text-decoration: none; height: 100%; }
.card-link:hover { color: inherit; }
.card img, .card-placeholder { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card-placeholder { display: grid; place-items: center; font-size: 3.5rem; color: rgba(255, 255, 255, .5);
    background: linear-gradient(115deg, var(--nuit), var(--bleu) 70%, var(--rouge) 150%); }
.card-body { padding: 14px 16px 18px; }
.card-body h3 { margin: 6px 0 4px; font-size: 1.1rem; }
.card-body time { font-size: .85rem; color: var(--texte-2); }
.card-body p { margin: 8px 0 0; font-size: .95rem; color: var(--texte-2); }
.tag { display: inline-block; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--rouge-texte); text-decoration: none; }

.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.filters a { padding: 6px 14px; border: 1px solid var(--bord); border-radius: 999px; text-decoration: none; color: var(--nav); background: var(--blanc); font-weight: 500; }
.filters a[aria-current="page"] { background: var(--bleu); color: #fff; border-color: var(--bleu); }
.pager { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 32px; }

/* ---------- Article / pages ---------- */
.article { max-width: 760px; margin-inline: auto; }
.article-meta { color: var(--texte-2); font-size: .9rem; display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.prose h2 { margin-top: 1.8em; }
.prose blockquote { margin: 1em 0; padding: .6em 1em; border-left: 4px solid var(--bleu); background: var(--fond-2); border-radius: 0 8px 8px 0; }
.gallery { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-top: 32px; }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }

.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.lightbox::backdrop { background: rgba(5, 15, 35, .94); }
.lightbox img { max-width: 94vw; max-height: 88vh; margin: 6vh auto 0; object-fit: contain; }
.lightbox button { position: fixed; background: rgba(0, 0, 0, .5); color: #fff; border: 0; font-size: 2.2rem; width: 52px; height: 52px; border-radius: 50%; cursor: pointer; }
.lb-close { top: 12px; right: 12px; }
.lb-prev { left: 12px; top: 50%; }
.lb-next { right: 12px; top: 50%; }

/* ---------- Page d'erreur ---------- */
.error-page { text-align: center; padding-block: 48px; }
.error-code { margin: 0; font-family: var(--font-titre); font-weight: 800; font-size: clamp(4rem, 16vw, 7rem); line-height: 1;
    background: linear-gradient(115deg, var(--nuit), var(--bleu) 55%, var(--rouge)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ---------- Pied de page ---------- */
.site-footer { margin-top: 24px; padding-block: 36px 28px; background: var(--fond-2); border-top: 1px solid var(--bord); font-size: .95rem; color: var(--texte-2); }
.footer-grid { display: grid; gap: 28px; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer-note { margin: 14px 0 0; max-width: 420px; }
.footer-social { display: flex; gap: 14px; flex-wrap: wrap; margin: 12px 0 0; }
.footer-col h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--texte); margin: 0 0 10px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.site-footer a { color: var(--texte-2); text-decoration: none; }
.site-footer a:hover { color: var(--bleu); text-decoration: underline; }
.site-footer .brand { color: var(--texte); }
.site-footer .brand:hover { text-decoration: none; }

/* ---------- Formulaires (contact, administration) ---------- */
.admin main { padding-top: 24px; }
.admin .header-inner { flex-wrap: wrap; }
.narrow { max-width: 460px; margin: 32px auto; }
.box { background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 20px; }
.box h2 { margin-top: 0; font-size: 1.2rem; }
.small { font-size: .85rem; color: var(--texte-2); }
.form { display: grid; gap: 14px; }
.form label { display: grid; gap: 4px; font-weight: 600; }
.form input, .form select, .form textarea { font: inherit; padding: 10px 12px; border: 1px solid #cfd6e2; border-radius: 10px; background: var(--blanc); color: var(--texte); width: 100%; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 3px solid rgba(0, 85, 164, .3); outline-offset: 1px; border-color: var(--bleu); }
.form fieldset { border: 1px solid var(--bord); border-radius: 10px; display: flex; gap: 18px; flex-wrap: wrap; }
.form fieldset label { display: flex; gap: 6px; align-items: center; font-weight: 400; }
.form fieldset input { width: auto; }
.form label.check { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.form label.check input { width: auto; margin: 0; }
.inline { display: inline; margin: 0; }
.linklike { background: none; border: 0; color: var(--nav); font: inherit; font-weight: 500; padding: 8px 10px; cursor: pointer; border-radius: 8px; }
.linklike:hover { color: var(--rouge-texte); background: var(--rouge-pale); }
.flash { padding: 10px 14px; border-radius: 10px; border: 1px solid; white-space: pre-line; }
.flash-success { background: #e7f5ec; border-color: #9fd3b2; color: #14532d; }
.flash-error { background: var(--rouge-pale); border-color: #f3a39c; color: #7f1d16; }
.flash-info { background: var(--bleu-pale); border-color: #a9c6ea; color: var(--nuit); }
.admin-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.table { width: 100%; border-collapse: collapse; background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon); overflow: hidden; }
.table th, .table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--bord); vertical-align: middle; }
.table th { background: var(--fond-2); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texte-2); }
@media (max-width: 640px) {
    .table thead { display: none; }
    .table tr { display: block; border-bottom: 1px solid var(--bord); padding: 8px 0; }
    .table td { display: block; border: 0; padding: 2px 12px; }
}
.status { font-size: .8rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.status-published { background: #e7f5ec; color: #14532d; }
.status-draft { background: #eef0f4; color: #4b5563; }
.label { display: block; font-weight: 600; margin-bottom: 4px; }
.form textarea[data-rich-editor] { font-family: ui-monospace, monospace; }
.dropzone { border: 2px dashed #cfd6e2; border-radius: var(--rayon); padding: 16px; text-align: center; }
.dropzone.drag { border-color: var(--bleu); background: var(--bleu-pale); }
.dropzone label.btn { display: inline-flex; font-weight: 600; }
.photo-status { white-space: pre-line; min-height: 1.4em; }
.photo-status.error { color: var(--rouge-texte); }
.photo-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.photo-list li { position: relative; background: var(--blanc); border: 1px solid var(--bord); border-radius: 10px; overflow: hidden; }
.photo-list img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.photo-tools { display: flex; justify-content: center; gap: 4px; padding: 6px; }
.cover-badge { position: absolute; top: 6px; left: 6px; background: var(--bleu); color: #fff; font-size: .75rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.danger-zone { margin-top: 32px; text-align: right; }
.row-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.row-form input[type=text], .row-form select { font: inherit; padding: 6px 10px; border: 1px solid #cfd6e2; border-radius: 8px; background: var(--blanc); color: var(--texte); }
.contact-form label { display: block; font-weight: 600; }
.contact-form .form-row { display: grid; gap: 14px; }
@media (min-width: 640px) { .contact-form .form-row { grid-template-columns: 1fr 1fr; } }
.contact-form .form-row > div, .contact-form > div { display: grid; gap: 4px; }
.field-error { color: #c0291f; font-size: .9rem; }
[aria-invalid="true"] { border-color: var(--rouge) !important; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-grid { display: grid; gap: 14px; }
@media (min-width: 720px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.box + .box, .form .box { margin-top: 0; }
.box-actions [hidden] { display: none; }
code { background: var(--fond-2); padding: 1px 6px; border-radius: 4px; }
.message-meta { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; }
.message-meta dt { font-weight: 600; }
.message-meta dd { margin: 0; }
.message-body { white-space: normal; }
.checks { list-style: none; padding: 0; line-height: 2; }

/* ---------- Contenu riche (éditeur) ---------- */
.t-petit { font-size: .85em; }
.t-grand { font-size: 1.25em; }
.t-tres-grand { font-size: 1.6em; line-height: 1.2; }
.c-or { color: var(--bleu); }   /* classe historique de l'éditeur : couleur d'accent */
.c-rouge { color: var(--rouge-texte); }
.c-gris { color: var(--texte-2); }
.a-gauche { text-align: left; }
.a-centre { text-align: center; }
.a-droite { text-align: right; }
/* L'alignement choisi l'emporte sur celui des cellules d'en-tête */
.prose :is(p, h2, h3, td, th).a-gauche { text-align: left; }
.prose :is(p, h2, h3, td, th).a-centre { text-align: center; }
.prose :is(p, h2, h3, td, th).a-droite { text-align: right; }
.prose img { max-width: 100%; height: auto; border-radius: 8px; }
.img-centre { display: block; margin: 1em auto; }
.img-gauche, .img-droite { display: block; margin: 1em auto; }
@media (min-width: 640px) {
    .img-gauche { float: left; margin: .3em 1em .6em 0; max-width: 50%; }
    .img-droite { float: right; margin: .3em 0 .6em 1em; max-width: 50%; }
}
.table-scroll { overflow-x: auto; margin: 1em 0; }
.prose table { border-collapse: collapse; width: 100%; }
.prose th, .prose td { border: 1px solid var(--bord); padding: .5em .75em; vertical-align: middle; }
.prose th { background: var(--fond-2); text-align: left; }
.prose thead th { background: var(--bleu-pale); }
.video-yt { position: relative; aspect-ratio: 16 / 9; background: var(--nuit); border-radius: 10px; margin: 1em 0; overflow: hidden; }
.video-yt iframe { width: 100%; height: 100%; border: 0; }
.video-yt-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--rouge-texte); color: #fff; border: 2px solid var(--rouge-texte);
    padding: 10px 18px; border-radius: 999px; font: inherit; font-weight: 600; cursor: pointer; }
.video-yt-play:hover { background: var(--rouge-texte-fonce); border-color: var(--rouge-texte-fonce); }

/* ---------- Partage d'un article ---------- */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--bord); }
.share-label { font-weight: 600; margin-right: 4px; }
.share-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--bord); border-radius: 999px;
    background: var(--blanc); color: var(--texte); font: inherit; font-size: .95rem; text-decoration: none; cursor: pointer; }
.share-btn:hover { border-color: var(--bleu); color: var(--bleu); }
.share-btn svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.share-facebook svg { fill: #1877F2; }
.share-whatsapp svg { fill: #25D366; }
.share-btn[hidden] { display: none; }

/* ---------- Armes ---------- */
.weapon-art { display: block; width: 100%; height: auto; aspect-ratio: 420 / 104; padding: 14px 12px 6px; background: var(--fond-2); }
.weapon-art--large { max-width: 760px; margin: 0 auto 24px; border: 1px solid var(--bord); border-radius: var(--rayon); }
.card img.weapon-art { aspect-ratio: 420 / 104; object-fit: contain; }
.weapon-kanji { font-family: var(--font-kanji); font-weight: 700; color: var(--rouge); font-size: .9em; }
.weapon-length { font-weight: 600; color: var(--nuit); }
.weapon-reading { font-style: italic; }
.fact-box { display: grid; gap: 12px 28px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 0 0 28px; padding: 18px 20px;
    border: 1px solid var(--bord); border-left: 4px solid var(--rouge); border-radius: var(--rayon); background: var(--blanc); }
.fact-box dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--texte-2); }
.fact-box dd { margin: 2px 0 0; font-weight: 600; }

/* Vocabulaire */
.vocab-filter { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: end; margin: 0 0 28px; padding: 16px; background: var(--fond-2); border-radius: var(--rayon); }
.vocab-filter[hidden], .vocab-section[hidden], .vocab-term[hidden], #vocab-none[hidden] { display: none; }
.vocab-filter label { display: grid; gap: 4px; font-weight: 600; }
.vocab-filter input, .vocab-filter select { font: inherit; padding: 8px 10px; border: 1px solid var(--bord); border-radius: 8px; min-width: 200px; }
.vocab-filter p { margin: 0; align-self: center; }
.vocab-list { margin: 0; }
.vocab-term { padding: 12px 0; border-bottom: 1px solid var(--bord); scroll-margin-top: 80px; }
.vocab-term dt { font-weight: 700; color: var(--nuit); }
.vocab-term dd { margin: 4px 0 0; }
.vocab-kanji { font-family: var(--font-kanji); font-weight: 700; }
.vocab-kana, .vocab-pron { font-weight: 400; color: var(--texte-2); }
.vocab-details { display: block; margin-top: 4px; color: var(--texte-2); }
.vocab-term:target { background: var(--bleu-pale); padding-left: 10px; border-radius: 8px; }

.article-source { margin-top: 1.5rem; padding-top: .75rem; border-top: 1px solid var(--bordure, #d9dee7); color: var(--texte-2); font-size: .9rem; }

/* ---------- Calendrier ---------- */
.event-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.event-month { margin: 32px 0 12px; font-size: 1.4rem; }
.event-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.event-item a { display: grid; gap: 2px; padding: 12px 16px; border: 1px solid var(--bord); border-left: 4px solid var(--bleu); border-radius: var(--rayon);
    background: var(--blanc); color: var(--texte); text-decoration: none; }
.event-item a:hover { box-shadow: var(--ombre); border-left-color: var(--rouge); }
.event-date { font-size: .85rem; font-weight: 700; color: var(--rouge-texte); text-transform: uppercase; letter-spacing: .04em; }
.event-title { font-family: var(--font-titre); font-size: 1.1rem; color: var(--nuit); }
.admin code { overflow-wrap: anywhere; }
.event-subscribe { margin: 0 0 24px; padding: 16px; background: var(--fond-2); border-radius: var(--rayon); }
.event-subscribe .event-actions { margin: 0 0 8px; }
.event-subscribe code { overflow-wrap: anywhere; }

/* ---------- Annuaire des clubs ---------- */
.clubs-map { height: 440px; margin: 0 0 24px; border: 1px solid var(--bord); border-radius: var(--rayon); z-index: 0; }
.clubs-map--small { height: 300px; }
.clubs-results { margin: 0 0 24px; padding: 16px 20px; border: 1px solid var(--bord); border-left: 4px solid var(--bleu); border-radius: var(--rayon); background: var(--blanc); }
.clubs-results[hidden], .clubs-group[hidden], .club-list li[hidden] { display: none; }
.clubs-results h2 { margin: 0 0 10px; font-size: 1.2rem; }
.club-nearest { margin: 0; padding-left: 1.4em; display: grid; gap: 8px; }
.club-km { font-weight: 700; color: var(--rouge-texte); }
.clubs-approx { margin: 0 0 4px; font-weight: 700; color: var(--rouge-texte); }
.clubs-groups { columns: 280px; column-gap: 32px; }
.clubs-group { break-inside: avoid; margin: 0 0 20px; }
.clubs-group h3 { margin: 0 0 6px; font-size: 1.05rem; }
.club-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.club-list .small { display: block; }
.club-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.club-cards h2 { margin: 0 0 8px; font-size: 1.1rem; }
.dojo-lines { margin: 0 0 20px; padding-left: 1.2em; display: grid; gap: 8px; }
.clubs-source { margin-top: 24px; }
.admin-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.admin-tabs a { padding: 6px 12px; border: 1px solid var(--bord); border-radius: 999px; text-decoration: none; }
.admin-tabs a[aria-current] { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.status-pending { background: #fff4d6; color: #7a4d00; }
.status-hidden { background: #eef0f4; color: #4b5563; }
.status-missing { background: #fde8e7; color: #9b1c13; }