:root{--bg:#fbf3e6;--card:#fffaf3;--ink:#2f1d14;--mut:#6b5444;--gold:#a64a1c;--gold2:#d9a441;--sage:#3e5b3a;--sage2:#e8ecdc;--wine:#7b2335;--line:#ecdcc3;--on:#fff;--fest-bg:#f8e3c9;--fest:#8a3a12;--sh:0 2px 12px rgba(110,50,15,.09);--serif:"Playfair Display",Georgia,"Times New Roman",serif;color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--bg:#1d1410;--card:#2a1d17;--ink:#f7ecdf;--mut:#c9b29c;--gold:#e8915a;--gold2:#8a5a22;--sage:#9cbf8f;--sage2:#263023;--wine:#d98a98;--line:#3e2d23;--on:#1d1410;--fest-bg:#3a2716;--fest:#e8a85a;--sh:none}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;padding-bottom:calc(76px + env(safe-area-inset-bottom))}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/playfair-600.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/playfair-400i.woff2) format("woff2")}
h1,h2,h3{font-family:var(--serif);font-weight:600}
.top{text-align:center;padding:calc(14px + env(safe-area-inset-top)) 16px 6px}
.top h1{margin:0;font-size:28px;color:var(--gold);letter-spacing:.5px}
.top h1 span{font-style:italic;font-weight:400;color:var(--wine)}
.tag{margin:2px 0 0;color:var(--mut);font-size:14px}
main{max-width:720px;margin:0 auto;padding:0 12px}
.view{display:none}.view.active{display:block}
h2{font-size:22px;margin:14px 0 6px}
.hint{color:var(--mut);font-size:14px;margin:4px 0 10px}
.small{display:block;font-size:14px;color:var(--mut);margin:8px 0}
.chips{display:flex;gap:8px;overflow-x:auto;padding:10px 2px;position:sticky;top:0;background:var(--bg);z-index:5;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;min-height:44px;padding:8px 14px;border-radius:22px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:15px;white-space:nowrap}
.chip.on{background:var(--gold);border-color:var(--gold);color:var(--on)}
.filters{display:grid;gap:8px;margin-bottom:8px}
input[type=search],input[type=number],textarea{width:100%;font:inherit;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.seg{display:flex;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:3px}
.seg button{flex:1;min-height:42px;border:0;background:none;color:var(--ink);border-radius:9px;font-size:15px}
.seg button.on{background:var(--sage);color:var(--on)}
.tog{display:flex;align-items:center;gap:10px;font-size:15px;min-height:40px}
.tog input{width:22px;height:22px;accent-color:var(--gold)}
.mhead{margin:18px 4px 6px;display:flex;align-items:baseline;gap:8px}
.mhead h3{margin:0;font-size:20px}.mhead small{color:var(--mut)}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh);margin:10px 0;overflow:hidden}
.game summary{list-style:none;padding:14px 16px;cursor:pointer;display:flex;gap:10px;align-items:center;min-height:60px}
.game summary::-webkit-details-marker{display:none}
.game summary .t{flex:1}
.game summary b{display:block;font-size:17px}
.meta{font-size:13px;color:var(--mut)}
.badge{font-size:12px;padding:3px 9px;border-radius:10px;background:var(--sage2);color:var(--sage);white-space:nowrap}
.badge.festif{background:var(--fest-bg);color:var(--fest)}
.done-mark{font-size:18px}
.game[open] summary{border-bottom:1px solid var(--line)}
.gbody{padding:4px 16px 14px}
.gbody ol{padding-left:22px;margin:8px 0}.gbody li{margin:4px 0}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:14px;margin:10px 0}
.grid div{background:var(--bg);border-radius:10px;padding:8px 10px}.grid em{display:block;font-style:normal;color:var(--mut);font-size:12px}
.tip{background:var(--sage2);border-left:4px solid var(--sage);padding:10px 12px;border-radius:8px;font-size:15px}
.btn{min-height:48px;padding:10px 16px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:16px;flex:1}
.btn.gold{background:var(--gold);border-color:var(--gold);color:var(--on);font-weight:600}
.btn.ghost{background:transparent}
.btn.sm{min-height:40px;font-size:14px;flex:0 0 auto;margin-top:10px}
.row{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
details>summary{cursor:pointer;color:var(--gold);padding:8px 0;min-height:40px}
.empty{text-align:center;color:var(--mut);padding:30px}
.bottom{position:fixed;left:0;right:0;bottom:0;display:flex;background:var(--card);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);z-index:10}
.bottom button{flex:1;border:0;background:none;color:var(--mut);font-size:12px;padding:8px 0 10px;min-height:62px;display:flex;flex-direction:column;align-items:center;gap:2px}
.bottom button span{font-size:22px;filter:grayscale(.6)}
.bottom button.on{color:var(--gold);font-weight:600}.bottom button.on span{filter:none}
/* DIAPO */
.bottom button{font-size:11.5px;min-width:0}
.dhead{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin:12px 2px 8px}
.dhead h2{margin:2px 0 0;line-height:1.15}
.dmode{display:inline-block;font-size:12px;padding:3px 10px;border-radius:10px;background:var(--sage2);color:var(--sage);font-weight:600}
.dmode.man{background:var(--fest-bg);color:var(--fest)}
.dclock{font:700 30px/1 ui-monospace,Menlo,monospace;color:var(--gold)}
.stage{position:relative;aspect-ratio:4/3;background:radial-gradient(circle at 50% 40%,#3a332a,#15120f);border-radius:16px;overflow:hidden;box-shadow:var(--sh);touch-action:pan-y;user-select:none}
.stage .layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity 1.4s ease}
.stage .layer.on{opacity:1}
.stage .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#f3ece0;font-family:var(--serif);text-align:center;padding:20px;background:linear-gradient(135deg,#a64a1c,#7b2335 60%,#3e2a1c)}
.stage .ph b{font-size:30px}.stage .ph small{font-family:inherit;opacity:.85}
.scount{position:absolute;right:10px;top:10px;font-size:12px;color:#fff;background:rgba(0,0,0,.35);padding:2px 8px;border-radius:10px}
.sinfo,.sctrl{display:none}
.dnext{text-align:center;margin:8px 0 2px}
.dsub{font-size:18px;margin:16px 2px 0}
.chips.wrap{flex-wrap:wrap;position:static;overflow:visible;padding:6px 0}
.chip small{display:block;font-size:11px;opacity:.8}
.chip.live{border-color:var(--sage);box-shadow:inset 0 0 0 1px var(--sage)}
.chip.on.live{box-shadow:none}
.btn.sage{background:var(--sage);border-color:var(--sage);color:var(--on);font-weight:600;width:100%;margin:6px 0}
.dhelp{padding:4px 16px;font-size:15px}.dhelp ol{padding-left:20px}.dhelp code{font-size:13px;background:var(--bg);padding:1px 5px;border-radius:5px}
/* plein écran (natif ou simulé sur iPhone) */
.stage:fullscreen,.stage.pseudo-fs{border-radius:0;aspect-ratio:auto;width:100vw;height:100vh;background:#000}
.stage:-webkit-full-screen{border-radius:0;width:100vw;height:100vh;background:#000}
.stage.pseudo-fs{position:fixed;inset:0;z-index:100;height:100dvh}
.stage.fs .sinfo{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:0;padding:calc(14px + env(safe-area-inset-top)) 20px 30px;background:linear-gradient(rgba(0,0,0,.5),transparent);color:#fff;font-family:var(--serif);transition:opacity .5s}
.stage.fs .sinfo b{font-size:clamp(20px,3vw,40px)}.stage.fs .sinfo span{position:absolute;right:20px;top:calc(14px + env(safe-area-inset-top));font:700 clamp(20px,3vw,40px) ui-monospace,Menlo,monospace}
.stage.fs .sinfo small{font-family:-apple-system,sans-serif;opacity:.85;font-size:14px}
.stage.fs .sctrl{display:flex;gap:10px;justify-content:center;position:absolute;left:0;right:0;bottom:calc(18px + env(safe-area-inset-bottom));transition:opacity .5s}
.stage.fs .sctrl button{width:56px;height:56px;border-radius:28px;border:0;background:rgba(255,255,255,.22);color:#fff;font-size:22px;backdrop-filter:blur(6px)}
.stage.fs.idle .sctrl,.stage.fs.idle .sinfo{opacity:0}
.stage.fs.idle{cursor:none}
.stage.fs .scount{top:auto;bottom:calc(18px + env(safe-area-inset-bottom));right:16px}
body.nofs-scroll{overflow:hidden}
@media (prefers-reduced-motion:reduce){.stage .layer{transition-duration:.3s}}
/* blocs extra (ex. Jeu des 12 mois) */
.extra{margin-top:12px}.extra h4{margin:0 0 6px;font:600 15px/1.3 var(--serif);color:var(--gold)}
.pills{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.pills li{font-size:14px;padding:5px 11px;border-radius:14px;background:var(--bg);border:1px solid var(--line)}
.months{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.months li{background:var(--bg);border-radius:10px;padding:7px 10px;font-size:14px;line-height:1.25}
.months b{display:block;font-size:12px;color:var(--sage);text-transform:uppercase;letter-spacing:.4px}
.stage .ph[hidden]{display:none}
#dprev,#dnxt{flex:0 0 56px;padding:10px 0}#dplay{flex:1 1 90px}#dfs{flex:1 1 120px;white-space:nowrap}

/* ===== DA AUTOMNE ===== */
body{background-color:var(--bg);background-image:radial-gradient(120% 60% at 100% 0,rgba(217,164,65,.16),transparent 60%),radial-gradient(90% 50% at 0 100%,rgba(166,74,28,.10),transparent 60%);background-repeat:no-repeat;min-height:100vh;min-height:100dvh}
@media (prefers-color-scheme:dark){body{background-image:radial-gradient(120% 60% at 100% 0,rgba(232,145,90,.10),transparent 60%),radial-gradient(90% 50% at 0 100%,rgba(123,35,53,.18),transparent 60%)}}
.top h1{font-size:31px;letter-spacing:.2px;line-height:1.15}
.top .tag{font-size:14.5px}
.top .tag::after{content:"";display:block;width:170px;height:25px;margin:6px auto 2px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 26'%3E%3Cpath d='M6 15Q90 5 174 15' fill='none' stroke='%238a5a22' stroke-width='1.3' stroke-linecap='round'/%3E%3Cg transform='translate(34 9) rotate(-60) scale(.55)'%3E%3Cpath fill='%23d9a441' d='M12 2C5 7 4 15 12 22c8-7 7-15 0-20z'/%3E%3C/g%3E%3Cg transform='translate(58 15) rotate(200) scale(.5)'%3E%3Cpath fill='%233e5b3a' d='M12 2C5 7 4 15 12 22c8-7 7-15 0-20z'/%3E%3C/g%3E%3Cg transform='translate(78 1) scale(.95)'%3E%3Cpath fill='%23b5541f' d='M12 1l2 5 3-2-1 5 4-1-2 4 4 1-5 3 1 3-5-1v6h-2v-6l-5 1 1-3-5-3 4-1-2-4 4 1-1-5 3 2z'/%3E%3C/g%3E%3Cg transform='translate(122 18) rotate(160) scale(.5)'%3E%3Cpath fill='%237b2335' d='M12 2C5 7 4 15 12 22c8-7 7-15 0-20z'/%3E%3C/g%3E%3Cg transform='translate(140 4) rotate(60) scale(.55)'%3E%3Cpath fill='%23d9a441' d='M12 2C5 7 4 15 12 22c8-7 7-15 0-20z'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
h2{color:var(--ink)}
.mhead h3{display:flex;align-items:center;gap:8px;color:var(--gold)}
.mhead h3::before{content:"";flex:0 0 16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23b5541f' d='M12 1l2 5 3-2-1 5 4-1-2 4 4 1-5 3 1 3-5-1v6h-2v-6l-5 1 1-3-5-3 4-1-2-4 4 1-1-5 3 2z'/%3E%3C/svg%3E") center/contain no-repeat}
.card{border-radius:18px}
.game summary b{font-family:var(--serif);font-weight:600;font-size:18px;letter-spacing:.1px}
.game[open]{border-color:var(--gold2)}
.tip{border-left-color:var(--gold)}
.btn.gold{box-shadow:0 3px 10px rgba(166,74,28,.25)}
.btn:active,.chip:active{transform:scale(.98)}
.chips{background:var(--bg)}
.bottom{background:var(--card);box-shadow:0 -4px 16px rgba(110,50,15,.07)}
.bottom button{position:relative}
.bottom button.on::before{content:"";position:absolute;top:0;left:28%;right:28%;height:3px;border-radius:0 0 3px 3px;background:var(--gold)}
details>summary{color:var(--gold);font-weight:600}
.months b{color:var(--sage)}
/* feuilles qui tombent (légères, derrière le contenu) */
.leaves{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.leaves i{position:absolute;top:-40px;width:22px;height:22px;background:center/contain no-repeat;opacity:.55;will-change:transform;animation:leaf 19s linear infinite}
.leaves i:nth-child(1){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23b5541f' d='M12 1l2 5 3-2-1 5 4-1-2 4 4 1-5 3 1 3-5-1v6h-2v-6l-5 1 1-3-5-3 4-1-2-4 4 1-1-5 3 2z'/%3E%3C/svg%3E");left:6%;width:22px;height:22px;animation-duration:21s;animation-delay:-3s}
.leaves i:nth-child(2){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%237b2335' d='M12 1l2 5 3-2-1 5 4-1-2 4 4 1-5 3 1 3-5-1v6h-2v-6l-5 1 1-3-5-3 4-1-2-4 4 1-1-5 3 2z'/%3E%3C/svg%3E");left:22%;width:16px;height:16px;animation-duration:26s;animation-delay:-14s}
.leaves i:nth-child(3){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d9a441' d='M12 2C5 7 4 15 12 22c8-7 7-15 0-20z'/%3E%3Cpath d='M12 4v19' stroke='rgba(255,255,255,.45)' stroke-width='1'/%3E%3C/svg%3E");left:41%;width:20px;height:20px;animation-duration:23s;animation-delay:-8s}
.leaves i:nth-child(4){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23c9781e' d='M12 1l2 5 3-2-1 5 4-1-2 4 4 1-5 3 1 3-5-1v6h-2v-6l-5 1 1-3-5-3 4-1-2-4 4 1-1-5 3 2z'/%3E%3C/svg%3E");left:58%;width:18px;height:18px;animation-duration:28s;animation-delay:-19s}
.leaves i:nth-child(5){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%236b7a3a' d='M12 2C5 7 4 15 12 22c8-7 7-15 0-20z'/%3E%3Cpath d='M12 4v19' stroke='rgba(255,255,255,.45)' stroke-width='1'/%3E%3C/svg%3E");left:73%;width:24px;height:24px;animation-duration:22s;animation-delay:-1s}
.leaves i:nth-child(6){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%239a3412' d='M12 1l2 5 3-2-1 5 4-1-2 4 4 1-5 3 1 3-5-1v6h-2v-6l-5 1 1-3-5-3 4-1-2-4 4 1-1-5 3 2z'/%3E%3C/svg%3E");left:88%;width:16px;height:16px;animation-duration:25s;animation-delay:-11s}
.leaves i:nth-child(7){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23b5541f' d='M12 2C5 7 4 15 12 22c8-7 7-15 0-20z'/%3E%3Cpath d='M12 4v19' stroke='rgba(255,255,255,.45)' stroke-width='1'/%3E%3C/svg%3E");left:95%;width:20px;height:20px;animation-duration:30s;animation-delay:-22s}
@keyframes leaf{0%{transform:translate3d(0,0,0) rotate(0)}25%{transform:translate3d(28px,27vh,0) rotate(90deg)}50%{transform:translate3d(-14px,55vh,0) rotate(180deg)}75%{transform:translate3d(22px,82vh,0) rotate(270deg)}100%{transform:translate3d(-6px,calc(100vh + 60px),0) rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.leaves{display:none}}
@media print{.leaves{display:none!important}}
.bottom{justify-content:center}
.bottom button{flex:0 1 180px;font-size:13px;gap:3px}
.bottom button span{font-size:24px}

/* ===== verrou Diapo ===== */
#v-diapo.locked #dbody{display:none}
#v-diapo:not(.locked) #dlock{display:none}
.dlock{min-height:62vh;display:flex;align-items:center;justify-content:center;padding:18px 4px}
.dlock-card{width:100%;max-width:420px;text-align:center;background:linear-gradient(160deg,var(--card),var(--fest-bg));border:1px solid var(--line);border-radius:22px;padding:28px 22px 22px;box-shadow:var(--sh);position:relative;overflow:hidden}
.dlock-card:before{content:"🍁";position:absolute;right:-8px;top:-14px;font-size:84px;opacity:.13;transform:rotate(18deg)}
.dlock-card:after{content:"🍂";position:absolute;left:-10px;bottom:-16px;font-size:78px;opacity:.12;transform:rotate(-20deg)}
.dlock-leaf{font-size:42px;line-height:1}
.dlock-card h2{font-family:var(--serif);color:var(--wine);margin:8px 0 6px;font-size:26px}
.dlock-card p{color:var(--mut);margin:0 0 16px;line-height:1.45}
.dlock-card form{display:flex;flex-direction:column;gap:10px;position:relative;z-index:1}
.dlock-card input{min-height:52px;border-radius:14px;border:1.5px solid var(--gold2);background:var(--card);color:var(--ink);font-size:20px;text-align:center;letter-spacing:.06em;padding:0 12px}
.dlock-card input:focus{outline:3px solid rgba(217,164,65,.45);border-color:var(--gold)}
.dlock-card small{display:block;color:var(--mut);margin-top:12px;font-size:13px}
.dlock-msg{min-height:1.3em;margin:10px 0 0!important;font-weight:600;color:var(--wine)!important}
.dlock-msg.ok{color:var(--sage)!important}
.dlock-card.shake{animation:shk .4s}
@keyframes shk{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.btn.wine{background:var(--wine);border-color:var(--wine);color:#fff;font-weight:600;width:100%;margin:2px 0 8px}
/* écran de chapitre + légende */
.stage .tcard{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:22px 26px;color:#fbf3e6;background:radial-gradient(circle at 30% 20%,#b8622a,#7b2335 55%,#2e1c14);animation:tfade .8s ease}
.stage .tcard[hidden]{display:none}
.stage .tcard i{font-style:normal;font-size:clamp(28px,6vw,56px);margin-bottom:6px}
.stage .tcard b{font-family:var(--serif);font-size:clamp(24px,6.2vw,60px);line-height:1.12;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.stage .tcard p{margin:12px 0 0;font-family:var(--serif);font-style:italic;font-size:clamp(15px,3.6vw,30px);opacity:.92;max-width:34em;line-height:1.35}
@keyframes tfade{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}
.stage .dcap{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;background:linear-gradient(transparent,rgba(20,10,5,.78));color:#fff;font-family:var(--serif);font-size:clamp(14px,3.7vw,32px);line-height:1.3;text-align:center;text-shadow:0 1px 4px rgba(0,0,0,.6);transition:opacity .4s}
.stage .dcap[hidden]{display:none}
.stage.fs .dcap{padding-bottom:calc(92px + env(safe-area-inset-bottom))}