/* ============================================================
   LIRE GRAEBER — les pages de livre et de chapitre, 8e passe (structure héritée de la « revue »)
   (26 oct. 2026). Dérivées par tools/gen-site.mjs. Le socle (jetons,
   barre, rubriques, planches, tableaux, pied) est dans assets/site.css.
   Une page de livre se lit comme une notice de catalogue : titre, fiche
   (définitions), planche de l'objet ; puis des rubriques à filet — la
   thèse, le plan, le cabinet (Dette), les mots du livre.
   Mis en cache : un changement se bumpe dans V.oeuvre_css du générateur.
   ============================================================ */

/* ---------- fil d'Ariane ---------- */
.fil{padding-top:22px;font:400 var(--t-meta)/1.4 var(--f-ui);color:var(--muted)}
.fil ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.fil li{display:inline-flex;align-items:center}
.fil li + li::before{content:"/";margin:0 10px;color:var(--filet-fort)}
.fil a{color:var(--trait);text-decoration:none;display:inline-block;padding:4px 0;min-height:24px}
.fil a:hover{color:var(--accent)}
.fil [aria-current]{color:var(--texte)}

/* ---------- l'ouverture d'un livre (8e passe) ----------
   Le titre en grand à gauche, l'objet du livre à droite (rideau, trame au
   survol, parallaxe --py par oeuvre.js), deux actions. */
.o-ouv{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,88px);align-items:center;min-height:calc(100svh - 140px);padding:clamp(28px,4vw,56px) var(--gutter) clamp(40px,5vw,72px)}
.o-ouv-texte{container-type:inline-size}
/* --mot : le nombre de signes du mot le plus long du titre (posé par le
   générateur). Le titre ne dépasse jamais sa colonne : « commencement »
   passait sous l'objet en 1470 px (mesuré en ligne, 12 nov. 2026). */
.o-h{font:400 max(28px,min(clamp(40px,7.4vw,124px),100cqi / (var(--mot,8) * .66)))/.96 var(--f-titre);letter-spacing:-.03em;margin:0 0 14px;text-wrap:balance;overflow-wrap:break-word}
.o-sous{font:400 clamp(22px,2.2vw,30px)/1.25 var(--f-titre);color:var(--accent);margin:0 0 14px;max-width:26ch}
.o-orig{margin:0 0 26px}
.o-orig i{font-style:italic}
.o-ouv .lede{margin-bottom:32px;max-width:46ch}
.o-cta{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.o-planche{transform:translate3d(0,var(--py,0px),0);will-change:transform}
.o-planche .cadre{--ratio:4/5;border-radius:8px}
.js-anim .o-ouv .lede{transition-delay:.45s}.js-anim .o-ouv .o-cta{transition-delay:.6s}
@media (max-width:900px){.o-ouv{grid-template-columns:1fr;min-height:0}.o-planche{order:-1;max-width:420px}}

/* ---------- la fiche, en bande (comme les chiffres de l'accueil) ---------- */
.o-fiche{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:0 auto;border-block:1px solid var(--filet-fort);font:400 var(--t-small)/1.5 var(--f-ui)}
.o-fiche > div{padding:22px 22px 22px 0;border-right:1px solid var(--filet)}
.o-fiche > div + div{padding-left:22px}
.o-fiche > div:last-child{border-right:0}
.o-fiche dt{font:500 14px/1.3 var(--f-grot);color:var(--muted);margin-bottom:6px}
.o-fiche dd{margin:0;color:var(--trait)}
.o-fiche a{color:var(--accent)}
@media (max-width:620px){.o-fiche > div{border-right:0;border-bottom:1px solid var(--filet);padding-left:0!important}}

/* ---------- la thèse, le plan ---------- */
.o-deux{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,5vw,80px);align-items:start}
.o-note{margin:0;max-width:34ch;font-size:var(--t-small);line-height:1.55;color:var(--trait)}
.o-intro{margin:0 0 clamp(28px,4vw,48px)}
.o-bloc{padding-top:clamp(56px,7vw,104px)}
.o-parcours{margin-bottom:clamp(36px,5vw,64px)}
@media (max-width:860px){.o-deux{grid-template-columns:1fr}}

/* le plan : une ligne = un chapitre. Au survol, un fond monte du filet, le
   numéro s'allume, le titre avance, la flèche arrive (comme les rangs de
   l'accueil) ; la bulle dit « Lire le chapitre n ». */
