/* ============================================================
   Mon Japon — thème éditorial japonais. Mobile-first, Discover.
   washi (papier) · sumi (encre) · shu (vermillon) · ai (indigo)
   Polices : piles serif système (Latin + CJK) → 0 téléchargement.
   ============================================================ */
:root {
  --washi:  #f4efe6;   /* fond papier */
  --washi2: #faf6ee;   /* surfaces claires */
  --sumi:   #211c18;   /* encre */
  --ink-soft:#6f6358;  /* texte secondaire */
  --shu:    #c1352c;   /* vermillon (accent unique) */
  --shu-deep:#9a241d;
  --ai:     #33454f;   /* indigo (secondaire, blocs photo) */
  --line:   #e0d6c6;   /* filets */
  --radius: 4px;
  /* --maxw = largeur du "chrome" (header, accueil, catégorie) ; --read = largeur
     de la colonne de lecture (article). Sur PC, --maxw s'élargit (cf. media query
     desktop) pour un layout normal, --read reste étroit pour une lecture confortable. */
  --maxw:   800px;
  --read:   800px;
  --mincho: "Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP","Songti SC",Georgia,"Times New Roman",serif;
  --sans:   -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans JP","Helvetica Neue",sans-serif;
}

* { box-sizing: border-box; }
/* Réserve la gouttière de scrollbar en permanence : sinon les pages courtes
   (sans scroll) et longues (avec scroll) recentrent le contenu différemment
   → décalage horizontal « qui saute » d'une page à l'autre. */
html { -webkit-text-size-adjust: 100%; overflow-y: scroll; scrollbar-gutter: stable; height: 100%; }
/* Pied de page toujours en bas de VIEWPORT minimum (jamais au milieu de l'écran
   sur une page courte, ex. une catégorie avec peu d'articles) : colonne flex
   pleine hauteur, .site-main prend toute la place disponible. */
body {
  margin: 0;
  background: var(--washi);
  color: var(--sumi);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.75;
  overflow-x: hidden; /* la couverture d'article déborde en 100vw (pleine largeur) */
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
a { color: var(--shu-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--mincho); font-weight: 600; line-height: 1.35; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Bandeau noren ---------- */
.noren {
  display: flex; flex-direction: column; gap: 12px; flex: none; width: 100%;
  max-width: var(--maxw); margin: 0 auto;   /* contenue, pas bord à bord */
  padding: 16px 20px;
  border-bottom: 1px solid var(--sumi);
  background: var(--washi);
}
.norenTop { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--sumi); }
.brand:hover { text-decoration: none; }
.hanko {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--shu); color: #fff;
  display: grid; place-items: center;
  font-family: var(--mincho); font-size: 22px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.25);
}
.brandText { display: flex; flex-direction: column; }
.brandText .name { font-family: var(--mincho); font-size: 21px; letter-spacing: .04em; }
.brandText .kana { font-size: 10px; letter-spacing: .45em; color: var(--ink-soft); text-transform: uppercase; }

/* Bouton hamburger (mobile uniquement, cf. media query desktop plus bas) */
.navToggle {
  flex: none; width: 42px; height: 42px; padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--washi2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.navToggle-bars { position: relative; width: 18px; height: 2px; background: var(--sumi); border-radius: 1px; transition: background .15s ease; }
.navToggle-bars::before, .navToggle-bars::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--sumi); border-radius: 1px;
  transition: transform .2s ease, top .2s ease;
}
.navToggle-bars::before { top: -6px; }
.navToggle-bars::after { top: 6px; }
.navToggle[aria-expanded="true"] { border-color: var(--shu); }
/* Le hamburger se transforme en croix quand le menu est ouvert. */
.navToggle[aria-expanded="true"] .navToggle-bars { background: transparent; }
.navToggle[aria-expanded="true"] .navToggle-bars::before { top: 0; transform: rotate(45deg); }
.navToggle[aria-expanded="true"] .navToggle-bars::after { top: 0; transform: rotate(-45deg); }

/* Nav catégories : panneau déroulant sur mobile, animé (hauteur+fondu) plutôt
   qu'un display:none/flex abrupt, avec des cibles tactiles plus confortables.
   Les onglets à sous-catégories déplient leurs enfants indentés (accordéon). */
