:root{
  --vellum:#efe6cf; --leaf:#f7f0dc; --ink:#1d1a16; --soft:#6c604c;
  --lapis:#1f3a8a; --gold:#b58a2c; --rubric:#a3201a; --rule:#d4c59d; --sung-bg:#ffe066; --sung-ink:#1d1a16;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --vellum:#0e1833; --leaf:#15224a; --ink:#efe6cf; --soft:#a9a48f;
    --lapis:#9db4ff; --gold:#d9ae4e; --rubric:#ee6a5e; --rule:#2a3868; --sung-bg:transparent; --sung-ink:#ffd84d;
  }
}
:root[data-theme="dark"]{
  --vellum:#0e1833; --leaf:#15224a; --ink:#efe6cf; --soft:#a9a48f;
  --lapis:#9db4ff; --gold:#d9ae4e; --rubric:#ee6a5e; --rule:#2a3868; --sung-bg:transparent; --sung-ink:#ffd84d;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{
  margin:0; background:var(--vellum); color:var(--ink);
  font-family:"IM Fell DW Pica",Georgia,"Times New Roman",serif; font-size:1.19rem; line-height:1.5;
}
main{max-width:27rem; margin:0 auto; padding:1.1rem 1rem 2.5rem}
.brand{font-family:"IM Fell DW Pica",Georgia,serif; font-style:italic; font-size:2.1rem; line-height:1; text-align:center; margin:.3rem 0 .2rem; color:var(--rubric)}
h1{
  font-family:"IM Fell DW Pica SC","IM Fell DW Pica",Georgia,serif; font-weight:400;
  font-size:1.15rem; letter-spacing:.04em; text-align:center; margin:.2rem 0 .9rem; color:var(--lapis);
}
.niche{
  border:3px solid var(--gold); border-radius:13.5rem 13.5rem .6rem .6rem / 11rem 11rem .6rem .6rem;
  overflow:hidden; outline:1px solid var(--rule); outline-offset:6px; line-height:0; margin:6px;
}
canvas{width:100%; height:auto; display:block; touch-action:manipulation; cursor:pointer}
.state{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin:1.1rem .4rem .35rem}
.state b{font-weight:400; font-family:"IM Fell DW Pica SC",Georgia,serif; letter-spacing:.03em; color:var(--lapis)}
.state span{color:var(--soft); font-size:1rem; font-style:italic}
.gauge{height:.5rem; margin:0 .4rem; border:1px solid var(--rule); border-radius:1rem; background:var(--leaf); overflow:hidden}
.gauge i{display:block; height:100%; width:50%; background:linear-gradient(90deg,var(--rubric),var(--gold)); transition:width .6s}
.beads{display:flex; align-items:center; justify-content:center; gap:.42rem; margin:1.3rem 0 1rem; min-height:1.5rem}
.beads i{width:.8rem; height:.8rem; border-radius:50%; border:1.5px solid var(--gold); background:transparent; transition:background .3s, transform .3s}
.beads i.big{width:1.25rem; height:1.25rem}
.beads i.done{background:var(--gold)}
.beads i.cur{transform:scale(1.35); border-color:var(--rubric); box-shadow:0 0 0 3px color-mix(in srgb,var(--rubric) 25%,transparent)}
.leaf{background:var(--leaf); border:1px solid var(--rule); border-radius:.35rem; padding:1rem 1.15rem 1.05rem; min-height:11.5rem}
.leaf p{margin:0 0 .7rem}
.leaf p:last-child{margin-bottom:0}
.leaf .mark, .cap .mark{color:var(--rubric); margin-right:.35em; font-family:Georgia,"Times New Roman",serif}
.cap{text-align:center; margin:.9rem .4rem 0; min-height:5.6rem}
.cap p{margin:0}
.cap .line{font-size:1.3rem; line-height:1.35}
.cap .resp{font-size:1.05rem; line-height:1.4}
.w{border-radius:2px; transition:background-color .18s, color .18s}
.w.sung{background:var(--sung-bg); color:var(--sung-ink)}
.leaf .r{opacity:.38; transition:opacity .5s}
.leaf .r.turn{opacity:1}
.leaf .name, .cap .name{font-family:"IM Fell DW Pica SC",Georgia,serif; color:var(--rubric); font-size:1.05rem; letter-spacing:.03em; margin-bottom:.45rem}
.leaf em{color:var(--soft)}
.acts{display:flex; gap:.7rem; align-items:center; margin-top:1rem}
button{font:inherit; color:inherit; cursor:pointer}
#go{
  flex:1; padding:.8rem 1rem; border:0; border-radius:.35rem; background:var(--lapis); color:var(--vellum);
  font-family:"IM Fell DW Pica SC",Georgia,serif; font-size:1.25rem; letter-spacing:.05em;
}
#go.turn{box-shadow:0 0 0 3px var(--gold)}
#go.wait{visibility:hidden}
#pen{padding:.8rem 1rem; border:2px solid var(--rubric); border-radius:.35rem; background:none; color:var(--rubric); font-family:"IM Fell DW Pica SC",Georgia,serif; font-size:1.1rem; letter-spacing:.04em}
.nov{min-height:0; margin-top:1.4rem}
.nov button{background:none; border:1px solid var(--rule); border-radius:.3rem; padding:.35rem .8rem; font-size:1rem}
.nov input{flex:1; min-width:0; font:inherit; font-size:1rem; color:var(--ink); background:var(--vellum); border:1px solid var(--rule); border-radius:.3rem; padding:.35rem .5rem}
.nov .row{margin:.2rem 0 .8rem}
.saint{min-height:0; margin-top:1.4rem}
.saint details{margin-top:.6rem; border:0; padding-top:0}
.saint details p{color:var(--ink); font-size:1.19rem; margin-top:.7rem}
.candles{display:flex; gap:.7rem; justify-content:center; margin:1.2rem 0 1rem}
.candles i{width:.55rem; height:1.6rem; background:var(--vellum); border:1px solid var(--gold); border-radius:2px; position:relative}
.candles i.lit::before{content:""; position:absolute; left:50%; top:-.8rem; width:.5rem; height:.75rem; transform:translateX(-50%); background:radial-gradient(ellipse at 50% 72%,#fff3b0 0,#f0a020 55%,transparent 72%); border-radius:50% 50% 50% 50% / 62% 62% 38% 38%}
.candles i.today{outline:2px solid var(--rubric); outline-offset:3px}
#stop{background:none; border:0; color:var(--soft); text-decoration:underline; text-underline-offset:.2em; font-size:1rem; font-style:italic}
button:focus-visible, input:focus-visible, summary:focus-visible{outline:2px solid var(--rubric); outline-offset:3px}
details{margin-top:1.8rem; border-top:1px solid var(--rule); padding-top:.8rem; color:var(--soft); font-size:1rem}
summary{cursor:pointer; font-style:italic}
.row{display:flex; align-items:center; gap:.7rem; margin:.8rem 0}
.row input[type=range]{flex:1; accent-color:var(--gold); min-width:0}
.row button{background:none; border:1px solid var(--rule); border-radius:.3rem; padding:.3rem .7rem; font-size:.95rem}
.opts{display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; justify-content:center; margin:1.2rem 0 0}
.seg{border:1px solid var(--rule); border-radius:2rem; padding:2px; margin:0; display:flex; min-width:0}
.seg legend{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
.seg label{cursor:pointer}
.seg input{position:absolute; opacity:0; pointer-events:none}
.seg span{display:block; padding:.18rem .85rem; border-radius:2rem; font-family:"IM Fell DW Pica SC",Georgia,serif; font-size:1rem; letter-spacing:.03em; color:var(--soft)}
.seg input:checked + span{background:var(--lapis); color:var(--vellum)}
.seg input:focus-visible + span{outline:2px solid var(--rubric); outline-offset:2px}
.leaf .title{font-size:1.55rem; line-height:1.2; color:var(--lapis); margin:.1rem 0 .7rem}
select{font:inherit; font-size:1rem; color:var(--ink); background:var(--leaf); border:1px solid var(--rule); border-radius:.3rem; padding:.25rem .4rem; max-width:100%}
[hidden]{display:none!important}

/* Partage : bouton discret en haut à droite, modale QR + lien. */
main{position:relative}
.share-btn{position:absolute; top:1.1rem; right:1rem; background:none; border:0; padding:.4rem; color:var(--soft); cursor:pointer; line-height:0}
.share-btn:hover{color:var(--rubric)}
.share{border:1px solid var(--rule); border-radius:.6rem; padding:1.4rem 1.2rem 1.2rem; background:var(--leaf); color:var(--ink); width:min(22rem, calc(100% - 2rem)); text-align:center; font-family:inherit; font-size:1.05rem}
.share::backdrop{background:rgba(29,26,22,.5); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px)}
.share h2{font-style:italic; font-weight:normal; color:var(--rubric); font-size:1.5rem; margin:0 0 .3rem}
.share p{color:var(--soft); margin:0 0 1rem}
.share-close{position:absolute; top:.4rem; right:.4rem; background:none; border:0; color:var(--soft); font-size:1.1rem; padding:.4rem .6rem; cursor:pointer}
.share-qr{display:inline-block; background:#fff; padding:.8rem; border-radius:.4rem; line-height:0; margin-bottom:1rem}
.share-qr canvas{max-width:100%; height:auto}
.share-url{display:flex; gap:.5rem}
.share-url input{flex:1; min-width:0; font:inherit; font-size:.9rem; padding:.4rem .6rem; border:1px solid var(--rule); border-radius:.3rem; background:var(--vellum); color:var(--soft)}
.share-url button{padding:.4rem .9rem; border:1px solid var(--gold); border-radius:.3rem; background:var(--gold); color:#fff; font:inherit; white-space:nowrap; cursor:pointer}