/*
Theme Name: Paroles de Hanshi
Theme URI: http://kendo-ventoux.com/blog2/
Author: Emmanuel Wietzel
Description: Thème sur mesure pour « Paroles de Hanshi ». Le texte d’abord, le blanc comme respiration, l’encre comme seule matière et le vermillon du sceau comme unique accent. Navigation par maître et par notion, lecture confortable, responsive.
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: paroles-de-hanshi
Tags: blog, one-column, custom-menu, translation-ready, accessibility-ready
*/

/* ==================================================================
   1. Fondations
   ================================================================== */
:root{
  --sumi:#1c1b19;
  --sumi-doux:#3d3a35;
  --gris:#8b857a;
  --gris-clair:#b8b2a6;
  --washi:#f8f6f1;
  --washi-creux:#f2efe8;
  --trait:#e2ddd3;
  --shu:#b23a2f;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mincho:"Hiragino Mincho ProN","Yu Mincho","MS Mincho",serif;
  --mesure:34rem;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--washi);color:var(--sumi);
  font-family:var(--serif);font-size:18px;line-height:1.78;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:inherit}

.sr-only,.saut-contenu{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.saut-contenu:focus{
  position:fixed;top:.6rem;left:.6rem;width:auto;height:auto;clip:auto;
  background:var(--sumi);color:var(--washi);padding:.6rem 1rem;z-index:999;
  font-family:var(--sans);font-size:.85rem;
}
:focus-visible{outline:2px solid var(--shu);outline-offset:3px}

.enveloppe{max-width:60rem;margin:0 auto;padding:0 1.6rem}
.lecture{max-width:var(--mesure);margin:0 auto}
.vide{color:var(--gris);font-style:italic}

/* ==================================================================
   2. En-tête
   ================================================================== */
.entete{padding:3.4rem 0 0}
.entete-rang{display:flex;justify-content:space-between;align-items:baseline;gap:2rem}
.marque{text-decoration:none;color:inherit;display:block}
.marque .titre{
  display:block;font-size:1.42rem;letter-spacing:.19em;text-transform:uppercase;
  font-weight:400;line-height:1.3;
}
.marque .sous{
  display:block;font-family:var(--sans);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gris);margin-top:.5rem;
}
.nav{font-family:var(--sans);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
.nav{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 1.5rem}
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 1.5rem}
.lien-chercher{color:var(--gris);text-decoration:none;padding-bottom:.25rem;border-bottom:1px solid transparent}
.lien-chercher:hover{color:var(--sumi);border-bottom-color:var(--shu)}
.nav a{
  color:var(--gris);text-decoration:none;padding-bottom:.25rem;
  border-bottom:1px solid transparent;display:inline-block;
}
.nav a:hover,.nav .current-menu-item>a{color:var(--sumi);border-bottom-color:var(--shu)}
.filet{height:1px;background:var(--trait);margin:2.4rem 0 0;border:0}

/* ==================================================================
   3. Seuil et enso
   ================================================================== */
.seuil{padding:5rem 0 4.5rem;display:grid;grid-template-columns:1fr auto;gap:3rem;align-items:center}
.seuil h1{
  font-size:clamp(1.6rem,3.2vw,2.3rem);font-weight:400;line-height:1.42;
  margin:0;max-width:22ch;
}
.seuil p,.seuil .chapo{color:var(--sumi-doux);margin:1.5rem 0 0;max-width:44ch;font-size:1rem}
.enso{display:block;width:112px;height:112px;opacity:.82;color:var(--sumi)}
.seuil-maitre{grid-template-columns:auto 1fr}
.portrait-grand{
  width:132px;height:132px;border-radius:50%;object-fit:cover;
  filter:grayscale(1) sepia(.22) contrast(.94);background:var(--washi-creux);
}
.section-titre{
  font-family:var(--sans);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gris);margin:0 0 2.2rem;font-weight:600;
}

/* ==================================================================
   4. Liste des paroles
   ================================================================== */