.plan{list-style:none;margin:0;padding:0}
.plan-temps{margin:0 0 clamp(40px,5vw,64px)}
.plan-temps h3{font:600 clamp(24px,2.4vw,32px)/1.1 var(--f-grot);letter-spacing:-.025em;color:var(--accent);margin:0 0 6px}
.plan-temps > .meta{margin:0 0 16px;max-width:62ch}
.plan-liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--filet-fort)}
.plan-ch{border-bottom:1px solid var(--filet-fort)}
.plan-ch a{position:relative;isolation:isolate;display:grid;grid-template-columns:clamp(48px,6vw,88px) minmax(0,1fr) 48px;gap:0 clamp(12px,2vw,28px);align-items:start;padding:clamp(20px,2.4vw,30px) 16px;text-decoration:none;color:inherit}
.plan-ch a::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--vitrine);transform:scaleY(0);transform-origin:bottom;transition:transform .7s var(--sortie)}
.plan-ch a:hover::before,.plan-ch a:focus-visible::before{transform:scaleY(1)}
.plan-n{font:600 clamp(28px,3vw,44px)/1 var(--f-grot);letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--muted);transition:color .4s}
.plan-n-mot{font-size:clamp(15px,1.3vw,18px);letter-spacing:0;padding-top:.5em}
.plan-corps{display:flex;flex-direction:column;gap:4px;transition:transform .7s var(--sortie)}
.plan-t{font:400 clamp(22px,2.2vw,30px)/1.15 var(--f-titre);text-wrap:balance}
.plan-per{font:400 var(--t-meta)/1 var(--f-ui);color:var(--muted)}
.plan-sous{font:400 16px/1.4 var(--f-texte);color:var(--accent-2)}
.plan-r{font:400 var(--t-small)/1.5 var(--f-texte);color:var(--trait);margin-top:4px;max-width:64ch}
.plan-en{font:400 var(--t-meta)/1.4 var(--f-ui);color:var(--muted)}
.plan-fl{align-self:center;justify-self:end;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--accent);color:#1f231a;font:600 17px/1 var(--f-grot);opacity:0;transform:translateX(-14px) rotate(-45deg) scale(.6);transition:opacity .4s,transform .6s var(--sortie)}
.plan-ch a:hover .plan-n,.plan-ch a:focus-visible .plan-n{color:var(--accent)}
.plan-ch a:hover .plan-corps,.plan-ch a:focus-visible .plan-corps{transform:translateX(10px)}
.plan-ch a:hover .plan-fl,.plan-ch a:focus-visible .plan-fl{opacity:1;transform:none}
@media (max-width:620px){.plan-ch a{grid-template-columns:44px minmax(0,1fr);padding-inline:0}.plan-fl{display:none}.plan-ch a:hover .plan-corps{transform:none}}

/* ---------- l'appel final ---------- */
.o-fin{padding:clamp(88px,11vw,170px) var(--gutter) clamp(40px,5vw,72px);text-align:center}
.o-fin .sec-h{margin-inline:auto}
.o-fin .o-cta{justify-content:center}

/* ---------- les mots du livre (chapitres) : une ligne de mots ---------- */
.notions{margin:0;font:400 19px/1.7 var(--f-titre);color:var(--trait);max-width:70ch}
.notions span + span::before{content:" · ";font-style:normal;color:var(--muted)}

/* ---------- un chapitre (8e passe) ---------- */
/* la progression de lecture, sous la barre du site */
.lecture-barre{position:fixed;left:0;right:0;top:0;z-index:101;height:3px;pointer-events:none}
.lecture-barre span{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(var(--lu,0))}
.c-tete{position:relative;isolation:isolate;padding:clamp(40px,6vw,88px) 0 0}
.c-tete > :not(.c-geant){max-width:62rem}
/* le numéro du chapitre, en contour, très grand, qui glisse au défilement */
.c-geant{position:absolute;right:0;top:-.08em;z-index:-1;font:700 clamp(220px,34vw,560px)/.8 var(--f-grot);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px var(--filet-fort);transform:translate3d(0,var(--gy,0px),0);pointer-events:none;user-select:none}
.c-h{font:400 clamp(30px,6vw,96px)/1 var(--f-titre);letter-spacing:-.028em;margin:0 0 14px;text-wrap:balance;overflow-wrap:break-word}
.c-sous{font:400 clamp(20px,2vw,26px)/1.35 var(--f-titre);color:var(--accent);margin:0 0 12px;max-width:40ch}
.c-en{margin:0 0 28px}
.c-phrase{color:var(--texte);max-width:46ch}
.c-pages{display:flex;flex-wrap:wrap;align-items:center;gap:2px;margin:clamp(36px,5vw,56px) 0;padding:10px 0;border-top:1px solid var(--filet-fort);border-bottom:1px solid var(--filet)}
.c-pages .meta{margin-right:12px}
.c-pages a{display:inline-grid;place-items:center;min-width:36px;height:36px;padding:0 6px;font:500 var(--t-small)/1 var(--f-ui);font-variant-numeric:tabular-nums;color:var(--trait);text-decoration:none;border-radius:999px;transition:background .25s,color .25s,transform .35s var(--sortie)}
.c-pages a:hover{color:var(--texte);background:var(--vitrine);transform:translateY(-2px)}
.c-pages a[aria-current]{color:var(--sur-accent);background:var(--accent)}
.c-corps{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(32px,5vw,80px);align-items:start}
.c-corps > .prose{font-size:19.5px}
.c-cote{position:sticky;top:96px}
.c-cote > section{border-top:1px solid var(--filet-fort);padding:14px 0 18px}
.c-cote h2{font:600 15px/1.3 var(--f-grot);color:var(--accent);margin:0 0 10px}
.c-cote ul,.c-cote ol{margin:0;padding-left:20px;font:400 16.5px/1.5 var(--f-texte);color:var(--trait)}
.c-cote li{margin:0 0 8px}
.c-cote li b{font-weight:500;color:var(--texte)}
.c-cote .notions{font-size:17px}
.c-droits{border-top:1px solid var(--filet);padding-top:14px;margin:0}
@media (max-width:900px){.c-corps{grid-template-columns:1fr}.c-cote{position:static}}
/* les voisins, en grandes cartes : au survol, le fond monte, la flèche part */
.c-voisins{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:clamp(64px,8vw,120px);border-top:1px solid var(--filet-fort);border-bottom:1px solid var(--filet-fort)}
.c-voisins a{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:10px;padding:clamp(28px,4vw,56px) clamp(16px,2.4vw,36px);text-decoration:none;color:inherit}
.c-voisins a::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--vitrine);transform:scaleY(0);transform-origin:bottom;transition:transform .7s var(--sortie)}
.c-voisins a:hover::before,.c-voisins a:focus-visible::before{transform:scaleY(1)}
.c-voisins .v-t{font:400 clamp(26px,3vw,44px)/1.1 var(--f-titre);text-wrap:balance;transition:color .3s}
.c-voisins a:hover .v-t{color:var(--accent)}
.c-voisins .v-fl{font:600 26px/1 var(--f-grot);color:var(--accent);transition:transform .6s var(--sortie)}
.c-voisins .suivant{text-align:right;grid-column:2;align-items:flex-end;border-left:1px solid var(--filet)}
.c-voisins .suivant:hover .v-fl{transform:translateX(10px)}
.c-voisins .precedent:hover .v-fl{transform:translateX(-10px)}
@media (max-width:620px){.c-voisins{grid-template-columns:1fr}.c-voisins .suivant{grid-column:1;text-align:left;align-items:flex-start;border-left:0;border-top:1px solid var(--filet)}}