.topnav {
  display: flex; flex-direction: column; gap: 0;
  max-height: 0; overflow: hidden; opacity: 0; margin-top: 0;
  border-top: 1px solid transparent;
  transition: max-height .28s ease, opacity .2s ease, margin-top .28s ease, border-color .2s ease;
}
.topnav.is-open { max-height: 720px; opacity: 1; margin-top: 6px; border-top-color: var(--line); }
/* Onglet racine : lien direct ou parent d'un groupe */
.topnav-link {
  display: block; color: var(--ink-soft); text-decoration: none;
  font-size: 15px; letter-spacing: .06em; text-transform: uppercase;
  padding: 15px 8px; border-bottom: 1px solid var(--line);
}
.topnav-link.is-active,
.topnav-item.is-active > .topnav-link { color: var(--shu-deep); font-weight: 600; }
/* Sous-catégories : liste indentée sous le parent */
.topnav-sub { display: flex; flex-direction: column; }
.topnav-sub a {
  display: block; color: var(--ink-soft); text-decoration: none;
  font-size: 13.5px; letter-spacing: .04em;
  padding: 12px 8px 12px 26px; border-bottom: 1px solid var(--line);
}
.topnav-sub a::before { content: "↳"; color: var(--shu); margin-right: 8px; }
.topnav-sub a.is-active { color: var(--shu-deep); font-weight: 600; }
/* Survol lisible (panneau mobile posé sur du washi plein) */
.topnav-link:hover, .topnav-link:active,
.topnav-sub a:hover, .topnav-sub a:active { color: var(--sumi); background: var(--washi2); text-decoration: none; }

/* ---------- Conteneur ---------- */
.site-main { max-width: var(--maxw); margin: 0 auto; padding: 26px 20px 72px; width: 100%; flex: 1 0 auto; }

.lead { color: var(--ink-soft); font-size: 1.05rem; }
.muted { color: var(--ink-soft); }

/* ---------- Séparateur filet + cercle ---------- */
.jp-rule { display: flex; align-items: center; gap: 12px; margin: 46px 0 28px; color: var(--ink-soft); }
.jp-rule::before, .jp-rule::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.jp-rule .lbl { font-family: var(--mincho); font-size: 15px; letter-spacing: .28em; }
.jp-rule .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--shu); flex: none; }

.kicker { font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--shu-deep); margin-bottom: 10px; }

/* ---------- Index « à lire » ---------- */
.idx-list { display: flex; flex-direction: column; }
.idx-item {
  display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: baseline;
  padding: 20px 0; border-top: 1px solid var(--line);
}
.idx-item:first-child { border-top: none; }
.idx-num { font-family: var(--mincho); font-size: 26px; color: var(--shu); line-height: 1; }
.idx-item h2, .idx-item h3 { font-size: 21px; margin: 0 0 4px; }
.idx-item h2 a, .idx-item h3 a { color: var(--sumi); }
.idx-item h2 a:hover, .idx-item h3 a:hover { color: var(--shu-deep); text-decoration: none; }
.idx-item p { margin: 0; color: var(--ink-soft); font-size: 16px; }
.idx-cat { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin-top: 6px; }

/* Libellé de rubrique d'accueil : le nom de catégorie dans le filet mène à
   l'archive, sans casser la teinte discrète du séparateur. */
.jp-rule .lbl a { color: inherit; }
.jp-rule .lbl a:hover { color: var(--shu-deep); text-decoration: none; }