.paroles{list-style:none;padding:0;margin:0 0 3rem}
.paroles li{border-bottom:1px solid var(--trait)}
.paroles li:first-child{border-top:1px solid var(--trait)}
.parole{
  display:grid;grid-template-columns:7.5rem 1fr;gap:2rem;
  padding:1.9rem 0;text-decoration:none;color:inherit;align-items:baseline;
}
.parole:hover h2{color:var(--shu)}
.parole .maitre{
  font-family:var(--sans);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gris);line-height:1.5;padding-top:.35rem;
}
.parole h2{font-size:1.16rem;font-weight:400;margin:0;line-height:1.45;transition:color .2s}
.parole .extrait{color:var(--sumi-doux);font-size:.94rem;margin:.5rem 0 0;max-width:52ch}
.parole .notions{
  font-family:var(--sans);font-size:.68rem;letter-spacing:.08em;
  color:var(--gris-clair);margin:.75rem 0 0;
}

/* ==================================================================
   5. Article
   ================================================================== */
.article{padding:4.5rem 0 2rem}
.chapeau{margin-bottom:3.2rem}
.chapeau .fil{
  font-family:var(--sans);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gris);margin:0 0 1.4rem;
}
.chapeau .fil a{color:var(--gris);text-decoration:none;border-bottom:1px solid var(--trait)}
.chapeau .fil a:hover{color:var(--shu);border-bottom-color:var(--shu)}
.chapeau h1{font-size:clamp(1.55rem,3.4vw,2.05rem);font-weight:400;line-height:1.34;margin:0}
.chapeau .signature{
  font-family:var(--sans);font-size:.74rem;letter-spacing:.1em;color:var(--gris);
  margin:1.3rem 0 0;text-transform:uppercase;
}
.corps p{margin:0 0 1.5rem;text-align:left;hyphens:none}
.corps>p:first-of-type::first-letter{
  font-size:3.1rem;line-height:.86;float:left;padding:.32rem .5rem .1rem 0;
}
.corps-page>p:first-of-type::first-letter{font-size:inherit;float:none;padding:0}
.corps a{color:var(--sumi);text-decoration:none;border-bottom:1px solid var(--gris-clair)}
.corps a:hover{color:var(--shu);border-bottom-color:var(--shu)}
.corps blockquote{
  border-left:2px solid var(--shu);padding:.2rem 0 .2rem 1.3rem;margin:2.4rem 0;
  font-size:.94rem;color:var(--sumi-doux);
}
.corps img{margin:2rem 0}
.corps h2,.corps h3{font-weight:400;line-height:1.35;margin:2.6rem 0 1rem}
.corps h2{font-size:1.3rem}
.corps h3{font-size:1.1rem}
.corps ul,.corps ol{padding-left:1.3rem;margin:0 0 1.5rem}
.corps li{margin-bottom:.4rem}

.pied-article{
  margin:3.5rem 0 0;padding-top:1.8rem;border-top:1px solid var(--trait);
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
}
.etiquette{
  font-family:var(--sans);font-size:.72rem;letter-spacing:.06em;color:var(--gris);
  text-decoration:none;border:1px solid var(--trait);border-radius:2px;padding:.28rem .7rem;
}
.etiquette:hover{color:var(--shu);border-color:var(--shu)}

.voisines{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--trait);
  border-block:1px solid var(--trait);margin:4.5rem 0 0;
}
.voisine{background:var(--washi);padding:1.7rem 1.5rem;text-decoration:none;color:inherit}
a.voisine:hover{background:var(--washi-creux)}
.voisine span{
  font-family:var(--sans);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gris);display:block;margin-bottom:.5rem;
}
.voisine strong{font-weight:400;font-size:.98rem;line-height:1.45;display:block}
.voisine.droite{text-align:right}

/* ==================================================================
   6. Maîtres
   ================================================================== */
.maitres{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
  gap:1px;background:var(--trait);border:1px solid var(--trait);margin:0 0 5rem;
}
.maitre{background:var(--washi);padding:1.8rem 1.5rem;text-decoration:none;color:inherit;display:block}
.maitre:hover{background:var(--washi-creux)}
.maitre:hover h2{color:var(--shu)}
.portrait{
  width:52px;height:52px;border-radius:50%;object-fit:cover;
  filter:grayscale(1) sepia(.22) contrast(.94);margin-bottom:1rem;display:block;
  background:var(--washi-creux);
}
.maitre h2{font-size:1rem;font-weight:400;margin:0;letter-spacing:.05em;transition:color .2s}
.maitre .nb{
  font-family:var(--sans);font-size:.7rem;color:var(--gris);
  letter-spacing:.08em;margin-top:.4rem;display:block;
}

/* ==================================================================
   7. Notions
   ================================================================== */