/* ---------- le cabinet d'un livre (Dette : crédit, métal, bois, rien) ----------
   Quatre planches, deux par deux ; chaque objet a son geste au défilement
   (oeuvre.js) : la pièce tourne (--flip), les moitiés du bâton se
   rejoignent (--ecart), la vitrine vide palpite (--fantome). État fini par
   défaut. */
.o-vitrines{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(36px,4vw,56px) clamp(24px,3vw,44px)}
.o-vitrine .planche .cadre{--ratio:3/2;perspective:1200px}
.o-vitrine .planche .cadre > img{max-height:70%}
.ov-texte{margin-top:18px}
.ov-texte .meta{margin:0}
.ov-texte h3{font:400 28px/1.1 var(--f-titre);margin:6px 0 10px}
.ov-texte p:not(.meta){font:400 var(--t-small)/1.55 var(--f-texte);color:var(--trait);margin:0 0 14px;max-width:52ch}
.piece{position:relative;width:min(40%,180px);aspect-ratio:1;transform-style:preserve-3d;transform:rotateY(calc(var(--flip,0) * 180deg)) rotateX(8deg)}
.piece img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.piece .p-revers{transform:rotateY(180deg)}
.baton{position:relative;width:min(80%,440px);display:flex;flex-direction:column;gap:3px;filter:drop-shadow(0 16px 20px rgba(var(--ombre-rgb),.45))}
.baton img{width:100%;height:auto}
.b-souche{transform:translate(calc(var(--ecart,0) * -14px),calc(var(--ecart,0) * -30px)) rotate(calc(var(--ecart,0) * -2deg))}
.b-contre{transform:translate(calc(var(--ecart,0) * 14px),calc(var(--ecart,0) * 30px)) rotate(calc(var(--ecart,0) * 1.6deg))}
.socle-vide{position:relative;width:min(44%,200px);aspect-ratio:1.1}
.socle-vide::before{content:"";position:absolute;left:8%;right:8%;bottom:0;height:30%;background:var(--vitrine-2);border:1px solid var(--filet)}
.socle-vide span{position:absolute;left:28%;right:28%;bottom:34%;height:44%;border:1px dashed var(--filet-fort);opacity:var(--fantome,1)}
@media (max-width:760px){.o-vitrines{grid-template-columns:1fr}}

/* ---------- l'ardoise effacée ----------
   Une copie lissée de la tablette (flou, contraste bas) découverte par un
   masque glissant (--efface, oeuvre.js). L'état par défaut est effacé. */
.ard-grille{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:center}
.ard-objet .cadre{--ratio:1/1}
.ard-objet .cadre img{position:absolute;inset:14%;width:72%;height:72%;max-width:none;max-height:none;object-fit:contain}
.ard-lisse{filter:blur(7px) contrast(.8) saturate(.85) brightness(1.06)!important;
  -webkit-mask-image:linear-gradient(100deg,#000 calc(var(--efface,1.2) * 100% - 14%),transparent calc(var(--efface,1.2) * 100% + 14%));
  mask-image:linear-gradient(100deg,#000 calc(var(--efface,1.2) * 100% - 14%),transparent calc(var(--efface,1.2) * 100% + 14%))}
@media (max-width:860px){.ard-grille{grid-template-columns:1fr}.ard-objet{max-width:420px}}