/* ---------- Puces de sous-catégories (page catégorie) ---------- */
.subcats { display: flex; flex-wrap: wrap; gap: 9px; margin: 6px 0 22px; }
.subcats-chip {
  display: inline-block; font-family: var(--mincho); font-size: 13px; letter-spacing: .04em;
  color: var(--sumi); background: var(--washi2);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 15px;
}
.subcats-chip:hover { color: #fff; background: var(--shu); border-color: var(--shu); text-decoration: none; }

/* ---------- Pagination ---------- */
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 44px 0 8px; }
.pagination-link {
  display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px;
  padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius);
  font-family: var(--mincho); font-size: 15px; color: var(--sumi); background: var(--washi2);
}
.pagination-link:hover { color: var(--shu-deep); border-color: var(--shu); text-decoration: none; }
.pagination-link.is-current { background: var(--shu); border-color: var(--shu); color: #fff; font-weight: 600; }
.pagination-edge { font-family: var(--sans); font-size: 14px; }
.pagination-gap { color: var(--ink-soft); padding: 0 4px; }

/* ---------- Article (colonne de lecture resserrée + caractère) ---------- */
.post, .staticPage { max-width: var(--read); margin: 0 auto; }
.post .postHead { margin-bottom: 14px; }
/* Encadré rouge (badge) plutôt qu'un simple libellé + tiret : plus visible,
   même traitement en haut d'article, sur l'accueil et en catégorie. */
.postCat {
  display: inline-block; font-family: var(--mincho); font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; font-size: 12px; margin: 0 0 14px;
  background: var(--shu); color: #fff; padding: 6px 14px; border-radius: 999px;
}
.postCat a { color: inherit; }
.postCat a:hover { text-decoration: none; }
.post h1 { font-size: 28px; margin: 0 0 14px; }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0;
  font-family: var(--mincho); font-size: 14px; color: var(--ink-soft);
  padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.byline .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--shu); }
/* ---------- Hero plein écran : cover pleine largeur, header + titre + infos en
   overlay. Composant commun accueil (slider) / article / catégorie. ---------- */
.heroSlider {
  position: relative; width: 100vw; max-width: 100vw;
  margin: 0 0 40px; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
.heroSlider-track { display: flex; }
.heroSlider--multi .heroSlider-track {
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.heroSlider--multi .heroSlider-track::-webkit-scrollbar { display: none; }
.heroSlider-slide {
  position: relative; flex: 0 0 100%; min-width: 0;
  min-height: 300px; display: flex; align-items: flex-end; overflow: hidden;
  scroll-snap-align: start; color: inherit;
}
.heroSlider-slide:hover { text-decoration: none; }
/* Le hero de l'accueil (slider de teasers) est plus grand que celui d'un
   article/catégorie (contenu, discret pour laisser place à la lecture). */
.home-hero .heroSlider-slide { min-height: 400px; }
/* Slider d'accueil : on remonte la byline (date · temps de lecture) pour
   qu'elle ne colle pas aux puces de navigation posées en bas du hero. */
.home-hero .heroSlider-content { padding-bottom: 40px; }
.heroSlider-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; z-index: 0; }
/* Voile léger : dégradé doux concentré derrière le texte (bas) + un filet
   discret en haut pour le noren. On garde l'ombre modérée pour ne pas alourdir
   l'image ; la lisibilité « quelle que soit l'image » est assurée par le
   text-shadow porté directement sur le titre et la byline (voir plus bas).
   Les paliers rapprochés en bas donnent une montée progressive (pas de bande
   franche) qui épouse le contenu quel que soit son fond. */
.heroSlider-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom,
    rgba(20,16,13,.34) 0%,
    rgba(20,16,13,0) 30%,
    rgba(20,16,13,0) 44%,
    rgba(20,16,13,.28) 68%,
    rgba(20,16,13,.60) 100%);
}
/* Padding horizontal uniquement sur mobile (le hero déborde en 100vw et n'a
   pas, contrairement à .post, le cadrage de .site-main) : sur PC on l'annule
   pour que le titre s'aligne EXACTEMENT avec le texte de l'article en dessous. */
.heroSlider-content { position: relative; z-index: 2; width: 100%; max-width: var(--read); margin: 0 auto; padding: 56px 20px 22px; }
/* Ombre portée sur le texte lui-même : garantit un titre/byline lisibles même
   sur une image claire ou chargée, sans avoir à assombrir toute la cover. */
