/* Charte de la maquette D « Nuit et planche » (maquettes/refonte/d-mix.html) :
   écriture au feutre, deux papiers, cible géante en fond, touches très grosses
   à l'écran de marque. Les polices sont servies par l'appli elle-même, jamais
   par un service extérieur : elles restent là quand le réseau du bar tombe. */
@font-face{font-family:Kalam;font-weight:400;font-display:swap;src:url(polices/kalam-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+2190-2193,U+20AC}
@font-face{font-family:Kalam;font-weight:400;font-display:swap;src:url(polices/kalam-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02FF}
@font-face{font-family:Kalam;font-weight:700;font-display:swap;src:url(polices/kalam-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+2190-2193,U+20AC}
@font-face{font-family:Kalam;font-weight:700;font-display:swap;src:url(polices/kalam-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02FF}
@font-face{font-family:'Public Sans';font-weight:400 700;font-display:swap;src:url(polices/publicsans-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+2190-2193,U+20AC}
@font-face{font-family:'Public Sans';font-weight:400 700;font-display:swap;src:url(polices/publicsans-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02FF}
@font-face{font-family:Newsreader;font-weight:600;font-display:swap;src:url(polices/newsreader-600.woff2) format('woff2')}

:root{
  /* gamme du feutre : 0 reflet, 1 lumière, 2 demi-teinte, 3 ombre propre, 4 ombre portée */
  --b0:#99c1e4;--b1:#468ece;--b2:#3c7ab1;--b3:#31638f;--b4:#244a6b;
  --o0:#ffc086;--o1:#ff8c23;--o2:#db781e;--o3:#b36218;--o4:#854812;
  --v0:#a9dbb4;--v1:#3f9d63;--v2:#318353;--v3:#256a42;--v4:#184a2e;
  --c0:#c5aea1;--c1:#956c54;--c2:#805d48;--c3:#684c3b;--c4:#4d382c;
  --g0:#e2e2e2;--g1:#c7c7c7;--g2:#ababab;--g3:#8b8b8b;--g4:#676767;
  /* secteurs de la cible : k clair, s sombre */
  --k0:#fbf4e4;--k1:#f1e6cf;--k2:#e0d2b6;--k3:#c6b695;--k4:#a7977a;
  --s0:#5a5048;--s1:#40382f;--s2:#332c26;--s3:#27211c;--s4:#1c1814;
  --reflet:rgba(255,255,255,.6);
  --main:'Kalam','Segoe Print','Bradley Hand',cursive;
  --net:'Public Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --chiffre:var(--main);
  --sur-action:#1a1009;
  --hauteur-nav:62px;
  /* teinte d'accent des images de pictos.js : orange, sauf .t-* ou fond orange */
  --p0:var(--o0);--p1:var(--o1);--p2:var(--o2);--p3:var(--o3);--p4:var(--o4);
}
/* Les noms --sisal, --creme, --laiton, --vert et --rouge sont ceux de la première
   charte, repris tels quels dans les styles en ligne des écrans : ils suivent le papier. */
:root,:root[data-papier="nuit"]{
  --encre:#0e0c0a;--lisere:rgba(243,236,223,.5);--crayon:rgba(230,224,214,.34);--lavis:rgba(0,0,0,.7);--hach:rgba(0,0,0,.42);--annot:#8cc0f0;
  --texte:#f3ecdf;--texte2:#b9b0a6;--surface:#2d2925;--surface2:#37322d;--fond:#171513;--sec1:#26211c;--sec2:#17140f;
  --fil:rgba(214,206,190,.2);--anneau-b:rgba(70,142,206,.2);--anneau-o:rgba(255,140,35,.17);
  --bleu:#82b3de;--orange:#e49b57;--trait:#f3ecdf;--actif-b:rgba(70,142,206,.3);--actif-o:rgba(255,140,35,.26);
  --actif-c:rgba(149,108,84,.34);--actif-g:rgba(171,171,171,.24);
  --sisal:#171513;--sisal-2:#2d2925;--sisal-3:#37322d;--creme:#f3ecdf;--creme-dim:#b9b0a6;
  --laiton:#ff8c23;--action:#ff8c23;--teinte-action:rgba(255,140,35,.2);
  --vert:#2f7d4f;--vert-clair:#4bb073;--rouge:#b3282d;--rouge-clair:#e0575c;
}
:root[data-papier="planche"]{
  --encre:#1a1816;--lisere:transparent;--crayon:rgba(58,58,68,.5);--lavis:rgba(84,88,98,.42);--hach:rgba(17,17,17,.3);--annot:#2a62a4;
  --texte:#1a1816;--texte2:#5a544e;--surface:#fffaf0;--surface2:#fffaf0;--fond:#f6efe0;--sec1:#f6efe0;--sec2:#e9dfca;
  --fil:rgba(70,56,40,.3);--anneau-b:rgba(70,142,206,.26);--anneau-o:rgba(255,140,35,.24);
  --bleu:#2f5f8a;--orange:#9e5617;--trait:#1a1816;--actif-b:rgba(153,193,228,.6);--actif-o:rgba(255,192,134,.6);
  --actif-c:rgba(197,174,161,.55);--actif-g:rgba(199,199,199,.55);
  --sisal:#f6efe0;--sisal-2:#fffaf0;--sisal-3:#e9dfca;--creme:#1a1816;--creme-dim:#5a544e;
  --laiton:#a4570f;--action:#ff8c23;--teinte-action:rgba(255,140,35,.2);
  --vert:#2f7d4f;--vert-clair:#1f6b3f;--rouge:#b3282d;--rouge-clair:#a4222a;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}
html{background:var(--sec2)}
body{min-height:100dvh;background:transparent;color:var(--texte);font-variant-numeric:tabular-nums;
  font-family:var(--net);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
#fond-cible{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
#films{position:fixed;inset:0;z-index:300;pointer-events:none}
#films>*{pointer-events:auto}
#films:empty{display:none}
/* la bulle de Ra'o : sur la bande de mission, jamais sur les touches, et elle laisse passer les doigts */
#mouche{position:fixed;left:0;right:0;z-index:310;pointer-events:none;display:flex;align-items:stretch}
#mouche:empty{display:none}
.mouche-parle{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:4px;padding:0 10px;background:var(--fond);border-top:1.4px solid var(--trait);animation:mouche-pose .22s cubic-bezier(.2,.9,.3,1.3)}
.mouche-parle img{flex:none;width:48px;height:48px;margin-top:-10px;align-self:flex-end}
.mouche-parle p{position:relative;margin:0;padding:1px 12px;min-width:0;border:2px solid var(--encre);border-radius:14px 16px 13px 15px;background:var(--k0);color:#1a1009;font-family:var(--main);font-weight:700;font-size:clamp(17px,2.5vh,21px);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mouche-parle.fort p{background:var(--o1)}
@keyframes mouche-pose{from{opacity:0;transform:translateY(5px)}}
@media (prefers-reduced-motion:reduce){.mouche-parle{animation:none}}
/* touch-action:manipulation supprime le délai ~300ms que certains
   navigateurs mobiles ajoutent avant un clic : sans ça, des taps rapides
   (marquer plusieurs fléchettes vite) pouvaient sembler ignorés, vécu en vrai. */
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer;touch-action:manipulation}
button:active{transform:translateY(1px)}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--annot);outline-offset:2px}
a{color:inherit}
h1{font-family:var(--main);font-size:1.75rem;font-weight:700;line-height:1.1}
h2{font-family:var(--main);font-size:1.32rem;font-weight:700;line-height:1.15;margin-bottom:.3rem}
h3{font-size:.75rem;color:var(--creme-dim);font-weight:650;letter-spacing:1.3px;
  text-transform:uppercase;margin:1rem 0 .4rem}
small{color:var(--creme-dim)}
main{padding:.8rem;max-width:900px;margin:0 auto;padding-bottom:6rem}
header{position:sticky;top:0;z-index:20;background:var(--fond);
  border-bottom:1.4px solid var(--trait);padding:.6rem 1rem .55rem}

.carte{background:var(--fond);border:1px solid var(--crayon);border-radius:0;padding:.8rem;margin-bottom:.6rem}
.grille{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.jeu{background:var(--fond);border:1px solid var(--crayon);padding:.7rem .6rem;text-align:left;
  display:flex;flex-direction:column;gap:.15rem;min-height:104px}
.jeu .ic{display:block;width:46px;height:46px;margin-bottom:.2rem}
.jeu .ic .picto{width:100%;height:100%}
.jeu b{font-family:var(--main);font-size:1.15rem;font-weight:700;line-height:1.1}
.jeu small{font-size:.76rem;line-height:1.3}
.jeu .meta{margin-top:auto;font-size:.66rem;color:var(--creme-dim);display:flex;gap:.4rem;flex-wrap:wrap}
.tag{display:inline-block;padding:.05rem .32rem;border-radius:3px;font-size:.68rem;
  font-weight:700;background:var(--sisal-3);color:var(--creme-dim)}
.tag.or{background:var(--teinte-action);color:var(--laiton)}
.tag.v{background:rgba(47,125,79,.22);color:var(--vert-clair)}
.tag.r{background:rgba(179,40,45,.2);color:var(--rouge-clair)}
[data-papier="planche"] .tag.or{color:#7a3f0a}
[data-papier="planche"] .tag.v{color:#17532f}
[data-papier="planche"] .nums button.k-froid{color:var(--b3)}
[data-papier="planche"] .eq.actif .conseil{color:var(--texte)}
[data-papier="planche"] .mission.danger{background:var(--o1)}

.opt{display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  padding:.5rem 0;border-bottom:1px solid var(--crayon)}
.opt:last-child{border-bottom:none}
.opt .lib{font-size:.9rem}
/* le choix actif prend un coup de marqueur, comme le mode actif de la bascule */
.choix{display:flex;gap:.1rem;flex:none;flex-wrap:wrap;justify-content:flex-end}
.choix button,.onglets button{position:relative;isolation:isolate;min-height:44px;padding:0 .7rem;
  font-family:var(--main);font-weight:700;font-size:1.1rem;color:var(--texte)}
.choix button.on,.onglets button.on{color:var(--sur-action)}
.choix button.on::after,.onglets button.on::after{content:"";position:absolute;z-index:-1;left:1px;right:1px;top:13%;bottom:11%;
  border-radius:999px;background:var(--action);transform:rotate(-1.2deg);animation:ruban .2s ease-out both}

.champ{margin-bottom:.6rem}
.champ label{display:block;font-size:.78rem;color:var(--creme-dim);margin-bottom:.25rem}
.champ input,.champ select,input,textarea,select{font-family:inherit}
.champ input,.champ select{width:100%;min-height:46px;background:var(--surface);border:1px solid var(--crayon);
  color:var(--texte);font-size:1rem;padding:.5rem .6rem}
/* bouton principal : un aplat de feutre dont le bout s'effiloche en trois coups */
.gros,.btn-feutre{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;width:100%;min-height:62px;
  margin-top:.6rem;padding:0 2.2rem 0 .8rem;font-family:var(--main);font-weight:700;font-size:1.65rem;line-height:1.05;color:var(--sur-action);text-decoration:none;
  background:none;filter:drop-shadow(4px 7px 5px var(--lavis))}
.gros::before,.btn-feutre::before,.aplat::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(170deg,var(--o1),var(--o2));
  --fin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 60' preserveAspectRatio='none'%3E%3Cg stroke='%23000' stroke-linecap='round' stroke-width='21' fill='none'%3E%3Cpath d='M-12 10 L24 9'/%3E%3Cpath d='M-12 30 L33 29'/%3E%3Cpath d='M-12 50 L17 49'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask:linear-gradient(#000,#000) left top/calc(100% - 43px) 100% no-repeat,var(--fin) right top/44px 100% no-repeat;
  mask:linear-gradient(#000,#000) left top/calc(100% - 43px) 100% no-repeat,var(--fin) right top/44px 100% no-repeat}
.gros[disabled]{opacity:.4}
.carte .gros{font-size:1.4rem}
.creux,.btn-trait{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:50px;margin-top:.5rem;padding:.2rem .5rem;
  font-family:var(--main);font-weight:700;font-size:1.25rem;line-height:1.05;color:var(--texte);text-decoration:none;text-align:center;
  background:var(--fond);box-shadow:inset 0 0 0 1.3px var(--trait)}
.creux[disabled]{opacity:.45}
.retour{font-family:var(--main);font-weight:700;font-size:1.3rem;color:var(--texte);min-height:44px;display:inline-flex;align-items:center;margin-bottom:.2rem}
.annot{font-family:var(--main);font-size:17px;line-height:1.1;color:var(--annot)}

/* ------------------------------------------------------------- le dessin */
.enc{fill:none;stroke:var(--encre);stroke-linecap:round;stroke-linejoin:round}
.crayon{stroke:var(--crayon);stroke-width:1}
.hach{fill:none;stroke:var(--hach);stroke-width:1.3}
.lavis{fill:var(--lavis)}
.reflets path{fill:none;stroke:var(--reflet);stroke-width:4;stroke-linecap:round}
.reflet1{fill:none;stroke:var(--reflet);stroke-width:2.4;stroke-linecap:round}
.num{font:700 23px var(--main);fill:var(--k1);text-anchor:middle}
.jt{font-family:var(--main);font-weight:700;text-anchor:middle}
.marque{fill:none;stroke:var(--b3);stroke-width:4;stroke-linecap:round}
.marque.o{stroke:var(--o2)}
.jeu-dessin{display:block;width:100%;height:100%;overflow:visible}
.case{fill:var(--k2)}
.route{stroke:var(--o1);stroke-width:7;opacity:.62;stroke-linecap:round}
.tableau .encrage .enc{stroke:var(--trait)}
[data-papier="nuit"] .jeu-dessin{filter:drop-shadow(0 0 .7px rgba(243,236,223,.85))}
.entoure{position:absolute;left:-9%;top:-12%;width:118%;height:124%;overflow:visible;pointer-events:none}
.entoure path{fill:none;stroke:var(--annot);stroke-width:1.8;stroke-linecap:round;vector-effect:non-scaling-stroke}
.fleche{width:56px;height:32px;overflow:visible}
.fleche path{fill:none;stroke:var(--annot);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ce qui vit : tout se trace devant le joueur */
@keyframes trace{from{stroke-dashoffset:1;opacity:0}2%{opacity:1}to{stroke-dashoffset:0;opacity:1}}
@keyframes passe{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes lavis-monte{from{opacity:0}to{opacity:1}}
@keyframes ecrit{from{clip-path:inset(-20% 100% -20% 0)}to{clip-path:inset(-20% -5% -20% 0)}}
@keyframes monte{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pique{0%{transform:translate(70px,92px) scale(2.1);opacity:0}55%{opacity:1}72%{transform:none}84%{transform:rotate(2.6deg)}100%{transform:none}}
@keyframes ruban{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(-10% -5% -10% 0)}}
.vit .enc{stroke-dasharray:1;animation:trace .6s ease-in-out both;animation-delay:calc(var(--t,.05s) + var(--i,0)*16ms)}
.vit .coup{stroke-dasharray:1;animation:passe 1s cubic-bezier(.4,0,.3,1) both;animation-delay:calc(var(--t,.05s) + .55s)}
.vit .lavis{animation:lavis-monte .8s ease both;animation-delay:calc(var(--t,.05s) + 1.2s)}
.vit .reflets,.vit .hach,.vit g.nums,.vit .reflet1{animation:lavis-monte .5s ease both;animation-delay:calc(var(--t,.05s) + 1.3s)}
.vit .entoure path,.vit .fleche path{stroke-dasharray:1;animation:passe .6s ease-out both;animation-delay:calc(var(--t,.05s) + .9s)}
.vit .ecriture{animation:ecrit .75s cubic-bezier(.4,0,.3,1) both;animation-delay:var(--t,.05s)}
.ecrit{animation:ecrit .42s ease-out both}
.pique{animation:pique .34s cubic-bezier(.3,.1,.3,1) both;transform-origin:0 0}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ---------------------------------------------- la navigation du bas */
.nav-basse{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;background:var(--fond);border-top:1.4px solid var(--trait);
  padding:2px 2px env(safe-area-inset-bottom,0)}
.nav-basse button{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:56px;min-width:0;
  font-family:var(--main);font-weight:700;font-size:clamp(13px,3.7vw,16px);line-height:1;color:var(--texte)}
.nav-basse.serree button{font-size:12px}
.nav-basse .ic{line-height:0;color:var(--texte2)}
.nav-basse .picto{width:27px;height:27px}
.nav-basse button.on .ic{color:var(--laiton)}
.nav-basse button.on::after{content:"";position:absolute;z-index:-1;left:14%;right:14%;bottom:3px;height:8px;border-radius:99px;background:var(--action);transform:rotate(-1deg);opacity:.85}

/* ------------------------------------------------- la bascule Jouer / Tournoi
   Une bande pleine, les deux mots en pleine encre, un gros coup de marqueur sous
   le mode actif. En version fine sur les autres écrans principaux. */
.bascule{position:relative;display:grid;grid-template-columns:1fr 1fr;isolation:isolate;background:var(--fond);border-top:1px solid var(--crayon);border-bottom:1.4px solid var(--trait)}
.bascule button{font-family:var(--main);font-weight:700;font-size:34px;line-height:1;min-height:60px;color:var(--texte);transition:color .25s}
.bascule button+button{border-left:1px solid var(--crayon)}
.bascule button[aria-selected="true"]{color:var(--sur-action)}
.glisse{position:absolute;left:6%;top:8px;bottom:8px;width:38%;z-index:-1;transition:transform .42s cubic-bezier(.5,0,.2,1.15)}
.glisse svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.glisse path{fill:none;stroke:var(--o1);stroke-width:42;stroke-linecap:round;vector-effect:non-scaling-stroke;transition:stroke .3s}
[data-mode="tournoi"] .glisse{transform:translateX(131.6%)}
[data-mode="tournoi"] .glisse path{stroke:var(--b1)}
.bascule.fine{position:sticky;top:0;z-index:25;border-top:0}
.bascule.fine+header{top:46px}
.bascule.fine button{font-size:22px;min-height:44px}
.bascule.fine .glisse{top:6px;bottom:6px}
.bascule.fine .glisse path{stroke-width:30}

/* ------------------------------------------------------------- l'accueil */
.tete{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 16px;min-height:56px;background:var(--fond)}
.marque-appli{display:inline-flex;align-items:center}
.marque-appli img{width:104px;height:50px;display:block;flex:none}
.lien{font-family:var(--main);font-weight:700;font-size:19px;color:var(--texte);min-height:44px;display:inline-flex;align-items:center;padding-inline:6px;text-decoration:none}
.tete .retour{margin:0}
.barre-titre{font-family:var(--main);font-size:24px;font-weight:400;text-align:right}
.accueil{height:100dvh;display:flex;flex-direction:column;overflow:hidden;padding-bottom:calc(var(--hauteur-nav) + env(safe-area-inset-bottom,0px));padding-top:env(safe-area-inset-top,0)}
.retourne{position:relative;flex:1;perspective:1100px;min-height:0}
.face{position:absolute;inset:0;display:flex;flex-direction:column;padding-inline:16px;overflow:hidden auto;max-width:640px;margin-inline:auto;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .7s cubic-bezier(.5,0,.2,1),visibility 0s .35s;scrollbar-width:none}
.f-tournoi{transform:rotateY(180deg);visibility:hidden}
[data-mode="tournoi"] .f-jouer{transform:rotateY(-180deg);visibility:hidden}
[data-mode="tournoi"] .f-tournoi{transform:rotateY(0);visibility:visible}
.scene{position:relative;flex:1 1 auto;min-height:170px;display:flex;align-items:center;justify-content:center;overflow:visible}
.scene>button{display:flex;align-items:center;justify-content:center;height:100%;width:100%}
.scene svg.grande{width:min(100%,52vh);height:auto;max-height:100%;flex:none;overflow:visible}
.note{position:absolute;z-index:2;pointer-events:none}
.n1{left:0;top:4px;max-width:128px}
.n1 .fleche{position:absolute;left:58px;top:32px;transform:rotate(26deg)}
.n2{right:0;top:6px;text-align:right;max-width:124px}
.face .gros{margin-top:4px;flex:none}
.face .creux{margin-top:8px;font-size:20px;min-height:48px;flex:none}
.prep-corps{gap:12px;padding-inline:16px}
.tuiles-r{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(0,1fr);gap:8px}
.tuiles-r.trois{grid-template-columns:repeat(3,1fr)}
.tuile-r{display:flex;flex-direction:column;gap:3px;min-width:0;min-height:0;overflow:hidden;padding:7px 5px 6px;text-align:center;color:var(--texte);background:var(--surface);border:2px solid var(--crayon);border-radius:14px}
.tuile-r:active{border-color:var(--o1)}
.img-r{position:relative;flex:1;min-height:0}
.img-r>.picto,.img-r>.silhouettes{position:absolute;inset:0;width:100%;height:100%}
.tuile-r small{flex:none;font-size:13.5px;font-weight:600;line-height:1.12;color:var(--texte2);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.silhouettes{display:flex;flex-wrap:wrap;align-content:center;justify-content:center}
.silhouettes .picto,.mode .silhouettes .picto{width:calc(100%/var(--col));height:calc(100%/var(--rangs))}
/* la dernière tuile prend la place restante : pas de trou en bas de la grille */
.tuiles-r:not(.trois) .tuile-r:nth-child(odd):last-child{grid-column:span 2}
.tuiles-r.trois .tuile-r:nth-child(3n+1):last-child{grid-column:span 3}
.tuiles-r.trois .tuile-r:nth-child(3n+2):last-child{grid-column:span 2}
.pt{font-family:var(--main);font-weight:700;fill:currentColor;stroke:none}
.pt.pc{fill:var(--k0)}
.pt.pe{fill:var(--encre)}
/* Les images de pictos.js : --pe, épaisseur de l'encre en unités de dessin ; --k la compense
   dans un dessin réduit. La version simple est celle par défaut, les tuiles allument le détail. */
.ke,.kt,.kd,.kl,.ku,.kr,.kc{fill:none;stroke-linecap:round;stroke-linejoin:round}
.ke,.kd{stroke:var(--encre);stroke-width:calc(var(--pe,1.9)*var(--k,1)*1px)}
.kd{transform:translate(.3px,.36px)}
.kt{stroke:var(--encre);stroke-width:calc(var(--pe,1.9)*.62*var(--k,1)*1px)}
.kl{stroke:var(--lisere);stroke-width:calc((var(--pe,1.9) + .8)*var(--k,1)*1px)}
.ku{stroke:var(--encre);stroke-width:calc((var(--w) + var(--pe,1.9)*1.7)*1px)}
.kl.ku{stroke:var(--lisere);stroke-width:calc((var(--w) + var(--pe,1.9)*1.7 + .8)*1px)}
.kr{stroke:var(--reflet);stroke-width:1.2}
.kf{display:var(--fin,none)}
.ks{display:var(--simple,inline)}
.img-r,.mode,.choix-feuille,.jeu .ic{--fin:inline;--simple:none;--pe:1.15}
.silhouettes[style*="--rangs:2"],.mode .silhouettes{--fin:none;--simple:inline;--pe:1.6}
.t-b{--p0:var(--b0);--p1:var(--b1);--p2:var(--b2);--p3:var(--b3);--p4:var(--b4)}
.t-o{--p0:var(--o0);--p1:var(--o1);--p2:var(--o2);--p3:var(--o3);--p4:var(--o4)}
.t-c{--p0:var(--c0);--p1:var(--c1);--p2:var(--c2);--p3:var(--c3);--p4:var(--c4)}
.t-g{--p0:var(--g0);--p1:var(--g1);--p2:var(--g2);--p3:var(--g3);--p4:var(--g4)}
/* sur l'orange, l'accent passe au bleu : l'objet se détache, et le liseré ne sert plus */
.gros,.btn-feutre,.aplat,.sur-orange,.bandeau-install,.bas button.k-gagne,.mode.on,.choix-feuille button.on,.onglets button.on,.bascule button[aria-selected="true"]{--lisere:transparent;--p0:var(--b0);--p1:var(--b1);--p2:var(--b2);--p3:var(--b3);--p4:var(--b4)}
.mode.on .t-o,.choix-feuille button.on .t-o{--p0:var(--k0);--p1:var(--k1);--p2:var(--k2);--p3:var(--k3);--p4:var(--k4)}
.voile-feuille{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end;background:rgba(0,0,0,.7)}
.feuille{width:100%;max-height:88dvh;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:16px 16px calc(14px + env(safe-area-inset-bottom,0px));color:var(--texte);background:var(--surface);border-top:3px solid var(--o1);border-radius:18px 18px 0 0}
.feuille h2{margin:0;font-family:var(--main);font-weight:700;font-size:28px;text-align:center}
.feuille .modes{margin:0;border:0;grid-template-columns:1fr 1fr;gap:8px}
.feuille .mode+.mode{border-left:0}
.feuille .mode{min-height:104px;border-radius:12px;border:2px solid var(--crayon)}
.choix-feuille{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px}
.choix-feuille button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:92px;padding:7px 4px;font-family:var(--main);font-weight:700;font-size:20px;line-height:1.05;color:var(--texte);background:var(--surface2);border:2px solid var(--crayon);border-radius:12px}
.choix-feuille .picto{width:52px;height:52px}
.choix-feuille button.on{color:#1a1009;background:var(--o1);border-color:var(--o1)}
.regle-feuille{font-size:18px;line-height:1.4}
.feuille .gros{flex:none;margin:4px 0 0}
.feuille .reglage{border-top:0}
.feuille .reglage>span{display:flex;align-items:center;gap:6px;font-size:15px}
.feuille .reglage>span .picto{width:22px;height:22px}
.feuille .reglage>span .mouche-picto{width:26px;height:26px}
img.picto.rao{object-fit:contain;vertical-align:middle}
.picto{flex:none;width:1.15em;height:1.15em;overflow:visible}
.retour .picto,.ret .picto{margin-right:.25em}
h1 .picto,h2 .picto{width:1em;height:1em;margin-right:.28em;vertical-align:-.14em}
.tag .picto,.opt .lib .picto,.carte small .picto,summary .picto,.feuille .plus .picto{width:1.15em;height:1.15em;vertical-align:-.22em;margin-right:.25em}
.opt .lib b+small{margin-left:.4em}
.grille .opt .lib b,.grille .opt .lib small{display:block;margin:0}
.opt .ic{display:block;width:34px;height:34px;margin:0 auto 2px}
.opt .ic .picto{width:100%;height:100%}
.pas button .picto,.x .picto{width:1em;height:1em;display:block}
.add .picto{width:22px;height:22px;margin:0 auto}
.lien .picto{margin-right:.25em}
.liens-accueil .lien .picto,.tete .lien .picto{margin-right:0}
.carte-guide .lien{gap:.1em}
.mj .d{float:left;width:30px;height:30px;margin-right:6px}
.mj button{min-height:50px}
.creux .picto{margin-right:.35em}
.bandeau-install .picto{vertical-align:-.2em;margin-right:.3em}
.plus .picto{margin-right:.35em}
.joueur-ligne .picto{vertical-align:-.18em}
.joueur small .picto{vertical-align:-.2em;margin-right:.25em}
.choix button .picto{vertical-align:-.2em;margin-right:.2em}
.bascule button{display:inline-flex;align-items:center;justify-content:center;gap:.2em;font-size:29px}
.bascule .picto{width:.95em;height:.95em}
.gros .picto{margin-right:.35em}
.tete .lien{gap:.25em}.tete .lien .picto{width:21px;height:21px}
.btn-feutre .picto,.btn-trait .picto{margin-right:.35em}
.retour-t,.orga-t summary{gap:.35em}.retour-t{display:inline-flex;align-items:center}
.liens-accueil{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;flex:none;margin-top:8px}
.liens-accueil .lien{flex-direction:column;justify-content:center;gap:2px;min-height:62px;padding:5px 2px;background:var(--surface);border:1.4px solid var(--crayon);border-radius:12px}
.liens-accueil .picto{width:28px;height:28px}
.cartouche .picto{float:left;width:26px;height:26px;margin:2px 7px 0 0}
.cartouche{display:grid;grid-template-columns:1.1fr 1.5fr;background:var(--fond);border:1.4px solid var(--trait);margin:4px 0 10px;font-size:12.5px;line-height:1.3;flex:none;text-align:left;width:100%}
.cartouche>*{padding:5px 9px;min-width:0}
.cartouche>*+*{border-left:1px solid var(--trait)}
.cartouche small{display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--texte2);font-weight:600}
.cartouche b{font-weight:600;font-size:13.5px}

/* le mode Tournoi */
.bandeau-install{flex:none;width:calc(100% + 32px);margin:0 -16px;min-height:44px;font-family:var(--main);font-weight:700;font-size:19px;color:#1a1009;background:var(--o1);border:0}
.guide-install{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;justify-content:center;padding:16px;background:rgba(0,0,0,.82)}
.carte-guide{position:relative;display:flex;flex-direction:column;gap:10px;padding:18px 16px;color:var(--texte);background:var(--surface);border:3px solid var(--o1);border-radius:18px}
.carte-guide h2{margin:0;font-family:var(--main);font-weight:700;font-size:30px;text-align:center}
.carte-guide p{margin:0;font-size:18px;line-height:1.3}
.carte-guide .btn-feutre,.carte-guide .btn-trait{flex:none;margin:0;font-size:1.4rem}
.carte-guide .lien{align-self:center;min-height:44px}
.note-guide{font-size:16px!important;color:var(--texte2)}
.etapes-guide{margin:0;padding-left:1.4rem;display:flex;flex-direction:column;gap:10px;font-size:18px;line-height:1.3}
.fleche-guide{position:fixed;left:50%;bottom:calc(10px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);color:var(--o1);animation:guide-bas 1s ease-in-out infinite alternate}
.fleche-guide.haut{bottom:auto;top:calc(10px + env(safe-area-inset-top,0px));right:14px;left:auto;transform:none}
@keyframes guide-bas{to{translate:0 10px}}
@media (prefers-reduced-motion:reduce){.fleche-guide{animation:none}}
.guide-install.a-toi{justify-content:flex-start;padding-top:calc(90px + env(safe-area-inset-top,0px))}
.fleche-guide .tp-trois{font-style:normal;font-size:38px;font-weight:700;line-height:1}
.etapes-guide.sans-film{display:none}
.film-tel{align-self:center;width:176px;height:300px;padding:8px;background:#0c0b09;border:2px solid var(--texte2);border-radius:26px}
.tp-ecran{position:relative;overflow:hidden;width:100%;height:100%;border-radius:18px;background:#f4f1ea;color:#1a1816;font:13px/1.2 system-ui,sans-serif}
.tp-page{position:absolute;inset:0 0 34px;display:flex;align-items:center;justify-content:center;background:#171513;color:#e49b57;font-size:17px}
.tp-barre{position:absolute;inset:auto 0 0;height:34px;display:flex;align-items:center;justify-content:center;background:#ece8df;color:#2a6fd6}
.tp-barre svg{width:22px;height:22px;display:block}.tp-trois{font-style:normal;font-weight:700;font-size:20px}
.tp-menu{position:absolute;left:30px;right:30px;bottom:40px;padding:7px 9px;background:#fff;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.35);opacity:0;animation:tp-menu 13s infinite}
.tp-menu span{display:flex;align-items:center;justify-content:space-between}.tp-menu svg{width:16px;height:16px}
.tp-feuille{position:absolute;inset:auto 0 0;height:190px;padding:10px 8px;display:flex;flex-direction:column;gap:5px;background:#fff;border-radius:14px 14px 0 0;transform:translateY(100%);animation:tp-feuille 11s infinite}
.film-tel.recent .tp-feuille{animation:tp-feuille-r 13s infinite}
.tp-feuille u{display:block;padding:7px;text-decoration:none;background:#f1eee7;border-radius:7px}
.tp-feuille .vise{font-weight:700;animation:tp-vise 11s infinite}.film-tel.recent .vise{animation:tp-vise-r 13s infinite}
.tp-ajout{position:absolute;inset:0 0 auto;height:40px;padding:0 9px;display:flex;align-items:center;justify-content:space-between;background:#fff;opacity:0;animation:tp-ajout 11s infinite}
.film-tel.recent .tp-ajout{animation:tp-ajout-r 13s infinite}
.tp-ajout em{font-style:normal;color:#2a6fd6}.tp-ajout b{color:#2a6fd6}
.tp-accueil{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:linear-gradient(170deg,#23406a,#0d1b2e);color:#fff;opacity:0;animation:tp-accueil 11s infinite}
.film-tel.recent .tp-accueil{animation:tp-accueil-r 13s infinite}
.tp-accueil img{width:58px;height:58px;border-radius:13px}
.tp-doigt{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:rgba(228,155,87,.72);border:2px solid #fff;left:50%;top:92%;animation:tp-doigt 11s infinite}
.film-tel.recent .tp-doigt{animation:tp-doigt-r 13s infinite}
@keyframes tp-feuille{0%,20%{transform:translateY(100%)}26%,62%{transform:none}66%,100%{transform:translateY(100%)}}
@keyframes tp-vise{0%,42%{background:#f1eee7}46%,60%{background:#ffc98a}64%,100%{background:#f1eee7}}
@keyframes tp-ajout{0%,62%{opacity:0}64%,82%{opacity:1}84%,100%{opacity:0}}
@keyframes tp-accueil{0%,83%{opacity:0}85%,100%{opacity:1}}
@keyframes tp-doigt{0%,6%{left:50%;top:92%;transform:scale(1);opacity:1}14%{left:50%;top:92%;transform:scale(.7)}20%{left:50%;top:92%;transform:scale(1)}34%{left:50%;top:92%}46%,56%{left:50%;top:60%;transform:scale(1)}60%{left:50%;top:60%;transform:scale(.7)}64%{left:88%;top:7%;transform:scale(1)}76%{left:88%;top:7%;transform:scale(1)}80%{left:88%;top:7%;transform:scale(.7);opacity:1}84%,100%{opacity:0}}
@keyframes tp-menu{0%,15%{opacity:0}18%,34%{opacity:1}37%,100%{opacity:0}}
@keyframes tp-feuille-r{0%,34%{transform:translateY(100%)}38%,68%{transform:none}71%,100%{transform:translateY(100%)}}
@keyframes tp-vise-r{0%,50%{background:#f1eee7}54%,66%{background:#ffc98a}70%,100%{background:#f1eee7}}
@keyframes tp-ajout-r{0%,68%{opacity:0}70%,85%{opacity:1}87%,100%{opacity:0}}
@keyframes tp-accueil-r{0%,86%{opacity:0}88%,100%{opacity:1}}
@keyframes tp-doigt-r{0%,6%{left:50%;top:92%;transform:scale(1);opacity:1}12%{transform:scale(.7)}16%{left:50%;top:92%;transform:scale(1)}26%{left:50%;top:80%}32%{left:50%;top:80%;transform:scale(.7)}36%{left:50%;top:80%;transform:scale(1)}52%,62%{left:50%;top:60%;transform:scale(1)}66%{left:50%;top:60%;transform:scale(.7)}70%,80%{left:88%;top:7%;transform:scale(1)}83%{left:88%;top:7%;transform:scale(.7);opacity:1}87%,100%{opacity:0}}
.legendes-film{position:relative;height:30px;text-align:center;font-family:var(--main);font-weight:700;font-size:22px;color:var(--laiton)}
.legendes-film span{position:absolute;inset:0;opacity:0;animation:tp-l 11s infinite}
.legendes-film .l1{animation-name:tp-l1}.legendes-film .l2{animation-name:tp-l2}.legendes-film .l3{animation-name:tp-l3}.legendes-film .l4{animation-name:tp-l4}
.legendes-film.recent .l0{animation:tp-r0 13s infinite}.legendes-film.recent .l1{animation:tp-r1 13s infinite}.legendes-film.recent .l2{animation:tp-r2 13s infinite}.legendes-film.recent .l3{animation:tp-r3 13s infinite}.legendes-film.recent .l4{animation:tp-r4 13s infinite}
@keyframes tp-l1{0%,26%{opacity:1}28%,100%{opacity:0}}
@keyframes tp-l2{0%,27%{opacity:0}29%,61%{opacity:1}63%,100%{opacity:0}}
@keyframes tp-l3{0%,62%{opacity:0}64%,83%{opacity:1}85%,100%{opacity:0}}
@keyframes tp-l4{0%,84%{opacity:0}86%,100%{opacity:1}}
@keyframes tp-r0{0%,16%{opacity:1}18%,100%{opacity:0}}
@keyframes tp-r1{0%,17%{opacity:0}19%,36%{opacity:1}38%,100%{opacity:0}}
@keyframes tp-r2{0%,37%{opacity:0}39%,67%{opacity:1}69%,100%{opacity:0}}
@keyframes tp-r3{0%,68%{opacity:0}70%,86%{opacity:1}88%,100%{opacity:0}}
@keyframes tp-r4{0%,87%{opacity:0}89%,100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.film-tel,.legendes-film{display:none}.etapes-guide.sans-film{display:flex}}
.titre-t{font-family:var(--main);font-weight:700;font-size:34px;line-height:1.1;text-align:center;margin:14px 0 10px;color:var(--texte)}
.tuiles-t{flex:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;align-content:center}
.tuile-t{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:250px;padding:16px 10px;text-align:center;color:var(--texte);background:var(--surface);border:3px solid var(--t1);border-radius:18px}
.tuile-t.b,.fiche-t.b{--t1:var(--b1)}.tuile-t.o,.fiche-t.o{--t1:var(--o1)}.tuile-t.v,.fiche-t.v{--t1:var(--v1)}
.serrees .tuile-t{min-height:190px;padding:10px 8px}
.serrees .ico-t{width:76px;height:76px}
.serrees .tuile-t b{font-size:23px}
.tuile-t:active{transform:scale(.98)}
.ico-t{display:block;width:104px;height:104px;--fin:inline;--simple:none;--pe:1.15}.ico-t svg{display:block;width:100%;height:100%}
.tuile-t b{font-family:var(--main);font-weight:700;font-size:27px;line-height:1.1;margin-top:6px}
.tuile-t span:not(.ico-t){font-size:16px;color:var(--texte2)}
.tuile-t em,.fiche-t em{font-family:var(--main);font-style:normal;font-weight:700;font-size:20px;color:var(--laiton)}
.tuile-t.b em,.fiche-t.b em{color:var(--bleu)}
.tuile-t.v em,.fiche-t.v em{color:var(--vert-clair)}
.retour-t{align-self:flex-start;min-height:44px;font-family:var(--main);font-weight:700;font-size:21px;color:var(--texte);background:none;border:0;padding:6px 0}
.fiche-t{text-align:center;padding:4px 8px 12px;color:var(--texte)}
.fiche-t .ico-t{margin:0 auto 6px}
.fiche-t h2{font-family:var(--main);font-weight:700;font-size:36px;line-height:1.05;margin:0}
.fiche-t p{margin:4px 0;font-size:17px;color:var(--texte2)}
.fiche-t .quand{font-size:20px;font-weight:600;color:var(--texte)}
.geant-t{min-height:76px;font-size:32px;margin-top:6px;flex:none}
.f-tournoi .btn-trait{flex:none;min-height:54px;font-size:21px}
.orga-t{margin:14px 0 8px;flex:none}
.orga-t summary{min-height:44px;display:flex;align-items:center;justify-content:center;color:var(--texte2);font-size:15px;cursor:pointer}
.aplat{position:relative;isolation:isolate;display:block;text-align:left;width:100%;padding:9px 42px 10px 13px;margin-top:8px;color:#1a1816;flex:none}
.aplat::before{background:linear-gradient(170deg,var(--t0),color-mix(in srgb,var(--t0) 72%,var(--t1)))}
.aplat.b{--t0:var(--b0);--t1:var(--b1)}.aplat.o{--t0:var(--o0);--t1:var(--o1)}
.aplat b{display:block;font-size:17px;font-weight:600}
.aplat span{display:block;font-size:13.5px;color:#3d3833}
.aplat .etat{display:flex;align-items:center;gap:5px;font-weight:600;font-size:12.5px;color:#1a1816;margin-top:2px}
.etat i{width:11px;height:11px;border:1.6px solid currentColor;border-radius:50%;display:inline-block}
.etat i.demi{background:linear-gradient(90deg,transparent 50%,currentColor 50%)}
.etat i.plein{background:currentColor}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 12px;flex:none}
.actions .btn-feutre{grid-column:1/-1;margin:0;min-height:58px;font-size:25px}
.actions .btn-trait{margin:0;min-height:50px;font-size:19px}
.actions .btn-trait:last-child:nth-child(even){grid-column:1/-1}

/* ------------------------------ choisir un jeu : la roue et les familles */
.ecran-jeux{position:fixed;inset:0;overflow:hidden}
.roue{position:absolute;inset:0;overflow:hidden}
.roue-cible{position:absolute;left:calc(-1*min(72vw,330px));top:50%;width:min(112vw,500px);aspect-ratio:1;transform:translateY(-50%);z-index:0}
.roue-cible svg{width:100%;height:100%;overflow:visible}
.defile{position:absolute;inset:0;overflow-y:auto;scroll-snap-type:y mandatory;z-index:2;scrollbar-width:none;padding:calc(50dvh - 42px) 0}
.defile::-webkit-scrollbar{display:none}
.item{height:84px;scroll-snap-align:center;display:flex;align-items:center;gap:10px;width:calc(100% - 128px);text-align:left;padding-right:12px;transform-origin:left center;will-change:transform}
.item .d{width:60px;height:60px;flex:none}
.item .nom{font-family:var(--main);font-weight:700;font-size:23px;line-height:1.02;min-width:0}
.item:not(.choisi){opacity:.5}
.haut-jeux{position:absolute;left:0;right:0;top:0;z-index:4;background:var(--fond)}
.familles{display:grid;grid-template-columns:repeat(4,1fr)}
.familles button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-height:96px;padding:4px 1px 8px;font-family:var(--main);font-weight:700;font-size:clamp(13px,4vw,16px);line-height:1.05;color:var(--texte);border-bottom:6px solid var(--f);transition:background .25s,color .25s;min-width:0}
.familles button+button{border-left:1px solid var(--crayon)}
.familles .em{display:block;width:58px;height:54px;flex:none}
.familles button.on{background:var(--f);color:#1a1009}
.choix-jeu{position:absolute;left:0;right:0;bottom:0;z-index:4;background:var(--fond);padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px));border-top:1.4px solid var(--trait);box-shadow:0 -12px 22px -12px rgba(0,0,0,.5)}
.choix-jeu h2{font-size:27px;line-height:1.05;margin:0}
.choix-jeu p{font-size:15.5px;line-height:1.3;margin-top:2px}
.choix-jeu small{display:block;font-family:var(--main);font-size:16px;color:var(--annot);margin:2px 0 4px}

/* ----------------------------- préparer la partie : la fiche d'un jeu */
.prep{height:100dvh;overflow:hidden;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0)}
.prep .tete{position:sticky;top:0}
.prep-corps{flex:1;min-height:0;display:flex;flex-direction:column;gap:9px;padding-top:9px;padding-bottom:calc(96px + env(safe-area-inset-bottom,0px));width:100%;max-width:720px;margin-inline:auto}
.bloc{background:var(--fond);padding:9px 16px 10px;flex:none}
.bloc h2{font-size:23px;line-height:1.1;margin-bottom:4px}
.prep-jeu{display:flex;gap:10px;align-items:center}
.prep-jeu .d{width:62px;height:62px;flex:none}
.prep-jeu h2{font-size:29px;margin:0}
.prep-jeu p{font-size:14.5px;line-height:1.3}
.prep-regle{font-size:14.5px;line-height:1.35;color:var(--texte2);margin-top:8px}
.modes{display:grid;grid-template-columns:repeat(4,1fr);margin:0 -16px -10px;border-top:1px solid var(--crayon)}
.mode{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-height:92px;min-width:0;padding:4px 1px 8px;font-family:var(--main);font-weight:700;font-size:16.5px;line-height:1.05;color:var(--texte);border-bottom:6px solid transparent;transition:background .2s}
.mode+.mode{border-left:1px solid var(--crayon)}
.mode .picto{width:60px;height:60px}
.mode .silhouettes{display:flex;width:60px;height:60px}
.mode.on{background:var(--o1);color:#1a1009;border-bottom-color:var(--o3)}
.mode:disabled{opacity:.42;background-image:repeating-linear-gradient(-38deg,rgba(128,128,128,.28) 0 1px,transparent 1px 6px)}
.pas-ici{font-size:15.5px;margin-top:0;padding-top:13px;min-height:16px}
.joueur{border-bottom:1px solid var(--crayon);padding:4px 0}
.joueur-ligne{display:flex;align-items:center;gap:8px;min-height:46px;font-family:var(--main);font-weight:700;font-size:23px}
.joueur-ligne input{flex:1;min-width:0;min-height:44px;background:none;border:0;border-bottom:1px dashed var(--crayon);color:var(--texte);font:inherit;padding:0 2px}
.joueur-ligne input::placeholder{color:var(--texte2);opacity:.8;font-weight:400}
.joueur-ligne .nom-fixe{flex:1;min-width:0}
.joueur small{font:500 13px var(--net);color:var(--texte2)}
.joueur-ligne button{flex:none;min-width:44px;min-height:44px;font:500 18px var(--net);color:var(--texte2)}
.joueur .choix{justify-content:flex-start}
.plus{display:flex;align-items:center;min-height:46px;font-family:var(--main);font-weight:700;font-size:20px;color:var(--annot);width:100%}
.plus.moins{color:var(--texte2);font-size:17px;min-height:40px}
.ligne-reglages{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left}
.ligne-reglages span{font-size:15px;line-height:1.3}
.ligne-reglages b{font-family:var(--main);font-size:19px;color:var(--annot);white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
.reglage{padding:6px 0;border-top:1px solid var(--crayon)}
.reglage>span{display:block;font-size:13.5px;font-weight:600;color:var(--texte2);margin-bottom:1px}
.reglage .choix{justify-content:flex-start}
.prep-pied{position:fixed;left:0;right:0;bottom:0;z-index:10;background:var(--fond);padding:6px 16px calc(12px + env(safe-area-inset-bottom,0px));border-top:1.4px solid var(--trait)}
.prep-pied .gros{margin:0 auto;max-width:688px}
/* téléphone couché : plus de place pour neuf tuiles, l'écran défile plutôt que de les écraser */
@media (max-height:520px){.prep{height:auto;min-height:100dvh;overflow:visible}.tuiles-r{grid-auto-rows:118px;flex:none}}

/* classement (maquettes/01-classement.html) */
.rang{display:grid;grid-template-columns:34px 1fr auto;gap:.6rem;align-items:center;
  padding:.5rem .2rem;border-bottom:1px solid var(--crayon);width:100%;text-align:left}
.rang:last-child{border-bottom:none}
.pos{font-size:1.05rem;font-weight:800;text-align:center;color:var(--creme-dim)}
.qui b{font-size:.98rem;font-weight:700}
.qui small{display:block;font-size:.72rem;line-height:1.3}
.pts{text-align:right}
.pts b{font-size:1.1rem;font-weight:800;color:var(--laiton)}
.pts small{display:block;font-size:.7rem}
details{border:1px solid var(--sisal-3);border-radius:4px;padding:.5rem .65rem;margin-top:.5rem}
summary{list-style:none}
summary::-webkit-details-marker{display:none}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin:.5rem 0}
.stat{background:var(--sisal-3);border-radius:4px;padding:.5rem .3rem;text-align:center}
.stat b{display:block;font-size:1.2rem;font-weight:800;line-height:1.1}
.stat small{font-size:.64rem}
.centre{text-align:center;padding:.5rem 0}

.badge-etat{position:fixed;right:8px;top:8px;z-index:50;font-size:.66rem;font-weight:700;
  padding:.2rem .5rem;border-radius:99px;background:var(--sisal-3);color:var(--creme-dim)}
.badge-etat.ok{background:rgba(47,125,79,.25);color:var(--vert-clair)}
.badge-etat.ko{background:rgba(179,40,45,.25);color:var(--rouge-clair)}

/* écran d'organisation de tournoi (maquettes/04-organisation-tournoi.html) :
   classes propres à cet écran, absentes plus haut. */
.fil{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem}
.fil .ret{display:flex;align-items:center;gap:.3rem;background:var(--sisal-3);
  border-radius:4px;padding:.35rem .6rem;font-size:.8rem;font-weight:700;color:var(--creme);flex:none}
.fil .ou{font-size:.72rem;color:var(--creme-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prix{display:flex;align-items:center;gap:.35rem}
.prix input{width:96px;background:var(--sisal);border:1px solid var(--sisal-3);border-radius:3px;
  color:var(--creme);font-family:inherit;font-size:1rem;font-weight:800;text-align:right;padding:.35rem .4rem}
.prix span{font-size:.8rem;color:var(--creme-dim)}
.onglets{display:flex;gap:.3rem;margin-top:.55rem}
.onglets button{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:60px;padding:4px 1px;font-size:clamp(12.5px,3.4vw,16px);line-height:1.05}
.onglets .picto{width:26px;height:26px;margin:0}
.onglets button.on::after{top:4%;bottom:4%;border-radius:14px}
.ligne{display:flex;align-items:center;gap:.5rem;padding:.5rem 0;border-bottom:1px solid var(--crayon)}
.ligne:last-child{border-bottom:none}
.ligne .co{flex:1;min-width:0}
.ligne .co b{font-size:.9rem;font-weight:650;display:block}
.ligne .co small{font-size:.72rem}
.pas{display:flex;align-items:center;gap:.35rem;flex:none}
.pas button{width:34px;height:34px;border-radius:3px;background:var(--sisal-3);
  font-size:1.15rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.pas button[disabled]{opacity:.3}
.pas .val{min-width:38px;text-align:center;font-size:1.15rem;font-weight:800;color:var(--laiton)}
.phase{border:1px solid var(--sisal-3);border-radius:4px;margin-bottom:.5rem;overflow:hidden}
.phase>.tt{display:flex;justify-content:space-between;align-items:center;gap:.5rem;
  padding:.55rem .65rem;background:var(--sisal-3);font-size:.9rem;font-weight:750}
.phase>.cn{padding:.55rem .65rem}
.manche{display:flex;align-items:center;gap:.5rem;padding:.4rem .5rem;background:var(--sisal);
  border:1px solid var(--sisal-3);border-radius:3px;margin-bottom:.35rem}
.manche .no{width:22px;height:22px;border-radius:3px;background:var(--action);color:var(--sur-action);
  display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;flex:none}
.manche .co{flex:1;min-width:0;text-align:left}
.manche .co b{font-size:.86rem;display:block}
.manche .co small{font-size:.7rem}
.manche .x{color:var(--creme-dim);font-size:1rem;padding:0 .3rem}
.rot{display:flex;gap:.35rem;overflow-x:auto;padding-bottom:.25rem;scrollbar-width:none}
.rot::-webkit-scrollbar{display:none}
.rot .m{flex:none;background:var(--sisal);border:1px solid var(--sisal-3);border-radius:3px;
  padding:.4rem .5rem .35rem;font-size:.75rem;text-align:center;min-width:96px;position:relative}
.rot .m b{display:block;font-size:.8rem;font-weight:750}
.rot .m small{font-size:.65rem;color:var(--creme-dim)}
.rot .m .x{position:absolute;top:0;right:3px;font-size:.8rem;color:var(--creme-dim)}
.rot .add{flex:none;border:1px dashed var(--sisal-3);border-radius:3px;color:var(--creme-dim);
  min-width:64px;font-size:.75rem;display:flex;flex-direction:column;justify-content:center}
.apercu{background:var(--sisal);border-left:3px solid var(--laiton);border-radius:0 3px 3px 0;
  padding:.5rem .6rem;font-size:.8rem;color:var(--creme-dim);margin-top:.45rem}
.apercu b{color:var(--creme)}
.voile{position:fixed;inset:0;background:rgba(10,8,6,.78);z-index:60;display:flex;
  align-items:flex-end;justify-content:center}
.modal{background:var(--sisal-2);border-top:2px solid var(--laiton);border-radius:8px 8px 0 0;
  width:100%;max-width:560px;padding:.8rem .8rem 1.6rem;max-height:88dvh;overflow:auto}
.mtete{display:flex;align-items:center;gap:.5rem;padding-bottom:.5rem;border-bottom:1px solid var(--sisal-3)}
.mtete .ret{background:var(--sisal-3);border-radius:4px;padding:.4rem .7rem;
  font-size:.82rem;font-weight:700;color:var(--creme);flex:none}
.mtete .mou{font-size:.75rem;color:var(--creme-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mj{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin-top:.6rem}
.mj button{background:var(--sisal-3);border-radius:4px;padding:.6rem .5rem;text-align:left}
.mj button b{display:block;font-size:.88rem;font-weight:750}
.mj button small{font-size:.7rem}

/* banderole de victoire par Shanghai, affichée dans vueFin() — un pouls
   discret pour marquer le coup, jamais vu ailleurs dans l'appli. */
.sh-victoire{background:linear-gradient(135deg,var(--teinte-action),var(--teinte-action));
  border:1px solid var(--laiton);border-radius:6px;padding:.7rem .8rem;margin-bottom:.6rem;
  font-size:.92rem;font-weight:650;text-align:center;color:var(--creme);
  animation:sh-pouls 1.1s ease-in-out 2}
.sh-victoire b{color:var(--laiton)}
@keyframes sh-pouls{0%,100%{box-shadow:0 0 0 0 var(--teinte-action)}50%{box-shadow:0 0 0 8px var(--teinte-action)}}

/* banderole de victoire mort-subite, affichée dans vueFin() — pouls rouge
   plutôt que le laiton du Shanghai, pour marquer un coup plus brutal. */
.cb-victoire{background:linear-gradient(135deg,rgba(179,40,45,.28),rgba(179,40,45,.1));
  border:1px solid var(--rouge);border-radius:6px;padding:.7rem .8rem;margin-bottom:.6rem;
  font-size:.92rem;font-weight:650;text-align:center;color:var(--creme);
  animation:cb-victoire-pouls 1.1s ease-in-out 2}
.cb-victoire b{color:var(--rouge-clair)}
@keyframes cb-victoire-pouls{0%,100%{box-shadow:0 0 0 0 rgba(179,40,45,.45)}50%{box-shadow:0 0 0 8px rgba(179,40,45,0)}}

/* ------------------------------------------------- l'écran de marque
   Les scores tiennent en haut, tout le reste est aux touches. Plein écran, sans
   barre de navigation, sans défilement possible. */
.barre-jeu{position:fixed;left:0;right:0;top:0;z-index:40;display:flex;align-items:center;gap:6px;min-height:42px;padding:env(safe-area-inset-top,0) 10px 0;background:var(--fond);font-size:14px}
.barre-jeu .retour{font-size:19px;min-height:42px;margin:0;flex:none}
.barre-jeu .barre-info{flex:1;min-width:0;text-align:center;font-family:var(--main);font-size:15px;color:var(--texte2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barre-jeu .lien{min-height:42px;font-size:17px;flex:none;color:var(--texte2)}
.barre-jeu .danger{color:var(--orange)}
.barre-jeu.avec-chat{padding-right:64px}
.barre-jeu.avec-chat .barre-info{display:none}
.barre-jeu.avec-chat .retour{margin-right:auto}
.ecran-marque{position:fixed;inset:0;display:flex;flex-direction:column;overflow:hidden;padding:calc(42px + env(safe-area-inset-top,0px)) 6px 0}
/* écran de marque : les scores tiennent en haut, tout le reste est aux touches */
/* Une hauteur minimale, pas une hauteur : un nom, le score et un conseil dépassent 82px, et l'ardoise recouvrait alors la mission. */
.equipes{display:grid;grid-template-columns:1fr clamp(70px,10.5vh,94px) 1fr;gap:4px;align-items:stretch;min-height:clamp(82px,12.4vh,160px);flex:none}
.eq{position:relative;min-width:0;padding:4px 8px;border-radius:2px 16px 3px 14px;text-align:center;display:flex;flex-direction:column;justify-content:center;transition:background .3s}
.eq.actif.b{background:var(--actif-b)}.eq.actif.o{background:var(--actif-o)}
.eq b{display:block;font-size:13.5px;font-weight:600;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eq .reste{font:600 clamp(42px,7vh,92px)/1 var(--chiffre);font-variant-numeric:tabular-nums;letter-spacing:-.02em;display:block}
.eq:not(.actif) .reste{color:var(--texte2)}
.eq .conseil{font-size:15px;min-height:16px;line-height:1.15}
.mini{width:100%;height:100%;overflow:visible;align-self:center}
.volee{display:grid;grid-template-columns:repeat(3,1fr) 60px;gap:8px;padding:3px 8px 4px;margin:0 -6px;background:var(--fond);border-top:1.4px solid var(--trait);flex:none}
.fl{position:relative;height:44px;display:flex;align-items:center;justify-content:center;gap:6px;border-bottom:2px solid var(--trait);font-family:var(--main);font-weight:700;font-size:25px;width:100%}
.fl.vide{border-bottom:1.2px solid var(--crayon);color:var(--texte2)}
.fl i{font:500 15px var(--net);color:var(--texte2)}
.tot{font:600 28px/46px var(--chiffre);text-align:right;padding-right:4px}
/* la feuille de marque : pas de boîtes, un quadrillage fin, des chiffres au feutre seuls sur le fond, un trait de couleur dessous.
   Toute la case reste sensible au doigt. Quand on touche, le trait monte en vague et le chiffre s'entoure au crayon. */
.pave{flex:1;min-height:0;display:grid;grid-template-rows:.8fr 4fr .8fr;background:var(--fond);margin:0 -6px;padding:0 6px calc(4px + env(safe-area-inset-bottom,0));overflow:hidden}
.pave button{position:relative;isolation:isolate;background:none;border-radius:0;font-family:var(--main);font-weight:700;color:var(--texte);min-width:0}
.pave button:disabled{color:var(--texte2);opacity:.55}
.mults{display:grid;grid-template-columns:repeat(3,1fr);min-height:0}
.bas{display:grid;grid-template-columns:repeat(var(--n,3),1fr);min-height:0}
.mults button{font-size:26px}
.mults button.on::after{content:"";position:absolute;z-index:-1;left:12%;right:12%;top:26%;bottom:22%;border-radius:999px;background:var(--marque);transform:rotate(-1.2deg);animation:ruban .24s ease-out both}
.mults [data-m="1"]{--marque:var(--crayon)}.mults [data-m="2"]{--marque:var(--b1)}.mults [data-m="3"]{--marque:var(--o1)}
.nums{position:relative;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(4,1fr);min-height:0;border-top:1.4px solid var(--trait);border-bottom:1.4px solid var(--trait)}
.nums button{--g:var(--t);font-size:clamp(38px,5.8vh,52px);line-height:1;border-left:1px solid var(--crayon);border-bottom:1px solid var(--crayon)}
.nums button:nth-child(5n+1){border-left:0}
.nums button:nth-last-child(-n+5){border-bottom:0}
.nums button::after{content:"";position:absolute;z-index:-1;left:27%;right:27%;bottom:13%;height:6px;border-radius:99px;background:var(--g);opacity:.9}
/* Double ou Triple actif : toute la feuille se lave de la couleur, et chaque touche affiche sa lettre */
.pave[data-mult="2"] .nums button{--g:var(--b1);--fk:var(--b1);--fkt:#0e0c0a;font-size:clamp(34px,5vh,46px)}
.pave[data-mult="3"] .nums button{--g:var(--o1);--fk:var(--o1);--fkt:#0e0c0a;font-size:clamp(34px,5vh,46px)}
.pave[data-mult="2"] .nums button::before{content:"D";font-size:.52em}
.pave[data-mult="3"] .nums button::before{content:"T";font-size:.52em}
.nums button.frappe::after{animation:vague .5s ease-out both}
@keyframes vague{0%{left:27%;right:27%;bottom:13%;height:6px;opacity:.9}32%{left:0;right:0;bottom:0;height:100%;opacity:.45;border-radius:0}100%{left:27%;right:27%;bottom:13%;height:6px;opacity:.9}}
@keyframes pop{0%{transform:scale(.92)}45%{transform:scale(1.14)}100%{transform:none}}
.pave .entoure{left:9%;top:10%;width:82%;height:80%;z-index:1}
.pave .entoure path{stroke:var(--t);stroke-width:2.6;stroke-dasharray:1;animation:passe .26s ease-out both}
.bas button{font-size:clamp(19px,2.9vh,25px)}
.bas .annule{color:var(--orange)}
.bas button,.mults button{display:flex;align-items:center;justify-content:center;line-height:1}
.bas button{flex-direction:column;gap:1px}
.bas .picto{width:clamp(22px,3.6vh,34px);height:clamp(22px,3.6vh,34px)}
.bas .avec-tg .picto{display:none}
.pave2.cricket .bas button{flex-direction:row;gap:4px}
.mults button{gap:4px}
.mults .picto{width:clamp(20px,3.3vh,32px);height:clamp(20px,3.3vh,32px)}
.fl i .picto{width:13px;height:13px}
.barre-jeu .picto{width:20px;height:20px}
.barre-jeu .lien{gap:.2em}
.conseil .picto{width:13px;height:13px;vertical-align:-2px;margin-left:1px}
.bas .suivant{font-size:clamp(16px,2.3vh,20px);line-height:1.05}
.bas button:active,.mults button:active{background:var(--actif-o)}
/* le pavé suit le jeu : la couleur est celle de l'équipe qui lance, et la vague passe quand la main change */
[data-equipe="b"]{--t:var(--b1);--actif-t:var(--actif-b)}[data-equipe="o"]{--t:var(--o1);--actif-t:var(--actif-o)}
[data-equipe="c"]{--t:var(--c0);--actif-t:var(--actif-c)}[data-equipe="g"]{--t:var(--g2);--actif-t:var(--actif-g)}
.main-passe .nums button::after{animation:vague .55s ease-out both;animation-delay:calc(var(--c,0)*16ms)}
/* chaque touche annonce son coup : gagne, vise, bon, piège, bombe. La forme dit la même chose que la couleur. */
.st{position:absolute;right:3px;top:3px;width:clamp(22px,3.4vh,30px);height:clamp(22px,3.4vh,30px);pointer-events:none;overflow:visible}
.tg{position:absolute;left:0;right:0;bottom:8%;font:700 clamp(11.5px,1.65vh,13.5px) var(--net);line-height:1;color:var(--texte2);pointer-events:none;white-space:nowrap}
/* la case prend la forme de son analyse ; elle ne change jamais de place, le pouce garde ses repères */
.nums button{transition:font-size .2s}
.nums button.avec-tg::after{opacity:0}
.nums button.k-gagne::after,.nums button.k-vise::after,.nums button.k-bon::after,.nums button.k-piege::after,.pave button.creve-ici::after{content:"";position:absolute;z-index:-1;opacity:1;width:auto;height:auto;left:0;right:0;top:0;bottom:0;margin:auto}
/* gagne : un cadre à damier d'arrivée, la plus grosse case de l'écran */
.pave button.k-gagne{z-index:3;color:#1a1009;background:repeating-conic-gradient(#1a1816 0 25%,#fff 0 50%) 0 0/16px 16px}
.nums button.k-gagne{font-size:clamp(42px,6.6vh,58px)}
.nums button.k-gagne::after{left:7px;right:7px;top:7px;bottom:7px;border-radius:6px;background:var(--o1);animation:appel .7s ease-in-out infinite}
.pave .k-gagne .tg{color:#1a1009;bottom:11%}
/* vise : la case devient une cible, le chiffre dans le mille */
.pave button.k-vise{color:#1a1009;z-index:2}
.nums button.k-vise::after{width:100%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,var(--k0) 0 56%,var(--t) 56% 68%,var(--k0) 68% 80%,var(--t) 80% 100%);animation:appel 1.2s ease-in-out infinite}
.pave .k-vise .tg,.pave .k-bon .tg{left:10%;right:10%;bottom:3%;padding:2px 0;border-radius:6px;background:var(--k0);color:#1a1009}
/* bon : une étoile dorée */
.pave button.k-bon{color:#1a1009}
.nums button.k-bon::after{background:var(--o0);clip-path:polygon(50% 0,63% 32%,98% 35%,71% 57%,80% 92%,50% 73%,20% 92%,29% 57%,2% 35%,37% 32%)}
/* piège : une peau de banane, la case a glissé de travers */
.pave button.k-piege{color:#1a1009;z-index:1;animation:glisse 1.8s ease-in-out infinite}
.nums button.k-piege::after{left:3%;right:3%;top:7%;bottom:7%;background:var(--o0);border-radius:70% 24% 62% 30%/44% 62% 36% 58%;box-shadow:inset -6px -5px 0 var(--o2)}
.pave .k-piege .tg{color:#1a1009;bottom:18%}
@keyframes glisse{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(-2deg) translateX(2px)}}
/* bombe : la case se ratatine en bombe noire, mèche allumée */
.pave button.creve-ici{color:var(--k2);font-size:clamp(20px,3.2vh,28px);background:none}
.pave button.creve-ici::after{width:clamp(44px,70%,60px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 34% 30%,var(--s0),var(--s3) 60%);box-shadow:0 0 0 1.5px var(--k3)}
.pave button.creve-ici .st{right:9%;top:2%}
/* Double ou Triple actif : la forme de l'analyse passe avant le lavis de la feuille */
.pave[data-mult] .nums button.k-gagne{background:repeating-conic-gradient(#1a1816 0 25%,#fff 0 50%) 0 0/16px 16px}
.pave[data-mult] .nums button.creve-ici,.pave[data-mult] .nums button.k-piege,.pave[data-mult] .nums button.k-vise,.pave[data-mult] .nums button.k-bon{background:none}
/* la Bulle n'a pas de case carrée : mêmes messages, en bandeau */
.bas button.k-vise,.bas button.k-bon,.bas button.k-piege{border-radius:14px}
.bas button.k-vise{background:var(--t)}.bas button.k-bon,.bas button.k-piege{background:var(--o0)}
.pave .bas button .tg{bottom:4%;left:0;right:0;background:none;color:#1a1009}
.pave .bas button:not(.k-vise):not(.k-bon):not(.k-piege):not(.k-gagne) .tg{color:var(--texte2)}
.bas button.k-gagne::after{content:"";position:absolute;z-index:-1;inset:6px;border-radius:6px;background:var(--o1)}
/* loin de la sortie : la case se remplit comme un thermomètre, les petits numéros sont gelés */
.nums button.k-chaleur::after{left:0;right:0;bottom:0;width:auto;height:var(--h);border-radius:40% 60% 0 0/12px 16px 0 0;background:var(--c-ch);opacity:.6}
.nums button.k-froid{color:var(--b0);font-weight:400}
.nums button.k-froid::after{left:0;right:0;top:0;bottom:0;width:auto;height:auto;border-radius:0;opacity:.22;background:repeating-linear-gradient(60deg,var(--b0) 0 2px,transparent 2px 9px),repeating-linear-gradient(-60deg,var(--b0) 0 2px,transparent 2px 9px)}
.k-chaud .tg{color:var(--texte)}
@keyframes appel{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes clignote{50%{opacity:.15}}
.etincelle{animation:clignote .5s steps(2) infinite}
.mults button.appelle::after{content:"";position:absolute;z-index:-1;left:12%;right:12%;top:26%;bottom:22%;border-radius:999px;background:var(--marque);opacity:.55;animation:appel 1s ease-in-out infinite}
/* la mission du moment, et la règle du score entre le départ et zéro */
.mission{display:flex;align-items:center;justify-content:center;gap:7px;min-height:clamp(36px,5vh,42px);margin:0 -6px;padding:3px 10px;background:var(--fond);border-top:1.4px solid var(--trait);font-family:var(--main);font-weight:700;font-size:clamp(17px,2.5vh,21px);line-height:1.05;text-align:center;color:var(--texte);flex:none;transition:background .25s,color .25s}
.mission .st{position:static;flex:none}
.mission.fin-proche{background:var(--t);color:#1a1009}
.mission.danger{background:var(--orange);color:#1a1009}
.mission.reaction{color:var(--annot)}
.mission.reaction.fin-proche,.mission.reaction.danger{color:#1a1009}
.regle{position:relative;height:15px;margin:0 -6px;background:var(--fond);flex:none}
.regle::before{content:"";position:absolute;left:12px;right:12px;top:7px;height:2px;background:var(--crayon)}
.regle .zone{position:absolute;right:12px;top:4px;height:8px;background:var(--actif-o);border-radius:2px}
.regle .ici{position:absolute;top:2px;width:11px;height:11px;margin-left:-5px;border-radius:50%;box-shadow:0 0 0 1.5px var(--fond);transition:left .6s cubic-bezier(.4,1.4,.5,1)}
/* le plan de la volée : les cases vides annoncent les fléchettes à venir */
.fl.plan{border-bottom:2px dashed var(--t);color:var(--t)}
#creve::before{content:"";position:absolute;left:50%;top:50%;width:230px;height:150px;transform:translate(-50%,-50%);z-index:-1;background:var(--o1);clip-path:polygon(50% 0,60% 24%,84% 6%,78% 34%,100% 40%,80% 56%,96% 84%,68% 72%,58% 100%,46% 76%,20% 96%,26% 68%,0 62%,22% 46%,6% 18%,34% 26%)}
/* cricket : le tableau de marque devient le pavé, une ligne par numéro */
.pave2{flex:1;min-height:0;display:grid;background:var(--fond);margin:0 -6px;padding:0 6px calc(4px + env(safe-area-inset-bottom,0));overflow:hidden}
.pave2.cricket{grid-template-rows:.72fr repeat(7,1fr) .72fr}
.pave2 button{position:relative;isolation:isolate;font-family:var(--main);font-weight:700;color:var(--texte);min-width:0}
.cr{width:100%;display:grid;grid-template-columns:var(--colonnes,1fr 1.7fr 1fr);align-items:center;justify-items:center;min-height:0;border-top:1px solid var(--crayon);transition:background .25s}
.cr b{position:relative;align-self:stretch;justify-self:stretch;font-size:clamp(26px,4.3vh,36px);line-height:1;display:flex;flex-direction:column;align-items:center;justify-content:center}
.cr b .st{right:6px;top:50%;transform:translateY(-50%)}
.cr.k-vise b{background:radial-gradient(ellipse closest-side,var(--k0) 0 64%,var(--t) 66% 100%);color:#1a1009;font-size:clamp(34px,6vh,50px)}
.cr.k-danger:not(.k-vise) b{background:repeating-linear-gradient(-45deg,var(--o1) 0 9px,#1a1816 9px 18px) top/100% 6px no-repeat,repeating-linear-gradient(-45deg,var(--o1) 0 9px,#1a1816 9px 18px) bottom/100% 6px no-repeat}
.cr.marque:not(.k-vise) b{background:var(--actif-o)}
.cr.ferme b{font-size:clamp(16px,2.4vh,20px);flex-direction:row;gap:8px}
.cr.ferme em{color:var(--texte2);margin:0}
.pave2.cricket{transition:grid-template-rows .35s ease}
.cr.k-vise em{color:#1a1009}
.cr.k-gagne b{background:linear-gradient(var(--o1),var(--o1)) center/calc(100% - 14px) calc(100% - 14px) no-repeat,repeating-conic-gradient(#1a1816 0 25%,#fff 0 50%) 0 0/14px 14px;color:#1a1009;font-size:clamp(34px,6vh,50px)}
.cr.k-gagne em{color:#1a1009}
.cr.k-danger em{color:var(--orange)}
.cr svg .gh{stroke-dasharray:.05 .07;opacity:.8;animation:none}
.cr.inutile{background-image:repeating-linear-gradient(-38deg,rgba(128,128,128,.28) 0 1px,transparent 1px 7px)}
.cr em{font:700 13px var(--net);font-style:normal;color:var(--t);line-height:1.1;margin-top:1px}
[data-papier="planche"] .cr em{color:var(--laiton)}
.cr svg{width:clamp(30px,5vh,42px);height:clamp(30px,5vh,42px);overflow:visible}
.cr svg path,.cr svg circle{fill:none;stroke-width:9;stroke-linecap:round;stroke-dasharray:1;animation:passe .25s ease-out both}
.cr .trace-b path,.cr .trace-b circle{stroke:var(--b1)}.cr .trace-o path,.cr .trace-o circle{stroke:var(--o1)}
.cr .trace-c path,.cr .trace-c circle{stroke:var(--c0)}.cr .trace-g path,.cr .trace-g circle{stroke:var(--g2)}
.cr .cote-actif{align-self:stretch;justify-self:stretch;display:grid;place-items:center;background:var(--actif-t)}
.cr .cote{align-self:stretch;justify-self:stretch;display:grid;place-items:center}
.cr.ferme{color:var(--texte2)}
.cr.ferme b{color:color-mix(in srgb,var(--texte2) 55%,transparent)}
.cr.ferme svg{opacity:.4}
.cr.marque em{color:var(--orange)}
.cr{overflow:hidden}
/* petit écran : seules les lignes qui comptent gardent leur phrase */
@media (max-height:700px){.cr:not(.k-vise):not(.k-gagne) em{display:none}.cr b{font-size:24px}}
.cr.k-vise b em,.cr.k-gagne b em{color:#1a1009}
.cr.frappe b{animation:pop .3s cubic-bezier(.3,1.6,.5,1)}
.pave2[data-mult="2"] .cr:not(.ferme) b,.pave2[data-mult="3"] .cr:not(.ferme) b{color:var(--marque-mult)}
.pave2[data-mult="2"]{--marque-mult:var(--b1)}.pave2[data-mult="3"]{--marque-mult:var(--o1)}
/* horloge : une seule cible, les touches ne parlent que d'elle */
.pave2.horloge{grid-template-rows:auto auto 1fr .38fr}
.h-frise{display:grid;grid-template-columns:repeat(var(--n,21),1fr);gap:1px;padding:8px 0 4px}
.h-frise i{height:9px;border-radius:2px;background:var(--crayon)}
.h-frise i.fait{background:var(--t)}
.h-frise i.ici{background:var(--texte);transform:scaleY(1.7)}
.h-frise i.lui{box-shadow:inset 0 -4px 0 var(--o1)}
[data-equipe="o"] .h-frise i.lui{box-shadow:inset 0 -4px 0 var(--b1)}
.h-frise i.apres{background:var(--actif-t)}
.h-vise{display:flex;align-items:center;justify-content:center;gap:12px;font-family:var(--main);font-weight:700;font-size:25px;color:var(--texte);padding:2px 0 8px}
.h-vise b{display:grid;place-items:center;min-width:clamp(84px,14vh,116px);height:clamp(84px,14vh,116px);padding:0 12px;border-radius:999px;background:var(--t);color:#1a1009;font-size:clamp(50px,9vh,72px);line-height:1;animation:pop .34s cubic-bezier(.3,1.6,.5,1)}
.h-touches{display:grid;grid-template-columns:repeat(var(--n,3),1fr);min-height:0;border-top:1.4px solid var(--trait);border-bottom:1.4px solid var(--trait)}
.h-touches button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:clamp(38px,7vh,58px);line-height:1;border-left:1px solid var(--crayon)}
.h-touches button:first-child{border-left:0}
.h-touches .demande{background:var(--t);color:#1a1009;font-size:clamp(46px,8.4vh,70px)}
.h-touches .demande small{color:#1a1009}
.h-touches .fait{background:var(--actif-t)}
.h-touches small{font:600 13.5px var(--net);color:var(--texte2)}
.h-touches button:active{background:var(--actif-t)}
.h-touches button:disabled{opacity:.4;background-image:repeating-linear-gradient(-38deg,rgba(128,128,128,.3) 0 1px,transparent 1px 7px)}
.pave2 .bas button{font-size:clamp(19px,2.9vh,25px)}
.pave2 .annule{color:var(--orange)}
.pave2 .bas button:active{background:var(--actif-o)}
.equipes.seul{grid-template-columns:1fr clamp(70px,10.5vh,94px)}
.equipes.plusieurs{grid-template-columns:repeat(var(--n),minmax(0,1fr));min-height:clamp(70px,10vh,120px)}
.equipes.plusieurs .reste{font-size:clamp(28px,5vh,56px)}
.equipes.deux-rangs .reste{font-size:clamp(22px,3.6vh,40px)}
.equipes.deux-rangs b{font-size:12px}
.equipes.deux-rangs .conseil{font-size:13px}
.eq.actif.c{background:var(--actif-c)}.eq.actif.g{background:var(--actif-g)}
.eq.en-tete b{color:var(--laiton)}
.eq.elimine{opacity:.5}
.eq.elimine b{text-decoration:line-through}
/* Kalam déborde largement de sa ligne : sans cette marge, le coupe-texte de la limite à deux lignes lui mange le haut et le bas. */
.mission span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.16;padding-block:.1em .14em}
.fl.touche{border-bottom-color:var(--vert-clair);color:var(--vert-clair)}
.fl.manque{border-bottom-color:var(--rouge-clair);color:var(--texte2)}
.pave.sans-mult{grid-template-rows:4fr .8fr}
.pave[data-mult] .nums button.pris{opacity:.35}
.nums .pris{opacity:.35}
.nums .frappe{animation:pop .3s cubic-bezier(.3,1.6,.5,1)}
.nums button.frappe::after{animation:vague .5s ease-out both}
.nums .proprio{position:absolute;left:5px;top:3px;font:800 11px var(--net);color:var(--texte2)}
.cr em:empty{display:none}
.h-vise b{min-width:clamp(84px,14vh,136px)}
.pave2.horloge{grid-template-rows:auto auto 1fr .38fr}
@media (max-height:640px){.mission{min-height:30px;font-size:16px}.equipes{min-height:74px}.h-vise b{height:64px;font-size:40px}}

/* ---------------------------------------------------- la fin de partie */
.fin{position:relative;min-height:100dvh;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0);isolation:isolate}
.fin-corps{flex:1;display:flex;flex-direction:column;padding:0 16px calc(12px + env(safe-area-inset-bottom,0px));width:100%;max-width:640px;margin-inline:auto}
.projo{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 66% 34% at 32% 30%,rgba(255,192,134,.22),transparent 70%)}
.fin-haut{position:relative;display:flex;align-items:center;gap:8px;flex:1;min-height:190px}
.fin-coupe{width:52%;height:100%;max-height:300px;overflow:visible;flex:none}
.fin-titre{font-family:var(--main);font-size:clamp(30px,4.5vh,38px);line-height:1.02;--t:.9s;min-width:0;overflow-wrap:anywhere}
.fin-titre small{display:block;font:500 14px var(--net);color:var(--texte2);margin-top:7px}
.stats-fin{display:flex;flex-direction:column;gap:8px;margin:4px 0 8px}
.stat-fin,.stats-fin .stat{background:none;padding:0;text-align:left;border-radius:0}
.stats-fin .stat>span{display:block;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;color:var(--texte2);margin-bottom:1px}
.cote{position:relative;height:21px;display:flex;align-items:center;--l:50%}
.cote i{position:relative;display:block;height:1.3px;width:var(--l);background:var(--c,var(--bleu));transform-origin:left;flex:none}
.cote i::before,.cote i::after{content:"";position:absolute;top:-5px;width:1.3px;height:11px;background:var(--c,var(--bleu))}
.cote i::before{left:0}.cote i::after{right:0}
.cote em{font:600 15px var(--chiffre);font-style:normal;margin-left:8px}
.cote small{font-size:12px;color:var(--texte2);margin-left:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.vit .cote i{animation:cote .8s cubic-bezier(.4,0,.2,1) both;animation-delay:calc(1.4s + var(--n,0)*.14s)}
@keyframes cote{from{transform:scaleX(0)}to{transform:none}}
.fin-boutons{display:grid;grid-template-columns:1.4fr 1fr;gap:8px;align-items:center}
.fin-boutons .gros,.fin-boutons .creux{margin:0}
.fin-boutons .creux{min-height:62px}
.fin-details{border:0;padding:0;margin:0 0 6px}
.fin-details summary{cursor:pointer;font-size:17px;color:var(--annot)}
.fin-details table{width:100%;font-size:.8rem;border-collapse:collapse}
.fin-details td{padding:.25rem 0;vertical-align:top;border-top:1px solid var(--crayon)}
.fin-details td+td{padding-left:.6rem}
.fin .carte{margin-bottom:.4rem}
.fin .gros{margin-top:.2rem}
.fin .liens-accueil{grid-template-columns:1fr 1fr}
.fin .liens-accueil .lien{font-size:17px;line-height:1.05;text-align:center}
.fin-details summary .picto{margin-right:.3em}
.stats-fin .stat>span .picto{width:15px;height:15px;vertical-align:-3px;margin-right:4px}
.sh-victoire .picto,.cb-victoire .picto{width:22px;height:22px;vertical-align:-5px;margin-right:6px}
.cartouche .d{float:left;width:30px;height:30px;margin:0 7px 0 0}

/* Sur tablette, l'appli prend la place : mêmes écrans, écriture plus grande.
   Le sélecteur porte sur la largeur ET la hauteur : un téléphone couché garde ses tailles. */
@media (min-width:700px) and (min-height:800px){
  .nums button{font-size:clamp(60px,6.6vh,88px)}
  .pave[data-mult="2"] .nums button,.pave[data-mult="3"] .nums button{font-size:clamp(52px,5.8vh,76px)}
  .tg{font-size:17px}
  .bas .picto{width:44px;height:44px}
  .mults .picto{width:40px;height:40px}
  .conseil .picto{width:20px;height:20px}
  .mults button,.bas button,.pave2 .bas button{font-size:38px}
  .bas .suivant{font-size:30px}
  .mission{font-size:30px;min-height:58px}
  .fl{font-size:36px;height:58px}
  .fl i{font-size:20px}
  .tot{font-size:38px;line-height:58px}
  .eq b{font-size:20px}
  .eq .conseil{font-size:22px}
  .st{width:40px;height:40px}
  .cr b{font-size:46px}
  .cr em{font-size:16px}
  .cr svg{width:58px;height:58px}
  .h-touches button{font-size:88px}
  .h-touches .demande{font-size:104px}
  .h-touches small{font-size:20px}
  .h-vise{font-size:38px}
  .barre-jeu{min-height:52px}
  .barre-jeu .retour{font-size:24px}
  .barre-jeu .barre-info{font-size:20px}
  .barre-jeu .lien{font-size:22px}
  .ecran-marque{padding-top:calc(52px + env(safe-area-inset-top,0px))}
  .roue-cible{left:calc(-1*min(72vw,460px));width:min(112vw,760px)}
  .item .d{width:76px;height:76px}
  .item .nom{font-size:32px}
  .familles button{font-size:20px;min-height:110px}
  .familles .em{width:72px;height:66px}
  .choix-jeu h2{font-size:34px}
  .prep .tete,.tete{min-height:64px}
  .barre-titre{font-size:30px}
  .tuile-r small{font-size:18px}
  .tuile-r{padding:12px 8px 10px;gap:6px}
  .choix-feuille button{font-size:24px;min-height:120px}
  .choix-feuille .picto{width:72px;height:72px}
  .retour{font-size:1.5rem}
  .fin-titre{font-size:clamp(44px,5vh,64px)}
  .nav-basse button{font-size:18px}
  .aplat{padding-block:14px}
  .aplat b{font-size:24px}
  .aplat span{font-size:17px}
  .aplat .etat{font-size:16px}
  .actions .btn-trait{min-height:64px;font-size:24px}
  .actions .btn-feutre{min-height:72px;font-size:32px}
}

/* L'écran de marque au feutre, comme la cible qu'il remplit : le score s'écrit à la craie
   sur une ardoise à cadre de bois, et chaque touche est un secteur dessiné, crème ou encre
   en alternance, avec sa bordure inégale, son côté ombré et ses hachures à 62°. */
.eq{padding:2px 8px 3px;color:#f4efe3;background:#262d2c;border:4px solid #8a5a2b;border-radius:7px;box-shadow:0 0 0 1.5px var(--encre),inset 0 0 0 1.5px rgba(0,0,0,.55),3px 4px 0 var(--lavis)}
.eq.actif.b,.eq.actif.o,.eq.actif.c,.eq.actif.g{background:#262d2c;border-color:#c98a3f}
.eq:not(.actif){opacity:.72}
.eq b{font-family:var(--main);font-size:clamp(15px,2.2vh,19px);font-weight:700;color:#d9d3c5}
.eq .reste{font-weight:700;letter-spacing:0;color:#f7f2e6}
.eq:not(.actif) .reste{color:#d9d3c5}
.eq .conseil,[data-papier="planche"] .eq.actif .conseil{color:#a9d0ee}
.nums{gap:5px;padding:5px 2px;border-top:0;border-bottom:0}
.nums button,.nums button:nth-child(5n+1),.nums button:nth-last-child(-n+5){border:2.5px solid var(--encre)}
.nums button{--fk:#efe5cf;--fkt:#1a1009;color:var(--fkt);
  background:repeating-linear-gradient(118deg,rgba(0,0,0,.15) 0 1.3px,transparent 1.3px 6px) right bottom/58% 62% no-repeat,var(--fk);
  border-radius:15px 9px 17px 8px/9px 15px 8px 14px;
  box-shadow:inset -6px -7px 0 rgba(0,0,0,.2),inset 3px 3px 0 rgba(255,255,255,.28),2px 3px 0 var(--lavis)}
.nums button:nth-child(even){--fk:#3a3530;--fkt:#f4efe3}
.nums button:active{transform:translateY(2px);box-shadow:inset -3px -4px 0 rgba(0,0,0,.2),inset 2px 2px 0 rgba(255,255,255,.28)}
.nums button:disabled{opacity:.45}
.nums button::after,.nums button.k-chaleur::after,.nums button.k-froid::after{display:none}
.nums button.k-gagne::after,.nums button.k-vise::after,.nums button.k-bon::after,.nums button.k-piege::after,.nums button.creve-ici::after{display:block}
.nums button.frappe{animation:pop .3s ease-out}
.nums .tg{color:inherit;opacity:.8}
.h-touches button{color:#1a1009;background:repeating-linear-gradient(118deg,rgba(0,0,0,.15) 0 1.3px,transparent 1.3px 6px) right bottom/58% 62% no-repeat,#efe5cf;border:2.5px solid var(--encre);border-radius:15px 9px 17px 8px/9px 15px 8px 14px;box-shadow:inset -6px -7px 0 rgba(0,0,0,.2),inset 3px 3px 0 rgba(255,255,255,.28),2px 3px 0 var(--lavis)}
.nums button.k-froid,.nums button.k-chaleur{color:var(--fkt)}

/* La course : les bornes disent d'où l'on part et où l'on va, le pion porte l'initiale du joueur. */
.regle{height:34px}
.regle::before{left:46px;right:42px;top:15px;height:4px;border-radius:2px;background:var(--crayon)}
.regle .borne{position:absolute;top:6px;left:8px;font:700 19px/1 var(--main);color:var(--texte2)}
.regle .borne.fin{left:auto;right:16px;color:var(--texte)}
.regle .zone{right:42px;top:10px;height:14px;background:var(--o1);border:1.5px solid var(--encre);border-radius:4px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.regle .zone span{font:700 11px/1 var(--net);font-style:normal;color:#1a1009}
.regle .ici{top:4px;width:26px;height:26px;margin-left:-13px;display:flex;align-items:center;justify-content:center;font:700 15px/1 var(--main);font-style:normal;color:#0e0c0a;border:2px solid var(--encre);box-shadow:inset -3px -3px 0 rgba(0,0,0,.2),1px 2px 0 var(--lavis);opacity:.65}
.regle .ici.actif{opacity:1;z-index:1}
/* La bulle est le centre de la cible : une vraie grosse touche, pas un bouton parmi d'autres. */
.pave{grid-template-rows:.7fr 4fr 1.05fr}
.bas:has(.touche-bulle){grid-template-columns:1.6fr 1fr 1fr 1fr;gap:4px}
.pave .bas .touche-bulle{flex-direction:row;gap:5px;margin:4px 2px;font-size:clamp(23px,3.5vh,30px);color:#1a1009;background:repeating-linear-gradient(118deg,rgba(0,0,0,.15) 0 1.3px,transparent 1.3px 6px) right bottom/58% 62% no-repeat,#efe5cf;border:2.5px solid var(--encre);border-radius:15px 11px 17px 10px/11px 15px 10px 14px;padding:0 6px;box-shadow:inset -6px -7px 0 rgba(0,0,0,.18),inset 3px 3px 0 rgba(255,255,255,.3),2px 3px 0 var(--lavis)}
.pave .bas .touche-bulle .picto{width:clamp(34px,5.4vh,46px);height:clamp(34px,5.4vh,46px)}
.pave .bas .touche-bulle:disabled{opacity:.45}
.pave .bas .touche-bulle .tg{bottom:2px;color:#1a1009;opacity:.8}
.pave .bas .touche-bulle.avec-tg{padding-bottom:13px}
.pave .bas .touche-bulle.avec-tg .picto{display:block}
.pave .bas .touche-bulle{font-size:clamp(22px,3.2vh,27px);overflow:hidden}
.pave .bas .touche-bulle .picto{width:clamp(30px,4.6vh,40px);height:clamp(30px,4.6vh,40px)}
.pave .bas button.touche-bulle:not(.k-vise):not(.k-bon):not(.k-piege):not(.k-gagne) .tg{color:#1a1009}

/* L'organisation en tuiles (public/organisation-tuiles.js). Les affiches gardent leurs
   couleurs sur les deux papiers : ce sont celles de la soirée, pas celles de l'écran. */
.orga{display:flex;flex-direction:column;gap:10px;width:100%;max-width:720px;margin-inline:auto;padding:10px 16px calc(var(--hauteur-nav) + 18px + env(safe-area-inset-bottom,0px))}
.orga .fil{margin:0}
.orga .gros,.orga .creux{margin:0}
.orga .gros{font-size:26px;line-height:1.1}
.fil .ret{min-height:44px;padding:0 4px;font-family:var(--main);font-size:19px;background:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:100%}
.fil .ret .picto{flex:none}
.ligne .tag{min-height:36px;padding-inline:.5rem}
.duel-o{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.duel-o button{min-width:0;min-height:56px;padding:4px 6px;font-family:var(--main);font-weight:700;font-size:19px;line-height:1.1;overflow-wrap:anywhere;color:var(--texte);background:var(--surface);border:2px solid var(--crayon);border-radius:12px}
.duel-o button:active{border-color:var(--o1)}
.orga .tuiles-r{flex:none;grid-auto-rows:clamp(84px,14dvh,128px)}
.orga-titre{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.orga-titre h1{font-size:34px}
.orga-titre small{color:var(--texte2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.theme-aucun{--th1:#4a4139;--th2:#26211c}
.theme-matavai{--th1:var(--b3);--th2:var(--b4)}
.theme-noel{--th1:var(--v3);--th2:#123a25}
.theme-halloween{--th1:#55306f;--th2:#2a1738}
.affiche,.bandeau-o,.apercu-o{--lisere:rgba(243,236,223,.5);--encre:#0e0c0a}
.affiche,.bandeau-o .d,.apercu-o .d{--fin:inline;--simple:none;--pe:1.15}
.tuiles-o{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tuile-o{display:flex;flex-direction:column;min-width:0;overflow:hidden;text-align:left;color:var(--texte);background:var(--surface);border:2px solid var(--crayon);border-radius:14px}
.tuile-o:only-child{grid-column:span 2}
.tuile-o.on{border-color:var(--o1)}
.tuile-o:active{border-color:var(--o1)}
.affiche{display:flex;justify-content:center;height:80px;padding:7px;background:linear-gradient(160deg,var(--th1),var(--th2))}
.affiche .picto{width:66px;height:66px}
.corps-o{display:flex;flex-direction:column;gap:1px;min-width:0;padding:6px 9px 8px}
.corps-o b{font-family:var(--main);font-weight:700;font-size:21px;line-height:1.1;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.corps-o span{font-size:14px;color:var(--texte2)}
.corps-o small{font-size:14px;color:var(--texte2)}
.etat-o{font-family:var(--main);font-style:normal;font-weight:700;font-size:16.5px;line-height:1.15}
.etat-o.v{color:var(--vert-clair)}.etat-o.o{color:var(--laiton)}.etat-o.b{color:var(--bleu)}.etat-o.g{color:var(--texte2)}.etat-o.r{color:var(--rouge-clair)}
.vide-o{display:flex;align-items:center;gap:10px;padding:8px 2px;font-family:var(--main);font-size:20px;line-height:1.2;color:var(--texte2)}
.vide-o .picto{width:64px;height:64px;flex:none;--fin:inline;--simple:none;--pe:1.15}
.bandeau-o{display:flex;align-items:center;gap:10px;flex:none;width:100%;min-width:0;padding:7px 10px;text-align:left;color:var(--k0);background:linear-gradient(160deg,var(--th1),var(--th2));border:2px solid transparent;border-radius:14px}
.bandeau-o.faute{border-color:var(--rouge-clair)}
.bandeau-o .d{flex:none;width:58px;height:58px}
.bandeau-o .d .picto{width:100%;height:100%}
.bandeau-o>.picto{flex:none;width:26px;height:26px}
.texte-o{display:flex;flex-direction:column;flex:1;min-width:0}
.texte-o b{font-family:var(--main);font-weight:700;font-size:25px;line-height:1.1;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.texte-o small{font-size:14px;line-height:1.2;color:var(--k2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prep .texte-o b,.orga .texte-o b{font-size:22px}
.prep .bandeau-o .d,.orga .bandeau-o .d{width:50px;height:50px}
.orga .bandeau-o{padding:5px 10px}
.texte-o em{font-family:var(--main);font-style:normal;font-weight:700;font-size:17px;line-height:1.2;color:var(--o0)}
.tuile-r.faute{border-color:var(--rouge-clair)}
.tuile-r.fige{opacity:.55}
.img-r>.jeu-dessin{position:absolute;inset:0}
.sous-o{font-size:15.5px;line-height:1.3;color:var(--texte2);margin:0}
.champ-o input,.champ-o textarea{width:100%;min-height:58px;padding:8px 12px;font-family:var(--main);font-size:24px;line-height:1.2;color:var(--texte);background:var(--fond);border:2px solid var(--crayon);border-radius:12px;resize:none}
[data-papier="nuit"] .champ-o input{color-scheme:dark}
.feuille .jeux-o button{min-height:78px;padding:4px 2px}
.jeux-o span{font-size:16.5px;line-height:1.1}
.jeux-o .jeu-dessin{width:42px;height:42px;flex:none}
.themes-o{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.apercu-o{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;min-height:172px;padding:8px 6px;text-align:center;color:var(--k0);background:linear-gradient(160deg,var(--th1),var(--th2));border:3px solid transparent;border-radius:14px}
.apercu-o.on{border-color:var(--o1)}
.apercu-o .d{width:68px;height:68px;flex:none}
.apercu-o .d .picto{width:100%;height:100%}
.apercu-o b{font-family:var(--main);font-weight:700;font-size:20px;line-height:1.1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.apercu-o em{font-family:var(--main);font-style:normal;font-weight:700;font-size:16px;color:var(--o0)}
.apercu-o small{font-size:13.5px;line-height:1.2;color:var(--k2)}
.lien-o{display:flex;align-items:stretch;gap:8px}
.lien-o input{flex:1;min-width:0;padding:0 10px;font-size:14px;color:var(--texte2);background:var(--surface);border:2px solid var(--crayon);border-radius:12px;text-overflow:ellipsis}
.lien-o .creux{flex:none;width:auto;min-height:48px;padding-inline:12px;font-size:20px}
.bas-o{align-self:center}
.toast-o{position:fixed;left:16px;right:16px;bottom:calc(var(--hauteur-nav) + 14px + env(safe-area-inset-bottom,0px));z-index:80;max-width:520px;margin-inline:auto;padding:10px 14px;text-align:center;font-family:var(--main);font-weight:700;font-size:19px;line-height:1.2;color:var(--sur-action);background:var(--o1);border-radius:12px;box-shadow:0 3px 14px rgba(0,0,0,.5)}

/* Ra'o vivante. Les poses sont écrites à plat, hors de toute animation : ce sont elles qui restent
   quand le téléphone refuse le mouvement. Le mouvement s'ajoute dans le @media qui suit. Pivots en unités
   du dessin (voir mouche-dessin.js) ; --sens retourne un même geste pour le côté gauche et le côté droit. */
#app.rao-joue .pave,#app.rao-joue .pave2{opacity:.6}
#app.rao-joue .mission{height:var(--hauteur-mission);overflow:hidden}
#mouche-vit{position:fixed;left:0;top:0;width:120px;height:120px;z-index:45;pointer-events:none;will-change:transform}
#mouche-vit svg{display:block;width:100%;height:100%;overflow:visible}
/* Sa bulle de l'accueil : posée au-dessus de tout, sans une place dans la page. aria-hidden : une phrase toutes les
   vingt secondes n'a rien à faire dans l'oreille de celui qui lit l'écran au lecteur vocal. */
#mouche-bulle{position:fixed;left:0;top:0;z-index:46;max-width:min(240px,calc(100vw - 16px));pointer-events:none;will-change:transform}
#mouche-bulle p{position:relative;padding:3px 12px;border:2px solid var(--encre);border-radius:14px 16px 13px 15px;background:var(--k0);box-shadow:0 0 0 1.5px var(--lisere),2px 3px 0 var(--lavis);font-family:var(--main);font-weight:700;font-size:18px;line-height:1.2;color:#1a1009;text-align:center}
#mouche-bulle p::after{content:"";position:absolute;left:clamp(14px,var(--pointe,50%),calc(100% - 14px));width:11px;height:11px;margin-left:-6px;background:var(--k0);border:solid var(--encre);border-width:0 2px 2px 0;transform:rotate(45deg);bottom:-7px}
#mouche-bulle[data-cote="bas"] p::after{bottom:auto;top:-7px;transform:rotate(225deg)}
.mv-respire{width:100%;height:100%;transform-origin:50% 84%}
.mouche-parle.pour-lecteur{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.mv-dard,.mv-trait,.mv-paume,.mv-gueule,.mv-lunette-tenue,.mv-etoiles,.mv-z,.mv-conf,.mv-mot,.mv-ecriteau{display:none}
.film-ecran .mv-mot,.film-ecran .mv-ecriteau{display:none!important}
.mv-aile.g,.mv-ante.g{--sens:-1}.mv-aile.d,.mv-ante.d{--sens:1}
.mv-aile.g{transform-origin:-55px -42px}.mv-aile.d{transform-origin:55px -42px}
.mv-ante.g{transform-origin:-16px -90px}.mv-ante.d{transform-origin:16px -90px}
.mv-bras{--e:-44deg;--c:60deg;transform:rotate(var(--e))}.mv-coude{transform-origin:0 50px;transform:rotate(var(--c))}.mv-main{transform-origin:0 104px}
.mv-pied.g{transform-origin:-40px 90px}.mv-pied.d{transform-origin:40px 90px}
.mv-tout{transform-origin:0 110px}.mv-sourire{transform-origin:4px 50px}.mv-mot{transform-origin:0 150px}
[data-regard="g"] .mv-pup{transform:translate(-9px,1px)}[data-regard="d"] .mv-pup{transform:translate(9px,1px)}
[data-regard="h"] .mv-pup{transform:translate(0,-8px)}[data-regard="b"] .mv-pup{transform:translate(0,10px)}
[data-sens="g"] .mv-miroir{transform:scaleX(-1)}[data-sens="g"] .mv-score{transform:scaleX(-1)}
[data-pose="baille"] .mv-gueule,[data-pose="bravo"] .mv-gueule,[data-pose="danse"] .mv-gueule,[data-pose="cri"] .mv-gueule,[data-pose="salut"] .mv-gueule{display:block}
[data-pose="baille"] .mv-sourire,[data-pose="bravo"] .mv-sourire,[data-pose="danse"] .mv-sourire,[data-pose="cri"] .mv-sourire,[data-pose="salut"] .mv-sourire{display:none}

[data-pose="vol"] .mv-pieds{transform:translateY(-8px)}
[data-pose="regarde"] .mv-tout{transform:rotate(-5deg)}
[data-pose="regarde"] .mv-pup{transform:translate(-5px,9px)}
[data-pose="non"] .mv-pau{transform:translateY(26px)}
[data-pose="non"] .mv-sourire,[data-pose="front"] .mv-sourire,[data-pose="cache"] .mv-sourire{transform:scaleY(-1)}
[data-pose="vol"] .mv-bras{--e:-100deg;--c:80deg}
[data-pose="non"] .mv-bras{--e:-64deg;--c:-88deg}
[data-pose="cache"] .mv-bras{--e:58deg;--c:107deg}
[data-pose="cache"] .mv-main{display:none}
[data-pose="cache"] .mv-paume{display:block}
[data-pose="cache"] .mv-pau{transform:translateY(62px)}
[data-pose="baille"] .mv-bras{--e:-127deg;--c:-25deg}
[data-pose="baille"] .mv-gueule{transform:scale(1.2,1.5)}
[data-pose="baille"] .mv-pau{transform:translateY(62px)}
[data-pose="baille"] .mv-corps{transform:scale(1,1.04)}
[data-pose="dort"] .mv-pau{transform:translateY(66px)}
[data-pose="dort"] .mv-tout{transform:rotate(9deg) translateY(5px)}
[data-pose="dort"] .mv-ante{transform:rotate(calc(var(--sens)*26deg))}
[data-pose="dort"] .mv-aile{transform:rotate(calc(var(--sens)*14deg))}
[data-pose="dort"] .mv-bras{--e:-32deg;--c:68deg}
[data-pose="dort"] .mv-z{display:block}
[data-pose="bravo"] .mv-bras{--e:44deg;--c:16deg}
[data-pose="bravo"] .mv-gueule,[data-pose="salut"] .mv-gueule{transform:scale(.72)}
[data-pose="bravo"] .mv-pau{transform:translateY(-10px)}
[data-pose="danse"] .mv-bras{--e:-138deg;--c:-16deg}
[data-pose="danse"] .mv-tout{transform:rotate(-7deg)}
[data-pose="danse"] .mv-gueule{transform:scale(.8)}
[data-pose="danse"] .mv-pau{transform:translateY(-10px)}
[data-pose="danse"] .mv-conf{display:block}
[data-pose="cri"] .mv-bras{--e:-116deg;--c:-16deg}
[data-pose="cri"] .mv-gueule{transform:scale(1.35,1.6)}
[data-pose="cri"] .mv-pau{transform:translateY(-18px)}
[data-pose="cri"] .mv-mot{display:block}
[data-pose="front"] .mv-bras.d{--e:178deg;--c:-43deg}
[data-pose="front"] .mv-pau{transform:translateY(46px)}
[data-pose="front"] .mv-tout{transform:rotate(-6deg)}
[data-pose="front"] .mv-etoiles{display:block}
[data-pose="longue"] .mv-bras.d{--e:-127deg;--c:-94deg}
[data-pose="longue"] .mv-lunette-tenue{display:block}
[data-pose="longue"] .mv-lunette{transform:rotate(-34deg) scale(1.2)}
[data-pose="longue"] .mv-pau.g{transform:translateY(62px)}
[data-pose="longue"] .mv-tout{transform:rotate(5deg)}
[data-pose="pousse"] .mv-bras.d{--e:-119deg;--c:47deg}
[data-pose="pousse"] .mv-bras.g{--e:-32deg;--c:68deg}
[data-pose="pousse"] .mv-tout{transform:rotate(7deg)}
[data-pose="pousse"] .mv-ecriteau{display:block}
[data-pose="pousse"] .mv-sourire{transform:scale(1.2)}
[data-pose="salut"] .mv-bras.d{--e:-119deg;--c:-54deg}
[data-pose="salut"] .mv-tout{transform:translateY(-5px)}
[data-pose="montre"] .mv-bras.g{--e:-77deg;--c:51deg}
[data-pose="montre"] .mv-pup{transform:translate(-8px,9px)}
[data-pose="assise"] .mv-bras{--e:-10deg;--c:63deg}
[data-pose="assise"] .mv-pied.g{transform:rotate(20deg)}
[data-pose="assise"] .mv-pied.d{transform:rotate(-20deg)}
[data-pose="marche"] .mv-bras{--e:-24deg;--c:30deg}
[data-pose="pion"] .mv-bras.d{--e:-52deg;--c:-58deg}
[data-pose="pion"] .mv-bras.g{--e:-32deg;--c:68deg}
[data-pose="pion"] .mv-tout{transform:rotate(8deg)}
[data-pose="joie"] .mv-bras{--e:-145deg;--c:-16deg}
[data-pose="joie"] .mv-gueule{display:block;transform:scale(.8)}
[data-pose="joie"] .mv-sourire{display:none}
[data-pose="joie"] .mv-pau{transform:translateY(-10px)}
[data-pose="rale"] .mv-bras{--e:-50deg;--c:101deg}
[data-pose="rale"] .mv-sourire{transform:scaleY(-1)}
[data-pose="rale"] .mv-pau{transform:translateY(34px)}
[data-pose="rale"] .mv-tout{transform:rotate(-4deg)}
[data-pose="vise"] .mv-bras.d{--e:-145deg;--c:-16deg}
[data-pose="vise"] .mv-bras.g{--e:-77deg;--c:51deg}
[data-pose="vise"] .mv-dard,[data-pose="lance"] .mv-trait{display:block}
[data-pose="vise"] .mv-pup,[data-pose="lance"] .mv-pup{transform:translate(9px,-6px)}
[data-pose="vise"] .mv-pau.g{transform:translateY(40px)}
[data-pose="lance"] .mv-bras.d{--e:-118deg;--c:-16deg}
[data-pose="lance"] .mv-bras.g{--e:-32deg;--c:68deg}

@media (prefers-reduced-motion:no-preference){
  .mv-pup{transition:transform .5s ease-in-out}
  #mouche-bulle p{animation:mv-bulle .22s cubic-bezier(.2,1.4,.4,1) both}
  /* Le souffle anime la boîte entière : la carte graphique le fait seule. Le reste du repos est fait de petits
     gestes espacés (voir vivre() dans mouche-scene.js), sinon le dessin se repeindrait soixante fois par seconde. */
  .mv-respire{animation:mv-respire 3.6s ease-in-out infinite}
  [data-pose="repos"][data-geste="antennes"] .mv-ante{animation:mv-antenne 1.3s ease-in-out}
  [data-pose="repos"][data-geste="ailes"] .mv-aile{animation:mv-frisson .9s ease-in-out}
  [data-pose="repos"][data-geste="cligne"] .mv-pau{animation:mv-cligne .3s linear}
  [data-pose="vol"] .mv-aile{animation:mv-bat .22s ease-in-out infinite alternate}
  [data-pose="vol"] .mv-ante{transform:rotate(calc(var(--sens)*-18deg))}
  [data-pose="regarde"] .mv-tout{animation:mv-acquiesce .8s ease-in-out infinite alternate}
  [data-pose="non"] .mv-tout{animation:mv-non .5s ease-in-out 2}
  [data-pose="cache"] .mv-bras{animation:mv-cache .5s ease-out both}
  [data-pose="cache"] .mv-coude{animation:mv-cache-coude .5s ease-out both}
  [data-pose="cache"] .mv-bras.d .mv-paume{animation:mv-lorgne 1.3s ease-in-out both}
  [data-pose="baille"] .mv-gueule{animation:mv-baille 1.3s ease-in-out both}
  [data-pose="baille"] .mv-corps{animation:mv-etire 1.3s ease-in-out both}
  [data-pose="dort"] .mv-corps{animation:mv-souffle 1.9s ease-in-out infinite}
  [data-pose="dort"] .mv-z{animation:mv-z 2.1s ease-out both;animation-delay:calc(var(--i)*320ms)}
  [data-pose="bravo"] .mv-bras{animation:mv-claque-mains .32s ease-in-out infinite alternate}
  [data-pose="bravo"] .mv-tout{animation:mv-saute .64s ease-in-out infinite alternate}
  [data-pose="danse"] .mv-tout{animation:mv-danse .85s ease-in-out infinite alternate}
  [data-pose="danse"] .mv-coude{animation:mv-agite .42s ease-in-out infinite alternate}
  [data-pose="danse"] .mv-aile{animation:mv-bat .42s ease-in-out infinite alternate}
  [data-pose="danse"] .mv-conf{animation:mv-confetti 1.7s ease-in infinite;animation-delay:calc(var(--i)*-140ms)}
  [data-pose="cri"] .mv-tout{animation:mv-crie .24s ease-in-out infinite alternate}
  [data-pose="cri"] .mv-mot{animation:mv-mot .55s cubic-bezier(.2,1.4,.4,1) both}
  [data-pose="front"] .mv-bras.d .mv-coude{animation:mv-tape .6s ease-in-out 3}
  [data-pose="front"] .mv-tout{animation:mv-recule .6s ease-in-out 3}
  [data-pose="front"] .mv-etoiles{animation:mv-etoiles .6s ease-out 3}
  [data-pose="longue"] .mv-tout{animation:mv-scrute 1.3s ease-in-out infinite alternate}
  [data-pose="pousse"] .mv-ecriteau{animation:mv-ecriteau 1.8s ease-in both}
  [data-pose="pousse"] .mv-tout{animation:mv-pousse 1.8s ease-in-out both}
  [data-pose="salut"] .mv-bras.d .mv-coude{animation:mv-salue .4s ease-in-out infinite alternate}
  [data-pose="assise"] .mv-pied.g{animation:mv-balance-g 1.8s ease-in-out infinite alternate}
  [data-pose="assise"] .mv-pied.d{animation:mv-balance-d 1.8s ease-in-out infinite alternate}
  [data-pose="marche"] .mv-pied.g,[data-pose="pion"] .mv-pied.g{animation:mv-pas .4s ease-in-out infinite alternate}
  [data-pose="marche"] .mv-pied.d,[data-pose="pion"] .mv-pied.d{animation:mv-pas .4s ease-in-out infinite alternate-reverse}
  [data-pose="marche"] .mv-tout{animation:mv-dandine .4s ease-in-out infinite alternate}
  [data-pose="marche"] .mv-bras.g{animation:mv-balance-bras .4s ease-in-out infinite alternate}
  [data-pose="marche"] .mv-bras.d{animation:mv-balance-bras .4s ease-in-out infinite alternate-reverse}
  [data-pose="pion"] .mv-tout{animation:mv-pion .8s ease-in-out infinite alternate}
  [data-pose="joie"] .mv-tout{animation:mv-saute .3s ease-in-out 3 alternate}
  [data-pose="rale"] .mv-tout{animation:mv-non .45s ease-in-out 2}
  [data-pose="lance"] .mv-bras.d{animation:mv-lance-epaule .2s ease-out both}
  [data-pose="lance"] .mv-trait{animation:mv-trait .36s ease-in both}
}
@keyframes mv-souffle{50%{transform:scale(1.035,.97)}}
@keyframes mv-respire{50%{transform:scale(1.035,.97)}}
@keyframes mv-antenne{25%{transform:rotate(calc(var(--sens)*-6deg))}70%{transform:rotate(calc(var(--sens)*9deg))}}
@keyframes mv-frisson{25%,75%{transform:rotate(calc(var(--sens)*-10deg))}50%{transform:rotate(calc(var(--sens)*4deg))}}
@keyframes mv-cligne{50%{transform:translateY(66px)}}
@keyframes mv-bat{from{transform:rotate(calc(var(--sens)*-20deg))}to{transform:rotate(calc(var(--sens)*12deg))}}
@keyframes mv-acquiesce{from{transform:rotate(-7deg)}to{transform:rotate(-2deg) translateY(4px)}}
@keyframes mv-non{0%,100%{transform:none}25%{transform:rotate(-11deg)}75%{transform:rotate(11deg)}}
@keyframes mv-cache{from{transform:rotate(-44deg)}}
@keyframes mv-cache-coude{from{transform:rotate(60deg)}}
@keyframes mv-lorgne{0%,55%,92%,100%{transform:none}68%,82%{transform:translate(-20px,24px)}}
@keyframes mv-baille{0%{transform:scale(.3)}45%,75%{transform:scale(1.2,1.5)}100%{transform:scale(.5,.4)}}
@keyframes mv-etire{45%,75%{transform:scale(.97,1.07)}}
@keyframes mv-z{0%{opacity:0;transform:translate(-14px,20px)}25%{opacity:1}100%{opacity:0;transform:translate(16px,-44px)}}
@keyframes mv-claque-mains{from{transform:rotate(24deg)}to{transform:rotate(44deg)}}
@keyframes mv-saute{from{transform:none}to{transform:translateY(-10px)}}
@keyframes mv-danse{from{transform:rotate(-12deg)}to{transform:rotate(12deg) translateY(-18px)}}
@keyframes mv-agite{from{transform:rotate(14deg)}to{transform:rotate(-46deg)}}
@keyframes mv-confetti{0%{opacity:0;transform:translateY(-30px)}15%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translate(14px,230px) rotate(40deg)}}
@keyframes mv-crie{from{transform:rotate(-2deg)}to{transform:rotate(2deg) translateY(-3px)}}
@keyframes mv-mot{from{opacity:0;transform:scale(.35)}}
@keyframes mv-tape{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(-43deg)}}
@keyframes mv-recule{0%,100%{transform:rotate(1deg)}50%{transform:rotate(-8deg)}}
@keyframes mv-etoiles{0%,40%{opacity:0;transform:scale(.8)}60%{opacity:1}100%{opacity:0;transform:scale(1.15)}}
@keyframes mv-scrute{from{transform:rotate(0deg)}to{transform:rotate(9deg)}}
@keyframes mv-ecriteau{0%,30%{transform:none;opacity:1}70%{opacity:1}100%{transform:translate(210px,130px) rotate(26deg);opacity:0}}
@keyframes mv-pousse{0%{transform:translateX(-26px) rotate(0deg)}30%{transform:rotate(9deg)}100%{transform:translateX(90px) rotate(7deg)}}
@keyframes mv-balance-g{from{transform:rotate(8deg)}to{transform:rotate(30deg)}}
@keyframes mv-balance-d{from{transform:rotate(-30deg)}to{transform:rotate(-8deg)}}
@keyframes mv-pas{from{transform:rotate(-20deg)}to{transform:rotate(20deg)}}
@keyframes mv-dandine{from{transform:rotate(-4deg)}to{transform:rotate(4deg) translateY(-3px)}}
@keyframes mv-balance-bras{from{transform:rotate(-40deg)}to{transform:rotate(-8deg)}}
@keyframes mv-pion{from{transform:rotate(6deg)}to{transform:rotate(11deg) translateX(10px)}}
@keyframes mv-bulle{from{opacity:0;transform:scale(.8)}}
@keyframes mv-lance-epaule{from{transform:rotate(-145deg)}to{transform:rotate(-105deg)}}
@keyframes mv-trait{from{transform:rotate(var(--ta,140deg));opacity:1}90%{opacity:1}to{transform:translate(var(--tx,120px),var(--ty,-60px)) rotate(var(--ta,140deg));opacity:0}}
@keyframes mv-salue{from{transform:rotate(-30deg)}to{transform:rotate(-72deg)}}
.tuile-o{text-decoration:none;color:inherit}
a.tuile-r{text-decoration:none}