/* ============================================================
   grace-manuscrit.css — parti pris « manuscrit enluminé »
   Thème + animations. Additif : sans JS, la page reste lisible
   (aucune règle ne masque un contenu hors html[data-fx="on"]).
   ============================================================ */

/* ---------- 0. Palette : parchemin, encre de fer, or, rubrique ---------- */
:root{
  --paper:#f1e9d5;--paper-2:#e6d9bc;--ink:#221f18;--muted:#6a6049;--line:#cdb994;
  --gold:#a8791d;--gold-soft:#ecd6a4;--gold-pale:#faf1da;
  --night:#2b3550;--night-soft:#e2ddca;
  --ember:#8e2f21;--ember-soft:#f0ded0;--white:#fdf8ea;
  --shadow:0 20px 52px rgba(74,58,30,.15);
  --rubrique:#8e2f21;
}
html[data-fx="on"]{--fx-ease:cubic-bezier(.16,.84,.24,1);--fx-bleed:-44px}

/* fonds codés en dur dans la page d'origine, réaccordés au parchemin */
.checkpoint{background:#e9e4cd!important;border-color:#cdb994!important}
.affirm .yes{background:#e9e6d0!important}
.affirm .open{background:#f3e3d4!important}
.callout{background:#fdf4de!important}
.reading .evidence,.lex .note{border-color:rgba(168,121,29,.45)!important}

/* ---------- 1. Le support : parchemin fibreux, réglure, vignette ---------- */
html[data-fx="on"]{background:var(--paper)}
html[data-fx="on"] body{
  background:
    radial-gradient(130% 80% at 50% -12%,rgba(255,250,236,.95),rgba(255,250,236,0) 58%),
    repeating-linear-gradient(0deg,rgba(34,31,24,.038) 0 1px,transparent 1px 32px),
    linear-gradient(90deg,rgba(120,92,40,.07),rgba(120,92,40,0) 12%,rgba(120,92,40,0) 88%,rgba(120,92,40,.07));
  background-attachment:fixed;
}
.fx-fibres{position:fixed;inset:0;z-index:1;pointer-events:none;mix-blend-mode:multiply;opacity:.44;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02 .85' numOctaves='4' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23f)' opacity='.34'/%3E%3C/svg%3E")}
.fx-vignette{position:fixed;inset:0;z-index:2;pointer-events:none;
  box-shadow:inset 0 0 200px rgba(74,52,18,.3),inset 0 0 52px rgba(74,52,18,.16)}

/* lumière de chandelle, suit le pointeur et vacille */
.fx-amb{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict}
.fx-light{position:absolute;left:0;top:0;width:76vmax;height:76vmax;margin:-38vmax 0 0 -38vmax;
  background:radial-gradient(circle at 50% 50%,rgba(255,248,226,.92),rgba(253,238,204,.4) 34%,rgba(241,233,213,0) 68%);
  will-change:transform,opacity}
.fx-flecks{position:absolute;inset:0;mix-blend-mode:multiply;opacity:.85}
.fx-spec{position:absolute;left:0;top:0;width:760px;height:760px;margin:-380px 0 0 -380px;pointer-events:none;
  opacity:.55;will-change:transform;
  background:radial-gradient(circle at 50% 50%,rgba(255,238,190,.7),rgba(255,238,190,0) 66%)}

/* fil de lecture, à l'encre d'or */
.fx-thread{position:fixed;left:0;top:0;height:2px;z-index:65;pointer-events:none;width:0;
  background:linear-gradient(90deg,rgba(168,121,29,0),var(--gold) 45%,#e6c47c);
  box-shadow:0 0 14px rgba(168,121,29,.6)}

/* ---------- 2. Typographie du manuscrit ---------- */
html[data-fx="on"] .chapter .lesson-essential p,
html[data-fx="on"] .chapter-intro,
html[data-fx="on"] .layer p,html[data-fx="on"] .layer li,
html[data-fx="on"] .start-guide>p,html[data-fx="on"] .answer,
html[data-fx="on"] .bilan li p,html[data-fx="on"] .famille p,html[data-fx="on"] .reading p{
  font-family:var(--serif);font-size:1.06rem;line-height:1.82;color:#3b3527}
html[data-fx="on"] .chapter .lesson-essential p,html[data-fx="on"] .layer p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
html[data-fx="on"] .eyebrow,html[data-fx="on"] .chapter-no,html[data-fx="on"] .rail-title,
html[data-fx="on"] .detail-heading,html[data-fx="on"] .thesis strong,html[data-fx="on"] .source-item b{
  color:var(--rubrique);letter-spacing:.2em}
html[data-fx="on"] h1,html[data-fx="on"] h2,html[data-fx="on"] h3{
  text-shadow:0 1px 0 rgba(255,250,235,.85),0 -1px 0 rgba(74,58,30,.07)}
html[data-fx="on"] .brand .seal{
  border:0;color:#f6e1b8;font:700 .74rem/1 var(--sans);letter-spacing:.06em;
  background:radial-gradient(circle at 34% 28%,#b5412c,#77231a 74%);
  box-shadow:0 6px 14px rgba(70,20,10,.4),inset 0 2px 5px rgba(255,255,255,.35);
  transform:rotate(-6deg);animation:fxSceau 8s ease-in-out infinite}
@keyframes fxSceau{0%,100%{transform:rotate(-6deg) scale(1)}50%{transform:rotate(-3deg) scale(1.05)}}

/* or en feuille : titre, mots anciens, chiffres */
html[data-fx="on"] h1 em,
html[data-fx="on"] .word code,
html[data-fx="on"] .lex .strongnum,
html[data-fx="on"] .stat strong{
  text-shadow:none;
  background:linear-gradient(96deg,#5e3c08,#8a5f11 18%,#c99c3e 40%,#a8791d 56%,#6b4708 76%,#b98f36);
  background-size:230% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:fxFoil 11s linear infinite}
html[data-fx="on"] .lex .strongnum{border-color:rgba(168,121,29,.5)}
@keyframes fxFoil{to{background-position:230% 0}}

/* ---------- 3. Lettrine enluminée (posée par le script) ---------- */
.fx-lettrine{float:left;margin:8px 20px 4px 0;width:102px;height:102px;display:grid;place-items:center;
  border:1.5px solid var(--gold);background:radial-gradient(circle at 30% 24%,#fdf3d8,#e6cfa0 72%);
  box-shadow:0 0 0 5px var(--paper),0 0 0 6px rgba(168,121,29,.42),0 14px 30px rgba(74,58,30,.18);
  opacity:0;transform:scale(.88) rotate(-3deg);transition:opacity .9s ease,transform 1.1s var(--fx-ease)}
.fx-lettrine.fx-on{opacity:1;transform:none}
.fx-lettrine span{font:400 4.4rem/1 var(--serif);color:var(--rubrique);text-shadow:0 1px 0 #fff4d9}
@media(max-width:620px){.fx-lettrine{width:72px;height:72px;margin:4px 14px 2px 0}.fx-lettrine span{font-size:3rem}}

/* ---------- 4. Blocs : panneaux enluminés ---------- */
html[data-fx="on"] .thesis,html[data-fx="on"] .callout,html[data-fx="on"] .essential-verse{position:relative}
html[data-fx="on"] .thesis:after,html[data-fx="on"] .callout:after{content:"❧";position:absolute;right:13px;bottom:8px;color:var(--gold);opacity:.65}
html[data-fx="on"] .layer{background-image:linear-gradient(180deg,rgba(255,250,235,.7),rgba(255,250,235,0));
  box-shadow:inset 0 1px 0 rgba(255,252,240,.9),0 14px 34px rgba(74,58,30,.08)}
html[data-fx="on"] .niv2{border-left-color:var(--night)}
html[data-fx="on"] .niv3{border-left-color:var(--ember)}
html[data-fx="on"] .chapters{border-left:1px solid rgba(142,47,33,.22);padding-left:clamp(14px,3vw,34px);
  box-shadow:-4px 0 0 -3px rgba(142,47,33,.18)}
html[data-fx="on"] .compare th{background:var(--paper-2);color:var(--rubrique)}
html[data-fx="on"] .compare tr:nth-child(even) td{background:rgba(255,250,235,.55)}
html[data-fx="on"] .summary{background:#1d1a14}
html[data-fx="on"] .rp{background:var(--paper);box-shadow:-26px 0 70px rgba(50,36,12,.28)}
html[data-fx="on"] .rp:before{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;
  background:linear-gradient(90deg,rgba(120,80,26,.4),rgba(120,80,26,0))}

/* ---------- 5. Apparitions ---------- */
html[data-fx="on"] .fx-rise{opacity:0;transform:translate3d(0,16px,0);filter:blur(2px);
  transition:opacity .55s var(--fx-ease),transform .6s var(--fx-ease),filter .35s ease}
html[data-fx="on"] .fx-rise.fx-on{opacity:1;transform:none;filter:none}
html[data-fx="on"] .fx-veil{opacity:0;clip-path:inset(0 0 100% 0);
  transition:opacity .5s ease,clip-path .7s var(--fx-ease),transform .5s var(--fx-ease),box-shadow .4s ease,border-color .3s ease}
html[data-fx="on"] .fx-veil.fx-on{opacity:1;clip-path:inset(var(--fx-bleed) var(--fx-bleed) var(--fx-bleed) var(--fx-bleed))}

/* titres à l'encre qui se diffuse */
html[data-fx="on"] .fx-ink{opacity:0;transition:opacity .7s ease}
html[data-fx="on"] .fx-ink.fx-on{opacity:1}

/* titres secondaires : révélation mot à mot sous masque */
html[data-fx="on"] .fx-split .fx-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
html[data-fx="on"] .fx-split .fx-wi{display:inline-block;transform:translate3d(0,112%,0) rotate(2.5deg);opacity:0;
  transition:transform .65s var(--fx-ease),opacity .45s ease}
html[data-fx="on"] .fx-split.fx-on .fx-wi{transform:none;opacity:1}

/* règle d'or tracée sous les titres */
html[data-fx="on"] .chapter h2:after,html[data-fx="on"] .section-head h2.fx-split:after,html[data-fx="on"] .start-guide h2.fx-split:after{
  content:"";display:block;height:1px;width:min(280px,46%);margin-top:.46em;
  background:linear-gradient(90deg,var(--gold),rgba(168,121,29,0));
  transform:scaleX(0);transform-origin:left center;transition:transform 1.4s .25s var(--fx-ease)}
html[data-fx="on"] .chapter h2.fx-on:after,html[data-fx="on"] .section-head h2.fx-on:after,html[data-fx="on"] .start-guide h2.fx-on:after{transform:none}

/* ---------- 6. Foliation fantôme ---------- */
html[data-fx="on"] .chapter{isolation:isolate}
.fx-ghost{position:absolute;z-index:-1;right:-.04em;top:-.2em;pointer-events:none;user-select:none;
  font:400 clamp(9rem,21vw,19rem)/1 var(--serif);color:transparent;
  -webkit-text-stroke:1px rgba(120,84,26,.2);opacity:0;transition:opacity 1.4s ease;will-change:transform}
.fx-ghost.fx-on{opacity:1}

/* ---------- 7. Orbite du titre ---------- */
html[data-fx="on"] .ring{will-change:transform}
html[data-fx="on"] .ring.one{animation:fxRing 86s linear infinite;border-color:rgba(142,47,33,.3)}
html[data-fx="on"] .ring.two{animation:fxRing 124s linear infinite reverse;border-color:rgba(168,121,29,.45)}
html[data-fx="on"] .ring.three{animation:fxPulse 12s ease-in-out infinite;background:rgba(236,214,164,.6)}
@keyframes fxRing{to{transform:rotate(calc(var(--r) + 360deg))}}
@keyframes fxPulse{0%,100%{transform:rotate(var(--r)) scale(1);box-shadow:0 0 0 24px rgba(236,214,164,.3)}
  50%{transform:rotate(var(--r)) scale(1.05);box-shadow:0 0 0 42px rgba(236,214,164,.18)}}
.fx-halo{position:absolute;width:78%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,rgba(168,121,29,.45),rgba(142,47,33,.3) 30%,rgba(43,53,80,.22) 58%,rgba(236,214,164,.5) 80%,rgba(168,121,29,.45));
  filter:blur(28px);opacity:.5;mix-blend-mode:multiply;animation:fxSpin 40s linear infinite}
@keyframes fxSpin{to{transform:rotate(360deg)}}
html[data-fx="on"] .core{background:var(--paper);animation:fxBreathe 13s ease-in-out infinite}
@keyframes fxBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.022)}}
html[data-fx="on"] .orbit-label{animation:fxFloat 9s ease-in-out infinite;background:var(--white)}
html[data-fx="on"] .orbit-label.b{animation-duration:11.5s;animation-delay:-3s}
html[data-fx="on"] .orbit-label.c{animation-duration:13s;animation-delay:-6s}
@keyframes fxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* ---------- 8. Cartes : vélin qui se soulève ---------- */
html[data-fx="on"] .fx-card{position:relative;transform-style:preserve-3d;will-change:transform}
/* Aucun halo superpose au texte des cartes : la bordure indique le survol. */
html[data-fx="on"] .fx-card.fx-hot{box-shadow:0 28px 62px rgba(74,58,30,.2);border-color:var(--gold);z-index:3}

/* ---------- 9. Références : l'encre remplit le trait ---------- */
html[data-fx="on"] .vref:not(.chip){
  background:linear-gradient(var(--gold-soft),var(--gold-soft)) left center/0% 100% no-repeat;
  transition:background-size .32s var(--fx-ease),border-color .2s,color .2s}
html[data-fx="on"] .vref:not(.chip):hover,html[data-fx="on"] .vref:not(.chip):focus-visible{background-size:100% 100%}
html[data-fx="on"] .vref.chip{transition:transform .25s var(--fx-ease),border-color .2s,background .2s}
html[data-fx="on"] .vref.chip:hover{transform:translateY(-2px)}
html[data-fx="on"] .vref.fx-ping{animation:fxPing .65s ease-out}
@keyframes fxPing{from{box-shadow:0 0 0 0 rgba(168,121,29,.55)}to{box-shadow:0 0 0 15px rgba(168,121,29,0)}}

/* ---------- 10. Boutons, bandeaux, bilan ---------- */
html[data-fx="on"] .primary{background:#2a241a;border-color:#2a241a}
html[data-fx="on"] .primary:hover{background:#3a3122}
html[data-fx="on"] .primary,html[data-fx="on"] .bilan-link{position:relative;overflow:hidden;isolation:isolate}
html[data-fx="on"] .primary:after,html[data-fx="on"] .bilan-link:after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 30%,rgba(255,238,198,.5) 48%,transparent 62%);
  transform:translateX(-120%);transition:transform .75s var(--fx-ease)}
html[data-fx="on"] .primary:hover:after,html[data-fx="on"] .bilan-link:hover:after{transform:translateX(120%)}
html[data-fx="on"] .summary{position:relative;overflow:hidden}
html[data-fx="on"] .summary:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 38%,rgba(236,214,164,.16) 50%,transparent 62%);animation:fxBand 14s linear infinite}
@keyframes fxBand{from{transform:translateX(-60%)}to{transform:translateX(60%)}}
html[data-fx="on"] .bilan{position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,var(--gold-pale),var(--white) 55%)}
html[data-fx="on"] .bilan:before{content:"";position:absolute;inset:-40%;z-index:-1;pointer-events:none;opacity:.18;
  background:conic-gradient(from 0deg,rgba(168,121,29,.5),transparent 30%,rgba(142,47,33,.35) 58%,transparent 80%,rgba(168,121,29,.5));
  animation:fxSpin 46s linear infinite}
html[data-fx="on"] .bilan li:before{transition:transform .6s var(--fx-ease),background .3s,color .3s}
html[data-fx="on"] .bilan li:hover:before{transform:scale(1.12) rotate(-6deg);background:var(--gold);color:#fff}

/* ---------- 11. Frise historique ---------- */
html[data-fx="on"] .timeline:before{transform:scaleY(0);transform-origin:top;transition:transform 1.7s var(--fx-ease)}
html[data-fx="on"] .timeline.fx-on:before{transform:none}
html[data-fx="on"] .moment:before{background:var(--paper);transition:box-shadow .4s ease,transform .4s var(--fx-ease)}
html[data-fx="on"] .moment:hover:before{transform:scale(1.4);box-shadow:0 0 0 6px rgba(236,214,164,.55)}

/* ---------- 12. Barre pilote ---------- */
html[data-fx="on"] .pilote{background:rgba(241,233,213,.92);border-bottom-color:rgba(168,121,29,.35)}
html[data-fx="on"] .pilote.compact{background:rgba(241,233,213,.84);backdrop-filter:blur(10px) saturate(1.1)}
html[data-fx="on"] .etapes button{transition:transform .25s var(--fx-ease),background .25s,color .25s,border-color .25s}
html[data-fx="on"] .etapes button:hover{transform:translateY(-2px)}
html[data-fx="on"] .etapes button[aria-current="step"]{background:#2a241a;border-color:#2a241a;animation:fxStep 3.4s ease-in-out infinite}
@keyframes fxStep{0%,100%{box-shadow:0 0 0 0 rgba(168,121,29,.45)}55%{box-shadow:0 0 0 10px rgba(168,121,29,0)}}
html[data-fx="on"] .profondeur button[aria-selected="true"],html[data-fx="on"] .profondeur button[aria-pressed="true"]{background:#2a241a}

/* ---------- 13. Panneau de lecture ---------- */
html[data-fx="on"] body.rp-open .rp-body>*{animation:fxUp .6s both var(--fx-ease)}
html[data-fx="on"] body.rp-open .rp-body>*:nth-child(1){animation-delay:.06s}
html[data-fx="on"] body.rp-open .rp-body>*:nth-child(2){animation-delay:.11s}
html[data-fx="on"] body.rp-open .rp-body>*:nth-child(3){animation-delay:.16s}
html[data-fx="on"] body.rp-open .rp-body>*:nth-child(4){animation-delay:.21s}
html[data-fx="on"] body.rp-open .rp-body>*:nth-child(5){animation-delay:.26s}
html[data-fx="on"] body.rp-open .rp-body>*:nth-child(n+6){animation-delay:.3s}
@keyframes fxUp{from{opacity:0;transform:translate3d(0,16px,0);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
html[data-fx="on"] .vs mark,html[data-fx="on"] .cmp p mark,html[data-fx="on"] .bridge-card .orig-line mark{
  background:linear-gradient(var(--gold-soft),var(--gold-soft)) left center/0% 100% no-repeat;animation:fxMark 1.1s .3s both var(--fx-ease)}
@keyframes fxMark{to{background-size:100% 100%}}
html[data-fx="on"] .scrim{background:rgba(58,42,16,.34);backdrop-filter:blur(3px) saturate(.95)}
html[data-fx="on"] details[open]>*:not(summary){animation:fxUp .45s both var(--fx-ease)}
html[data-fx="on"] .check summary:after,html[data-fx="on"] .faq summary:after{display:inline-block;transition:transform .3s var(--fx-ease)}
html[data-fx="on"] .check details[open] summary:after,html[data-fx="on"] .faq details[open] summary:after{transform:rotate(180deg)}

/* ---------- 14. Occurrences, sources, lexique ---------- */
html[data-fx="on"] .occ{transition:transform .3s var(--fx-ease),border-color .25s,background .25s,box-shadow .3s}
html[data-fx="on"] .occ:hover{transform:translateX(5px)}
html[data-fx="on"] .occ:after{transition:transform .3s var(--fx-ease),opacity .25s}
html[data-fx="on"] .occ:hover:after{transform:translateX(5px);opacity:1}
html[data-fx="on"] .lex .ow,html[data-fx="on"] .orig .w{transition:text-shadow .3s ease,transform .3s var(--fx-ease)}
html[data-fx="on"] .lex:hover .ow{text-shadow:0 0 24px rgba(168,121,29,.5);transform:translateY(-2px)}
html[data-fx="on"] .source-item{transition:background .3s ease}
html[data-fx="on"] .source-item:hover{background:rgba(255,250,235,.72)}

/* ---------- Préférences et impression ---------- */
@media(prefers-reduced-motion:reduce){
  .fx-amb,.fx-fibres,.fx-spec,.fx-thread,.fx-vignette{display:none}
  html[data-fx="on"] .fx-rise,html[data-fx="on"] .fx-veil,html[data-fx="on"] .fx-ink{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
  html[data-fx="on"] .fx-split .fx-wi{opacity:1!important;transform:none!important}
  .fx-lettrine{opacity:1!important;transform:none!important}
}
@media print{
  .fx-amb,.fx-fibres,.fx-spec,.fx-thread,.fx-vignette,.fx-ghost,.fx-halo{display:none!important}
  html[data-fx="on"] .fx-rise,html[data-fx="on"] .fx-veil,html[data-fx="on"] .fx-ink{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
  html[data-fx="on"] .fx-split .fx-wi{opacity:1!important;transform:none!important}
  .fx-lettrine{opacity:1!important;transform:none!important;box-shadow:none}
  html[data-fx="on"] h1 em,html[data-fx="on"] .word code,html[data-fx="on"] .stat strong,html[data-fx="on"] .lex .strongnum{
    color:#8a5f11;background:none;animation:none}
  html[data-fx="on"] body{background:#fff}
}