.heroSlider-content .heroTitle { color: #fff; margin: 0 0 14px; text-shadow: 0 1px 3px rgba(20,16,13,.55), 0 2px 18px rgba(20,16,13,.4); }
.heroSlider-content .byline { color: rgba(255,255,255,.9); border-bottom: none; padding-bottom: 0; text-shadow: 0 1px 6px rgba(20,16,13,.5); }
.heroSlider-content .postCat { text-shadow: 0 1px 6px rgba(20,16,13,.5); }
.heroSlider-content .byline .dot { background: #fff; }
/* Mobile : on masque le badge de catégorie dans le hero (article + slider
   d'accueil) — il encombre au-dessus du titre sur petit écran. Réaffiché desktop. */
.heroSlider-content .postCat { display: none; }

.heroSlider-dots {
  position: absolute; z-index: 3; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: flex; gap: 8px;
}
.heroSlider-dots button {
  width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%;
  background: rgba(255,255,255,.45); cursor: pointer;
}
.heroSlider-dots button.is-active { background: #fff; }
.heroSlider-arrow {
  position: absolute; z-index: 3; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; display: none; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.6); border-radius: 50%; background: rgba(20,16,13,.35);
  color: #fff; font-size: 20px; line-height: 1; cursor: pointer;
}
.heroSlider--multi .heroSlider-arrow { display: flex; }
.heroSlider-arrow--prev { left: 14px; }
.heroSlider-arrow--next { right: 14px; }
.heroSlider-arrow:hover { background: rgba(20,16,13,.6); }

/* Bandeau noren transparent, posé sur le hero (accueil, article et catégorie avec cover).
   Le dégradé d'assombrissement est sur un ::before pleine largeur (pas sur .noren,
   qui est cadré par --maxw et centré) sinon il s'arrête net avant les bords. */
body.hero-overlay-page { position: relative; }
body.hero-overlay-page::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 160px; z-index: 5;
  /* Plus sombre et plus étalé qu'avant : le bandeau blanc doit rester lisible
     même quand la couverture est CLAIRE (beige, ciel…), pas seulement sombre. */
  background: linear-gradient(to bottom, rgba(20,16,13,.82) 0%, rgba(20,16,13,.4) 55%, transparent 100%);
  pointer-events: none;
}
body.hero-overlay-page .noren {
  position: absolute; top: 0; left: 0; right: 0; z-index: 6;
  background: none;
  border-bottom: none;
}
body.hero-overlay-page .brandText .name,
body.hero-overlay-page .brandText .kana,
body.hero-overlay-page .topnav-link,
body.hero-overlay-page .topnav-sub a { color: #fff; }   /* mobile : panneau accordéon sombre */
body.hero-overlay-page .topnav-link.is-active,
body.hero-overlay-page .topnav-item.is-active > .topnav-link { color: #fff; border-bottom-color: #fff; }
/* Ombre portée sur le texte du bandeau : garde le blanc lisible même par-dessus
   une couverture CLAIRE (beige, ciel…) — c'est ce qui manquait au survol. */
body.hero-overlay-page .brandText .name,
body.hero-overlay-page .topnav-link { text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 10px rgba(0,0,0,.55); }
/* Survol : simple légère atténuation, sans soulignement ni fond (pas de
   « surlignage »). L'ombre portée ci-dessus suffit à garder le blanc lisible. */
body.hero-overlay-page .topnav-link:hover { color: #fff; background: none; text-decoration: none; opacity: .72; }
body.hero-overlay-page .navToggle { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.5); }
body.hero-overlay-page .navToggle-bars,
body.hero-overlay-page .navToggle-bars::before,
body.hero-overlay-page .navToggle-bars::after { background: #fff; }
body.hero-overlay-page .topnav.is-open { background: rgba(20,16,13,.94); margin: 4px -20px 0; padding: 4px 20px; }
body.hero-overlay-page .hanko { box-shadow: inset 0 0 0 2px rgba(255,255,255,.5); }
body.hero-overlay-page .site-main { padding-top: 0; }

.postBody { font-size: 1.15rem; line-height: 1.95; margin-top: 8px; }
.postBody p { margin: 0 0 1.55em; }
/* Lettrine vermillon sur le premier paragraphe */
.postBody > p:first-of-type::first-letter {
  font-family: var(--mincho); font-weight: 600; color: var(--shu);
  font-size: 3.4em; line-height: .8; float: left; margin: .05em .14em 0 0;
}
.postBody h2 { font-size: 22px; margin: 1.8em 0 .5em; }
.postBody h2::before { content: "—"; color: var(--shu); margin-right: .35em; }
.postBody img { border-radius: var(--radius); margin: 1.3em 0; }
.postBody a { border-bottom: 1px solid var(--line); }
/* Citation = pull quote en 「 」 */
.postBody blockquote {
  margin: 1.7em 0; padding: .1em 0 .1em 1.2em; border-left: 3px solid var(--shu);
  font-family: var(--mincho); font-size: 1.25em; line-height: 1.6; color: var(--sumi);
}
.postBody blockquote p { margin: 0; display: inline; }
.postBody blockquote::before { content: "「"; color: var(--shu); }
.postBody blockquote::after  { content: "」"; color: var(--shu); }

/* Sceau de fin + étiquette de catégorie */
.post-end { text-align: center; margin: 50px 0 8px; }
.post-end .kan { display: inline-grid; place-items: center; width: 42px; height: 42px;
  border: 1.5px solid var(--shu); color: var(--shu); font-family: var(--mincho); font-size: 22px; border-radius: var(--radius); }
.post-tags { text-align: center; margin-top: 24px; }
.post-tags a { display: inline-block; font-family: var(--mincho); font-weight: 600; font-size: 13px;
  letter-spacing: .16em; text-transform: uppercase; color: #fff;
  background: var(--shu); border: 1px solid var(--shu); border-radius: 999px; padding: 9px 22px; }
.post-tags a:hover { text-decoration: none; background: var(--shu-deep); border-color: var(--shu-deep); }

/* Encadré auteur (gestion multi-auteurs) */
.author-box {
  display: flex; gap: 16px; align-items: center; margin-top: 40px;
  padding: 20px; background: var(--washi2); border: 1px solid var(--line); border-radius: var(--radius);
}
.author-box-avatar { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.author-box-avatar--fallback {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ai); color: #fff; font-family: var(--mincho); font-size: 22px;
}
.author-box-label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 4px; }
.author-box-name { font-family: var(--mincho); font-size: 17px; margin: 0 0 6px; }
.author-box-name a { color: var(--sumi); }
.author-box-bio { color: var(--ink-soft); font-size: .95rem; line-height: 1.6; margin: 0; }

.staticPage h1 { font-size: 26px; }

/* ---------- Archive de catégorie (même largeur que l'article) ---------- */
.archive { max-width: var(--read); margin: 0 auto; }
.cat-masthead { margin: 14px 0 8px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.cat-masthead .kicker {
  font-family: var(--mincho); color: var(--shu-deep); text-transform: uppercase;
  letter-spacing: .28em; font-size: 12px; margin: 0 0 10px;
}
.archive h1, .cat-masthead h1 { font-size: 30px; margin: 0 0 10px; }
.cat-masthead .cat-desc { color: var(--ink-soft); margin: 0; }
.idx-date { font-family: var(--mincho); font-size: 12.5px; color: var(--ink-soft); margin: 7px 0 0; letter-spacing: .03em; }

/* Masthead auteur : même structure que la catégorie, + avatar */
.author-masthead {
  display: flex; gap: 20px; align-items: center;
  margin: 14px 0 8px; padding-bottom: 18px; border-bottom: 1px solid var(--line);
}
.author-masthead-avatar { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.author-masthead-avatar--fallback {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ai); color: #fff; font-family: var(--mincho); font-size: 28px;
}

/* Hero de l'accueil (slider) : titre en h2 (un seul <h1> par page), taille dédiée */
.home-hero .heroTitle { font-size: 26px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-block; font-family: var(--sans); cursor: pointer;
  background: var(--shu); color: #fff; border: none;
  padding: 11px 22px; border-radius: 999px; font-weight: 600; font-size: .95rem;
}
.btn:hover { background: var(--shu-deep); text-decoration: none; }

/* Sceau kanji réutilisé sur les cartes (newsletter, commentaires…) : même
   langage visuel que le hanko du header et le sceau du pied de page. */
.card-seal {
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  border: 1.5px solid var(--shu); color: var(--shu); border-radius: 50%;
  font-family: var(--mincho); font-size: 19px; margin-bottom: 12px;
}
.newsletterForm { margin-top: 20px; }
/* Un seul contenant arrondi (une seule bordure) qui habille input + bouton,
   plutôt que deux pilules recollées avec une bordure supprimée : plus net. */
.newsletterForm-row {
  display: flex; flex-direction: column; max-width: 400px; margin: 0 auto;
  background: #fff; border: 1px solid var(--line); border-radius: 999px; overflow: hidden;
}
.newsletterForm-row:focus-within { border-color: var(--shu); }
.newsletterForm-row input {
  width: 100%; padding: 14px 20px; border: none; background: none;
  font: inherit; color: var(--sumi); text-align: left;
}
.newsletterForm-row input:focus { outline: none; }
.newsletterForm-row .btn { border-radius: 999px; margin: 4px; }
@media (min-width: 480px) {
  .newsletterForm-row { flex-direction: row; align-items: center; }
  .newsletterForm-row input { flex: 1; min-width: 0; }
  .newsletterForm-row .btn { flex: none; white-space: nowrap; }
}

/* Popup newsletter bas-droite, sur tout le site (remplace le bloc encombrant
   qui n'existait que sur l'accueil). Discret : apparaît après un délai,
   se ferme et reste fermé (localStorage) tant qu'on ne revient pas dessus. */
.newsletterPopup {
  position: fixed; z-index: 60; right: 16px; bottom: 16px;
  width: min(360px, calc(100vw - 32px));
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 20px 50px rgba(33,28,24,.22);
  padding: 22px; overflow: hidden;
  transform: translateY(16px) scale(.98); opacity: 0; pointer-events: none;
  transition: transform .3s ease, opacity .3s ease;
}
/* Fin liseré vermillon en tête de carte : identité de marque, pas juste une
   boîte blanche générique. */
.newsletterPopup::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--shu), var(--shu-deep));
}
.newsletterPopup.is-visible { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
.newsletterPopup-close {
  position: absolute; top: 12px; right: 12px; width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; border-radius: 50%;
  color: var(--ink-soft); font-size: 20px; line-height: 1; cursor: pointer;
}
.newsletterPopup-close:hover { background: rgba(33,28,24,.08); color: var(--sumi); }
.newsletterPopup-head { display: flex; align-items: center; gap: 12px; margin: 4px 26px 12px 0; }
.newsletterPopup-head .card-seal { flex: none; width: 36px; height: 36px; font-size: 16px; margin: 0; background: var(--washi2); }
.newsletterPopup h3 { font-size: 16px; margin: 0; line-height: 1.3; }
.newsletterPopup > p { font-size: .88rem; color: var(--ink-soft); margin: 0 0 16px; line-height: 1.5; }
.newsletterPopup .newsletterForm { margin-top: 0; }
/* Dans la popup (étroite) : champ + bouton EMPILÉS et distincts, chacun avec son
   propre cadre rectangulaire arrondi — plus le gros contenant en pilule 999px
   qui donnait un ovale disgracieux quand il passait en colonne. */
.newsletterPopup .newsletterForm-row {
  flex-direction: column; max-width: none; gap: 8px;
  background: none; border: none; border-radius: 0; overflow: visible;
}
.newsletterPopup .newsletterForm-row input {
  width: 100%; padding: 12px 14px; text-align: left;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
}
.newsletterPopup .newsletterForm-row input:focus { border-color: var(--shu); }
.newsletterPopup .newsletterForm-row .btn { width: 100%; margin: 0; border-radius: 8px; }

/* ---------- Commentaires ---------- */
.comments { max-width: var(--read); margin: 64px auto 0; padding-top: 40px; border-top: 1px solid var(--line); }
.comments-head { display: flex; align-items: center; gap: 12px; margin: 0 0 26px; }
.comments-head .card-seal { margin-bottom: 0; }
.comments > h2 { font-size: 22px; margin: 0; }
/* Cartes en ton papier (washi2) comme le reste du site — pas de blanc pur.
   La bordure + l'ombre légère suffisent à les détacher du fond washi. */
.comment {
  background: var(--washi2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(33,28,24,.06);
}
.comment--reply { margin-left: 24px; margin-top: -4px; border-left: 3px solid var(--shu); }
.commentTop { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.commentAvatar {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--ai); color: #fff; font-family: var(--mincho); font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
}
.commentMeta { font-size: .9rem; color: var(--ink-soft); margin: 0; }
.comments-empty {
  text-align: center; padding: 30px 20px; color: var(--ink-soft);
  border: 1px dashed var(--line); border-radius: var(--radius);
}
/* Carte douce (washi2) pour que le formulaire reste bien visible, mais avec
   des champs "soulignés" à l'intérieur plutôt que des inputs en boîte dans une
   boîte (trop bureaucratique). */
.commentForm-title { font-family: var(--mincho); font-size: 18px; margin: 40px 0 18px; }
.commentForm {
  margin-top: 0; background: var(--washi2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px;
}
.commentForm-grid { display: grid; grid-template-columns: 1fr; gap: 0 20px; }
@media (min-width: 480px) {
  .commentForm-grid { grid-template-columns: 1fr 1fr; }
}
.commentForm .field { margin-bottom: 20px; }
.commentForm label {
  display: block; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 6px; color: var(--ink-soft);
}
.commentForm input, .commentForm textarea {
  width: 100%; padding: 9px 2px 10px; border: none; border-bottom: 1px solid var(--line);
  border-radius: 0; font: inherit; background: none; color: var(--sumi);
}
.commentForm input:focus, .commentForm textarea:focus { outline: none; border-bottom-color: var(--shu); }
.commentForm .btn { margin-top: 4px; }

/* ---------- Engagement commentaires (like + réponse) ---------- */
.commentThread { margin-bottom: 16px; }
.commentThread .comment { margin-bottom: 8px; }
.comment-body { margin: 0 0 12px; }
.commentActions {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 6px;
}
/* Bouton « J'aime » : coeur + compteur, discret puis vermillon une fois liké. */
.cLike { margin: 0; }
.cLike button {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font: inherit; font-size: .85rem; line-height: 1;
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--washi2); color: var(--ink-soft); transition: all .12s ease;
}
.cLike button:hover { border-color: var(--shu); color: var(--shu-deep); }
.cLike-heart { font-size: 1rem; color: var(--line); transition: color .12s ease; }
.cLike button:hover .cLike-heart { color: var(--shu); }
.cLike-count { font-variant-numeric: tabular-nums; font-weight: 600; }
.cLike.is-liked button {
  border-color: var(--shu); color: var(--shu-deep); background: #fbeceb;
}
.cLike.is-liked .cLike-heart { color: var(--shu); }
/* Disclosure « Répondre » : natif, aucun JS requis. */
.cReply { margin: 0; }
.cReply summary {
  list-style: none; cursor: pointer; user-select: none;
  font-size: .85rem; color: var(--ink-soft);
  padding: 6px 4px; display: inline-flex; align-items: center; gap: 6px;
}
.cReply summary::-webkit-details-marker { display: none; }
.cReply summary::before { content: "↩"; color: var(--shu); }
.cReply summary:hover { color: var(--shu-deep); }
.cReply[open] summary { color: var(--shu-deep); font-weight: 600; }
/* Ouvert : le formulaire de réponse passe sur sa propre ligne, pleine largeur. */
.cReply[open] { flex: 1 1 100%; margin-top: 4px; }
.commentForm--reply {
  margin-top: 12px; padding: 16px; background: var(--washi);
}
.commentForm--reply .field { margin-bottom: 14px; }
.btn-sm { padding: 7px 16px; font-size: .85rem; }

/* ---------- Pub ---------- */
.adSlot { margin: 24px 0; text-align: center; }
.adSlot img { border-radius: var(--radius); }

/* ---------- Flash ---------- */
.flash { padding: 11px 14px; border-radius: var(--radius); margin: 12px 0; }
.flash--ok { background: #e8f0e6; color: #2c5a2b; }
.flash--err { background: #f7e4e2; color: var(--shu-deep); }

/* ---------- Pied ---------- */
.site-footer {
  flex: none; border-top: 1px solid var(--sumi); background: var(--washi2);
  text-align: center; padding: 26px 18px 30px; color: var(--ink-soft); font-size: .9rem;
}
.site-footer .seal {
  display: inline-grid; place-items: center; width: 34px; height: 34px;
  border: 1.5px solid var(--shu); color: var(--shu); border-radius: 6px;
  font-family: var(--mincho); font-size: 16px; margin-bottom: 10px;
}
.site-footer a { color: var(--ink-soft); }

/* ============================================================
   Desktop ≥ 760px
   ============================================================ */
@media (min-width: 760px) {
  :root { --maxw: 1160px; }
  body { font-size: 19px; }
  .noren { flex-direction: row; align-items: center; justify-content: space-between; padding: 20px 30px; }
  .brandText .name { font-size: 23px; }
  .brandText .kana { font-size: 11px; }
  .navToggle { display: none; }
  .topnav {
    display: flex; flex-direction: row; gap: 26px; overflow: visible;
    margin-top: 0; border-top: none; max-height: none; opacity: 1;
  }
  .topnav-item { position: relative; }
  .topnav-link {
    font-size: 14px; padding: 0 0 3px; border-bottom: none; letter-spacing: .08em;
  }
  /* Survol : accent vermillon lisible (plus de fond clair collé au texte qui
     rendait les onglets illisibles, surtout par-dessus une image). */
  .topnav-link:hover { color: var(--shu-deep); background: none; text-decoration: none; }
  .topnav-link.is-active,
  .topnav-item.is-active > .topnav-link { color: var(--sumi); font-weight: 400; border-bottom: 2px solid var(--shu); }

  /* Onglet à sous-catégories : chevron + panneau déroulant au survol/focus */
  .topnav-item--has-sub > .topnav-link { display: inline-flex; align-items: center; gap: 5px; }
  .topnav-item--has-sub > .topnav-link::after { content: "▾"; font-size: 10px; color: var(--ink-soft); }
  /* Zone tampon invisible : garde le survol entre l'onglet et son panneau */
  .topnav-item--has-sub::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 12px; }
  .topnav-sub {
    position: absolute; top: 100%; left: 0; z-index: 20; min-width: 190px;
    display: flex; flex-direction: column;
    background: var(--washi2); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: 0 12px 30px rgba(33,28,24,.16);
    padding: 6px 0; margin-top: 10px;
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
  }
  .topnav-item--has-sub:hover > .topnav-sub,
  .topnav-item--has-sub:focus-within > .topnav-sub { opacity: 1; visibility: visible; transform: translateY(0); }
  .topnav-sub a {
    padding: 9px 18px; border-bottom: none; font-size: 13.5px;
    text-transform: none; letter-spacing: .02em; color: var(--ink-soft);
  }
  .topnav-sub a::before { content: none; }
  .topnav-sub a:hover { color: var(--shu-deep); background: rgba(193,53,44,.06); text-decoration: none; }
  .topnav-sub a.is-active { color: var(--shu-deep); font-weight: 600; }
  /* Sur une page à hero, le panneau reste sur fond clair : liens sombres. */
  body.hero-overlay-page .topnav-sub a { color: var(--ink-soft); }
  body.hero-overlay-page .topnav-sub a:hover,
  body.hero-overlay-page .topnav-sub a.is-active { color: var(--shu-deep); }

  .idx-item { grid-template-columns: 64px 1fr auto; gap: 22px; }
  .idx-item h2, .idx-item h3 { font-size: 22px; }
  .idx-item p { font-size: 17px; }
  .idx-num { font-size: 30px; }
  /* catégorie en libellé vertical sur grand écran */
  .idx-cat { writing-mode: vertical-rl; margin-top: 0; align-self: start; letter-spacing: .2em; }

  .post h1 { font-size: 34px; }
  .byline { font-size: 15px; }
  .postBody { font-size: 1.3rem; }
  .heroSlider-slide { min-height: 400px; }
  .home-hero .heroSlider-slide { min-height: 540px; }
  /* Sur PC le hero (max-width: var(--read), centré) n'a plus besoin de la marge
     de confort mobile : padding horizontal à 0 pour aligner pile avec .post. */
  .heroSlider-content { padding: 72px 0 28px; }
  .heroSlider-content .postCat { display: inline-block; }   /* badge catégorie visible sur desktop */
  body.hero-overlay-page::before { height: 160px; }
  .home-hero .heroTitle { font-size: 30px; }
  .archive h1, .cat-masthead h1 { font-size: 34px; }
}