.familles{margin-bottom:5rem}
.famille{padding:2.2rem 0;border-bottom:1px solid var(--trait)}
.famille:first-child{border-top:1px solid var(--trait)}
.famille-grille{display:grid;grid-template-columns:12rem 1fr;gap:2rem;align-items:start}
.famille h2{font-size:1rem;font-weight:400;margin:0;letter-spacing:.05em}
.famille h2 .kanji{font-family:var(--mincho);color:var(--shu);margin-right:.5rem}
.famille .liste{display:flex;flex-wrap:wrap;gap:.4rem .9rem}
.famille .liste a{
  font-family:var(--sans);font-size:.8rem;color:var(--sumi-doux);text-decoration:none;
  border-bottom:1px solid var(--trait);padding-bottom:.1rem;
}
.famille .liste a:hover{color:var(--shu);border-bottom-color:var(--shu)}
.famille .liste .n{color:var(--gris-clair);font-size:.7rem;margin-left:.25rem}

/* ==================================================================
   8. Recherche
   ================================================================== */
.recherche{padding:4.5rem 0 3rem}
.champ{position:relative;max-width:var(--mesure);margin:0 auto 3rem}
.champ input{
  width:100%;font-family:var(--serif);font-size:1.3rem;color:var(--sumi);
  background:transparent;border:0;border-bottom:1px solid var(--sumi);
  padding:.7rem 2.4rem .7rem 0;outline:none;border-radius:0;
}
.champ input::placeholder{color:var(--gris-clair)}
.champ input:focus{border-bottom-color:var(--shu)}
.champ .loupe{
  position:absolute;right:0;top:.9rem;color:var(--gris);
  background:none;border:0;padding:.2rem;cursor:pointer;line-height:0;
}
.champ .loupe:hover{color:var(--shu)}
.compte{
  font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gris);max-width:var(--mesure);margin:0 auto 1.6rem;
}
mark{background:rgba(178,58,47,.13);color:inherit;padding:.05em .15em}

/* ==================================================================
   9. Pagination
   ================================================================== */
.pagination{
  font-family:var(--sans);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  margin:0 0 4rem;padding-top:1rem;
}
.pagination .nav-links{display:flex;gap:1.2rem;flex-wrap:wrap;align-items:center}
.pagination a,.pagination .current{text-decoration:none;color:var(--gris);border-bottom:1px solid transparent;padding-bottom:.2rem}
.pagination a:hover{color:var(--sumi);border-bottom-color:var(--shu)}
.pagination .current{color:var(--sumi);border-bottom-color:var(--trait)}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ==================================================================
   10. Pied de page
   ================================================================== */
.pied{border-top:1px solid var(--trait);margin-top:5rem;padding:3rem 0 4rem}
.pied-inner{
  display:flex;justify-content:space-between;align-items:flex-start;gap:2rem;flex-wrap:wrap;
  font-family:var(--sans);font-size:.75rem;color:var(--gris);
}
.pied a{color:var(--gris);text-decoration:none;border-bottom:1px solid var(--trait)}
.pied a:hover{color:var(--shu)}
.pied .colonne{display:flex;flex-direction:column;gap:.55rem}
.pied ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.pied-titre{color:var(--sumi);letter-spacing:.1em;text-transform:uppercase}
.sceau{
  width:58px;height:58px;flex:0 0 auto;opacity:.92;
  background:url("images/sceau.png") center/contain no-repeat;
}

/* ==================================================================
   11. Adaptation aux écrans
   ================================================================== */
@media (max-width:56rem){
  .seuil,.seuil-maitre{grid-template-columns:1fr;padding:3.5rem 0 3rem}
  .enso{width:84px;height:84px}
  .famille-grille{grid-template-columns:1fr;gap:1rem}
}
@media (max-width:40rem){
  body{font-size:17px}
  .entete{padding:2.2rem 0 0}
  .entete-rang{flex-direction:column;gap:1.3rem}
  .nav ul{gap:0 1.3rem}
  .parole{grid-template-columns:1fr;gap:.5rem;padding:1.6rem 0}
  .parole .maitre{padding-top:0}
  .voisines{grid-template-columns:1fr}
  .voisine.droite{text-align:left}
  .corps>p:first-of-type::first-letter{font-size:2.6rem}
  .article,.recherche{padding-top:2.6rem}
  .maitres{grid-template-columns:repeat(auto-fill,minmax(11rem,1fr))}
}

@media print{
  .entete,.pied,.voisines,.pagination,.nav{display:none}
  body{background:#fff;font-size:12pt}
  .lecture{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}