/* ============================================================
   THE HINOKI FILE — « Le Casier de Scierie »
   Direction 08 : Le Répertoire à Onglets (grille-annuaire).
   Matières : papier d'inventaire, encre sumi, bois fumé,
   tranches d'essences (hinoki / sugi / kiri / matsu).
   La signature hinoki s'applique en fond sur les tirettes
   (cotes) et les codes de l'index : les laitons du casier.
   ============================================================ */

@font-face { font-family: 'Spectral'; src: url('/spectral-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Spectral'; src: url('/spectral-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('/newsreader-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('/newsreader-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('/newsreader-400it.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Plex Mono'; src: url('/ibm-plex-mono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plex Mono'; src: url('/ibm-plex-mono-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --papier: #faf6ee;
  --papier-creux: #f1ead9;
  --encre: #22201c;
  --encre-douce: #5d564a;
  --accent: #2f4d7a;
  --accent-sombre: #22395c;
  --hinoki: #c8a24a;
  --sugi: #8e4a3a;
  --kiri: #6b5d4a;
  --matsu: #5a6b52;
  --filet: #d8cfbc;
  --filet-fort: #b3a88d;
  --bois-sombre: #2a2620;
  --bois-encre: #efe6d2;
  --titre: 'Spectral', 'Iowan Old Style', Georgia, serif;
  --texte: 'Newsreader', 'Palatino Linotype', Georgia, serif;
  --mono: 'Plex Mono', 'SFMono-Regular', Menlo, monospace;
  --travee: 74rem;
  --mesure: 66ch;
  --medaille: 1 / 1;
  --planche: 3 / 2;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  font-size: clamp(16px, 1.04rem, 17.5px);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: 0.18em; }
a:hover { color: var(--accent-sombre); }
:focus-visible { outline: 2px solid var(--hinoki); outline-offset: 3px; }
main { display: block; max-width: var(--travee); margin: 0 auto; padding: 0 clamp(1rem, 3.5vw, 2.5rem) 4rem; }

.rp-saut { position: absolute; left: -9999px; top: 0; background: var(--bois-sombre); color: var(--bois-encre); padding: .6rem 1rem; z-index: 30; }
.rp-saut:focus { left: 1rem; top: 1rem; }

/* ---------- En-tête : le bandeau bois sombre ---------- */
.rp-mast { background: var(--bois-sombre); color: var(--bois-encre); border-bottom: 4px solid var(--hinoki); }
.rp-mast__cadre { max-width: var(--travee); margin: 0 auto; padding: 1.4rem clamp(1rem, 3.5vw, 2.5rem) 1.1rem; }
.rp-enseigne { display: inline-flex; align-items: center; gap: .7rem; font-family: var(--titre); font-weight: 700; font-size: clamp(1.5rem, 3vw, 1.9rem); color: var(--bois-encre); text-decoration: none; letter-spacing: -0.01em; }
.rp-enseigne:hover { color: var(--hinoki); }
.rp-monogramme rect { fill: none; stroke: var(--hinoki); stroke-width: 1.6; }
.rp-devise { margin: .3rem 0 0; font-family: var(--mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: #c9bfa4; }
.rp-parcours { margin-top: 1rem; }
.rp-parcours__rail { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem .5rem; margin: 0; padding: 0; }
.rp-pastille { display: inline-block; padding: .3rem .85rem .34rem; border: 1px solid #4a4436; border-radius: 999px; font-family: var(--mono); font-size: .8rem; letter-spacing: .05em; color: var(--bois-encre); text-decoration: none; border-left-width: 4px; }
.rp-pastille:hover { border-color: var(--bois-encre); color: var(--hinoki); }
.rp-pastille[aria-current] { background: var(--hinoki); border-color: var(--hinoki); color: var(--bois-sombre); font-weight: 500; }
[data-casier="woods"] { --tranche: var(--hinoki); }
[data-casier="joints"] { --tranche: var(--sugi); }
[data-casier="houses"] { --tranche: var(--kiri); }
[data-casier="care"] { --tranche: var(--matsu); }
.rp-pastille[data-casier] { border-left-color: var(--tranche); }
.rp-tranche__onglet[data-casier] { background: var(--tranche); color: var(--bois-encre); border-color: transparent; }
.rp-tranche__onglet[data-casier]:hover { background: var(--tranche); color: var(--bois-encre); filter: brightness(1.08); }
.rp-tranche__onglet[data-casier="woods"] { color: var(--bois-sombre); }
.rp-tranche__onglet[data-casier="woods"]:hover { color: var(--bois-sombre); }
.rp-tranche__onglet--ici[data-casier] { filter: none; box-shadow: inset 0 0 0 2px var(--bois-sombre); }

/* ---------- Fil d'Ariane : tranche de casier ---------- */
.rp-remontee { margin: 1.1rem 0 0; }
.rp-remontee__rail { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0 0 0 .8rem; border-left: 4px solid var(--tranche, var(--filet-fort)); font-family: var(--mono); font-size: .78rem; }
.rp-remontee__rail li + li::before { content: '/'; margin-right: .35rem; color: var(--encre-douce); }
.rp-remontee__rail a { color: var(--accent); }
.rp-remontee__rail [aria-current] { color: var(--encre-douce); }

/* ---------- Préambule chiffré : le ledger ---------- */
.rp-ledger { display: grid; grid-template-columns: 1fr; gap: 1.4rem; padding: 2.2rem 0 1.6rem; border-bottom: 1px dashed var(--filet-fort); }
@media (min-width: 58rem) { .rp-ledger { grid-template-columns: 1.7fr 1fr; align-items: end; } }
.rp-ledger__h1 { font-family: var(--titre); font-weight: 700; font-size: clamp(2.1rem, 4.6vw, 3.1rem); line-height: 1.05; letter-spacing: -0.015em; margin: 0 0 .9rem; }
.rp-ledger__intro { margin: 0; max-width: var(--mesure); font-size: 1.12rem; color: var(--encre); }
.rp-ledger__intro::first-letter { font-family: var(--titre); font-weight: 700; font-size: 2.6em; line-height: .85; float: left; padding: .08em .12em 0 0; color: var(--accent); }
.rp-ledger--casier .rp-ledger__intro::first-letter { float: none; font-size: inherit; padding: 0; color: inherit; font-family: inherit; font-weight: inherit; }
.rp-comptes { list-style: none; display: flex; gap: 1.8rem; margin: 0; padding: 0; }
.rp-compte { display: grid; gap: .15rem; }
.rp-compte__n { font-family: var(--mono); font-weight: 500; font-size: 1.5rem; color: var(--accent-sombre); }
.rp-compte__l { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-douce); }
.rp-ledger--casier { padding-bottom: 1rem; }
.rp-ledger--casier .rp-rangee__compte, .rp-rangee__compte { font-family: var(--mono); font-size: .78rem; color: var(--encre-douce); }

/* ---------- Onglets de casiers ---------- */
.rp-tranche { margin: 1.6rem 0 0; }
.rp-tranche__rail { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.rp-tranche__onglet { display: inline-block; padding: .34rem .9rem .38rem .8rem; background: var(--papier-creux); border: 1px solid var(--filet); border-left: 4px solid var(--tranche, var(--filet-fort)); border-radius: .25rem .6rem .6rem .25rem; font-family: var(--mono); font-size: .8rem; letter-spacing: .04em; color: var(--encre); text-decoration: none; box-shadow: 0 2px 5px -3px rgba(42, 38, 32, .45); }
.rp-tranche__onglet:hover { background: var(--papier); border-color: var(--filet-fort); }
.rp-tranche__onglet--ici { background: var(--encre); color: var(--papier); border-color: var(--encre); border-left-color: var(--tranche, var(--hinoki)); }

/* ---------- Le canton : grille de cartes ---------- */
.rp-canton { margin-top: 2rem; }
.rp-canton__tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.2rem; border-bottom: 2px solid var(--encre); padding-bottom: .55rem; }
.rp-canton__tete h2 { font-family: var(--titre); font-weight: 700; font-size: clamp(1.35rem, 2.6vw, 1.8rem); margin: 0; }
.rp-canton__compte { font-family: var(--mono); font-size: .76rem; color: var(--encre-douce); margin-left: auto; }
.rp-canton__grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.rp-canton--voisines { margin-top: 3rem; }

/* ---------- La carte de casier ---------- */
.rp-carte { background: var(--papier); border: 1px solid var(--filet); border-left: 4px solid var(--tranche, var(--filet-fort)); border-radius: 14px; padding: .9rem .95rem .95rem; display: grid; grid-template-columns: 4.4rem 1fr; gap: .85rem; align-items: start; box-shadow: 0 1px 0 var(--filet), 0 9px 18px -14px rgba(42, 38, 32, .5); }
.rp-carte__medaille { margin: 0; aspect-ratio: var(--medaille); overflow: hidden; border-radius: 50%; border: 1px solid var(--filet-fort); }
.rp-carte__medaille img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rp-carte__li { min-width: 0; }
.rp-carte__marque { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; margin: 0 0 .3rem; }
.rp-marque { display: inline-block; font-family: var(--mono); font-weight: 500; font-size: .72rem; letter-spacing: .08em; color: var(--bois-sombre); background: var(--hinoki); border-radius: .12rem .3rem .3rem .12rem; padding: .14rem .5rem .16rem; box-shadow: 0 1px 2px -1px rgba(42, 38, 32, .5); }
.rp-casier-nom { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-douce); }
a.rp-casier-nom { color: var(--accent); }
.rp-carte__nom { font-family: var(--titre); font-weight: 600; font-size: 1.08rem; line-height: 1.22; margin: 0 0 .3rem; }
.rp-carte__nom a { color: var(--encre); text-decoration: none; }
.rp-carte__nom a:hover { color: var(--accent-sombre); text-decoration: underline; }
.rp-carte__qualif { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--encre-douce); }
.rp-carte__reserve { margin: .55rem 0 0; padding-top: .5rem; border-top: 1px dashed var(--filet); }
.rp-attribut { display: flex; justify-content: space-between; gap: 1rem; font-family: var(--mono); font-size: .72rem; }
.rp-attribut dt { color: var(--encre-douce); text-transform: uppercase; letter-spacing: .1em; }
.rp-attribut dd { margin: 0; }
.rp-carte--pliee { grid-template-columns: 2.7rem 1fr; padding: .55rem .75rem .6rem; gap: .7rem; }
.rp-carte--pliee .rp-carte__nom { font-size: .98rem; margin-bottom: .15rem; }
.rp-carte--pliee .rp-carte__qualif { font-size: .85rem; }
.rp-carte--pliee .rp-carte__reserve { display: none; }

/* ---------- Rangées par casier (accueil + rubrique) ---------- */
.rp-rangee { margin-top: 2.4rem; border: 1px solid var(--filet); border-radius: 16px; padding: 1.2rem 1.3rem 1.4rem; background: linear-gradient(180deg, var(--papier-creux) 0%, var(--papier) 78%); }
.rp-rangee__tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1.2rem; }
.rp-rangee__titre { font-family: var(--titre); font-weight: 700; font-size: clamp(1.25rem, 2.4vw, 1.55rem); margin: 0; }
.rp-rangee__titre a { color: var(--encre); text-decoration-color: var(--tranche, var(--filet-fort)); text-decoration-thickness: 3px; }
.rp-rangee__titre a:hover { color: var(--accent-sombre); }
.rp-rangee__phrase { margin: 0; font-size: .95rem; font-style: italic; color: var(--encre-douce); flex-basis: 100%; }
.rp-rangee__compte { margin-left: auto; }
.rp-rangee__liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: .9rem; margin-top: 1.1rem; }
.rp-rangee__renvoi { margin: .9rem 0 0; }
.rp-renvoi { font-family: var(--mono); font-size: .82rem; letter-spacing: .05em; font-weight: 500; }
.rp-rangee--pleine { padding-top: 1.4rem; }

/* ---------- Index des noms ---------- */
.rp-index { margin-top: 2.6rem; border: 1px solid var(--filet); border-radius: 16px; background: var(--papier-creux); padding: 1.3rem 1.5rem 1.5rem; box-shadow: 0 12px 24px -18px rgba(42, 38, 32, .55); }
.rp-index__titre { font-family: var(--titre); font-weight: 700; font-size: 1.3rem; margin: 0 0 .8rem; }
.rp-index__rail { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2.5rem; font-size: .95rem; }
@media (min-width: 50rem) { .rp-index__rail { columns: 3; } }
.rp-index__rail li { break-inside: avoid; padding: .28rem 0; border-bottom: 1px dashed var(--filet); }
.rp-index__rail a { color: var(--encre); text-decoration: none; }
.rp-index__rail a:hover { color: var(--accent-sombre); text-decoration: underline; }
.rp-index__code { display: inline-block; font-family: var(--mono); font-size: .66rem; color: var(--bois-sombre); background: var(--hinoki); border-radius: .12rem; padding: .08rem .34rem .1rem; margin-right: .4rem; font-weight: 500; letter-spacing: .05em; }

/* ---------- L'encart méthode : section inversée ---------- */
.rp-methode { margin: 3rem calc(-1 * clamp(1rem, 3.5vw, 2.5rem)) 0; background: var(--bois-sombre); color: var(--bois-encre); }
.rp-methode__cadre { max-width: var(--mesure); margin: 0 auto; padding: 2.2rem clamp(1rem, 3.5vw, 2.5rem) 2.4rem; }
.rp-methode__titre { font-family: var(--titre); font-weight: 700; font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 0 0 .7rem; color: var(--hinoki); }
.rp-methode p { margin: 0; line-height: 1.75; }

/* ---------- Étagère réseau ---------- */
.rp-etagere { margin-top: 2.8rem; border-top: 2px solid var(--encre); padding-top: 1.2rem; }
.rp-etagere__tete h2 { font-family: var(--titre); font-weight: 700; font-size: 1.35rem; margin: 0 0 .25rem; }
.rp-etagere__phrase { margin: 0; font-style: italic; color: var(--encre-douce); font-size: .95rem; }
.rp-etagere__liste { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .6rem; }
.rp-etagere__item { border-radius: 0 12px 12px 0; padding: .55rem .8rem .55rem .9rem; border-left: 4px solid var(--filet-fort); background: var(--papier-creux); }
.rp-etagere__item p { margin: 0; font-size: .95rem; }

/* ---------- Page article : le dossier ---------- */
.rp-dossier__tete { max-width: var(--mesure); margin: 1.6rem auto 0; text-align: left; }
.rp-dossier__h1 { font-family: var(--titre); font-weight: 700; font-size: clamp(1.9rem, 4.2vw, 2.9rem); line-height: 1.08; letter-spacing: -0.015em; margin: .5rem 0 .8rem; }
.rp-dossier__chapeau { font-size: 1.15rem; line-height: 1.6; color: var(--encre-douce); margin: 0 0 .8rem; }
.rp-dossier__date { font-family: var(--mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-sombre); margin: 0; }
.rp-planche { max-width: 72rem; margin: 1.8rem auto 0; }
.rp-planche img { width: 100%; aspect-ratio: var(--planche); object-fit: cover; border: 1px solid var(--filet-fort); border-radius: 14px; display: block; }
.rp-planche figcaption { font-family: var(--mono); font-size: .74rem; color: var(--encre-douce); padding: .5rem .2rem 0; border-top: 1px dashed var(--filet); margin-top: .5rem; }
.rp-dossier__duo { display: grid; grid-template-columns: 1fr; gap: 2.2rem; margin-top: 2.4rem; }
@media (min-width: 62rem) { .rp-dossier__duo { grid-template-columns: minmax(0, var(--mesure)) 19rem; justify-content: center; gap: 3rem; } }
.rp-prose { font-size: 1.02rem; }
.rp-prose > p:first-of-type::first-letter { font-family: var(--titre); font-weight: 700; font-size: 3.1em; line-height: .82; float: left; padding: .06em .14em 0 0; color: var(--accent); }
.rp-prose h2 { font-family: var(--titre); font-weight: 700; font-size: 1.5rem; line-height: 1.2; margin: 2.2rem 0 .7rem; padding-top: 1rem; border-top: 1px solid var(--filet); }
.rp-prose h3 { font-family: var(--titre); font-weight: 600; font-size: 1.18rem; margin: 1.7rem 0 .5rem; }
.rp-prose p { margin: 0 0 1.05rem; }
.rp-prose ul, .rp-prose ol { margin: 0 0 1.05rem; padding-left: 1.4rem; }
.rp-prose li { margin-bottom: .3rem; }
.rp-prose blockquote { margin: 1.4rem 0; padding: .2rem 0 .2rem 1.1rem; border-left: 4px solid var(--hinoki); font-style: italic; color: var(--encre-douce); }
.rp-prose table { border-collapse: collapse; width: 100%; margin: 1.4rem 0; font-size: .92rem; }
.rp-prose th, .rp-prose td { border: 1px solid var(--filet); padding: .45rem .7rem; text-align: left; }
.rp-prose th { font-family: var(--mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; background: var(--papier-creux); }
.rp-prose dl { border: 1px solid var(--filet); border-radius: 14px; padding: .8rem 1rem; margin: 1.4rem 0; background: var(--papier-creux); }
.rp-prose dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px dashed var(--filet); }
.rp-prose dl div:last-child { border-bottom: none; }
.rp-prose dt { font-family: var(--mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--encre-douce); }
.rp-prose dd { margin: 0; }
.rp-prose aside { margin: 1.6rem 0; padding: 1rem 1.1rem; border: 1px solid var(--filet-fort); border-left: 4px solid var(--sugi); border-radius: 14px; background: var(--papier); }
.rp-prose aside h2 { border-top: none; padding-top: 0; margin-top: 0; font-size: 1.05rem; }
.rp-prose aside p { font-style: italic; color: var(--encre-douce); margin-bottom: .4rem; }
.rp-prose aside p:last-child { margin-bottom: 0; }

/* ---------- Rail de fiche : la carte de casier collante ---------- */
.rp-registre__carte { position: sticky; top: 1.4rem; border: 1px solid var(--filet); border-left: 4px solid var(--tranche, var(--filet-fort)); border-radius: 14px; background: var(--papier-creux); padding: 1rem 1.1rem; }
.rp-registre__titre { font-family: var(--mono); font-size: .74rem; font-weight: 500; text-transform: uppercase; letter-spacing: .14em; color: var(--encre-douce); margin: 1.1rem 0 .4rem; }
.rp-registre__titre:first-child { margin-top: 0; }
.rp-registre__attributs { margin: 0; }
.rp-registre__attributs .rp-attribut { padding: .4rem 0; border-bottom: 1px dashed var(--filet); }
.rp-registre__attributs .rp-attribut:last-child { border-bottom: none; }
.rp-registre__sommaire, .rp-registre__sources { margin: 0; padding-left: 1.2rem; font-size: .9rem; }
.rp-registre__sommaire li, .rp-registre__sources li { margin-bottom: .3rem; }
.rp-registre__sommaire li::marker, .rp-registre__sources li::marker { font-family: var(--mono); font-size: .74rem; color: var(--tranche, var(--encre-douce)); }

/* ---------- Pied : le colophon ---------- */
.rp-colophon { background: var(--bois-sombre); color: var(--bois-encre); margin-top: 4rem; border-top: 4px solid var(--hinoki); }
.rp-colophon__rangee { max-width: var(--travee); margin: 0 auto; padding: 2.2rem clamp(1rem, 3.5vw, 2.5rem) 1rem; display: grid; grid-template-columns: 1fr; gap: 1.6rem; }
@media (min-width: 56rem) { .rp-colophon__rangee { grid-template-columns: 2fr 1fr 1fr; gap: 3rem; } }
.rp-colophon__titre { font-family: var(--titre); font-weight: 700; font-size: 1.05rem; margin: 0 0 .6rem; color: var(--hinoki); }
.rp-colophon__bloc p { margin: 0 0 .7rem; font-size: .92rem; line-height: 1.65; color: #cfc5ac; }
.rp-colophon__note { font-style: italic; }
.rp-colophon__liste { list-style: none; margin: 0; padding: 0; }
.rp-colophon__liste li { padding: .22rem 0; border-bottom: 1px dashed #4a4436; }
.rp-colophon__liste a { color: var(--bois-encre); text-decoration: none; font-size: .92rem; }
.rp-colophon__liste a:hover { color: var(--hinoki); }
.rp-colophon__ligne { max-width: var(--travee); margin: 0 auto; padding: 1rem clamp(1rem, 3.5vw, 2.5rem) 1.6rem; font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: #9d937a; }

/* ---------- Responsive ---------- */
@media (max-width: 40rem) {
  .rp-carte { grid-template-columns: 3.6rem 1fr; }
  .rp-dossier__duo { gap: 1.6rem; }
  .rp-methode { margin-left: -1rem; margin-right: -1rem; }
}


/* ---------- Héro de scierie + geste plein ---------- */
.rp-ledger__geste { margin: .4rem 0 0; }
.rp-geste { display: inline-block; background: var(--hinoki); color: var(--bois-sombre); font-family: var(--mono); font-weight: 500; font-size: .86rem; letter-spacing: .04em; padding: .6rem 1.25rem; border-radius: 999px; text-decoration: none; box-shadow: 0 8px 16px -10px rgba(42, 38, 32, .6); }
.rp-geste:hover { color: var(--bois-sombre); filter: brightness(1.05); }
.rp-hero { margin: 1.9rem 0 0; }
.rp-hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: 18px; border: 1px solid var(--filet-fort); box-shadow: 0 18px 34px -22px rgba(42, 38, 32, .6); }
.rp-hero figcaption { font-family: var(--mono); font-size: .74rem; color: var(--encre-douce); padding: .5rem .2rem 0; }
.rp-planche__credit { color: var(--filet-fort); }
.rp-planche__credit::before { content: "\00b7\0020"; }