/* Le module du lecteur : espace et back-office, au canon de la page (nuit, parchemin, or, sceau).
   Polices déjà chargées par index.html : EB Garamond (texte), Cinzel (capitales), Ma Shan Zheng (caractères),
   Tao Kai (le chinois traditionnel du livre). Jamais d'italique; les chiffres en tabular-nums. */
@font-face{font-family:'Tao Kai';src:url(assets/wenkai-tao.woff2) format('woff2');font-display:swap}
:root{
  --nuit:#081113; --nuit-2:#0d1a1c; --or:#d8b373; --or-pale:#ecd7a8; --creme:#f3e9d6; --brume:#c9d3cf;
  --encre:#2a1f14; --encre-2:#5b4630; --sceau:#a8321f; --papier:#efe3c8; --r:15px;
  --verre:#0a1416b8; --filet:#ffffff1f; --filet-or:#d8b37340;
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-drawer:cubic-bezier(.32,.72,0,1);
  --g:clamp(16px,4vw,56px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--nuit);color-scheme:dark}
body{min-height:100vh;background:var(--nuit);color:var(--creme);font:400 18px/1.6 'EB Garamond',Georgia,serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
em,i{font-style:normal}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--or);outline-offset:3px;border-radius:6px}
.num{font-variant-numeric:lining-nums tabular-nums}
.zh{font-family:'Tao Kai','Ma Shan Zheng',serif}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Le fond : le jardin de la page, voilé de nuit, fixe derrière tout */
.fond{position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,#081113d9 0,#081113f2 38%,#081113 70%),url(assets/jardin-sakura.webp) 50% 30%/cover;pointer-events:none}
.fond::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 40% at 80% 0,#d8b3731a,#d8b37300 70%)}

/* Les capitales et les étiquettes */
.cap{font:500 13px/1.3 Cinzel,serif;letter-spacing:.18em;text-transform:uppercase;color:var(--or)}
.demo{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;border:1px solid #d8b37359;font:600 13px/1 Cinzel,serif;letter-spacing:.14em;text-transform:uppercase;color:var(--or-pale);background:#d8b37314;vertical-align:2px}
.puce{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:999px;font:500 13px/1 Cinzel,serif;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--filet);color:var(--brume)}
.puce.ok{border-color:#7fae8f66;color:#bfe0c8;background:#7fae8f14}
.puce.alerte{border-color:#e0896f66;color:#f2b8a5;background:#a8321f24}
.puce.attente{border-color:#d8b37366;color:var(--or-pale);background:#d8b37314}

/* Les boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 22px;border-radius:var(--r);font:600 13px/1 Cinzel,serif;letter-spacing:.12em;text-transform:uppercase;
  background:var(--or);color:#1a1209;transition:background-color .2s ease,transform 160ms var(--ease-out);text-decoration:none;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn.fantome{background:#ffffff0d;color:var(--creme);border:1px solid #ffffff2e}
.btn.petit{min-height:38px;padding:0 14px;font-size:13px}
.btn.lien{background:none;border:0;color:var(--or-pale);padding:0 6px;min-height:38px}
.btn.danger{background:none;border:1px solid #e0896f59;color:#f2b8a5}
.btn[disabled]{opacity:.45;pointer-events:none}
@media (hover:hover){.btn:hover{background:var(--or-pale)}.btn.fantome:hover{background:#ffffff1a;border-color:var(--or)}.btn.lien:hover{color:var(--creme)}.btn.danger:hover{background:#a8321f33}}

/* Les champs */
.champ{display:grid;grid-template-columns:minmax(0,1fr);gap:7px}
.champ label,.champ .lbl{font:500 13px/1.2 Cinzel,serif;letter-spacing:.16em;text-transform:uppercase;color:var(--brume)}
.champ input,.champ textarea,.champ select{width:100%;min-height:48px;padding:12px 15px;border-radius:12px;background:#00000059;border:1px solid #ffffff26;color:var(--creme);font-size:18px;transition:border-color .2s ease,background-color .2s ease}
.champ textarea{min-height:120px;resize:vertical;line-height:1.55}
.champ select{appearance:none;background-image:linear-gradient(45deg,#0000 50%,var(--or) 50%),linear-gradient(135deg,var(--or) 50%,#0000 50%);background-position:calc(100% - 20px) 52%,calc(100% - 15px) 52%;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px}
.champ input:focus,.champ textarea:focus,.champ select:focus{outline:none;border-color:var(--or);background:#0000008c}
.champ input::placeholder,.champ textarea::placeholder{color:#c9d3cf8c}
.erreur{color:#f2b8a5;font-size:16px;min-height:1.4em}

/* Le verre : cartes et panneaux */
.verre{position:relative;border-radius:var(--r);background:var(--verre);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--filet);box-shadow:0 24px 60px -30px #000000cc,inset 0 1px 0 #ffffff12}
.papier{position:relative;border-radius:var(--r);background:var(--papier) url(assets/papier-xuan.webp) 0 0/420px;color:var(--encre);box-shadow:0 20px 44px -24px #000000d9,inset 0 0 0 1px #8b6a3c33}
.papier .cap{color:#8b3a22}

/* La porte : entrer par courriel, avec Google ou en démo */
.porte{min-height:100svh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:clamp(32px,6vw,96px);padding:clamp(28px,6vh,72px) var(--g);max-width:1280px;margin:0 auto}
.porte-gauche{display:grid;gap:22px;align-content:center}
.porte-dao{font:400 clamp(120px,15vw,210px)/1 'Ma Shan Zheng',serif;color:#e6c37a;text-shadow:0 0 40px #d8b37340,0 2px 0 #6e4b25;margin-bottom:-6px}
.porte h1{font:400 clamp(44px,5vw,68px)/1.05 'EB Garamond',serif;letter-spacing:-.01em;color:var(--creme)}
.porte .chapo{font-size:21px;line-height:1.55;color:#e9e0cf;max-width:34ch}
.porte-carte{padding:clamp(24px,3vw,40px);display:grid;gap:18px}
.porte-carte h2{font:400 30px/1.15 'EB Garamond',serif}
.ou{display:flex;align-items:center;gap:14px;color:var(--brume);font:500 13px/1 Cinzel,serif;letter-spacing:.18em;text-transform:uppercase}
.ou::before,.ou::after{content:"";flex:1;height:1px;background:var(--filet)}
.google{display:flex;align-items:center;justify-content:center;gap:12px;min-height:48px;border-radius:12px;background:#f8f5ee;color:#1f1f1f;font:500 16px/1 'EB Garamond',serif;border:1px solid #ffffff59;transition:transform 160ms var(--ease-out)}
.google:active{transform:scale(.97)}
.entree-demo{display:grid;gap:4px;padding:16px 18px;border-radius:12px;border:1px dashed #d8b37366;background:#d8b3730d;text-align:left;transition:background-color .2s ease,border-color .2s ease}
.entree-demo b{font:600 13px/1.2 Cinzel,serif;letter-spacing:.14em;text-transform:uppercase;color:var(--or-pale)}
.entree-demo span{font-size:16px;color:var(--brume)}
@media (hover:hover){.entree-demo:hover{background:#d8b3731f;border-color:var(--or)}}
.retour{display:inline-flex;align-items:center;gap:10px;font:500 13px/1 Cinzel,serif;letter-spacing:.16em;text-transform:uppercase;color:var(--brume);text-decoration:none}
@media (hover:hover){.retour:hover{color:var(--or-pale)}}

/* Le choix de compte Google simulé */
.feuille{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:#050b0dcc;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .22s ease}
.feuille.ouverte{opacity:1}
.feuille-carte{width:min(420px,100%);border-radius:var(--r);background:#fbf8f2;color:#1f1f1f;padding:26px;display:grid;gap:14px;transform:translateY(12px) scale(.98);transition:transform .3s var(--ease-out);font-family:'EB Garamond',serif}
.feuille.ouverte .feuille-carte{transform:none}
.feuille-carte h3{font:500 22px/1.2 'EB Garamond',serif}
.feuille-carte p{font-size:16px;color:#555}
.compte-g{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;border:1px solid #e3ded4;text-align:left;width:100%;transition:background-color .2s ease}
@media (hover:hover){.compte-g:hover{background:#f1ece2}}
.compte-g .av{width:38px;height:38px}
.compte-g small{display:block;color:#666;font-size:15px}

/* Les avatars : un sceau aux initiales */
.av{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font:600 15px/1 Cinzel,serif;letter-spacing:.04em;color:#f6ead0;background:var(--sceau);box-shadow:inset 0 0 0 2px #f6ead033,inset 0 0 12px #00000059}
.av.or{background:#8b6a3c}.av.vert{background:#3e6b5c}.av.bleu{background:#3d5a72}.av.brun{background:#6e4b25}.av.gris{background:#55605d}
.av.grand{width:84px;height:84px;font-size:28px;border-radius:18px}

/* La coquille : en-tête, onglets, contenu */
.tete{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px var(--g);max-width:1320px;margin:0 auto}
.marque{display:flex;align-items:baseline;gap:12px;text-decoration:none}
.marque b{font:400 30px/1 'Ma Shan Zheng',serif;color:#e6c37a}
.marque span{font:500 14px/1 Cinzel,serif;letter-spacing:.22em;text-transform:uppercase;color:#efe9dc}
.qui{display:flex;align-items:center;gap:12px}
.qui .nom{font-size:17px;line-height:1.2;text-align:right}
.qui .nom small{display:block;font:500 13px/1.3 Cinzel,serif;letter-spacing:.16em;text-transform:uppercase;color:var(--brume)}
.qui .av{width:40px;height:40px;font-size:14px}
.page{max-width:1320px;margin:0 auto;padding:0 var(--g) 96px}

.accueil{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px;align-items:stretch;margin-top:8px}
.salut{padding:clamp(26px,3vw,44px);display:grid;gap:16px;align-content:end;min-height:280px;overflow:hidden}
.salut::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,#081113a6 0,#08111300 46%,#081113bf 100%),linear-gradient(90deg,#081113f2 0,#081113cc 52%,#08111359 100%),url(assets/jardin-sakura.webp) 70% 35%/cover;z-index:-1}
.salut{isolation:isolate}
.salut h1{font:400 clamp(40px,4.4vw,60px)/1.05 'EB Garamond',serif;letter-spacing:-.01em}
.salut p{font-size:20px;line-height:1.5;color:#efe6d4;max-width:42ch}
.salut .gestes{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.jour-zh{position:absolute;right:clamp(20px,3vw,40px);top:clamp(14px,2vw,26px);font:400 92px/1 'Ma Shan Zheng',serif;color:#e6c37a;opacity:.9;text-shadow:0 0 30px #00000099}

.progres{padding:clamp(24px,2.6vw,36px);display:grid;gap:18px;align-content:start}
.progres-chiffre{display:flex;align-items:baseline;gap:12px}
.progres-chiffre b{font:400 76px/1 'EB Garamond',serif;color:var(--or-pale);font-variant-numeric:lining-nums tabular-nums}
.progres-chiffre span{font-size:20px;color:var(--brume)}
.regle{display:grid;grid-template-columns:repeat(81,minmax(0,1fr));gap:2px;height:30px;align-items:end}
.regle i{display:block;height:14px;border-radius:1px;background:#ffffff1f}
.regle i.l{background:var(--or);height:22px}
.regle i.seuil{height:30px;background:#ffffff3d}
.regle i.seuil.l{background:var(--or-pale)}
.sceaux{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.sceau-b{display:grid;justify-items:center;gap:8px;padding:14px 6px 12px;border-radius:12px;border:1px solid var(--filet);text-align:center;transition:transform .3s var(--ease-out)}
.sceau-b .s{width:52px;height:52px;border-radius:12px;display:grid;place-items:center;font:400 28px/1 'Ma Shan Zheng',serif;color:#ffffff40;border:1px dashed #ffffff33}
.sceau-b.acquis{border-color:#d8b37359;background:#d8b37312}
.sceau-b.acquis .s{background:var(--sceau);color:#f6ead0;border:0;box-shadow:inset 0 0 0 2px #f6ead033,0 6px 16px -6px #a8321f99}
.sceau-b b{font:600 13px/1.25 Cinzel,serif;letter-spacing:.1em;text-transform:uppercase;color:var(--creme)}
.sceau-b small{font-size:14px;color:var(--brume);font-variant-numeric:lining-nums tabular-nums}
.sceau-b:not(.acquis) b{color:var(--brume)}
.prochain{font-size:17px;color:var(--brume)}
.prochain b{color:var(--or-pale);font-weight:500}

/* Les onglets */
.onglets{display:flex;gap:6px;margin:30px 0 22px;padding:6px;border-radius:calc(var(--r) + 4px);background:#081113eb;border:1px solid var(--filet);overflow-x:auto;scrollbar-width:none;position:sticky;top:10px;z-index:5;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.onglets::-webkit-scrollbar{display:none}
.onglets button{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:12px;font:500 13px/1 Cinzel,serif;letter-spacing:.14em;text-transform:uppercase;color:var(--brume);transition:background-color .2s ease,color .2s ease}
.onglets button[aria-selected="true"]{background:#d8b37326;color:var(--or-pale);box-shadow:inset 0 0 0 1px #d8b37359}
.onglets .compte{min-width:22px;height:20px;padding:0 6px;border-radius:999px;background:#ffffff1a;font:600 13px/20px 'EB Garamond',serif;font-variant-numeric:tabular-nums;letter-spacing:0;color:var(--creme)}
@media (hover:hover){.onglets button:hover{color:var(--creme)}}
.panneau{animation:monte .35s var(--ease-out)}
@keyframes monte{from{opacity:0;transform:translateY(8px)}}
.panneau-tete{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:20px;flex-wrap:wrap}
.panneau-tete h2{font:400 clamp(32px,3.2vw,42px)/1.1 'EB Garamond',serif}
.panneau-tete p{font-size:18px;color:var(--brume);max-width:52ch;margin-top:6px}
.filtres{display:flex;gap:6px;flex-wrap:wrap}
.filtres button{min-height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--filet);font:500 13px/1 Cinzel,serif;letter-spacing:.12em;text-transform:uppercase;color:var(--brume);transition:border-color .2s ease,color .2s ease,background-color .2s ease}
.filtres button[aria-pressed="true"]{border-color:var(--or);color:var(--or-pale);background:#d8b37314}

/* Les 81 lamelles du lecteur : le bambou de la page, avec les marques de chacun */
.plateau{padding:clamp(18px,2.4vw,32px);border-radius:var(--r);background:#120c08 url(assets/bois-noir.webp) 50% 50%/cover;box-shadow:inset 0 0 0 1px #d8b37326,0 30px 60px -30px #000}
.lames{display:grid;grid-template-columns:repeat(27,minmax(0,1fr));gap:16px 6px}
.lame{position:relative;height:150px;border-radius:3px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:10px 0 8px;
  background:#c9a66a url(assets/bambou.webp) 0 0/90px;box-shadow:inset 1px 0 0 #fff2cc59,inset -2px 0 3px #4a2e1166,5px 7px 8px #00000099;transform-origin:50% 100%;transition:transform 220ms var(--ease-out),filter .2s ease}
.lame:nth-child(3n){background-position:30px 40px}.lame:nth-child(3n+1){background-position:60px 90px}
.lame:nth-child(4n+1){filter:brightness(.94) saturate(1.05)}.lame:nth-child(5n+2){filter:brightness(1.05) saturate(.92)}
.lame .lz{writing-mode:vertical-rl;font:400 19px/1 'Ma Shan Zheng',serif;color:#2a1a0c;margin-top:8px}
.lame .ln{font:600 13px/1 Cinzel,serif;color:#3a2814;font-variant-numeric:lining-nums tabular-nums;padding:3px 2px 2px;border-radius:3px;min-width:22px;text-align:center}
.lame.lue{box-shadow:inset 1px 0 0 #fff2cc59,inset -2px 0 3px #4a2e1166,5px 7px 8px #00000099,inset 0 -5px 0 #3e6b5c}
.lame.estompe{opacity:.28;filter:grayscale(.5)}
.lame.jour .ln{background:var(--sceau);color:#f6ead0}
.lame .fav{position:absolute;top:-9px;left:50%;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--sceau);box-shadow:0 2px 6px #00000099,inset 0 0 0 2px #f6ead055;display:grid;place-items:center}
.lame .fav::after{content:"";width:6px;height:6px;border-radius:50%;background:#f6ead0}
.lame .nt{position:absolute;bottom:30px;right:2px;width:8px;height:16px;border-radius:2px;background:#2a1f14b3}
@media (hover:hover){.lame:hover{transform:translateY(-6px) rotate(-2deg)}}
.legende{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:20px;font-size:16px;color:var(--brume)}
.legende span{display:inline-flex;align-items:center;gap:9px}
.legende i{display:inline-block}
.legende .l-fav{width:14px;height:14px;border-radius:50%;background:var(--sceau);box-shadow:inset 0 0 0 2px #f6ead055}
.legende .l-lue{width:16px;height:5px;background:#3e6b5c;border-radius:1px}
.legende .l-nt{width:5px;height:14px;background:#c9a66a;border-radius:1px;box-shadow:inset 0 0 0 9px #2a1f14b3}
.legende .l-jour{width:16px;height:14px;border-radius:3px;background:var(--sceau)}

/* Le tiroir du chapitre : côté droit au bureau, feuille du bas au téléphone */
.tiroir-fond{position:fixed;inset:0;z-index:40;background:#050b0d99;opacity:0;transition:opacity .25s ease}
.tiroir-fond.ouvert{opacity:1}
.tiroir{position:fixed;top:0;right:0;bottom:0;z-index:41;width:min(560px,100%);display:flex;flex-direction:column;background:#0b1517f7;border-left:1px solid var(--filet-or);box-shadow:-30px 0 60px -20px #000000cc;transform:translateX(100%);transition:transform .42s var(--ease-drawer)}
.tiroir.ouvert{transform:none}
.tiroir-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 24px;border-bottom:1px solid var(--filet)}
.tiroir-tete h3{display:flex;align-items:baseline;gap:14px;font:400 30px/1.1 'EB Garamond',serif}
.tiroir-tete h3 .zh{font:400 30px/1 'Ma Shan Zheng',serif;color:#e6c37a}
.fermer{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;border:1px solid var(--filet);color:var(--brume);font-size:22px;line-height:1}
@media (hover:hover){.fermer:hover{border-color:var(--or);color:var(--creme)}}
.tiroir-corps{flex:1;overflow-y:auto;overflow-x:hidden;grid-template-columns:minmax(0,1fr);padding:22px 24px 28px;display:grid;gap:22px;align-content:start;overscroll-behavior:contain}
.tiroir .papier{padding:24px 24px 22px}
.tiroir .texte-fr p{font-size:18px;line-height:1.6;margin-bottom:.7em}
.tiroir .texte-fr p:last-child{margin-bottom:0}
.tiroir .texte-zh{font-size:20px;line-height:1.75;color:var(--encre);padding-top:16px;margin-top:16px;border-top:1px solid #8b3a2240;text-align:justify}
.actions{display:flex;flex-wrap:wrap;gap:10px}
.bascule{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 16px;border-radius:12px;border:1px solid #ffffff2e;background:#ffffff0a;font:600 13px/1 Cinzel,serif;letter-spacing:.12em;text-transform:uppercase;color:var(--creme);transition:background-color .2s ease,border-color .2s ease,transform 160ms var(--ease-out)}
.bascule:active{transform:scale(.97)}
.bascule .m{width:16px;height:16px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center}
.bascule[aria-pressed="true"]{border-color:#d8b37399;background:#d8b37322;color:var(--or-pale)}
.bascule[aria-pressed="true"] .m{background:var(--sceau);border-color:var(--sceau)}
.bascule[aria-pressed="true"] .m::after{content:"";width:6px;height:6px;border-radius:50%;background:#f6ead0}
.bascule.vert[aria-pressed="true"]{border-color:#7fae8f99;background:#3e6b5c40;color:#cfe8d6}
.bascule.vert[aria-pressed="true"] .m{background:#3e6b5c;border-color:#7fae8f}
.note-zone{display:grid;gap:10px}
.note-zone .etat{font-size:15px;color:var(--brume);min-height:1.3em}

/* Les listes : notes, fil, membres */
.grille-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.grille-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.note-carte{padding:22px 24px;display:grid;gap:10px;text-align:left;transition:transform .3s var(--ease-out)}
.note-carte .cap{display:flex;justify-content:space-between;gap:12px}
.note-carte .cap small{font:400 15px/1.2 'EB Garamond',serif;letter-spacing:0;text-transform:none;color:var(--encre-2)}
.note-carte q{font-size:16px;line-height:1.5;color:var(--encre-2);quotes:"« " " »"}
.note-carte p{font-size:19px;line-height:1.5;color:var(--encre)}
@media (hover:hover){button.note-carte:hover{transform:translateY(-3px)}}
.vide{padding:40px 28px;text-align:center;display:grid;gap:10px;justify-items:center}
.vide b{font:400 46px/1 'Ma Shan Zheng',serif;color:#e6c37a99}
.vide p{color:var(--brume);max-width:40ch}

.fil{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.fil-liste{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.composer{padding:20px 22px;display:grid;gap:14px}
.composer .bas{display:flex;flex-wrap:wrap;align-items:end;gap:12px;justify-content:space-between}
.composer .bas .champ{flex:1;min-width:0}
.billet{padding:22px 24px;display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.billet-texte{overflow-wrap:anywhere}
.billet.epingle{border-color:#d8b37359}
.billet-tete{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px}
.billet-tete .qui-b{flex:1;min-width:0}
.billet-tete .qui-b button{font-size:19px;line-height:1.2;text-align:left}
.billet-tete .qui-b small{display:block;font-size:15px;color:var(--brume)}
.citation{display:grid;gap:4px;padding:12px 16px;border-left:2px solid var(--or);background:#d8b3730d;border-radius:0 10px 10px 0}
.citation b{font:600 13px/1.2 Cinzel,serif;letter-spacing:.14em;text-transform:uppercase;color:var(--or)}
.citation span{font-size:17px;line-height:1.5;color:#e9dfcb}
.billet-texte{font-size:19px;line-height:1.55;white-space:pre-line}
.billet-gestes{display:flex;align-items:center;flex-wrap:wrap;gap:6px 16px;padding-top:4px;border-top:1px solid var(--filet)}
.geste{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 4px;font:500 13px/1 Cinzel,serif;letter-spacing:.12em;text-transform:uppercase;color:var(--brume);transition:color .2s ease}
.geste[aria-pressed="true"]{color:var(--or-pale)}
.geste .n{font:500 16px/1 'EB Garamond',serif;letter-spacing:0;font-variant-numeric:tabular-nums}
@media (hover:hover){.geste:hover{color:var(--creme)}}
.reponses{display:grid;gap:12px;padding-left:18px;border-left:1px solid var(--filet)}
.reponse{display:flex;gap:12px}
.reponse .av{width:32px;height:32px;font-size:13px;border-radius:9px}
.reponse p{font-size:17px;line-height:1.5}
.reponse p b{font-weight:500;color:var(--or-pale);margin-right:6px}
.reponse small{display:block;font-size:14px;color:var(--brume)}
.repondre{display:flex;gap:10px}
.repondre input{flex:1;min-height:44px;padding:10px 14px;border-radius:12px;background:#00000059;border:1px solid #ffffff26;font-size:17px}
.repondre input:focus{outline:none;border-color:var(--or)}
.aparte{display:grid;gap:16px;position:sticky;top:90px}
.aparte .verre{padding:20px 22px;display:grid;gap:12px}
.aparte h3{font:500 13px/1.3 Cinzel,serif;letter-spacing:.18em;text-transform:uppercase;color:var(--or)}
.aparte p{font-size:17px;color:#e3dac8}
.mini-membre{display:flex;align-items:center;gap:12px;text-align:left;width:100%;padding:4px 0}
.mini-membre .av{width:36px;height:36px;font-size:13px;border-radius:10px}
.mini-membre span{font-size:17px;line-height:1.2}
.mini-membre small{display:block;font-size:14px;color:var(--brume)}

.membre{padding:22px;display:grid;gap:14px;text-align:left;transition:transform .3s var(--ease-out),border-color .2s ease}
.membre-tete{display:flex;gap:14px;align-items:center}
.membre-tete b{display:block;font:500 21px/1.2 'EB Garamond',serif}
.membre-tete small{display:block;font-size:15px;color:var(--brume)}
.membre p{font-size:17px;line-height:1.5;color:#e3dac8}
.membre .bas{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:15px;color:var(--brume)}
.mini-sceaux{display:flex;gap:5px}
.mini-sceaux i{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font:400 13px/1 'Ma Shan Zheng',serif;font-style:normal;color:#ffffff40;border:1px dashed #ffffff33}
.mini-sceaux i.a{background:var(--sceau);color:#f6ead0;border:0}
@media (hover:hover){button.membre:hover{transform:translateY(-3px);border-color:#d8b37359}}

/* Le profil public, en fenêtre */
.fenetre{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:#050b0dcc;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .22s ease}
.fenetre.ouverte{opacity:1}
.fenetre-carte{width:min(640px,100%);max-height:calc(100svh - 32px);overflow-y:auto;padding:30px;display:grid;gap:18px;transform:translateY(12px) scale(.98);transition:transform .3s var(--ease-out);background:#0b1517f7}
.fenetre.ouverte .fenetre-carte{transform:none}
.fenetre-carte .fermer{position:absolute;top:16px;right:16px}
.profil-tete{display:flex;gap:18px;align-items:center;padding-right:50px}
.profil-tete h3{font:400 34px/1.1 'EB Garamond',serif}
.profil-tete small{display:block;font-size:16px;color:var(--brume);margin-top:4px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.stat{padding:14px 16px;border-radius:12px;border:1px solid var(--filet);background:#ffffff08}
.stat b{display:block;font:400 34px/1 'EB Garamond',serif;color:var(--or-pale);font-variant-numeric:lining-nums tabular-nums}
.stat span{display:block;margin-top:6px;font:500 13px/1.3 Cinzel,serif;letter-spacing:.14em;text-transform:uppercase;color:var(--brume)}

/* Mon profil */
.profil-forme{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;align-items:start}
.profil-forme form{padding:clamp(22px,2.6vw,34px);display:grid;gap:18px}
.deux{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.interrupteur{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0;border-top:1px solid var(--filet)}
.interrupteur b{display:block;font-weight:500;font-size:18px}
.interrupteur small{display:block;font-size:15px;color:var(--brume)}
.inter{position:relative;flex:none;width:52px;height:30px;border-radius:999px;background:#ffffff26;transition:background-color .2s ease}
.inter::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#f3e9d6;box-shadow:0 2px 6px #0006;transition:transform .25s var(--ease-out)}
.inter[aria-checked="true"]{background:var(--or)}
.inter[aria-checked="true"]::after{transform:translateX(22px)}
.export{padding:24px;display:grid;gap:14px}
.export h3{font:400 26px/1.15 'EB Garamond',serif}
.export p{font-size:17px;color:var(--brume)}
.export .actions .btn{flex:1}

/* La notification */
.toast{position:fixed;left:50%;bottom:max(22px,env(safe-area-inset-bottom));z-index:70;display:flex;align-items:center;gap:12px;padding:14px 20px;border-radius:var(--r);background:#0b1517f2;border:1px solid #d8b37359;box-shadow:0 18px 40px -16px #000;font-size:17px;transform:translate(-50%,20px);opacity:0;transition:opacity .2s ease,transform .3s var(--ease-out);pointer-events:none;max-width:calc(100% - 32px)}
.toast.vu{opacity:1;transform:translate(-50%,0)}
.toast b{font:400 22px/1 'Ma Shan Zheng',serif;color:#e6c37a}

/* L'impression : seule la feuille d'export sort sur papier */
#impression{display:none}
@media print{
  body.imprime>*:not(#impression){display:none!important}
  body.imprime #impression{display:block;color:#1c1712;font:12pt/1.55 'EB Garamond',Georgia,serif}
  body.imprime{background:#fff}
  #impression .imp-tete{display:flex;align-items:baseline;gap:10px;padding-bottom:10pt;margin-bottom:16pt;border-bottom:1px solid #a8321f;font:600 9pt/1 Cinzel,serif;letter-spacing:.14em;text-transform:uppercase;color:#5b4630}
  #impression .imp-tete span{font:400 18pt/1 'Ma Shan Zheng',serif;color:#a8321f;letter-spacing:0}
  #impression h1{font:500 22pt/1.15 'EB Garamond',serif;margin:0 0 12pt}
  #impression h2{font:600 10pt/1.2 Cinzel,serif;letter-spacing:.14em;text-transform:uppercase;color:#a8321f;margin:16pt 0 6pt}
  #impression h3{font:500 13pt/1.2 'EB Garamond',serif;margin:10pt 0 4pt}
  #impression p,#impression li{margin:0 0 5pt}
  #impression ul{padding-left:16pt}
  #impression blockquote{margin:6pt 0;padding-left:10pt;border-left:2px solid #d8b373}
  #impression .imp-pied{margin-top:22pt;padding-top:8pt;border-top:1px solid #ddd;font-size:9pt;color:#777}
  @page{margin:18mm}
}

/* Tablette */
@media (max-width:1080px){
  .fil{grid-template-columns:minmax(0,1fr)}
  .aparte{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
  .grille-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lames{grid-template-columns:repeat(14,minmax(0,1fr))}
}
/* Téléphone */
@media (max-width:760px){
  body{font-size:17px}
  .porte{grid-template-columns:minmax(0,1fr);gap:26px;padding:24px 16px 40px;align-items:start}
  .porte-dao{font-size:110px}
  .porte .chapo{font-size:19px}
  .tete{padding:16px}
  .marque span{display:none}
  .qui .nom{display:none}
  .page{padding:0 16px 80px}
  .accueil{grid-template-columns:minmax(0,1fr);gap:16px}
  .salut{min-height:300px;padding:24px 20px}
  .salut::before{background:linear-gradient(0deg,#081113f7 0,#081113d9 55%,#08111359 100%),url(assets/jardin-sakura.webp) 60% 30%/cover}
  .salut p{font-size:18px}
  .salut .gestes .btn{flex:1}
  .jour-zh{font-size:64px;top:18px;right:18px}
  .progres-chiffre b{font-size:62px}
  .sceaux{gap:6px}
  .sceau-b{padding:12px 2px 10px}
  .sceau-b .s{width:44px;height:44px;font-size:24px}
  .sceau-b b{font-size:13px;letter-spacing:.06em}
  .onglets{margin:22px -16px 18px;border-radius:0;border-left:0;border-right:0;top:0;padding:6px 10px}
  .onglets button{padding:0 14px;font-size:13px}
  .panneau-tete h2{font-size:32px}
  .plateau{padding:16px 10px}
  .lames{grid-template-columns:repeat(9,minmax(0,1fr));gap:16px 5px}
  .lame{height:116px;padding:8px 0 6px}
  .lame .lz{font-size:16px;margin-top:6px}
  .lame .ln{font-size:13px;min-width:0}
  .lame .nt{bottom:24px}
  .grille-2,.grille-3{grid-template-columns:minmax(0,1fr)}
  .aparte{grid-template-columns:minmax(0,1fr)}
  .billet,.composer{padding:18px}
  .billet-texte{font-size:18px}
  .tiroir{top:auto;width:100%;max-height:88svh;border-left:0;border-top:1px solid var(--filet-or);border-radius:var(--r) var(--r) 0 0;transform:translateY(100%)}
  .tiroir-tete{padding:16px 18px}
  .tiroir-corps{padding:18px 18px 28px}
  .tiroir .papier{padding:20px 18px}
  .profil-forme{grid-template-columns:minmax(0,1fr)}
  .deux{grid-template-columns:minmax(0,1fr)}
  .fenetre-carte{padding:24px 20px}
  .profil-tete h3{font-size:28px}
  .stat b{font-size:28px}
}
@media (prefers-reduced-motion:reduce){
  .panneau{animation:none}
  .tiroir,.fenetre-carte,.feuille-carte,.toast{transition:opacity .2s ease}
  @media (hover:hover){.lame:hover,button.membre:hover,button.note-carte:hover{transform:none}}
}

/* Tour 2 du module : le tiroir et le fil tiennent dans l'écran, le toast reste sur une ligne. */
#vue{scroll-margin-top:84px}
.note-zone .actions>span{flex-wrap:wrap}
.tiroir{max-width:100vw}
.toast{width:max-content}
@media (max-width:760px){
  .salut{padding-top:92px}
  .jour-zh{font-size:54px;top:20px;right:18px}
  .composer .bas{display:grid;grid-template-columns:minmax(0,1fr)}
  .composer .bas .btn{width:100%}
  .sceaux{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{padding:12px 10px}
  .stat span{font:500 15px/1.25 'EB Garamond',serif;letter-spacing:0;text-transform:none}
  .profil-tete .av.grand{width:64px;height:64px;font-size:22px}
  .toast{max-width:calc(100vw - 32px);padding:12px 16px;font-size:16px}
}

/* Tour 3 du module : barre fixe du tiroir, cases d'invitation, porte vivante. */
.tiroir-barre{padding:12px 24px;border-bottom:1px solid var(--filet);background:#0b1517}
.grille-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.note-carte.invite,.membre.invite{position:relative;display:grid;gap:10px;align-content:center;min-height:100%;padding:24px;border-radius:var(--r);border:1px dashed #d8b37366;background:#d8b3730a;text-align:left;overflow:hidden;transition:border-color .2s ease,background-color .2s ease}
.note-carte.invite p,.membre.invite p{font-size:18px;line-height:1.5;color:#e9e0cf;max-width:28ch}
.membre.invite b{font:400 24px/1.2 'EB Garamond',serif;color:var(--or-pale)}
.invite .plus{position:absolute;right:16px;bottom:6px;font:400 64px/1 'Ma Shan Zheng',serif;color:#d8b37326}
@media (hover:hover){.note-carte.invite:hover,.membre.invite:hover{border-color:var(--or);background:#d8b37314}}
.feuille-carte .champ label{color:#5b4630}
.feuille-carte input::placeholder{color:#8a7a68}
body:has(#porte:not([hidden])) .fond{background:linear-gradient(90deg,#081113e0 0,#081113a8 56%,#081113e6 100%),url(assets/jardin-sakura.webp) 50% 30%/cover}
.petales{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.petales i{position:absolute;top:-30px;width:13px;height:9px;border-radius:70% 0 70% 0;background:#f4c9d2;opacity:.7;animation:chute 14s linear infinite}
.petales i:nth-child(1){left:12%;animation-duration:15s;animation-delay:-2s}
.petales i:nth-child(2){left:28%;animation-duration:12s;animation-delay:-7s;transform:scale(.8)}
.petales i:nth-child(3){left:44%;animation-duration:17s;animation-delay:-11s}
.petales i:nth-child(4){left:58%;animation-duration:13s;animation-delay:-4s}
.petales i:nth-child(5){left:71%;animation-duration:16s;animation-delay:-9s}
.petales i:nth-child(6){left:84%;animation-duration:14s;animation-delay:-1s}
.petales i:nth-child(7){left:93%;animation-duration:18s;animation-delay:-13s}
.petales i:nth-child(8){left:6%;animation-duration:19s;animation-delay:-6s}
@keyframes chute{0%{transform:translate3d(0,-30px,0) rotate(0)}100%{transform:translate3d(-140px,calc(100vh + 60px),0) rotate(560deg)}}
@media (max-width:1080px){.grille-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .grille-4{grid-template-columns:minmax(0,1fr)}
  .tiroir-barre{padding:10px 18px}
  .billet{padding:18px}
  .porte{gap:18px;padding-top:16px}
  .porte-gauche{gap:10px}
  .porte-dao{font-size:72px;margin-bottom:-4px}
  .porte h1{font-size:38px}
  .porte .chapo{font-size:17px}
  .porte-carte{gap:14px}
}
@media (prefers-reduced-motion:reduce){.petales{display:none}}
.repondre input{min-width:0;flex:1 1 auto}
.repondre .btn{flex:none}

/* Tour 4 du module : en-tête du billet et toast à 390. */
@media (max-width:760px){
  .billet-tete .qui-b{flex:1 1 calc(100% - 60px)}
  .billet-tete .puce,.billet-tete .demo{order:3}
  body:has(.tiroir.ouvert) .toast{bottom:auto;top:max(14px,env(safe-area-inset-top));transform:translate(-50%,-20px)}
  body:has(.tiroir.ouvert) .toast.vu{transform:translate(-50%,0)}
  .profil-forme .actions{flex-direction:column;align-items:stretch;gap:12px}
  .profil-forme .actions .btn{width:100%}
}

/* Tour 5 : pied du tiroir, cartes membres, carte du jour, toast */
.tiroir-pied{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 24px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--filet-or);background:#0b1517;box-shadow:0 -18px 30px -18px #000000cc}
.tiroir-pied .etat{font-size:15px;color:var(--brume);min-width:0}
.membre:not(.invite){position:relative;grid-template-rows:auto 1fr auto;align-content:stretch}
.membre-tete{padding-right:70px;min-height:56px}
.membre-tete .demo{position:absolute;top:18px;right:18px}
@media (min-width:861px){
  .salut{grid-template-columns:minmax(0,1fr) auto;align-content:center;column-gap:clamp(20px,3vw,44px)}
  .salut>*:not(.jour-zh){grid-column:1}
  .salut .jour-zh{position:static;grid-column:2;grid-row:1/span 4;align-self:center;writing-mode:vertical-rl;font-size:80px;line-height:1.05;letter-spacing:.04em}
  .toast{left:auto;right:28px;transform:translateY(20px)}
  .toast.vu{transform:none}
}
@media (max-width:860px){
  .tiroir-fond{background:#050b0dd9;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
  .tiroir{max-height:94svh}
  .tiroir-tete{padding:10px 14px 10px 18px}
  .tiroir-tete h3{font-size:24px;gap:10px}
  .tiroir-tete h3 .zh{font-size:24px}
  .tiroir-tete .fermer{width:40px;height:40px}
  .tiroir-barre{flex-wrap:nowrap;gap:8px;padding:10px 14px}
  .tiroir-barre>*{flex:1 1 auto;min-width:0;white-space:nowrap;padding-left:10px;padding-right:10px}
  .tiroir-pied{padding:12px 14px calc(12px + env(safe-area-inset-bottom))}
  .tiroir-pied .etat:empty{display:none}
  .tiroir-pied>span:last-child{flex:1;gap:8px!important}
  .tiroir-pied .btn{flex:1 1 0;min-width:0;padding-left:8px;padding-right:8px}
}

/* Tour 6 : toast hors des actions, pied du tiroir sur deux rangées en mobile */
.membre-tete{align-items:flex-start}
.compte-l{display:grid;gap:4px}
.compte-l b{font-weight:600;color:var(--or-pale)}
.compte-l span{text-transform:none;letter-spacing:.02em;font:400 16px/1.3 'EB Garamond',serif}
@media (min-width:861px){
  body:has(.tiroir.ouvert) .toast{right:calc(min(560px,100vw) + 24px)}
}
@media (max-width:860px){
  .toast{bottom:max(18px,env(safe-area-inset-bottom));top:auto}
  body:has(.tiroir.ouvert) .toast{display:none}
  .long{display:none}
  .tiroir-barre{padding:10px 16px}
  .tiroir-barre>*{flex:1 1 0;padding-left:8px;padding-right:8px}
  .tiroir-pied{flex-wrap:wrap;row-gap:8px}
  .tiroir-pied .etat:not(:empty){flex:0 0 100%;text-align:center}
  .tiroir-pied>span:last-child{flex:1 1 100%}
}

/* Tour 7 : pied du tiroir sur deux rangées partout, démo sur la ligne de la ville, fin de barre d'onglets */
.tiroir-pied{flex-wrap:wrap;row-gap:10px}
.tiroir-pied .etat:empty{display:none}
.tiroir-pied .etat:not(:empty){flex:0 0 100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tiroir-pied>span:last-child{margin-left:auto}
.membre-tete{padding-right:0}
.membre-tete .demo{position:static;margin-left:8px;vertical-align:1px}
.membre-tete small{display:flex;align-items:center;flex-wrap:wrap}
.onglets::after{content:"";flex:0 0 10px}
@media (max-width:860px){
  .tiroir-pied>span:last-child{margin-left:0}
}

/* Tour 8 : citation des notes sur une ligne, porte mobile aérée, bloc du compte aligné à gauche */
.note-carte q{font-size:17px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:860px){
  .porte{padding-top:36px;padding-bottom:36px;align-content:center}
  .actions:has(>.compte-l){flex-direction:column;align-items:stretch;gap:14px}
  .actions:has(>.compte-l) .compte-l{text-align:left}
  .actions:has(>.compte-l) .btn{width:100%}
}

/* Tour 9 : porte mobile tenue dans un écran, compte à gauche, chapitre préféré insécable */
.citation b .ch{display:inline-block;white-space:nowrap}
.citation b .ch::before{content:"\00a0· "}
@media (max-width:860px){
  .porte{padding-top:28px;padding-bottom:20px;gap:14px}
  .porte-gauche{gap:6px}
  .porte-dao{font-size:54px;margin-bottom:-2px}
  .porte h1{font-size:34px}
  .chapo{font-size:17px;line-height:1.45}
  .porte-carte{padding:18px 18px 20px;gap:12px}
  .porte-carte h2{font-size:24px}
  .porte-carte .champ[style]{margin-top:10px!important}
  .entree-demo{padding:12px 16px}
  .actions:has(>.compte-l){align-items:stretch!important}
  .citation b .ch{display:block;margin-top:4px}
  .citation b .ch::before{content:none}
}

/* Tour 10 : carte du jour centrée, sous-titres sur une ligne, note jamais sous le pied du tiroir */
.porte h1{font-variant-ligatures:none}
.champ label{line-height:1.35}
.tiroir-corps{scroll-padding-bottom:40px}
@media (min-width:1100px){.panneau-tete p{max-width:78ch}}
@media (min-width:861px){
  .salut{grid-template-rows:1fr auto auto auto auto 1fr;align-content:stretch}
  .salut>.cap{grid-row:2}
  .salut>h1{grid-row:3}
  .salut>p{grid-row:4}
  .salut>.gestes{grid-row:5}
  .salut .jour-zh{grid-row:1/-1}
}
@media (max-width:860px){
  .tiroir-corps{padding-bottom:40px}
}

/* Tour final : barres d'onglets fondues au bord tant qu'il reste des onglets cachés, lien du jour aligné
   sur le bouton doré, souffle sous le 道 des portes sur téléphone */
.onglets.fond-d,.ad-nav.fond-d{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),#0000);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),#0000)}
.onglets.fond-g,.ad-nav.fond-g{-webkit-mask-image:linear-gradient(90deg,#0000,#000 44px);mask-image:linear-gradient(90deg,#0000,#000 44px)}
.onglets.fond-g.fond-d,.ad-nav.fond-g.fond-d{-webkit-mask-image:linear-gradient(90deg,#0000,#000 44px,#000 calc(100% - 44px),#0000);mask-image:linear-gradient(90deg,#0000,#000 44px,#000 calc(100% - 44px),#0000)}
@media (min-width:861px){.salut .gestes .btn.lien{padding-left:0;padding-right:0}}
@media (max-width:860px){.porte-dao{margin-bottom:10px}}