/* Layout: one wide squared-paper sheet holding the tree, scrolling sideways inside its frame; a sticky panel below handles the selected line and, in edit mode, the whole tree. */ :root{ /* jetons (2.9.3) : couleurs nommées, triplets pour rgba(), arrondis */ --cu2:#f2b783; --cu3:#9b5426; --vert2:#7fe0aa; --gris:#a9b3c5; --sel-rgb:224,149,90; --fg-rgb:243,238,230; --bg-rgb:15,23,41; --green-rgb:87,201,138; --red-rgb:240,128,112; --mut-rgb:201,184,160; --r-xs:4px; --r-s:8px; --r-m:12px; --r-b:14px; --r-l:16px; --r-xl:20px; --r-xxl:24px; --r-pill:999px; --bg:#0f1729; --sheet:#17223a; --grid:#1f2d47; --fg:#f3eee6; --mut:#c9b8a0; --line:#2a3754; --red:#f08070; --blue:#9cc3ff; --green:#57c98a; --tint:#1f2c48; --sel:#e0955a; --e0:#2fae5f; --e1:#a6e58a; --e2:#ffa24a; --e3:#ff8a8f; --p40:#ffd23f; --p20:#ff9a8a; --p10:#9cc3ff; --p00:#c9a0ff; /* 2.9.21 : rond du défi par paliers (100, 150, 200 %), cadre de l'échiquier (bleu encre → bleu clair), coordonnées sur cases claires / foncées */ --defi-100:#7fe0aa; --defi-150:#3cbf76; --defi-200:#1f9a55; --defi-200-rgb:31,154,85; /* 2.9.43 : rond par tours, du vert clair au vert maximal (tour 1 fini, puis tours 2, 3 et 4 ; au-delà le vert ne fonce plus) */ --defi-t1:#7fe0aa; --defi-t2:#3cbf76; --defi-t3:#1f9a55; --defi-t4:#137a40; --defi-tx:#7fe0aa; --halo-rgb:63,103,181; /* 2.9.24 : halo bleu fondu autour de l'échiquier (remplace le cadre bleu clair) */ --coord-on-l:#24324f; --coord-on-d:#f3eee6; --sq-l:#c9b8a0; --sq-d:#5c6f8e; --last:#e0955a; --hint:#f0c062; --dot:rgba(224,149,90,.55); --pw:#f4f7fb; --pb:#0e1218; --pst:#0e1218; --bad:#3a2023; --f-piece:"Noto Sans Symbols 2","Segoe UI Symbol","Apple Symbols","DejaVu Sans","Arial Unicode MS",sans-serif; --f-display:"Young Serif",Georgia,"Times New Roman",serif; --f-ui:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif; } *{box-sizing:border-box} html{color-scheme:dark} body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 var(--f-ui);padding-inline:16px;padding-block:20px 0} main{max-width:1400px;margin:0 auto} h1{font:600 28px/1.15 var(--f-display);margin:0 0 6px;text-wrap:balance} .sub{margin:0 0 14px;color:var(--mut);font-size:15px;max-width:70ch} .r{color:var(--red);font-weight:700}.b{color:var(--blue);font-weight:700}.g{color:var(--green);font-weight:700} button{font:inherit;font-size:14px;padding:6px 12px;border-radius:var(--r-s);border:1px solid var(--line);background:var(--sheet);color:var(--fg);cursor:pointer} button[aria-pressed="true"]{background:var(--sel);border-color:var(--sel);color:var(--bg)} button:disabled{opacity:.7;cursor:default} button:focus-visible,input:focus-visible{outline:2px solid var(--sel);outline-offset:2px} svg.editing{cursor:grab}.msel{fill:var(--tint);stroke:var(--sel);stroke-width:1.5;stroke-dasharray:4 3}.mqr{fill:var(--sel);fill-opacity:.12;stroke:var(--sel);stroke-width:1.2;stroke-dasharray:5 3;pointer-events:none} svg{display:block;width:100%;min-width:3036px;height:auto;touch-action:pan-x pan-y} svg.editing{touch-action:pan-x pan-y} svg text{font-family:var(--f-ui);user-select:none;-webkit-user-select:none} .grid{stroke:var(--grid);stroke-width:1;fill:none} .tx{font-size:63px;font-weight:700} .tx.e0{fill:var(--e0)}.tx.e1{fill:var(--e1)}.tx.e2{fill:var(--e2)}.tx.e3{fill:var(--e3)} .tx.red{fill:var(--red)}.tx.blue{fill:var(--blue)}.tx.green{fill:var(--green)} .nt{font-size:15px;font-weight:400} .nt.blue{fill:var(--blue)}.nt.red{fill:var(--red)}.nt.green{fill:var(--green)} .nt.it{font-style:italic} .bang{fill:var(--green);font-weight:700} .pct{font-size:13px;font-weight:700;fill:var(--red)} .evt{font-size:12px;font-weight:400;fill:var(--mut);font-variant-numeric:tabular-nums} .ed{fill:none;stroke-width:2.2} .ed.c40{stroke:var(--p40)}.ed.c20{stroke:var(--p20)}.ed.c10{stroke:var(--p10)}.ed.c00{stroke:var(--p00)}.ed.cg{stroke:var(--mut)} .ed.on{stroke-width:3.4} .fc40{fill:var(--p40)}.fc20{fill:var(--p20)}.fc10{fill:var(--p10)}.fc00{fill:var(--p00)}.fcg{fill:var(--mut)} .pct.c40{fill:var(--p40)}.pct.c20{fill:var(--p20)}.pct.c10{fill:var(--p10)}.pct.c00{fill:var(--p00)} .mk{fill:var(--sheet);stroke:var(--mut);stroke-width:2}[hidden]{display:none!important}.fb{fill:var(--tint);stroke:var(--sel);stroke-width:1.6;cursor:pointer}.fbt{font-size:12px;font-weight:700;fill:var(--sel);text-anchor:middle;pointer-events:none;font-variant-numeric:tabular-nums}.fb:hover{fill:var(--sel);fill-opacity:.25} .mk.full{fill:var(--green);stroke:var(--green)} .half{fill:var(--green)} .tick{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .hint{color:var(--mut);font-weight:400;font-size:14px;margin:0} .pr{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center} .pr label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:15px;white-space:nowrap} .pr input[type=checkbox]{width:22px;height:22px;accent-color:var(--green)} .pr input[type=text],.pr input[type=number]{font:inherit;font-size:15px;padding:6px 10px;border-radius:var(--r-s);border:1px solid var(--line);background:var(--sheet);color:var(--fg);min-width:0} .pr input[type=text]{width:min(300px,60vw)} .pr input[type=number]{width:84px} .pr .dis{opacity:.7;cursor:default} .twrap{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:24px;align-items:start} @media (max-width:820px), (pointer:coarse) and (max-width:1366px){.twrap{grid-template-columns:minmax(0,1fr)}} .tboardbox{min-width:0} .bov{position:relative;max-width:560px} #board.blur{filter:blur(7px);transition:filter .25s} .endov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:14px;z-index:5} .endov[hidden]{display:none} .ovpane{display:flex;flex-direction:column;gap:12px;width:100%;max-width:380px;background:color-mix(in srgb,var(--sheet) 88%,transparent);border:1px solid var(--line);border-radius:var(--r-b);padding:16px;box-shadow:0 8px 30px rgba(0,0,0,.25)} .ovpane[hidden]{display:none} .ovt{margin:0;font-weight:700;text-align:center} .ovcard{display:block;width:100%;text-align:center;padding:16px 14px;border:2px solid var(--line);border-radius:var(--r-m);background:var(--sheet);color:inherit;font:inherit;cursor:pointer} .ovcard:hover,.ovcard:focus-visible{border-color:var(--sel)} .ovelo{display:flex;flex-direction:column;gap:10px;cursor:default} .ovelo button{all:unset;cursor:pointer;display:block;text-align:center} .ovelo label{font-size:14px}.ovelo input{width:84px;margin-left:6px} .ovback{all:unset;cursor:pointer;text-align:center;font-size:14px;text-decoration:underline} #board{display:block;width:100%;min-width:0;max-width:560px;height:auto;aspect-ratio:1;border:1px solid var(--line);border-radius:var(--r-s);touch-action:manipulation;user-select:none;-webkit-user-select:none} #board text{font-family:var(--f-ui);pointer-events:none} .sqr{cursor:pointer} .coord{font-size:2.3px;font-weight:700;opacity:.75} .piece{font-family:var(--f-piece);font-size:8.4px;stroke-width:.35;paint-order:stroke fill;stroke-linejoin:round} .piece.w{fill:var(--pw);stroke:var(--pst)} .piece.b{fill:var(--pb);stroke:var(--pst)} .bnav{display:flex;align-items:center;justify-content:center;gap:12px;margin:8px 0 0}.bnav[hidden]{display:none} .tstatus{margin:0;min-height:2.6em;font-size:17px;line-height:1.4} .bwrap{display:flex;align-items:flex-end;gap:6px;margin-top:14px} .bishop{flex:0 0 124px;width:124px;min-width:0;max-width:124px;height:auto;overflow:visible} .bishop.talk{animation:bob .5s ease-in-out 3} @keyframes bob{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-6px) rotate(-3deg)}70%{transform:translateY(-3px) rotate(3deg)}} @media (prefers-reduced-motion:reduce){.bishop.talk{animation:none}} .bubble{position:relative;flex:1;min-width:0;padding:12px 16px;border:3px solid #1b1f2a;border-radius:var(--r-xl);background:var(--sheet);box-shadow:3px 4px 0 rgba(0,0,0,.18);margin-bottom:14px} .bubble::before{content:'';position:absolute;left:-17px;bottom:22px;border:11px solid transparent;border-right:14px solid #1b1f2a;border-left:0} .bubble::after{content:'';position:absolute;left:-10px;bottom:25px;border:8px solid transparent;border-right:11px solid var(--sheet);border-left:0} .bubble.ok{border-color:var(--green)}.bubble.ok::before{border-right-color:var(--green)} .bubble.bad{border-color:var(--red);background:var(--bad)}.bubble.bad::before{border-right-color:var(--red)}.bubble.bad::after{border-right-color:var(--bad)} .bubble.done{border-color:var(--green);background:var(--tint)}.bubble.done::before{border-right-color:var(--green)}.bubble.done::after{border-right-color:var(--tint)} /* 24/10/2026 : bulle cachée pendant le calcul du moteur (setStatus('','wait')) */ .bubble.wait{visibility:hidden} .cq{display:inline-block;padding:2px 10px;border-radius:var(--r-pill);font-weight:700;font-size:14px;margin-right:4px;color:#fff;background:#6b7280}.cq.g{background:#15803d}.cq.p{background:#65a30d}.cq.n{background:#6b7280}.cq.b{background:#d97706} .tgo{flex:0 0 auto;align-self:center;margin-bottom:14px;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:64px;padding:10px 12px;border:3px solid var(--green);border-radius:var(--r-l);background:var(--sheet);color:#1b1f2a;font:700 26px/1 var(--f-ui);cursor:pointer;box-shadow:3px 4px 0 rgba(0,0,0,.18);animation:tgopulse 1.2s ease-in-out infinite} .tgo span{font-size:12px} .tgo:hover{background:var(--tint)} @keyframes tgopulse{50%{transform:translateX(4px)}} .evn{color:#667;font-size:14px} .tcm{margin-top:8px;padding-top:8px;border-top:2px dotted var(--line);font-size:15px;line-height:1.45;font-style:italic}.tcm:empty{display:none}.tcm p{margin:4px 0} .tstatus b{font-weight:700} .topn{margin:10px 0 0;padding-top:8px;border-top:1px dashed currentColor;font-size:14px;line-height:1.4;opacity:.8} .topn[hidden]{display:none} .dpt{margin-top:14px}.dpt-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}.dpt-v{font-size:14px;color:#667}.dpt-v b{font-size:20px;color:var(--sel)}#tdepth{width:100%;margin:10px 0 0;accent-color:var(--sel);height:28px;cursor:pointer}.dpt-t{display:flex;justify-content:space-between;padding:0 7px;font-size:13px;color:#667}.dpt-t span{width:14px;text-align:center} .ana{margin:12px 0 0;padding:12px 16px;border-radius:var(--r-m);border:1px solid var(--line);background:var(--sheet);font-size:15px;line-height:1.5}.ana h3{margin:0 0 6px;font-size:16px}.ana p{margin:6px 0}.ana ul{margin:4px 0 6px;padding-left:20px}.ana li{margin:3px 0}.ana .anan{font-size:13px;color:#667;margin-top:8px} .tpanel{display:grid;gap:16px;min-width:0} .tcard{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-m);padding:14px 16px;min-width:0} #tab-train h2{font:600 18px/1.25 var(--f-display);margin:0 0 8px} .moves{font-size:17px;line-height:1.8;overflow-wrap:anywhere;min-height:3.6em} .moves .n{color:var(--mut);margin-inline:2px 3px;font-variant-numeric:tabular-nums} .moves .you{color:var(--blue);font-weight:700} .moves .opp{color:var(--red);font-weight:700} .moves .pre{color:var(--mut)} .moves .ev{color:var(--mut);font-size:14px;margin-inline-start:8px;font-variant-numeric:tabular-nums} .trow{display:flex;flex-wrap:wrap;gap:8px} #tab-train button{font:inherit;font-size:15px;padding:7px 13px;border-radius:var(--r-s);border:1px solid var(--line);background:var(--sheet);color:var(--fg);cursor:pointer} #tab-train button:hover:not(:disabled){border-color:var(--sel)} #tab-train button[aria-pressed="true"]{background:var(--sel);border-color:var(--sel);color:var(--bg)} #tab-train button:disabled{opacity:.7;cursor:default} #tab-train button:focus-visible,#tab-train summary:focus-visible{outline:2px solid var(--sel);outline-offset:2px} .tmeter{height:8px;border-radius:var(--r-xs);background:var(--tint);overflow:hidden;margin:6px 0} .tmeter i{display:block;height:100%;background:var(--green)} .tprog{font-size:15px;font-variant-numeric:tabular-nums} .thint{color:var(--mut);font-size:14px;margin:6px 0 0} #tab-train details summary{cursor:pointer;font-weight:700;padding:2px 0} .lines{margin-top:8px;max-height:300px;overflow-y:auto;display:grid;gap:6px} #tab-train .lines button{text-align:start;display:flex;gap:10px;align-items:baseline;width:100%;font-size:14px;line-height:1.4;padding:6px 10px} .lines .t{flex:1;min-width:0;overflow-wrap:anywhere} .lines .k{color:var(--mut);white-space:nowrap;font-variant-numeric:tabular-nums} #tab-train .lines button.cur{border-color:var(--sel);background:var(--tint)} @media (prefers-reduced-motion:no-preference){.tmeter i{transition:width .25s}} .tabs{display:flex;gap:8px;margin:0 0 16px} .tprob{margin:0 0 14px;padding:10px 14px;border:1px solid var(--red);border-radius:var(--r-s);background:var(--bad);font-size:15px} #tab-train .sub{margin:0 0 16px} /* ====== Version application (PWA) ====== */ @font-face{font-family:"Noto Sans Symbols 2";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/NotoSansSymbols2-chess.woff) format("woff")} html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent} body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom);overscroll-behavior-y:none} main{padding-top:max(8px,env(safe-area-inset-top))} button,.ovcard,label,select{touch-action:manipulation} .pwa-banner{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:200;display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:var(--r-b);background:var(--sel);color:var(--cu-ink);box-shadow:0 8px 28px rgba(0,0,0,.35);font-size:16px} .pwa-banner button{min-height:44px;padding:0 16px;border-radius:var(--r-m);border:0;background:#fff;color:#12245a;font-weight:700;font-size:16px;cursor:pointer} .pwa-banner[hidden]{display:none} /* ====== Tactile : petits écrans ====== */ @media (max-width:820px), (pointer:coarse) and (max-width:1366px){ body{font-size:16px} main{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))} h1{font-size:26px;line-height:1.15} .tabs{display:flex;flex-wrap:wrap;gap:8px} #tb-train{order:-1} button,.tabs button,.trow button,.pr button,.ovcard,.ovback,.bnav button,#tgo,select,input[type=text],input[type=number]{min-height:44px;font-size:16px} .tabs button{min-width:44px;padding:0 14px} .sub,.hint,label,.tcard,.tcard *,#tprob,.tstatus,.tcm,.topn,.ana,.ana *{font-size:16px} .sub{line-height:1.5} input[type=checkbox]{width:24px;height:24px} label{min-height:44px;display:inline-flex;align-items:center;gap:8px} .bnav{gap:10px} #bprev,#bnext{min-width:64px;min-height:52px;font-size:24px} #bpos{font-size:16px} .twrap{gap:12px} .tboardbox{width:100%} #board{width:100%;height:auto} .bwrap{align-items:flex-end} .bishop{flex-basis:84px;width:84px;max-width:84px} .bubble{padding:10px 12px} } @media (max-width:820px), (pointer:coarse) and (max-width:1366px){button,label,.hint,span,select,input{font-size:max(16px,1em)!important}#bprev,#bnext{font-size:24px}} /* Page d'accueil */ #home{display:none;text-align:center;padding:24px 0} .home-mode #home{display:block} .home-mode #apptitle,.home-mode main>.tabs,.home-mode #tab-train{display:none} #apptitle{margin-top:0} .home-fifou{display:block;margin:0 auto 8px} .home-menu{display:grid;gap:16px;max-width:520px;margin:24px auto 0} .home-card{display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;padding:20px;min-height:96px;border-radius:var(--r-l);border:1px solid var(--line);background:var(--sheet);cursor:pointer;font:inherit;color:inherit} .home-card:hover,.home-card:focus-visible{border-color:var(--sel);box-shadow:0 2px 12px rgba(0,0,0,.35)} .home-t{font-size:1.35rem;font-weight:700;color:var(--sel)} .home-d{font-size:1rem;color:var(--fg);opacity:1} #home .sub{color:var(--fg);font-size:1.1rem} @font-face{font-family:"Young Serif";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/YoungSerif-Regular.woff) format("woff")} @font-face{font-family:"Public Sans";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/PublicSans-var.woff) format("woff")} @font-face{font-family:"Public Sans";font-style:italic;font-weight:100 900;font-display:swap;src:url(fonts/PublicSans-Italic-var.woff) format("woff")} /* ===== Icônes (masques CSS : suivent la couleur du texte, résistent aux changements de libellé) ===== */ .hc-ico,#hintb::before,#next::before,#flip::before,#retry::before,#pnew::before,#treset::before,#playbtn::before,#foldbtn::before,#go-home::before,.nvb i{content:"";display:inline-block;width:20px;height:20px;flex:none;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat} #hintb::before,#next::before,#flip::before,#retry::before,#pnew::before,#treset::before,#playbtn::before,#foldbtn::before,#go-home::before{margin-right:8px;vertical-align:-4px} #hintb::before{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9 18h6%22/%3E%3Cpath d=%22M10 21h4%22/%3E%3Cpath d=%22M12 3a6 6 0 00-4 10.5c.7.7 1 1.5 1 2.5h6c0-1 .3-1.8 1-2.5A6 6 0 0012 3z%22/%3E%3C/svg%3E")} #next::before{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 4l10 8-10 8z%22/%3E%3Cpath d=%22M19 5v14%22/%3E%3C/svg%3E")} #flip::before{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M7 4v16%22/%3E%3Cpath d=%22M3 8l4-4 4 4%22/%3E%3Cpath d=%22M17 20V4%22/%3E%3Cpath d=%22M13 16l4 4 4-4%22/%3E%3C/svg%3E")} #retry::before{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 12a9 9 0 109-9 9 9 0 00-6.4 2.7L3 8%22/%3E%3Cpath d=%22M3 3v5h5%22/%3E%3C/svg%3E")} #pnew::before{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 12a9 9 0 01-15 6.7L3 16%22/%3E%3Cpath d=%22M3 21v-5h5%22/%3E%3Cpath d=%22M3 12a9 9 0 0115-6.7L21 8%22/%3E%3Cpath d=%22M21 3v5h-5%22/%3E%3C/svg%3E")} #treset::before{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 6h18%22/%3E%3Cpath d=%22M8 6V4h8v2%22/%3E%3Cpath d=%22M6 6l1 14h10l1-14%22/%3E%3C/svg%3E")} #playbtn::before{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 4l14 8-14 8z%22/%3E%3C/svg%3E")} #foldbtn::before{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M8 3v18%22/%3E%3Cpath d=%22M4 7l4-4 4 4%22/%3E%3Cpath d=%22M4 17l4 4 4-4%22/%3E%3Cpath d=%22M14 8h7M14 16h7%22/%3E%3C/svg%3E")} #go-home::before{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 11l9-8 9 8%22/%3E%3Cpath d=%22M5 10v10h5v-6h4v6h5V10%22/%3E%3C/svg%3E")} .i-home{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 11l9-8 9 8%22/%3E%3Cpath d=%22M5 10v10h5v-6h4v6h5V10%22/%3E%3C/svg%3E")} .i-train{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%224.5%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%221%22 fill=%22black%22/%3E%3C/svg%3E")} /* ===== Barre de navigation du bas ===== */ :root{--navh:calc(68px + env(safe-area-inset-bottom,0px))} body{padding-bottom:calc(var(--navh) + 12px)} main>.tabs[data-t-aria="idx.sections"]{display:none} /* 3.1.5 : repéré par sa clé, plus par son texte (« Secciones » en espagnol laissait le bandeau visible) */ #botnav{position:fixed;left:0;right:0;bottom:0;z-index:100;display:flex;justify-content:center;background:rgba(var(--bg-rgb),.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px))} #botnav .in{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%;max-width:560px} .nvb{min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:var(--r-b);border:0;background:transparent;color:var(--mut);font:600 13px/1.1 var(--f-ui);cursor:pointer} .nvb i{width:24px;height:24px} .nvb[aria-current="page"]{color:var(--sel);background:var(--tint)} .nvb:focus-visible{outline:2px solid var(--sel);outline-offset:-2px} .pwa-banner{bottom:calc(var(--navh) + 8px)!important} .nvb{font-size:13px!important;min-height:56px} /* ===== Accueil ===== */ #home .home-fifou{width:112px;height:auto;margin:0 auto 6px;display:block} #home h1{font-size:30px} .home-card{flex-direction:row;align-items:center;gap:14px;min-height:104px;padding:16px} .hc-ico{width:48px;height:48px;padding:12px;border-radius:var(--r-b);background:var(--tint);color:var(--sel);-webkit-mask:none;mask:none;position:relative;flex:none} .hc-ico::after{content:"";position:absolute;inset:12px;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat} .hc-txt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1} .hc-sub{font-size:14px;color:var(--mut);font-variant-numeric:tabular-nums} .ring{width:54px;height:54px;flex:none;position:relative} .ring svg{width:54px;height:54px;transform:rotate(-90deg)} .ring circle{fill:none;stroke-width:5} .ring .bg{stroke:var(--tint)} .ring .fg{stroke:var(--sel);stroke-linecap:round;transition:stroke-dashoffset .6s} .ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;font-weight:700;color:var(--fg)} /* ===== Entraînement : boutons en tuiles ===== */ #tab-train .tcard .trow{display:grid;grid-template-columns:repeat(2,1fr);gap:8px} #tab-train .tcard .trow button{display:flex;align-items:center;justify-content:center;text-align:center} #hintb,#next,#flip{border-radius:var(--r-m);padding:0 10px} #hintb{background:var(--tint);border-color:var(--sel);color:var(--fg)} @media (prefers-reduced-motion:reduce){.ring .fg{transition:none}} .ring svg,#botnav svg,.home-fifou{min-width:0;max-width:100%} .ring svg{width:54px;height:54px;max-width:54px} #treset{grid-column:1/-1} .dpt-v,.dpt-t{color:var(--fg)} .pimg{filter:none} /* Netteté de l'échiquier : cases alignées sur les pixels, pièces sans filtre */ #board .sqr{shape-rendering:crispEdges} #board{shape-rendering:geometricPrecision;text-rendering:geometricPrecision} /* Entraînement sur téléphone : tout tient à l'écran, sans défiler jusqu'aux boutons */ @media (max-width:820px), (pointer:coarse) and (max-width:1366px){ .bov{width:min(100%,max(216px,calc(100dvh - 420px)));margin-inline:auto} #tab-train .twrap{gap:8px} #tab-train .bnav{margin:6px 0} #tab-train .bnav button,#bprev,#bnext{min-height:44px;font-size:20px} #tab-train .bwrap{gap:8px} .bishop{flex-basis:68px!important;width:68px!important;max-width:68px} .bubble{padding:8px 12px} #tab-train .tcard{padding:10px} #tab-train .tcard .trow{gap:6px} #tab-train .tcard .trow button{min-height:48px!important;padding:0 8px;font-size:16px} #tab-train h1,#apptitle{margin-bottom:4px} } @media (max-width:820px) and (max-height:700px), (pointer:coarse) and (max-width:1366px) and (max-height:700px){ #topn{display:none} #tab-train .tcard .trow button{min-height:44px!important} #tab-train .bnav{margin:4px 0} .bubble p{margin:0} #tab-train .twrap{gap:4px} } /* ===== Réglages avant l'entraînement ===== */ #train-setup{display:none} body.tsetup #tab-train #train-setup{display:block} body.tsetup #tab-train .twrap{display:none} .su-h{font:400 24px/1.2 var(--f-display);margin:4px 0 6px} .su-p{margin:0 0 14px;color:var(--fg)} #train-setup .tcard{margin-bottom:14px} .su-go{width:100%;min-height:56px;border-radius:var(--r-b);border:0;background:var(--sel);color:var(--cu-ink);font:700 18px var(--f-ui);cursor:pointer;margin:4px 0 8px;position:sticky;bottom:calc(var(--navh) + 8px);box-shadow:0 6px 18px rgba(0,0,0,.4)} .su-go:focus-visible{outline:3px solid var(--fg);outline-offset:2px} #su-gear{display:none;position:fixed;top:calc(8px + env(safe-area-inset-top,0px));right:12px;z-index:90;width:48px;height:48px;border-radius:var(--r-b);border:1px solid var(--line);background:var(--sheet);color:var(--fg);cursor:pointer} #su-gear::before{content:"";position:absolute;inset:12px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%223%22/%3E%3Cpath d=%22M19.4 15a1.7 1.7 0 00.3 1.8l.1.1a2 2 0 11-2.8 2.8l-.1-.1a1.7 1.7 0 00-1.8-.3 1.7 1.7 0 00-1 1.5V21a2 2 0 11-4 0v-.1a1.7 1.7 0 00-1.1-1.5 1.7 1.7 0 00-1.8.3l-.1.1a2 2 0 11-2.8-2.8l.1-.1a1.7 1.7 0 00.3-1.8 1.7 1.7 0 00-1.5-1H3a2 2 0 110-4h.1a1.7 1.7 0 001.5-1.1 1.7 1.7 0 00-.3-1.8l-.1-.1a2 2 0 112.8-2.8l.1.1a1.7 1.7 0 001.8.3H9a1.7 1.7 0 001-1.5V3a2 2 0 114 0v.1a1.7 1.7 0 001 1.5 1.7 1.7 0 001.8-.3l.1-.1a2 2 0 112.8 2.8l-.1.1a1.7 1.7 0 00-.3 1.8V9a1.7 1.7 0 001.5 1H21a2 2 0 110 4h-.1a1.7 1.7 0 00-1.5 1z%22/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%223%22/%3E%3Cpath d=%22M19.4 15a1.7 1.7 0 00.3 1.8l.1.1a2 2 0 11-2.8 2.8l-.1-.1a1.7 1.7 0 00-1.8-.3 1.7 1.7 0 00-1 1.5V21a2 2 0 11-4 0v-.1a1.7 1.7 0 00-1.1-1.5 1.7 1.7 0 00-1.8.3l-.1.1a2 2 0 11-2.8-2.8l.1-.1a1.7 1.7 0 00.3-1.8 1.7 1.7 0 00-1.5-1H3a2 2 0 110-4h.1a1.7 1.7 0 001.5-1.1 1.7 1.7 0 00-.3-1.8l-.1-.1a2 2 0 112.8-2.8l.1.1a1.7 1.7 0 001.8.3H9a1.7 1.7 0 001-1.5V3a2 2 0 114 0v.1a1.7 1.7 0 001 1.5 1.7 1.7 0 001.8-.3l.1-.1a2 2 0 112.8 2.8l-.1.1a1.7 1.7 0 00-.3 1.8V9a1.7 1.7 0 001.5 1H21a2 2 0 110 4h-.1a1.7 1.7 0 00-1.5 1z%22/%3E%3C/svg%3E") center/contain no-repeat} body:not(.home-mode):not(.tsetup) #su-gear{display:block} #su-gear[hidden]{display:none} #tpop{width:100%;margin:10px 0 0;accent-color:var(--sel);height:44px;cursor:pointer;touch-action:pan-y} .tstrip{display:flex;align-items:center;gap:10px;margin:0 0 6px;font-size:15px;font-variant-numeric:tabular-nums;color:var(--fg)} .tstrip span{flex:0 0 auto;white-space:nowrap} .tstrip .tmeter{flex:1;min-width:0;margin:0} /* Échiquier de taille fixe : l'infobulle de Fifou a une hauteur fixe, le texte défile dedans. */ #tab-train .bubble{box-sizing:border-box;height:172px;display:flex;flex-direction:column} #tab-train .bin{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain} @media (max-height:700px){#tab-train .bubble{height:150px}} .tboardbox:has(#rnav:not([hidden])) #bnav{display:none} .su-go .su-n{display:block;font-size:14px;font-weight:500;opacity:.9;margin-top:2px} /* qualité des coups : smileys */ .rq{display:inline-flex;align-items:center;gap:5px;padding:1px 10px 1px 3px;border-radius:var(--r-pill);font-weight:700;font-size:14px;margin-right:4px;line-height:1.3;background:var(--tint);border:1.5px solid currentColor} .rq .sm{width:22px;height:22px;flex:none} .rq.r-best{color:#1f9d55}.rq.r-excellent{color:#5aa63a}.rq.r-good{color:#6a8a7c}.rq.r-inacc{color:#c98a00}.rq.r-blunder{color:#e0474c} .msm{width:1.1em;height:1.1em;vertical-align:-.2em;margin-left:2px} .spr{position:absolute;width:0;height:0;min-width:0;overflow:hidden;pointer-events:none} .rq .sm,.msm{display:inline-block;min-width:0;max-width:none;height:auto} .rq .sm{width:22px;height:22px} .msm{width:1.1em;height:1.1em} .popchar{display:flex;align-items:center;gap:12px;margin-top:10px} .pcs{display:block;min-width:0;width:96px;height:96px;flex:none;color:var(--fg)} .pcs[hidden]{display:none} .popcm{position:relative;flex:1;min-width:0;margin:0;padding:9px 12px;border:2px solid var(--sel);border-radius:var(--r-l);background:var(--tint);font-weight:700;font-size:15px;line-height:1.3} .popcm::before{content:'';position:absolute;left:-9px;top:50%;margin-top:-7px;border:7px solid transparent;border-right:9px solid var(--sel);border-left:0} .popchar[data-z="god"] .pcs{animation:pcfloat 2.6s ease-in-out infinite} @keyframes pcfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}} @media (prefers-reduced-motion:reduce){.popchar .pcs{animation:none!important}} #board{overflow:visible} /* ===== 2.6 : écran de jeu agrandi, Réglages, Tuto ===== */ .i-tuto{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M10 8.5l5 3.5-5 3.5z%22/%3E%3C/svg%3E")} .i-set{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M20 18h0%22/%3E%3Ccircle cx=%2216%22 cy=%226%22 r=%222%22/%3E%3Ccircle cx=%2210%22 cy=%2212%22 r=%222%22/%3E%3Ccircle cx=%2218%22 cy=%2218%22 r=%222%22/%3E%3C/svg%3E")} .scr{display:none} body.scr-settings #settings,body.scr-tuto #tuto,body.scr-profil #profil,body.scr-repertoire #repertoire{display:block} body.scr-profil #apptitle,body.scr-profil #home,body.scr-profil main>.tabs,body.scr-profil #tab-train,body.scr-repertoire #apptitle,body.scr-repertoire #home,body.scr-repertoire main>.tabs,body.scr-repertoire #tab-train{display:none} body.scr-settings #apptitle,body.scr-settings #home,body.scr-settings main>.tabs,body.scr-settings #tab-train,body.scr-tuto #apptitle,body.scr-tuto #home,body.scr-tuto main>.tabs,body.scr-tuto #tab-train{display:none} body[class*="scr-"] #su-gear{display:none!important} .hc-sub:empty{display:none} .grow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px;align-items:center;margin:8px 0 0} .grow .gmid{display:flex;justify-content:center;align-items:center;min-width:0} .grow .bnav{margin:0;gap:6px} #pnav{display:none} #bpos{display:none} .grow>button{min-height:44px;padding:0 12px;border-radius:var(--r-m);border:1px solid var(--line);background:var(--sheet);color:var(--fg);font:600 14px/1.1 var(--f-ui);cursor:pointer} #hintb{background:var(--tint);border-color:var(--sel)} #hintb::before{margin-right:6px} #next::before{display:none} #next{max-width:112px;text-align:center} .grow>button:disabled{opacity:.45} .gb{display:block;width:100%;aspect-ratio:1;border:1px solid var(--line);border-radius:var(--r-s);touch-action:manipulation;user-select:none;-webkit-user-select:none;shape-rendering:geometricPrecision} .gb .sqr{shape-rendering:crispEdges;cursor:pointer} .gb text{font-family:var(--f-ui);pointer-events:none} .tpanel .tcard:has(#moves[hidden]){display:none} .tgo{margin-bottom:0} #tab-train .bubble .tgo{flex-direction:row;align-self:stretch;justify-content:center;margin:6px 0 0;min-height:38px;min-width:0;padding:4px 12px;gap:8px;border-width:2px;border-radius:var(--r-m)} #tab-train .bubble .tgo[hidden]{display:none} #tab-train .bubble .tgo span{font-size:15px!important} @media (max-width:820px), (pointer:coarse) and (max-width:1366px){ body:has(#tab-train:not([hidden])):not(.home-mode):not(.tsetup):not([class*="scr-"]){padding-block-start:6px} body:has(#tab-train:not([hidden])):not(.home-mode):not(.tsetup) #apptitle{font-size:20px;line-height:1.2;margin:0 0 4px;text-align:center} #tab-train .tstrip{margin:0 0 6px;font-size:14px} #tab-train .bov,#tuto .bov{width:min(100%,max(200px,calc(100dvh - 342px)));margin-inline:auto} #tab-train .twrap{gap:0} #tab-train .bwrap,#tuto .bwrap{margin-top:8px;gap:8px;align-items:center} #tab-train .bishop,#tuto .bishop{flex:0 0 64px!important;width:64px!important;max-width:64px} #tab-train .bubble,#tuto .bubble{height:112px;margin-bottom:0;padding:8px 12px} #tab-train .bubble::before,#tuto .bubble::before{bottom:auto;top:34px} #tab-train .bubble::after,#tuto .bubble::after{bottom:auto;top:37px} #tab-train .tstatus,#tuto .tstatus{font-size:15px;line-height:1.3;min-height:0} #topn{display:none} #tab-train .bnav button,#bprev,#bnext{min-height:44px;min-width:48px;font-size:22px!important;padding:0 8px} #retry{font-size:15px;min-width:0!important;padding:0 10px!important} .grow>button{font-size:14px;min-height:44px} #tuto .su-h{font-size:20px;margin:0 0 4px;text-align:center} #tuto .tstrip{margin:0 0 6px;font-size:14px} } /* Réglages */ #settings .tcard,#tuto .tcard,#profil .tcard,#repertoire .tcard{margin-bottom:12px} .st-h{font:600 17px/1.3 var(--f-ui);margin:0 0 10px} .pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} @media (min-width:560px){.pgrid{grid-template-columns:repeat(5,minmax(0,1fr))}} .popt{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px;min-height:0;border:2px solid var(--line);border-radius:var(--r-m);background:var(--sheet);color:var(--fg);cursor:pointer;font:600 14px var(--f-ui)} .popt span{font-size:14px} .popt.on{border-color:var(--sel);background:var(--tint);box-shadow:0 0 0 1px var(--sel)} .popt:focus-visible,.sw:focus-visible{outline:3px solid var(--sel);outline-offset:2px} .pvsvg{width:100%;max-width:120px;height:auto;aspect-ratio:1;border-radius:var(--r-s);display:block;shape-rendering:crispEdges} .pvsvg image{shape-rendering:auto} .swrow{display:flex;align-items:center;justify-content:space-between;gap:14px} .swrow label{flex-direction:column;align-items:flex-start;gap:2px} .sw{width:58px;height:34px;min-height:34px;border-radius:var(--r-pill);border:2px solid var(--line);background:var(--tint);position:relative;padding:0;flex:none;cursor:pointer} .sw i{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--mut);transition:transform .15s} .sw.on{background:var(--sel);border-color:var(--sel)} .sw.on i{transform:translateX(24px);background:var(--cu-ink)} @media (prefers-reduced-motion:reduce){.sw i{transition:none}} /* Tuto */ #tuto .bov{position:relative;max-width:560px} #tu-fifou{flex:0 0 auto} #tu-fifou .bishop{display:block} :root{--bw:min(100vw - 24px,100dvh - 420px);--bwt:min(100vw - 24px,100dvh - 342px)} @media (max-width:820px), (pointer:coarse) and (max-width:1366px){ #tab-train .bov{width:max(200px,var(--bw))} #tuto .bov{width:max(200px,var(--bwt))} #tab-train .bubble{height:clamp(112px,calc(100dvh - 308px - var(--bw)),200px)} #tuto .bubble{height:clamp(112px,calc(100dvh - 230px - var(--bwt)),200px)} #su-gear{top:calc(3px + env(safe-area-inset-top,0px));right:10px;width:38px;height:38px;border-radius:var(--r-m);min-height:0} #su-gear::before{inset:9px} } #tab-train .bubble .tgo{animation:none!important} @media (max-width:820px), (pointer:coarse) and (max-width:1366px){ #tab-train .bnav button:not(#bprev):not(#bnext){font-size:14px!important;min-height:44px!important;white-space:nowrap} #retry::before{display:inline-block;margin:0 6px 0 0;vertical-align:-4px} .grow .gmid{overflow:hidden} } #retry::before{display:none} #retry{border:1px solid var(--sel);border-radius:var(--r-m);background:var(--tint);color:var(--fg);cursor:pointer;font-weight:600} .pvsvg,.gb,#tu-fifou svg{min-width:0} #tuto .bubble{display:flex;flex-direction:column;box-sizing:border-box} #tuto .bin{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain} @media (min-width:821px) and (pointer:fine), (min-width:1367px){#tuto .bubble{min-height:130px}#tuto,#settings,#profil,#repertoire{max-width:640px;margin:0 auto}} /* 2.7 : Fifou nomme et commente les positions connues (fifou-positions.json) */ .tfpos{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);line-height:1.45} .tfpos[hidden]{display:none} .tfpos .tfn{font-weight:700;color:var(--sel);font-size:16px} .tfpos .tft{font-size:16px;margin-top:2px} /* 2.8.2 : pièces capturées au-dessus et au-dessous de l'échiquier (hauteur fixe, comptée dans --bw) */ .caps{display:flex;align-items:center;gap:6px;height:18px;margin:2px auto 0;width:max(200px,var(--bw));max-width:560px;overflow:hidden} .caps .cg{display:inline-flex;align-items:center;font-style:normal;background:var(--sq-l);border-radius:var(--r-s);padding:0 3px;height:18px} .caps img{width:17px;height:17px;display:block} .caps .cg img+img{margin-left:-10px} .caps .cadv{font:600 13px var(--f-ui);color:var(--sel);line-height:18px;margin-left:2px} @media (min-width:821px) and (pointer:fine), (min-width:1367px){.caps{width:100%}} /* 2.8.3 : bouton « Noirs » sous l'échiquier ; pendant l'attente, il prend la place d'Indice et de Passer cette ligne */ .grow:has(#tgo:not([hidden])){grid-template-columns:auto minmax(0,1fr)} .grow:has(#tgo:not([hidden]))>#hintb,.grow:has(#tgo:not([hidden]))>#next{display:none} #tab-train .grow>.tgo{grid-column:2;flex-direction:row;justify-content:center;gap:10px;align-self:stretch;margin:0;min-height:52px;min-width:0;width:100%;padding:0 16px;border:0;border-radius:var(--r-m);background:var(--green);color:#0e1a12;font:700 24px/1 var(--f-ui);box-shadow:none;animation:none} #tab-train .grow>.tgo span{font-size:18px} #tab-train .grow>.tgo:hover{background:var(--green);filter:brightness(1.06)} #tab-train .grow>.tgo[hidden]{display:none} /* coup refusé : « Réessayer » prend la même place, en grand et sur fond rouge ; Indice reste disponible */ .grow:has(#rnav:not([hidden])) .gmid,.grow:has(#rnav:not([hidden])) #rnav{width:100%;align-self:stretch} #tab-train .grow #rnav button#retry{flex:1;width:100%;min-height:44px;border:0;border-radius:var(--r-m);background:var(--red);color:#2a0d0a;font:700 16px/1 var(--f-ui)!important} /* 2.8.4 : pas de zoom de la page (ni pincer, ni double appui) ; les défilements restent permis */ html,body{touch-action:pan-x pan-y} /* 2.8.5 : « Indice » sous ◀ ▶ (ou sous « Réessayer ») ; à droite, « Passer cette ligne » ou « Coup suivant » sur toute la hauteur */ #tab-train .grow,#tab-train .grow:has(#tgo:not([hidden])){grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;row-gap:6px} #tab-train .grow>.gmid{grid-column:1;grid-row:1} #tab-train .grow>#hintb{grid-column:1;grid-row:2;width:100%;display:flex;align-items:center;justify-content:center} #tab-train .grow>#next{grid-column:2;grid-row:1/3;align-self:stretch;max-width:none} #tab-train .grow>.tgo{grid-row:1/3} #tab-train .grow .bnav{margin:0} #tab-train .grow:has(#tgo:not([hidden]))>#hintb{display:flex;visibility:hidden} /* « Passer cette ligne » : question Oui / Non au même endroit que le bouton */ #tab-train .grow>.skipq{grid-column:2;grid-row:1/3;align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;gap:6px;min-width:0} #tab-train .grow>.skipq[hidden]{display:none} .grow:has(#skipq:not([hidden]))>#next{display:none} .skipq p{margin:0;text-align:center;font:600 14px/1.15 var(--f-ui);color:var(--fg)} .skipq .skipb{display:flex;gap:14px;flex:1} .skipq .skipb button{flex:1;min-height:44px;border-radius:var(--r-m);border:1px solid var(--line);background:var(--sheet);color:var(--fg);font:700 17px/1 var(--f-ui);cursor:pointer} .skipq #skipy{background:var(--sel);border-color:var(--sel);color:var(--cu-ink)} /* réglage Oui / Non */ .swl{display:flex;flex-direction:column;gap:2px} .seg{display:flex;flex:none;border:2px solid var(--line);border-radius:var(--r-pill);overflow:hidden} .seg button{min-height:38px!important;min-width:56px;padding:0 12px;border:0;background:var(--tint);color:var(--fg);font:600 15px/1 var(--f-ui);cursor:pointer} .seg button.on{background:var(--sel);color:var(--cu-ink)} .seg button:focus-visible{outline:3px solid var(--sel);outline-offset:-3px} /* accueil : les cartes du menu principal n'affichent que leur titre (la ligne de progression reste dans le code, masquée) */ #home .hc-sub{display:none} #home .home-card{min-height:88px} /* « Choisis une ouverture » : chaque carte n'affiche que le nom (la ligne de progression reste dans le code, masquée) */ /* Mon profil */ .i-prof{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%228%22 r=%224%22/%3E%3Cpath d=%22M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7%22/%3E%3C/svg%3E")} .pf-elo{display:flex;align-items:center;gap:10px;margin:0 0 8px} .pf-elo input{width:110px;min-height:48px;text-align:center;font:600 22px/1 var(--f-ui);border:2px solid var(--line);border-radius:var(--r-m);background:var(--tint);color:var(--fg);-moz-appearance:textfield;appearance:textfield} .pf-elo input::-webkit-inner-spin-button,.pf-elo input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0} .pf-elo input:focus-visible{outline:3px solid var(--sel);outline-offset:2px} .elo-niv{margin:0 0 4px;font-size:15px;line-height:1.35;color:var(--mut);overflow-wrap:anywhere}.elo-niv b{color:var(--fg);font-weight:600;font-size:inherit} .ovelo .elo-niv{margin:-4px 0 0;text-align:center;font-size:13px;line-height:1.3} .ovelo label{white-space:nowrap} .pf-pm{width:48px;height:48px;min-height:48px;border-radius:50%;border:2px solid var(--line);background:var(--tint);color:var(--fg);font:600 24px/1 var(--f-ui);padding:0} .pf-pre{margin:-4px 0 6px} .pf-row{padding:10px 0;border-top:1px solid var(--line)} .pf-row:first-child{border-top:0} .pf-row b{font:600 17px/1.3 var(--f-ui)} .pf-msg{min-height:1.2em;color:var(--red)} /* ===== 2.8.15 · Lot 1 : charte (rôles de couleur, surfaces, typographie, boutons) ===== */ /* cuivre = action, vert = réussite, corail = erreur, ambre = indice ; surfaces : fond #0f1729, cartes #17223a, éléments actifs #1f2c48 */ :root{--edge:rgba(243,238,230,.07);--lift:inset 0 1px 0 rgba(255,255,255,.04);--cu-ink:#1d1107; --t1:400 26px/32px var(--f-display);--t2:400 19px/24px var(--f-display);--t3:400 15px/22px var(--f-ui);--t4:600 13px/16px var(--f-ui)} h1,#apptitle{font:var(--t1);letter-spacing:-.005em} #tab-train h2,.su-h,#tuto .su-h,#settings h2,#profil h2,#repertoire h2{font-weight:400} .su-h{font:var(--t1)} #tab-train h2{font:var(--t2)} .st-h{font:600 17px/24px var(--f-ui)} .tprog,.tstrip,.dpt-v,.ring b,.caps .cadv{font-variant-numeric:tabular-nums} .tcard,.home-card,.ana,.ovpane,#settings .tcard,#profil .tcard,#repertoire .tcard{border:1px solid var(--edge)!important;box-shadow:var(--lift)} .home-card:hover,.home-card:focus-visible{border-color:rgba(var(--sel-rgb),.55)!important} /* boutons : tonal (par défaut), plein cuivre (action principale), texte (action discrète) */ button,#tab-train button,.grow>button,.skipq .skipb button,.seg button,.pf-pm{background:var(--tint);border:1px solid transparent;color:var(--fg);font-weight:600;border-radius:var(--r-m)} .grow>button,.skipq .skipb button{font:600 15px/1.1 var(--f-ui)!important} button[aria-pressed="true"],#tab-train button[aria-pressed="true"],.seg button.on,.skipq #skipy,.su-go{background:var(--sel);border-color:var(--sel);color:var(--cu-ink)} #tab-train button:hover:not(:disabled):not([aria-pressed="true"]){border-color:rgba(var(--sel-rgb),.45)} .ovback{color:var(--sel)!important;text-decoration:none;font-weight:600} #hintb{background:var(--tint);border-color:transparent!important;color:var(--fg)} #hintb::before{background:var(--hint)} #tab-train .grow #rnav button#retry{background:var(--red);color:#2a0d08} #tab-train .grow>.tgo,#tab-train .grow>.tgo:hover{background:var(--sel);color:var(--cu-ink)} .tmeter{background:var(--tint)} .tprob{border-color:var(--red)} .nvb[aria-current="page"]{background:rgba(var(--sel-rgb),.16)} .popt.on{background:var(--tint)} /* ===== 2.8.15 · Lot 2 : écran d'entraînement (en-tête compact, échiquier bord à bord et en relief, rangée d'actions hiérarchisée) ===== */ :root{--bw:min(100vw - 24px,100dvh - 304px)} body:has(#tab-train:not([hidden])):not(.home-mode):not(.tsetup):not([class*="scr-"]) #apptitle{display:none} #tab-train .tstrip{display:none} .thead{display:flex;align-items:center;gap:10px;height:46px;margin:0 auto 6px;max-width:560px} @media (max-width:820px), (pointer:coarse) and (max-width:1366px){.thead{width:max(200px,var(--bw))}} .thring{width:28px;height:28px;flex:none} .thring svg{width:28px;height:28px;transform:rotate(-90deg);display:block;min-width:0} .thring circle{fill:none;stroke-width:4}.thring .bg{stroke:var(--tint)}.thring .fg{stroke:var(--sel);stroke-linecap:round;transition:stroke-dashoffset .6s} .tht{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px} .tht #thday{font:600 12.5px/16px var(--f-ui);color:#9aa5b9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tht #thday b{font-weight:700;color:var(--fg)} .tht #thday.ok b{color:var(--vert2)} .thead.thok .thring .fg{stroke:var(--green)} #thead #su-gear{position:relative;top:auto;right:auto;display:block;flex:none;width:40px;height:40px;border-radius:var(--r-m);border:0;background:var(--tint)} #thead #su-gear::before{inset:10px} #thead #su-gear[hidden]{display:none} /* échiquier : coins arrondis, liseré cuivre, ombre ; coordonnées plus discrètes */ #tab-train .bov,#tuto .bov{border-radius:var(--r-m);box-shadow:0 0 0 1.5px rgba(var(--sel-rgb),.45),0 10px 28px rgba(0,0,0,.4)} #board,#tuboard{border:0;border-radius:var(--r-m)} #board .coord,#tuboard .coord{font-size:2.1px;font-weight:700;opacity:.95} /* rangée d'actions : ◀ ▶ · Indice · Passer (texte) ; Coup suivant cuivre à la place d'Indice et Passer */ #tab-train .grow,#tab-train .grow:has(#tgo:not([hidden])){grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto;row-gap:0;column-gap:8px;margin:10px 0 0} #tab-train .grow:has(#rnav:not([hidden])){grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto} @media (max-width:820px), (pointer:coarse) and (max-width:1366px){#tab-train .grow{width:max(200px,var(--bw));margin-inline:auto}} #tab-train .grow>.gmid{grid-column:1;grid-row:1} #tab-train .grow>#hintb{grid-column:2;grid-row:1} #tab-train .grow>#next{grid-column:3;grid-row:1} #tab-train .grow>.tgo,#tab-train .grow>.skipq{grid-column:2/4;grid-row:1} #tab-train .grow .bnav{gap:8px} #tab-train .grow>button,#tab-train .grow #rnav button#retry,#tab-train .bnav button,#bprev,#bnext{min-height:48px!important;height:48px} #bprev,#bnext{width:48px;min-width:48px;padding:0!important;font-size:18px!important;border-radius:var(--r-m)} #tab-train .grow:has(#tgo:not([hidden]))>#hintb{display:none!important} #tab-train .grow>#next{background:transparent;border:0;color:var(--gris);padding:0 8px} #tab-train .grow>#next:hover{color:var(--fg)} #tab-train .tboardbox:has(#endov:not([hidden])) .grow>#next{background:var(--sel);color:var(--cu-ink);padding:0 16px} #tab-train .grow>.tgo{min-height:48px;height:48px;font-size:18px!important} #tab-train .grow>.tgo span{font-size:16px!important} #tab-train .grow>.skipq{flex-direction:row;align-items:center;justify-content:flex-end;gap:8px} #tab-train .grow>.skipq p{flex:1;min-width:0;text-align:left;font:600 13px/1.2 var(--f-ui)} #tab-train .grow>.skipq .skipb{flex:none;gap:6px} #tab-train .grow>.skipq .skipb button{min-width:58px;height:48px;min-height:48px} #tab-train .bwrap{margin-top:10px} @media (max-width:820px), (pointer:coarse) and (max-width:1366px){ #tab-train .bwrap{width:max(200px,var(--bw));margin-inline:auto} #tab-train .bubble{height:clamp(96px,calc(100dvh - var(--bw) - 216px),230px)} } #tab-train .grow:has(#skipq:not([hidden]))>#hintb{display:none} /* ===== 2.8.15 · Lot 3 : retours sur le plateau (tremblement, case corail, halo d'indice, smiley qui apparaît) ===== */ #board .shk{transform-box:fill-box;transform-origin:50% 50%;animation:pshk .24s ease-in-out .16s} @keyframes pshk{0%,100%{transform:translateX(0)}17%{transform:translateX(-1px)}50%{transform:translateX(1px)}83%{transform:translateX(-.6px)}} #board .errfl{opacity:0;animation:errfl .6s ease-out .4s} @keyframes errfl{0%{opacity:0}25%{opacity:.45}100%{opacity:0}} #board .hfl{animation:hfl .45s ease-in-out 2} @keyframes hfl{50%{stroke-width:1.8px;fill-opacity:.32}} #board .rpop{transform-box:fill-box;transform-origin:50% 50%;animation:rpop .22s ease-out} @keyframes rpop{0%{transform:scale(.6)}70%{transform:scale(1.1)}100%{transform:scale(1)}} @media (prefers-reduced-motion:reduce){#board .shk,#board .hfl,#board .rpop{animation:none}#board .errfl{animation:none;opacity:0}} /* ===== 2.8.15 · Lot 4 : bulle de Fifou (titre + explication, détail derrière « Pourquoi ? ») et Fifou qui réagit ===== */ #tab-train .bubble,#tuto .bubble{border:1.5px solid rgba(var(--fg-rgb),.1);border-radius:var(--r-l) var(--r-l) var(--r-l) var(--r-s);background:var(--sheet);box-shadow:var(--lift)} #tab-train .bubble::before,#tuto .bubble::before{border-right-color:rgba(var(--fg-rgb),.14)} #tab-train .bubble.ok,#tab-train .bubble.done{border-color:rgba(var(--green-rgb),.6)}#tab-train .bubble.ok::before,#tab-train .bubble.done::before{border-right-color:rgba(var(--green-rgb),.6)} #tab-train .bubble.bad{border-color:rgba(var(--red-rgb),.65);background:#2a1f2c}#tab-train .bubble.bad::before{border-right-color:rgba(var(--red-rgb),.65)}#tab-train .bubble.bad::after{border-right-color:#2a1f2c} #tab-train .bubble.done{background:var(--sheet)}#tab-train .bubble.done::after{border-right-color:var(--sheet)} .tstatus .th1{display:block;margin-top:4px;font-size:16px;line-height:1.3} .tstatus .th2{display:block;margin-top:3px;color:#c9d0dc} .tstatus .th2 b{color:var(--fg)} .evc{display:inline-block;padding:0 5px;border-radius:var(--r-xs);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap} .evc.p{background:rgba(var(--green-rgb),.16);color:var(--vert2)}.evc.n{background:rgba(var(--red-rgb),.16);color:#f6a294} .twhy{display:inline;margin:0 0 0 2px;padding:0!important;min-height:0;height:auto;border:0!important;background:none!important;color:var(--sel)!important;font:600 14px/1.6 var(--f-ui)!important;cursor:pointer} @media (max-width:820px), (pointer:coarse) and (max-width:1366px){#tab-train .bubble{height:max(96px,calc(100dvh - var(--bw) - 216px))}} /* Fifou : un petit rebond à chaque message */ .bishop.talk{animation:ffpop .26s ease-out 1} @keyframes ffpop{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}} .bishop{transform-origin:50% 90%} .thmode{width:26px;height:26px;flex:none;display:block} .thmode:empty{display:none} .pcs-mini{width:26px;height:26px;display:block;min-width:0} .pcs-mini *{animation:none!important} :root{--bw:min(100vw - 24px,100dvh - 322px)} .thsub{display:flex;align-items:center;gap:5px;min-width:0} .thsub .thmode,.thsub .pcs-mini{width:18px;height:18px} .tstatus .th1{margin-top:2px} @media (max-width:820px), (pointer:coarse) and (max-width:1366px){.tstatus .th1{font-size:15px}#tab-train .bubble{padding:7px 11px}} :root{--bw:min(100vw - 24px,100dvh - 326px)} #tab-train .grow{margin-top:8px} @media (max-width:820px), (pointer:coarse) and (max-width:1366px){#tab-train .bwrap{margin-top:6px}#tab-train .bubble{height:max(96px,calc(100dvh - var(--bw) - 208px))}} /* ===== 2.8.15 · Lot 5 : fin de ligne en carte bilan (feuille qui monte du bas, plateau assombri) ===== */ #board.blur{filter:brightness(.5) saturate(.8)} #tab-train .endov{position:fixed;inset:auto 0 var(--navh) 0;padding:0;z-index:95;display:block;align-items:stretch} #tab-train .endov[hidden]{display:none} #tab-train .endov .ovpane{max-width:560px;margin:0 auto;width:100%;border-radius:var(--r-xxl) var(--r-xxl) 0 0;border:0!important;border-top:1px solid rgba(var(--sel-rgb),.35)!important;background:#16213a;padding:18px 18px 14px;gap:12px;box-shadow:0 -20px 40px rgba(0,0,0,.45);animation:ovup .28s cubic-bezier(.2,.8,.2,1)} @keyframes ovup{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}} @media (prefers-reduced-motion:reduce){#tab-train .endov .ovpane{animation:none}} .ovbil{display:grid;gap:12px} .ovbil[hidden]{display:none} .ovbt{display:flex;align-items:center;gap:12px} .ovff{width:56px;flex:none;display:block} .ovff .bishop{width:56px;max-width:56px;flex:none;height:auto;display:block} .ovh{margin:0;font:400 25px/1.1 var(--f-display)} .ovs{margin:3px 0 0;font-size:13.5px;color:var(--gris);line-height:1.3} .ovst{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .ovst div{background:var(--tint);border-radius:var(--r-m);padding:10px 6px;display:grid;gap:4px;justify-items:center;text-align:center} .ovst b{font:700 20px/1 var(--f-ui);font-variant-numeric:tabular-nums} .ovst div:first-child b{color:var(--vert2)} .ovst span{font:600 11.5px/1.2 var(--f-ui)!important;color:#9aa5b9} #tab-train #ov-new{background:var(--sel);border:0;color:var(--cu-ink);min-height:52px;padding:0 16px;border-radius:var(--r-b);font:700 17px/1 var(--f-ui)} #tab-train #ov-new b{font-weight:700} .ovlk{display:flex;justify-content:space-between;gap:8px} #tab-train .ovlk .ovcard{width:auto;flex:1;background:transparent;border:0;color:var(--cu2);padding:0 6px;min-height:44px;font-size:15px} #tab-train .ovlk .ovcard b{font-weight:600} #tab-train #ovsub{gap:10px} #tab-train #ovsub .ovcard{background:var(--tint);border:0;padding:14px} /* ===== 2.8.15 · Lot 6 : navigation (Accueil · S'entraîner · Réglages), préparation en un geste, progression par branche, Réglages en carrousels ===== */ #train-setup .su-h,#train-setup .su-p{display:none} /* 2.8.49 : réglages d'entraînement en une seule page ; la progression n'y est plus affichée (elle reste sur l'accueil et les anneaux), seul le bouton de remise à zéro reste */ .tprogc>:not(.trow){display:none} .tprogc>.trow{margin-top:0!important} .st-lic{margin:20px 0 0;text-align:center;font-size:13px}.st-lic a{color:inherit;opacity:.7} #tpt{color:var(--fg)!important;font:var(--t2)} #tab-train .su-go,#tab-train #su-go{background:var(--sel);border:0;color:var(--cu-ink);min-height:56px;font:700 18px/1 var(--f-ui)!important;border-radius:var(--r-l)} .tbrs{display:grid;gap:8px;margin:12px 0 4px} .tbr{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:10px;align-items:center} .tbn{font:700 14px/1 var(--f-ui)!important} .tbm{height:8px;border-radius:var(--r-xs);background:var(--tint);overflow:hidden;display:block} .tbm i{display:block;height:100%;background:var(--green);border-radius:var(--r-xs)} .tbc{font:600 13px/1 var(--f-ui)!important;color:var(--gris);font-variant-numeric:tabular-nums} #settings .st-big{width:200px;max-width:70%;margin:2px auto 12px} #settings .st-big .pvsvg{max-width:none;width:100%;border-radius:var(--r-m);box-shadow:0 0 0 1.5px rgba(var(--sel-rgb),.45),0 8px 22px rgba(0,0,0,.35)} #settings .st-l{margin:10px 0 6px;font:var(--t4);color:var(--gris);text-transform:uppercase;letter-spacing:.08em} #settings .pcar{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding:2px 2px 8px;margin:0 -2px;scrollbar-width:none;touch-action:pan-x pan-y} #settings .pcar::-webkit-scrollbar{display:none} #settings .pcar .popt{flex:0 0 88px;width:88px;scroll-snap-align:start;padding:6px;gap:4px;border-width:2px} #settings .pcar .popt span{font-size:12.5px;line-height:1.15;text-align:center} #settings .pcar .pvsvg{max-width:74px} #settings .st-row{padding:12px 0;border-top:1px solid var(--edge)} #settings .st-sec .st-h+.swrow{border-top:0;padding-top:0} #settings .st-sec>.st-row:first-of-type{margin-top:6px} /* ===== 2.8.15 · Lot 7 : accueil (Fifou qui parle, carte héros, série, tuiles) ; 2.8.79 : série en haut, tuiles avec petits Fifous ===== */ #home{text-align:left;padding:0 0 8px;max-width:520px;margin:0 auto} .streak{display:grid;gap:7px;margin:0 0 10px;padding:9px 12px 10px;border-radius:var(--r-l);background:var(--sheet);border:1px solid var(--edge);box-shadow:var(--lift)} .streak .sk-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px} .streak .sk-l{font:600 11.5px/1.2 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--mut);white-space:nowrap} .streak .sk-n{font:500 14px/1.2 var(--f-ui);color:var(--fg);white-space:nowrap} .streak .sk-n b{font:400 20px/1 var(--f-display);color:var(--cu2);margin-right:3px} .streak .days{display:flex;justify-content:space-between} .streak .days i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 11px/1 var(--f-ui);font-style:normal;background:var(--tint);color:#7d889c} #home .hello{display:flex;align-items:center;gap:8px;margin:0 0 10px} #home .hello .home-fifou{width:58px;height:auto;margin:0;flex:none} #home .hsay{position:relative;flex:1;margin:0;padding:9px 12px;border-radius:var(--r-l) var(--r-l) var(--r-l) var(--r-xs);background:var(--sheet);border:1px solid var(--edge);box-shadow:var(--lift);color:var(--fg);font-size:14px;line-height:1.35;text-align:left} .hero{display:grid;gap:10px;padding:12px;border-radius:var(--r-xl);background:linear-gradient(160deg,#24365a,#18243e 70%);border:1px solid rgba(var(--sel-rgb),.4);box-shadow:var(--lift)} .hln{display:flex;align-items:center;gap:10px} .htx{flex:1;min-width:0} .hero .hn{margin:0;font:400 17px/1.22 var(--f-display)} .hero .hring,.hero .hring svg{width:52px;height:52px} /* petits Fifous (têtes) dans une pastille, comme sur l'écran Autres modes de jeu */ .hff{flex:none;position:relative;display:grid;place-items:center;width:48px;height:48px;border-radius:var(--r-b);background:var(--tint)} .hff .bishop,.hff .ffp{display:block;flex:none!important;width:100%!important;max-width:100%;height:100%;min-width:0;overflow:hidden;border-radius:var(--r-b)} .hff .bishop *,.hff .ffp *{animation:none} .hff svg.acc{position:absolute;right:-4px;bottom:-2px;width:22px;height:22px;min-width:0!important} .hero .hff{width:46px;height:50px} #home .home-menu{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:10px 0 0;max-width:none} #home .home-menu .home-card{grid-column:span 2;min-height:0;padding:12px 6px 10px;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;text-align:center;border-radius:var(--r-l);position:relative} #home .home-menu #go-rep,#home .home-menu #go-modes{grid-column:span 3} #home .home-menu .hc-txt{display:flex;flex-direction:column;align-items:center} #home .home-menu .home-t{font:600 14px/1.15 var(--f-ui)!important;color:var(--fg)} #home .home-menu .hc-sub,#home .home-menu .ring{display:none} #home .hsay b{font-weight:700;color:var(--cu2)} .hring{position:relative;width:64px;height:64px;flex:none} .hring svg{width:64px;height:64px;transform:rotate(-90deg);display:block;min-width:0} .hring circle{fill:none;stroke-width:6}.hring .bg{stroke:#2a3a5c}.hring .fg{stroke:var(--sel);stroke-linecap:round;transition:stroke-dashoffset .6s} .hring b{position:absolute;inset:0;display:grid;place-items:center;font:700 14px/1 var(--f-ui);font-variant-numeric:tabular-nums} #home .hgo{min-height:52px;border:0;border-radius:var(--r-b);background:var(--sel);color:var(--cu-ink);font:700 17px/1 var(--f-ui);display:flex;align-items:center;justify-content:center;gap:8px} #home .hgo::before{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M7 4.5v15l13-7.5z%22/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M7 4.5v15l13-7.5z%22/%3E%3C/svg%3E") center/contain no-repeat} .streak .days i.on{background:var(--sel);color:var(--cu-ink)} .streak .days i.td{box-shadow:0 0 0 1.5px rgba(var(--sel-rgb),.7)} #home #go-train{display:none} /* 2.8.16 · nouveautés au style de l'audit : commentaire de niveau sous l'Elo */ .elo-niv{font:var(--t3);color:var(--mut);margin:2px 0 6px}.elo-niv b{color:var(--fg);font-weight:600} #tab-train .ovelo .elo-niv{font-size:13px;line-height:18px;margin:-2px 0 0} /* 2.8.30 : Mon objectif du jour (Mon profil) et ligne de suivi du bilan de fin de ligne */ #pf-dj .dj,#pf-el .dj{display:grid;grid-template-columns:76px 1fr;gap:4px 12px;align-items:center} #pf-dj .dj-ff,#pf-el .dj-ff{grid-row:1/3;width:76px;height:92px;display:flex;align-items:flex-end;justify-content:center} #pf-dj .dj-ff svg,#pf-el .dj-ff svg{width:76px;height:92px;overflow:visible} #pf-dj .dj-n,#pf-el .dj-n{display:flex;align-items:baseline;gap:8px;margin:0} #pf-dj .dj-n b,#pf-el .dj-n b{font:400 56px/1 var(--f-display);color:var(--sel);font-variant-numeric:tabular-nums;min-width:2ch} #pf-dj .dj-n span,#pf-el .dj-n span{font:500 16px/1.2 var(--f-ui);color:var(--mut)} #pf-dj .dj-c,#pf-el .dj-c{margin:0;font:600 17px/1.35 var(--f-ui);color:var(--fg);min-height:46px} #pf-dj .dj-r,#pf-el .dj-r{-webkit-appearance:none;appearance:none;width:100%;height:48px;margin:12px 0 0;padding:0;background:transparent;touch-action:pan-y;cursor:pointer;--p:11%} #pf-dj .dj-r::-webkit-slider-runnable-track,#pf-el .dj-r::-webkit-slider-runnable-track{height:8px;border-radius:var(--r-xs);background:linear-gradient(90deg,var(--sel) 0 var(--p),var(--line) var(--p) 100%)} #pf-dj .dj-r::-webkit-slider-thumb,#pf-el .dj-r::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:32px;height:32px;margin-top:-12px;border-radius:50%;background:var(--sel);border:3px solid var(--fg);box-shadow:0 2px 6px rgba(0,0,0,.45)} #pf-dj .dj-r::-moz-range-track,#pf-el .dj-r::-moz-range-track{height:8px;border-radius:var(--r-xs);background:var(--line)} #pf-dj .dj-r::-moz-range-progress,#pf-el .dj-r::-moz-range-progress{height:8px;border-radius:var(--r-xs);background:var(--sel)} #pf-dj .dj-r::-moz-range-thumb,#pf-el .dj-r::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--sel);border:3px solid var(--fg)} #pf-dj .dj-r:focus-visible,#pf-el .dj-r:focus-visible{outline:2px solid var(--sel);outline-offset:2px;border-radius:var(--r-s)} #pf-el .dj-c{min-height:0;font-size:20px} #pf-el .dj-r{margin-top:4px} #pf-dj .dj-t,#pf-el .dj-t{display:flex;justify-content:space-between;font:500 13px/1 var(--f-ui);color:var(--mut);padding:0 6px;margin-top:-4px} #pf-dj .dj-today{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);font:15px/1.35 var(--f-ui);color:var(--mut)} #pf-dj .dj-today b{color:var(--fg);font-size:inherit} #pf-dj .dj-bar{display:block;height:6px;border-radius:var(--r-xs);background:var(--line);margin-top:8px;overflow:hidden} #pf-dj .dj-bar i{display:block;height:100%;background:var(--green)} .ovcp{margin:10px 0 0;text-align:center;font:600 14px/1.4 var(--f-ui);color:var(--fg)} .ovcp[hidden]{display:none} .ovday{margin:10px 0 0;text-align:center;font:600 14px/1.3 var(--f-ui);color:var(--gris)} .ovday b{color:var(--fg);font-size:inherit} .ovday.ok b{color:var(--vert2)} /* 2.8.34 : plusieurs ouvertures. Cases à cocher (Choisir mes ouvertures, Mon profil), variantes repliables, progression par ouverture */ .ck{width:28px;height:28px;flex:none;border-radius:var(--r-s);border:2px solid var(--mut);display:inline-grid;place-items:center;background:transparent;box-sizing:border-box} .on>.ck{background:var(--sel);border-color:var(--sel)} .on>.ck::after{content:"";width:7px;height:13px;border:solid var(--cu-ink);border-width:0 3px 3px 0;transform:translateY(-2px) rotate(45deg)} .mid>.ck{background:var(--sel);border-color:var(--sel)} .mid>.ck::after{content:"";width:12px;height:3px;background:var(--cu-ink);border-radius:2px} .pf-ouv{padding-top:6px;padding-bottom:6px} .pf-oh{display:flex;align-items:center;gap:14px;width:100%;min-height:56px;padding:0;border:0;background:none;color:var(--fg);text-align:left;cursor:pointer} .pf-oh b{font:700 18px/1.3 var(--f-ui)} .pf-det{border-top:1px solid var(--line)} .pf-det>summary{list-style:none;display:flex;align-items:center;min-height:52px;padding-right:30px;position:relative;cursor:pointer;font-size:15px;color:var(--mut)} .pf-det>summary::-webkit-details-marker{display:none} .pf-det>summary::after{content:"";position:absolute;right:8px;top:50%;margin-top:-7px;width:9px;height:9px;border-right:2px solid var(--sel);border-bottom:2px solid var(--sel);transform:rotate(45deg);transition:transform .2s} .pf-det[open]>summary::after{transform:rotate(-135deg);margin-top:-2px} .pf-det .pf-pre{margin:0 0 4px} button.pf-row{display:flex;align-items:center;gap:14px;width:100%;min-height:56px;padding:6px 0;border:0;border-top:1px solid var(--line)!important;border-radius:0;background:none;color:var(--fg);text-align:left;cursor:pointer} .pf-row .pf-l{display:flex;flex-direction:column;gap:2px} .pf-row .pf-l .thint{margin:0} .pf-all .pf-l b{color:var(--sel)} .pf-oh:focus-visible,button.pf-row:focus-visible,.pf-det>summary:focus-visible{outline:3px solid var(--sel);outline-offset:2px} .tbo{display:flex;justify-content:space-between;gap:10px;margin:12px 0 4px;font-size:15px} .tbo b{font-weight:700} @media (prefers-reduced-motion:reduce){.pf-det>summary::after{transition:none}} /* ===== 2.8.51 : matériel autour de l'échiquier. Une rangée de 20 px au-dessus, une en dessous, chacune à 4 px de l'échiquier, sans chevaucher l'en-tête ni la rangée d'actions. Les 40 px gagnés sont pris sur --bw et la bulle de Fifou. ===== */ :root{--bw:min(100vw - 24px,100dvh - 352px)} @media (max-width:820px), (pointer:coarse) and (max-width:1366px){#tab-train .bubble{height:max(96px,calc(100dvh - var(--bw) - 248px))}} #tab-train .thead{height:40px;margin-bottom:4px} #thead #su-gear{width:36px;height:36px} #thead #su-gear::before{inset:8px} #tab-train .caps{height:20px;gap:5px;overflow:hidden;align-items:center} #tab-train #capT{margin:0 auto 4px} #tab-train #capB{margin:4px auto 0} #tab-train .caps .cg{background:none;border-radius:0;padding:0;height:18px} #tab-train .caps img{width:18px;height:18px;filter:contrast(1.4)} /* contraste : le blanc des petites pièces reste blanc, plus net */ #tab-train .caps .cg img+img{margin-left:-3px} #tab-train .caps .cadv{font:700 14px/18px var(--f-ui);height:18px;margin-left:1px} /* 2.8.55 : nouveau tuto (tuto.js) : bandeau des étapes, questions du profil, démo, visite des réglages, fin */ body.tu-on #botnav,body.tu-on #su-gear{display:none} .tu-top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;padding:8px 0;background:var(--bg)} .tu-steps{flex:1;display:flex;gap:5px;align-items:center;min-width:40px} .tu-steps i{height:6px;flex:1;border-radius:var(--r-xs);background:var(--line)} .tu-steps i.on{background:var(--sel)} .tu-steps i.cur{background:linear-gradient(90deg,var(--sel) var(--f,0%),var(--line) var(--f,0%))} .tu-lbl{font:600 13px/1 var(--f-ui);color:var(--mut);white-space:nowrap} .tu-skip{flex:none;min-height:40px;padding:0 12px;border-radius:var(--r-m);border:1px solid var(--line);background:var(--sheet);color:var(--fg);font:600 14px/1 var(--f-ui);cursor:pointer} .tu-q{font:600 13px/1 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--sel);margin:8px 0 4px} .tu-ff{display:flex;align-items:flex-end;gap:8px;margin:6px 0 12px} .tu-ffs{flex:none;width:76px} .tu-ffs .bishop,.tu-ffs .pcs{display:block;width:76px;height:auto;max-width:none} #tuto .tu-ff .bubble,#tuto .tu-fin .bubble{height:auto;min-height:0!important;margin:0 0 6px} #tuto .tu-ff .tstatus,#tuto .tu-fin .tstatus,.tu-coach .tstatus{font-size:17px;line-height:1.35;margin:0} .tu-sub .st-h{margin-bottom:2px} .tu-nav{display:flex;gap:10px;margin:14px 0 8px} .tu-nav button{flex:1;min-height:52px;border-radius:var(--r-b);font:700 16px/1.1 var(--f-ui);border:1px solid var(--line);background:var(--sheet);color:var(--fg);cursor:pointer} .tu-nav button:disabled{opacity:.4;cursor:default} .tu-nav .pri{flex:2;border:0;background:var(--sel);color:var(--cu-ink)} .tu-nav.tu-col{flex-direction:column} .tu-sn{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:6px} .tu-sn[hidden]{display:none} .tu-sn span{flex:1;font:600 13px/1 var(--f-ui);color:var(--mut)} .tu-sn button{min-height:40px;padding:0 18px;border-radius:var(--r-m);border:0;background:var(--sel);color:var(--cu-ink);font:700 15px/1 var(--f-ui);cursor:pointer} .tu-sn button.tu-nudge{animation:tu-nudge .4s ease-in-out} @keyframes tu-nudge{30%{transform:scale(1.08)}60%{transform:scale(.97)}} @media (prefers-reduced-motion:reduce){.tu-sn button.tu-nudge{animation:none;outline:2px solid var(--sel);outline-offset:2px}} body.tu-on #tuto .bov{width:max(200px,min(100vw - 24px,100dvh - 336px))} body.tu-on #tuto .bubble{height:auto;min-height:112px} .tu-grow{display:flex;gap:8px;margin:8px auto 0;width:max(200px,min(100%,100dvh - 336px));max-width:560px} .tu-grow button{flex:1;min-height:44px;border-radius:var(--r-m);border:1px solid var(--sel);background:var(--tint);color:var(--fg);font:600 15px/1 var(--f-ui);cursor:pointer} .tu-grow button[hidden]{display:none} .tu-grow button:disabled{opacity:.45;cursor:default} #tu-go{border:0;background:var(--green);color:#0e1a12;font-weight:700;font-size:17px} #tu-retry{border:0;background:var(--red);color:#2a0d0a;font-weight:700;font-size:16px} .tu-hl{box-shadow:0 0 0 3px var(--sel),0 0 18px 4px rgba(240,170,100,.45)!important;animation:tuhl 1.2s ease-in-out infinite} @keyframes tuhl{50%{box-shadow:0 0 0 3px var(--sel),0 0 6px 1px rgba(240,170,100,.2)}} @media (prefers-reduced-motion:reduce){.tu-hl{animation:none}} .tu-end{position:absolute;left:10%;right:10%;top:34%;padding:14px 16px;border-radius:var(--r-l);background:var(--sheet);box-shadow:var(--lift);text-align:center} .tu-end[hidden]{display:none} .tu-endh{margin:0;font:400 26px/1.1 var(--f-display);color:var(--sel)} .tu-ends{margin:6px 0 0;font:500 14px/1.3 var(--f-ui);color:var(--mut)} /* place sous la page pendant la visite, pour amener les derniers réglages au-dessus de Fifou */ body.tu-visit{padding-bottom:70vh!important} .tu-dim{position:fixed;inset:0;z-index:80;background:rgba(5,9,20,.72)} .tu-spot{position:relative;z-index:81;pointer-events:none;border-radius:var(--r-b);background:var(--sheet);box-shadow:0 0 0 3px var(--sel),0 0 24px 4px rgba(240,170,100,.35)} .swrow.tu-spot,.dpt.tu-spot{padding:10px} .tu-vtop{position:fixed;left:0;right:0;top:0;z-index:82;padding:0 12px;background:var(--bg)} .tu-vtop .tu-top{max-width:640px;margin:0 auto} .tu-coach{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:82;display:flex;align-items:flex-end;gap:8px;max-width:616px;margin:0 auto} .tu-coach .bubble{flex:1;margin:0;padding:10px 14px;border-radius:var(--r-l) var(--r-l) var(--r-l) var(--r-s);background:var(--sheet);border:1.5px solid rgba(var(--fg-rgb),.14)} .tu-coach .tu-ffs{width:68px}.tu-coach .tu-ffs .bishop{width:68px!important} .tu-fin{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:16px} .tu-fin .bubble{align-self:stretch} .tu-big,.tu-big .bishop{width:132px!important} #tu-dj .dj{display:grid;grid-template-columns:76px 1fr;gap:4px 12px;align-items:center} #tu-dj .dj-ff{grid-row:1/3;width:76px;height:92px;display:flex;align-items:flex-end;justify-content:center} #tu-dj .dj-ff svg{width:76px;height:92px;overflow:visible} #tu-dj .dj-n{display:flex;align-items:baseline;gap:8px;margin:0} #tu-dj .dj-n b{font:400 56px/1 var(--f-display);color:var(--sel);font-variant-numeric:tabular-nums;min-width:2ch} #tu-dj .dj-n span{font:500 16px/1.2 var(--f-ui);color:var(--mut)} #tu-dj .dj-c{margin:0;font:600 17px/1.35 var(--f-ui);color:var(--fg);min-height:46px} #tu-dj .dj-r{-webkit-appearance:none;appearance:none;width:100%;height:48px;margin:12px 0 0;padding:0;background:transparent;touch-action:pan-y;cursor:pointer;--p:11%} #tu-dj .dj-r::-webkit-slider-runnable-track{height:8px;border-radius:var(--r-xs);background:linear-gradient(90deg,var(--sel) 0 var(--p),var(--line) var(--p) 100%)} #tu-dj .dj-r::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:32px;height:32px;margin-top:-12px;border-radius:50%;background:var(--sel);border:3px solid var(--fg);box-shadow:0 2px 6px rgba(0,0,0,.45)} #tu-dj .dj-r::-moz-range-track{height:8px;border-radius:var(--r-xs);background:var(--line)} #tu-dj .dj-r::-moz-range-progress{height:8px;border-radius:var(--r-xs);background:var(--sel)} #tu-dj .dj-r::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--sel);border:3px solid var(--fg)} #tu-dj .dj-r:focus-visible{outline:2px solid var(--sel);outline-offset:2px;border-radius:var(--r-s)} #tu-dj .dj-t{display:flex;justify-content:space-between;font:500 13px/1 var(--f-ui);color:var(--mut);padding:0 6px;margin-top:-4px} #tu-dj .dj-today{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);font:15px/1.35 var(--f-ui);color:var(--mut)} #tu-dj .dj-today b{color:var(--fg);font-size:inherit} #tu-dj .dj-bar{display:block;height:6px;border-radius:var(--r-xs);background:var(--line);margin-top:8px;overflow:hidden} #tu-dj .dj-bar i{display:block;height:100%;background:var(--green)} /* Mon répertoire (Mon profil) : une carte, une ligne par ouverture, les ouvertures « Bientôt » grisées */ #pf-rep .pf-rp{margin:2px 0 6px} #pf-rep .pf-ouv{border-top:1px solid var(--line)} #pf-rep .pf-det{margin-left:42px} #pf-rep .pf-soon{display:flex;align-items:center;gap:14px;min-height:56px;border-top:1px solid var(--line);opacity:.5;cursor:default} #pf-rep .pf-soon .ck{border-style:dashed} #pf-rep .pf-soon b{font:700 18px/1.3 var(--f-ui);color:var(--mut)} #pf-rep .pf-tag{margin-left:auto;padding:6px 10px;border-radius:var(--r-pill);background:var(--tint);color:var(--mut);font:600 13px/1 var(--f-ui)} #train-setup .su-ouv #su-rep{display:inline;min-height:0!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;color:var(--sel);font:inherit;font-weight:600;text-decoration:underline;cursor:pointer} #train-setup .su-p.su-ouv{display:block;margin:0 0 12px;font-size:15px;color:var(--mut)} #train-setup .su-ouv b{color:var(--fg);font-weight:600} /* Profondeur des lignes (2.8.62) : curseur 4 à 10+ au pouce, phrase par cran, nombre de lignes, case « gain majeur » */ .dpt-d .dpt-v{color:var(--fg)}.dpt-d .dpt-v b{font:400 30px/1 var(--f-display);color:var(--sel)} .dpt-d #tdepth{-webkit-appearance:none;appearance:none;width:100%;height:48px;margin:6px 0 0;padding:0;background:transparent;touch-action:pan-y;cursor:pointer;--p:100%} .dpt-d #tdepth::-webkit-slider-runnable-track{height:8px;border-radius:var(--r-xs);background:linear-gradient(90deg,var(--sel) 0 var(--p),var(--line) var(--p) 100%)} .dpt-d #tdepth::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:32px;height:32px;margin-top:-12px;border-radius:50%;background:var(--sel);border:3px solid var(--fg);box-shadow:0 2px 6px rgba(0,0,0,.45)} .dpt-d #tdepth::-moz-range-track{height:8px;border-radius:var(--r-xs);background:var(--line)} .dpt-d #tdepth::-moz-range-progress{height:8px;border-radius:var(--r-xs);background:var(--sel)} .dpt-d #tdepth::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--sel);border:3px solid var(--fg)} .dpt-d #tdepth:focus-visible{outline:2px solid var(--sel);outline-offset:2px} .dpt-d .dpt-t{padding:0 5px}.dpt-d .dpt-t span{width:22px}.dpt-d .dpt-t span:last-child{width:32px;margin-right:-5px} .dpcm{margin:8px 0 0;font:600 16px/1.35 var(--f-ui);color:var(--fg);min-height:44px} .dpn{margin:2px 0 0;font-size:14px;color:var(--mut);font-variant-numeric:tabular-nums} .dpk{display:flex;gap:12px;align-items:flex-start;margin:12px 0 0;padding:10px 0 0;min-height:48px;cursor:pointer;border-top:1px solid var(--line)} .dpk input{width:28px;height:28px;margin:2px 0 0;flex:none;accent-color:var(--sel);cursor:pointer} .dpk b{display:block}.dpk .thint{display:block;margin:2px 0 0} /* 2.8.63 · Mon répertoire : écran à part (carte du menu principal), petits échiquiers des ouvertures et variantes */ .i-rep{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%223%22 width=%2218%22 height=%2218%22 rx=%222%22/%3E%3Cpath d=%22M3 12h18M12 3v18%22/%3E%3Cpath d=%22M3 3h9v9H3zM12 12h9v9h-9z%22 fill=%22black%22/%3E%3C/svg%3E")} #pf-rep .pf-ouv:first-child{border-top:0} .rp-mini{flex:none;margin-left:auto;display:block;border-radius:var(--r-xs);overflow:hidden;background:var(--line);box-shadow:0 1px 3px rgba(0,0,0,.35)} .rp-mini svg{display:block;width:100%;height:100%;min-width:0;max-width:100%} .rp-o{width:80px;height:80px} .rp-s{width:64px;height:64px} .pf-oh{min-height:96px} button.pf-row.pf-sub{min-height:76px} /* Tuto, questions du profil (2.8.67) : page en colonne, boutons en bas ; Elo avec niveaux et Fifou du niveau ; ouvertures avec petits échiquiers ; objectif aéré */ .tu-pq{display:flex;flex-direction:column;min-height:calc(100dvh - 78px)} .tu-pq #tu-qb{flex:1;display:flex;flex-direction:column;gap:12px} .tu-pq .tu-nav{margin-top:auto;padding-top:6px} .tu-pq .pf-msg:empty{display:none} #tuto .tu-pq .tu-ffs,#tuto .tu-pq .tu-ffs .bishop,#tuto .tu-pq .tu-ffs .pcs{flex:none!important;width:108px!important;max-width:108px} .tu-ec{display:flex;flex-direction:column;gap:14px;flex:1;justify-content:space-evenly} .tu-eh{display:flex;align-items:flex-start;gap:12px;justify-content:space-between} .tu-env{margin:0;font:var(--t1);color:var(--sel)} .tu-ect{margin:4px 0 0;font:15px/1.35 var(--f-ui);color:var(--fg);min-height:3.9em} .tu-num{flex-direction:column;gap:6px;margin:0} .tu-num input{width:96px;min-height:44px;font-size:22px} .tu-num .pf-pm{display:none} .tu-r{-webkit-appearance:none;appearance:none;width:100%;height:44px;margin:0;padding:0;background:transparent;touch-action:pan-y;cursor:pointer;--p:28%} .tu-r::-webkit-slider-runnable-track{height:8px;border-radius:var(--r-xs);background:linear-gradient(90deg,var(--sel) 0 var(--p),var(--line) var(--p) 100%)} .tu-r::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:32px;height:32px;margin-top:-12px;border-radius:50%;background:var(--sel);border:3px solid var(--fg);box-shadow:0 2px 6px rgba(0,0,0,.45)} .tu-r::-moz-range-track{height:8px;border-radius:var(--r-xs);background:var(--line)} .tu-r::-moz-range-progress{height:8px;border-radius:var(--r-xs);background:var(--sel)} .tu-r::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--sel);border:3px solid var(--fg)} .tu-r:focus-visible{outline:2px solid var(--sel);outline-offset:2px;border-radius:var(--r-s)} .tu-lvs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .tu-lv{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;padding:6px 4px;border-radius:var(--r-m);border:1px solid var(--line);background:var(--tint);color:var(--fg);font:600 14px/1.15 var(--f-ui)} .tu-lv span{font:500 12px/1 var(--f-ui);color:var(--mut);font-variant-numeric:tabular-nums} .tu-lv[aria-pressed="true"]{background:var(--sel);border-color:var(--sel);color:var(--cu-ink)} .tu-lv[aria-pressed="true"] span{color:var(--cu-ink);opacity:.75} .tu-ec>.thint{margin:0} .tu-ouv{padding:10px 14px} .tu-ouv .pf-oh{min-height:100px} .tu-ouv .pf-l{display:flex;flex-direction:column;gap:4px;min-width:0} .tu-mini{width:84px;height:84px} #tu-dj{flex:1;display:flex;flex-direction:column;justify-content:space-evenly;text-align:center;padding:16px 18px 22px} #tu-dj .dj{display:flex;flex-direction:column;align-items:center;gap:10px} #tu-dj .dj-n{flex-direction:column;align-items:center;gap:4px} #tu-dj .dj-n b{font-size:88px;min-width:0} #tu-dj .dj-n span{font-size:17px} #tu-dj .dj-c{font-size:20px;min-height:0} #tu-dj .dj-r{margin:8px 0 0} .tu-ticks{position:relative;height:18px;margin:2px 16px 0!important;padding:0!important} .tu-ticks span{position:absolute;top:0;transform:translateX(-50%);font-variant-numeric:tabular-nums} .tu-ticks span.on{color:var(--sel);font-weight:700} @media (max-height:700px){#tuto .tu-pq .tu-ffs,#tuto .tu-pq .tu-ffs .bishop,#tuto .tu-pq .tu-ffs .pcs{width:80px;max-width:80px}.tu-ec{gap:8px;padding:12px 14px}.tu-r{height:36px}.tu-lv{min-height:46px}#tu-dj .dj-n b{font-size:72px}.tu-ouv .pf-oh{min-height:88px}.tu-mini{width:76px;height:76px}} /* % de popularité d'un coup dans les bulles de Fifou */ .pct-hl{display:inline-block;padding:0 .32em;border-radius:var(--r-s);background:color-mix(in srgb,var(--sel) 22%,transparent);color:color-mix(in srgb,var(--sel) 55%,#fff);font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.3} .bubble.bad .pct-hl{background:color-mix(in srgb,var(--red) 22%,transparent)} .tu-onote{margin:2px 4px 0;font-size:14px;line-height:1.4} #tuto .tu-pq .tu-ffs{height:130px;display:flex;align-items:flex-end;justify-content:center} #tuto .tu-pq .tu-ffs .pcs{width:118px!important;max-width:118px!important;height:auto} @media (max-height:700px){#tuto .tu-pq .tu-ffs{height:96px}#tuto .tu-pq .tu-ffs .pcs{width:88px!important;max-width:88px!important}} /* Autres modes de jeu (modes.js) : carte du menu, écran d'une carte par mode */ .i-modes{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%223%22 width=%227%22 height=%227%22 rx=%221.5%22/%3E%3Crect x=%2214%22 y=%223%22 width=%227%22 height=%227%22 rx=%221.5%22/%3E%3Crect x=%223%22 y=%2214%22 width=%227%22 height=%227%22 rx=%221.5%22/%3E%3Cpath d=%22M17.5 14v7M14 17.5h7%22/%3E%3C/svg%3E")} .md-ff .bishop{flex:none!important;display:block;height:auto} .md-list{display:flex;flex-direction:column;gap:12px} .md-card{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:14px 16px;border-radius:var(--r-l);background:var(--sheet);color:var(--fg);font:inherit;border:1px solid var(--edge);box-shadow:var(--lift);cursor:pointer} .md-card:focus-visible{border-color:rgba(var(--sel-rgb),.55)} .md-ff{flex:none;width:56px;height:64px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-b);background:var(--tint)} .md-ff .bishop{width:46px!important;max-width:46px;height:54px} .md-t{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0} .md-t b{font:600 17px/1.2 var(--f-ui)} .md-t span{font:400 14px/1.35 var(--f-ui);color:var(--mut)} .md-t .md-n{color:var(--sel);font-weight:600;font-size:13px} .md-chev{flex:none;width:10px;height:10px;border-right:2px solid var(--sel);border-top:2px solid var(--sel);transform:rotate(45deg);margin-right:4px} .md-soon{cursor:default} .md-soon .md-ff,.md-soon .md-t{opacity:.55} .md-tag{flex:none;padding:6px 10px;border-radius:var(--r-pill);background:var(--tint);color:var(--mut);font:600 13px/1 var(--f-ui)} .md-msg{display:flex;align-items:center;gap:12px;margin-top:14px} .md-bul{flex:1;margin:0;padding:12px 14px;border-radius:var(--r-l);background:var(--sheet);border:1px solid var(--edge);font:400 15px/1.4 var(--f-ui);color:var(--fg)} body.scr-modes #modes{display:block} body.scr-modes #apptitle,body.scr-modes #home,body.scr-modes main>.tabs,body.scr-modes #tab-train{display:none} #modes h2{font-weight:400} @media (min-width:821px) and (pointer:fine), (min-width:1367px){#modes{max-width:640px;margin:0 auto}} /* Jeu libre (app.js, body.libre) : pas d'indice, de « Passer » ni de réglages d'entraînement ; « Erreur » en orange */ .rq.r-mistake{color:#e07a1f} body.libre #hintb,body.libre #next,body.libre #tgo,body.libre #skipq,body.libre #tundo,body.libre #tana,body.libre #endov,body.libre #su-gear,body.libre #rnav,body.libre .tfpos,body.libre #tcm{display:none!important} body.libre #pnav:not([hidden]){display:flex!important;gap:8px} body.libre #pnav button{flex:1} .md-pick{margin-top:14px;padding:14px 16px;border-radius:var(--r-l);background:var(--sheet);border:1px solid var(--edge)} .md-pick p{margin:0 0 10px;font:600 15px/1.3 var(--f-ui)} .md-cols{display:flex;gap:8px} .md-cols button{flex:1;min-height:48px;border-radius:var(--r-m);border:1px solid var(--line);background:var(--bg);color:var(--fg);font:600 15px/1.1 var(--f-ui);cursor:pointer} .md-cols button[aria-pressed="true"]{border-color:var(--sel);background:var(--tint);color:var(--sel)} .md-go{display:block;width:100%;min-height:52px;margin-top:12px;border:0;border-radius:var(--r-b);background:var(--sel);color:var(--cu-ink);font:700 16px/1.1 var(--f-ui);cursor:pointer} .md-elo{margin:10px 0 0;font:400 13px/1.35 var(--f-ui);color:var(--mut)} /* Page Pièges courants (pieges-page.js, 2.9.68) : retour, deux onglets À tendre / À éviter, une carte par piège */ body.scr-pieges #pieges{display:block} body.scr-pieges #apptitle,body.scr-pieges #home,body.scr-pieges main>.tabs,body.scr-pieges #tab-train{display:none} #pieges{padding:0 12px 16px;box-sizing:border-box} @media (min-width:821px) and (pointer:fine), (min-width:1367px){#pieges{max-width:640px;margin:0 auto}} .pz-top{display:flex;margin:2px 0 10px} .pz-back{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px 0 10px!important;border-radius:var(--r-pill)!important;font:600 14px/1 var(--f-ui)!important} .pz-back i{width:9px;height:9px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)} .pz-head{display:flex;gap:12px;align-items:center;margin:0 0 12px} .pz-head .bishop{width:48px!important;max-width:48px;height:58px;flex:none;min-width:0} .pz-head h2{margin:0;font-weight:400} .pz-head p{margin:2px 0 0;color:var(--mut);font:400 14px/1.35 var(--f-ui)} .pz-tabs{width:100%;margin:0 0 6px} .pz-tabs button{flex:1;min-height:44px!important;font-size:15px} .pz-tabs b{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:var(--r-pill);background:rgba(0,0,0,.18);font:700 12px/1.4 var(--f-ui)} .pz-desc{margin:2px 2px 10px;font:400 14px/1.35 var(--f-ui);color:var(--fg)} .pz-l{display:flex;flex-direction:column;gap:10px} .pz-c{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px 10px 10px!important;border-radius:var(--r-l)!important;background:var(--sheet)!important;border:1px solid var(--edge)!important;box-shadow:var(--lift);text-align:left;color:var(--fg);font:inherit;cursor:pointer} .pz-c:focus-visible{border-color:rgba(var(--sel-rgb),.55)!important} .pz-b{flex:none;width:76px;height:76px;border-radius:var(--r-s);overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.35);background:var(--line)} .pz-b svg{display:block;width:100%;height:100%;min-width:0;max-width:100%} .pz-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px} .pz-t b{font:600 16px/1.2 var(--f-ui)} .pz-o{font:400 13px/1.3 var(--f-ui);color:var(--mut)} .pz-p{align-self:flex-start;margin-top:3px;padding:3px 9px;border-radius:var(--r-pill);font:700 13px/1.2 var(--f-ui);background:rgba(var(--sel-rgb),.16);color:var(--sel)} .pz-p.e{background:var(--tint);color:var(--mut);font-weight:600} .pz-chev{flex:none;width:9px;height:9px;border-right:2px solid var(--sel);border-top:2px solid var(--sel);transform:rotate(45deg);margin-right:4px} .pz-vide{margin:8px 2px;font:400 14px/1.4 var(--f-ui);color:var(--mut)} /* Jeu libre et pièges : les deux boutons et ◀ ▶ tiennent sur une ligne, même en 360 px */ body.libre #pnav:not([hidden]){flex:1 1 0;min-width:0;gap:6px} body.libre #pnav button{min-width:0;padding:0 6px;font-size:14px!important;line-height:1.15;white-space:normal!important} body.libre #bnav{flex:none} @media (max-width:370px){body.libre #tab-train #pnav button{font-size:13px!important;padding:0 3px}body.libre #tab-train #bnav{gap:4px}body.libre #tab-train #bprev,body.libre #tab-train #bnext{width:40px;min-width:40px!important}} /* 2.8.77 · Mon répertoire : titre avec la tête de Fifou et une phrase à sa façon */ .rp-tete{display:flex;gap:12px;align-items:center;margin:4px 0 14px} .rp-tete img{width:56px;height:56px;flex:none} .rp-tete .bishop{width:56px;height:67px;flex:none;min-width:0} .rp-tete .su-h{margin:0} .rp-tete .su-p{margin:2px 0 0;font-size:15px;line-height:21px;color:var(--mut)} /* Tuto, étape « Autres modes » (tuto.js) : les trois modes en petites cartes, pas cliquables */ .tu-md{display:flex;flex-direction:column;margin-top:10px} .tu-mdl{display:flex;flex-direction:column;gap:10px} .tu-mdl .md-card{cursor:default;box-shadow:none} /* 2.8.80 : page « S'entraîner » (#train-setup) : carte des ouvertures, tuiles d'exigence, curseur de profondeur + drapeau du gain majeur, échelle de l'étendue. Pas de textes d'explication (Fifou les donne dans le tuto). */ #train-setup .tprogc{display:none} #train-setup svg{min-width:0} #train-setup button.su-ouv{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;margin:0 0 14px;padding:10px 12px 10px 10px;border-radius:var(--r-l);background:var(--sheet);border:1px solid var(--edge);box-shadow:var(--lift);color:var(--fg);font:inherit;text-align:left;cursor:pointer} #train-setup .su-ouv:focus-visible{outline:2px solid var(--sel);outline-offset:2px} .su-ouv .so-i{flex:none;width:44px;height:44px;border-radius:var(--r-m);background:var(--tint);display:grid;grid-template-columns:repeat(4,1fr);padding:8px} .su-ouv .so-i i:nth-child(8n+1),.su-ouv .so-i i:nth-child(8n+3),.su-ouv .so-i i:nth-child(8n+6),.su-ouv .so-i i:nth-child(8n+8){background:var(--sel)} .su-ouv .so-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .su-ouv .so-l{font:500 13px/1.2 var(--f-ui);color:var(--mut)} .su-ouv .so-n{font:600 16px/1.3 var(--f-ui)} .su-ouv .so-c{flex:none;display:flex;align-items:center;gap:6px;min-height:44px;padding:0 12px 0 14px;border-radius:var(--r-pill);border:1.5px solid var(--sel);color:var(--sel);font:700 15px/1 var(--f-ui)} .su-ouv .so-c:after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg)} /* 3.0.25 : carte Ouvertures de hauteur fixe : « Changer » en haut à droite, deux lignes de noms sur toute la largeur, « … Tout voir » s'il en reste */ #train-setup button.su-ouv{display:grid;grid-template-columns:44px minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:12px;row-gap:2px;align-items:center;min-height:0;padding:10px} .su-ouv .so-i{grid-row:1/3} .su-ouv .so-t{display:contents} .su-ouv .so-l{grid-column:2;grid-row:1} .su-ouv .so-c{grid-column:3;grid-row:1;min-height:40px} .su-ouv .so-n{grid-column:2/4;grid-row:2;align-self:start;height:2.6em;overflow:hidden} /* 3.1.67 : camp travaillé (Blancs / Noirs / Les deux) au-dessus des ouvertures, pastilles du Jeu libre en ligne */ #train-setup .su-camp{grid-template-columns:repeat(3,minmax(0,1fr));margin:0 0 12px} #train-setup .su-camp button{min-height:44px;flex-direction:row;gap:6px;padding:4px 6px;white-space:nowrap} #train-setup .su-camp img{width:22px;height:22px} #train-setup .su-camp button.on{border-color:var(--sel)!important;background:var(--tint)!important;color:var(--sel)!important;box-shadow:inset 0 0 0 1px var(--sel)} #train-setup .su-cvide{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:10px 12px;border-radius:var(--r-m);background:var(--tint);border:1px solid var(--line)} #train-setup .su-cvide[hidden]{display:none} #train-setup .su-cvide .bishop{flex:none;width:40px;height:46px} #train-setup .su-cvide p{margin:0;font:500 15px/1.35 var(--f-ui);color:var(--fg);text-align:left} #train-setup .su-cvide .su-cv-l{display:inline;min-height:0!important;padding:0!important;border:0!important;background:none!important;color:var(--sel);font:inherit;font-weight:600;text-decoration:underline;text-align:left;cursor:pointer} #tab-train #su-go:disabled{opacity:1;filter:saturate(.2) brightness(.6);cursor:default;transform:none} @media (max-width:380px){#train-setup .su-camp{gap:6px}#train-setup .su-camp button{gap:4px;padding:4px 3px}#train-setup .su-camp img{width:20px;height:20px}#train-setup .su-camp .jlr-2 img+img{margin-left:-10px}} .ol-plus{display:inline-block;vertical-align:1px;padding:0 8px;border-radius:var(--r-pill);background:var(--tint);color:var(--fg);font:600 13px/18px var(--f-ui);letter-spacing:0;white-space:nowrap} .ol-ov{position:fixed;inset:0;z-index:700} .ol-dim{position:absolute;inset:0;background:rgba(5,9,18,.62)} .ol-sh{position:absolute;left:0;right:0;bottom:0;max-width:560px;max-height:85dvh;overflow:auto;margin:0 auto;background:var(--sheet);border-radius:var(--r-xxl) var(--r-xxl) 0 0;border-top:1px solid var(--edge);padding:10px 16px calc(14px + env(safe-area-inset-bottom));box-shadow:0 -10px 30px rgba(0,0,0,.45)} .ol-sh:before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 12px} .ol-sh h3{font:var(--t2);margin:0 0 6px} .ol-sh ul{list-style:none;margin:0 0 6px;padding:0} .ol-sh ul:last-of-type{margin-bottom:14px} .ol-sh h4{margin:10px 0 0;font:var(--t4);letter-spacing:.06em;text-transform:uppercase;color:var(--cu2)} .ol-sh li{padding:11px 2px;border-bottom:1px solid var(--line);font:600 16px/1.3 var(--f-ui);color:var(--fg)} .ol-sh .ol-ch{display:block;width:100%;min-height:48px;border-radius:var(--r-pill);border:1.5px solid var(--sel);background:none;color:var(--sel);font:700 16px/1 var(--f-ui)} .ol-sh .ol-fe{display:block;width:100%;min-height:44px;margin-top:6px;border:0;background:none;color:var(--mut);font:600 15px/1 var(--f-ui)} #train-setup .dpt{margin-top:20px} #train-setup .dpt-h{margin-bottom:10px} #train-setup .dpt-h b{font:600 16px/1.2 var(--f-ui)} /* exigence : deux tuiles, un appui */ .extiles{display:grid;grid-template-columns:1fr 1fr;gap:10px} .extiles button{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:44px;padding:10px 6px!important;border-radius:var(--r-l)!important;background:var(--tint);border:1.5px solid transparent;color:var(--fg)!important;font:inherit;cursor:pointer} .extiles button[aria-pressed="true"]{border-color:var(--sel);background:rgba(var(--sel-rgb),.14)!important;box-shadow:0 0 0 1px var(--sel)} .extiles button:focus-visible{outline:2px solid var(--sel);outline-offset:2px} .extiles .ex-f{height:62px;display:flex;align-items:flex-end;justify-content:center} .extiles .ex-f .bishop{width:56px;max-width:56px;height:62px;flex:none;display:block} .extiles b{font:600 15px/1.15 var(--f-ui)} .extiles button[aria-pressed="true"] b{color:var(--sel)} .extiles .ex-ck{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center} .extiles button[aria-pressed="true"] .ex-ck{border-color:var(--sel);background:var(--sel)} .extiles button[aria-pressed="true"] .ex-ck:after{content:"";width:8px;height:4px;border-left:2px solid var(--cu-ink);border-bottom:2px solid var(--cu-ink);transform:rotate(-45deg) translate(1px,-1px)} /* profondeur : valeur courte, curseur pleine largeur, puis l'interrupteur du gain majeur et une phrase de résumé (2.8.87) */ .dpt-d .dpt-v{font:400 24px/1 var(--f-display);color:var(--sel)} .dp-row{display:flex;align-items:center;gap:8px} .dp-row #tdepth{flex:1;min-width:0;margin:0} .dp-sw{position:relative;display:flex;align-items:center;gap:10px;min-height:52px;margin-top:12px;padding:0 12px;border-radius:var(--r-b);border:1.5px solid var(--line);background:var(--tint);color:var(--mut);cursor:pointer} .dp-sw.on{border-color:var(--sel);color:var(--sel)} .dp-sw .dp-ic{min-width:0;width:22px;height:22px;flex:none} .dp-swl{flex:1;font:600 15px/1.25 var(--f-ui);color:var(--fg)} .dp-sw input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer} .dp-sw:has(input:focus-visible){outline:2px solid var(--sel);outline-offset:2px} .dp-swt{flex:none;position:relative;width:46px;height:28px;border-radius:var(--r-b);background:var(--line);transition:background .2s} .dp-swt i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--fg);transition:left .2s} .dp-sw.on .dp-swt{background:var(--sel)}.dp-sw.on .dp-swt i{left:21px} @media (prefers-reduced-motion:reduce){.dp-swt,.dp-swt i{transition:none}} .dp-gl{margin:10px 0 0;font:500 15px/1.35 var(--f-ui);color:var(--fg)}.dp-gl b{font-weight:700;color:var(--sel)} /* étendue : échelle à trois personnages ; le curseur (#tpop) est posé dessus, invisible : on touche ou on glisse */ .pladder{position:relative;height:104px;--p:100%} .pladder:before{content:"";position:absolute;left:36px;right:36px;bottom:9px;height:8px;border-radius:var(--r-xs);background:linear-gradient(90deg,var(--sel) 0 var(--p),var(--line) var(--p) 100%)} .pl-st{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none} .pl-s{display:flex;flex-direction:column;align-items:center;width:72px;gap:2px} .pl-f{width:64px;height:64px;border-radius:50%;background:var(--tint);border:2px solid var(--line);display:grid;place-items:center;overflow:hidden;opacity:.55;transform:scale(.82);transition:transform .2s,opacity .2s} .pl-f svg{width:66px;height:66px;margin-top:8px} .pl-s.on .pl-f{opacity:1;transform:scale(1.12);border-color:var(--sel);box-shadow:0 0 0 3px rgba(var(--sel-rgb),.3)} .pl-d{width:18px;height:18px;border-radius:50%;background:var(--line);border:3px solid var(--sheet);margin:4px 0 0;position:relative} .pl-s.on .pl-d{background:var(--sel);border-color:var(--fg);width:24px;height:24px;margin-top:1px} .pladder #tpop{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;touch-action:pan-y} .pladder:has(#tpop:focus-visible) .pl-s.on .pl-f{outline:2px solid var(--fg);outline-offset:3px} .pl-lab{display:flex;justify-content:space-between;margin-top:4px} .pl-lab span{width:96px;text-align:center;font:600 14px/1.2 var(--f-ui);color:var(--mut)} .pl-lab span:first-child{text-align:left;width:80px}.pl-lab span:last-child{text-align:right;width:80px} .pl-lab span.on{color:var(--sel)} #train-setup #popchar{display:none} @media (prefers-reduced-motion:reduce){.pl-f{transition:none}} /* visite du tuto : la bulle de Fifou passe devant la barre du bas */ body.tu-visit #botnav{z-index:79} /* 2.8.79 : Réglages > Outils > Arbre des ouvertures */ #settings .st-go{flex:none;min-height:40px;padding:0 16px;border:1px solid rgba(var(--sel-rgb),.55);border-radius:var(--r-m);background:var(--tint);color:var(--cu2);font:600 14px/1 var(--f-ui);cursor:pointer} /* 2.8.86 : menu Réglages en trois cartes (maquette A) : titre de groupe avec petit Fifou, une ligne par réglage, contrôle à droite */ #settings .st-sec{border-radius:var(--r-l);padding:6px 16px 8px;margin-bottom:14px} #settings .st-gt{display:flex;align-items:center;gap:10px;margin:8px 0 4px;font:400 20px/1.2 var(--f-display)} #settings .st-ff{display:inline-flex;flex:none;width:34px;height:38px} #settings .st-ff .bishop{width:34px!important;max-width:34px;min-width:0;height:38px;flex:none!important} #settings .st-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:4px 0;border-top:1px solid var(--edge)} #settings .st-sec .st-gt+.st-row{border-top:0} #settings .st-row b{font:600 16px/1.25 var(--f-ui);color:var(--fg)} #settings .swrow label{flex:1;min-width:0;min-height:44px;display:flex;justify-content:center;cursor:pointer} #settings .st-val{font:500 14px/1.2 var(--f-ui);color:var(--sel);text-align:right} #settings .pcar{padding:2px 2px 12px} #settings .pcar .popt{flex:0 0 76px;width:76px;padding:5px;gap:4px;border-radius:var(--r-m)} #settings .pcar .popt span{font-size:12px!important} #settings .pcar .pvsvg{max-width:64px} #settings .sw{width:52px;height:32px;min-height:32px;border:0;background:#2b3651;position:relative} #settings .sw::before{content:"";position:absolute;inset:-6px -2px} #settings .sw i{top:4px;left:4px;background:var(--mut)} #settings .sw.on{background:var(--sel)}#settings .sw.on i{transform:translateX(20px);background:var(--cu-ink)} #settings .st-link{width:100%;min-height:52px;padding:4px 0;background:none;border:0;border-radius:0;text-align:left;cursor:pointer} #settings .st-chev{color:var(--mut);font-size:22px;line-height:1} #settings .st-link .st-val{margin-left:auto} #settings .st-lic{margin:18px 0 6px;text-align:center} #settings .st-lic a{display:inline-block;min-height:44px;line-height:44px;padding:0 12px;font:500 13px/44px var(--f-ui);color:var(--mut);text-decoration:none;opacity:1} /* 2.8.93 : fenêtre de Fifou avant un gros calcul (confirmeLourd, app.js) */ .lrd{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(6,10,20,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:lrdfade .2s ease-out} .lrd.out{animation:lrdfade .18s ease-in reverse forwards} .lrd-c{position:relative;width:100%;max-width:360px;box-sizing:border-box;padding:58px 20px 18px;border-radius:var(--r-xxl);background:linear-gradient(180deg,#1d2a47 0%,#16213a 60%);border:1px solid rgba(var(--sel-rgb),.4);box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);text-align:center;animation:lrdpop .32s cubic-bezier(.2,.9,.25,1.2)} .lrd-ff{position:absolute;left:50%;top:-52px;transform:translateX(-50%);width:104px;height:104px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#2b3b60,#1a2541 70%);border:3px solid var(--sel);box-shadow:0 10px 24px rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center;overflow:visible} .lrd-ff .bishop{flex:none!important;width:74px!important;max-width:74px!important;height:auto;margin-bottom:6px;animation:bob 2.6s ease-in-out infinite} .lrd-c h3{margin:4px 0 6px;font:400 24px/1.15 var(--f-display);color:var(--fg)} .lrd-n{margin:0 0 2px;font:500 15px/1.3 var(--f-ui);color:var(--mut)} .lrd-n b{display:block;font:800 34px/1.05 var(--f-ui);color:var(--sel);font-variant-numeric:tabular-nums;letter-spacing:-.01em} .lrd-d{margin:6px 0 0;font:500 13px/1.35 var(--f-ui);color:var(--mut)} .lrd-x{margin:12px 0 0;padding:12px 14px;border-radius:var(--r-l);background:rgba(255,255,255,.04);border:1px solid var(--line);font:400 15px/1.45 var(--f-ui);color:var(--fg);text-align:left} .lrd-b{display:flex;gap:12px;margin-top:16px} .lrd-b button{flex:1;min-height:48px;border-radius:var(--r-b);font:700 16px/1 var(--f-ui);cursor:pointer;transition:transform .12s} .lrd-b button:active{transform:scale(.97)} .lrd-no{background:transparent;border:1px solid var(--line);color:var(--fg)} .lrd-ok{background:var(--sel);border:1px solid var(--sel);color:var(--cu-ink);box-shadow:0 4px 0 rgba(0,0,0,.25)} .lrd-ok:focus-visible,.lrd-no:focus-visible{outline:3px solid var(--blue);outline-offset:2px} .lrd-w{position:relative;height:8px;margin-top:16px;border-radius:var(--r-pill);background:var(--line);overflow:hidden} .lrd-w span{position:absolute;inset:0 auto 0 0;width:40%;border-radius:var(--r-pill);background:linear-gradient(90deg,transparent,var(--sel),transparent);animation:lrdbar 1.1s ease-in-out infinite} @keyframes lrdfade{from{opacity:0}to{opacity:1}} @keyframes lrdpop{from{transform:translateY(24px) scale(.94);opacity:0}to{transform:none;opacity:1}} @keyframes lrdbar{from{left:-40%}to{left:100%}} @media (prefers-reduced-motion:reduce){.lrd,.lrd-c,.lrd-ff .bishop,.lrd-w span{animation:none!important}} .lrd-d span{display:flex;justify-content:space-between;gap:12px;padding:3px 2px}.lrd-d span+span{border-top:1px dashed var(--line)}.lrd-d b{color:var(--fg);font-variant-numeric:tabular-nums} /* 2.8.88 : menu principal allégé (carte Continuer agrandie, tuiles en grille 2 × 2), barre du bas Accueil · S'entraîner · Mon répertoire, roues crantées des Réglages avec Fifou. Les tailles suivent la hauteur d'écran (clamp + vh) pour que la série et la bulle restent visibles en 360 × 640. */ .i-rep{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 6.5C10 5 7 4.5 3.5 5v13c3.5-.5 6.5 0 8.5 1.5 2-1.5 5-2 8.5-1.5V5C17 4.5 14 5 12 6.5z%22/%3E%3Cpath d=%22M12 6.5v13%22/%3E%3C/svg%3E")} #botnav .nvb span{white-space:nowrap;font-size:15px!important;letter-spacing:-.01em} #botnav .in{grid-template-columns:repeat(3,minmax(0,1fr))} #home #go-tuto{display:none} .streak{padding:8px 12px 9px;gap:6px;margin-bottom:8px} .streak .days i{width:24px;height:24px} #home .hello{margin-bottom:8px} #home .hello .home-fifou{width:50px!important} #home .hsay{font-size:13.5px;padding:8px 11px} .hero{padding:clamp(14px,2.6vh,24px) 14px;gap:clamp(12px,2.4vh,22px);border-width:1.5px} .hero .hff{width:clamp(66px,11vh,92px);height:clamp(70px,11.5vh,96px);border-radius:var(--r-l)} .hero .hn{font-size:clamp(19px,2.9vh,23px)} .hero .hring,.hero .hring svg{width:62px;height:62px} .hero .hring b{font-size:15px} #home .hgo{min-height:clamp(60px,9vh,72px);font-size:20px;border-radius:var(--r-l);box-shadow:0 6px 18px rgba(var(--sel-rgb),.28)} #home .home-menu{grid-template-columns:1fr 1fr;gap:8px;margin-top:12px} #home .home-menu .home-card{grid-column:auto!important;flex-direction:row;justify-content:flex-start;text-align:left;padding:8px 10px;min-height:clamp(64px,9vh,76px);gap:10px} #home .home-menu .hff{width:44px;height:44px} #home .home-menu .hc-txt{align-items:flex-start} #home .home-menu .home-t{font-size:14px;line-height:1.2} /* roues crantées */ svg.cog{display:block;overflow:visible;min-width:0} svg.cog .cg1,svg.cog .cg2{transform-box:view-box} .hff svg.cog.acc{position:absolute;right:-9px;bottom:-7px;width:30px;height:30px} .hff svg.cog.acc .cg1{animation:cog1 18s linear infinite} .hff svg.cog.acc .cg2{animation:cog2 18s linear infinite} #go-set:active svg.cog.acc .cg1,#go-set:active svg.cog.acc .cg2{animation-duration:1.6s} @keyframes cog1{to{transform:rotate(360deg)}} @keyframes cog2{to{transform:rotate(-514deg)}} #settings .st-top{display:flex;align-items:center;justify-content:space-between;gap:12px} #settings .st-meca{position:relative;flex:none;width:112px;height:72px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent} #settings .st-mff{position:absolute;left:0;bottom:0;width:52px;height:66px;z-index:1} #settings .st-mff .bishop{width:52px!important;max-width:52px;min-width:0;height:66px;flex:none!important;transform:rotate(8deg);transform-origin:50% 100%} #settings .st-cog{position:absolute;right:0;top:0;width:72px;height:72px} #settings .st-meca.spin .cg1{animation:cogq1 1.1s cubic-bezier(.3,.8,.3,1)} #settings .st-meca.spin .cg2{animation:cogq2 1.1s cubic-bezier(.3,.8,.3,1)} @keyframes cogq1{to{transform:rotate(72deg)}} @keyframes cogq2{to{transform:rotate(-103deg)}} #settings .st-meca:focus-visible{outline:2px solid var(--sel);outline-offset:2px;border-radius:var(--r-m)} @media (prefers-reduced-motion:reduce){svg.cog .cg1,svg.cog .cg2{animation:none!important}} #settings .st-ff .ffp{display:block;width:38px!important;max-width:38px!important;min-width:0!important;height:38px!important;flex:none!important} #settings .st-ff .ffp *{animation:none!important} /* ===== 2.8.91 : échiquier vivant (glissade, glisser-déposer, halo d'échec, coups possibles en fondu) ===== */ #board,.gb{touch-action:none;-webkit-touch-callout:none} .pcs image{transform-box:fill-box;transform-origin:50% 50%} .pdrag{cursor:grabbing} .pchk-in{animation:pchk .4s ease-out} @keyframes pchk{from{opacity:0}to{opacity:1}} .pdot.dotin{animation:pdot .12s ease-out} @keyframes pdot{from{opacity:0}to{opacity:1}} @media (prefers-reduced-motion:reduce){.pchk-in,.pdot.dotin{animation:none}} #settings .st-seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:2px 0 12px} #settings .st-seg button{min-height:44px;padding:6px 4px;border-radius:var(--r-m);border:1.5px solid var(--line);background:var(--tint);color:var(--fg);font:600 14px/1.1 var(--f-ui);cursor:pointer} #settings .st-seg button.on{background:var(--sel);border-color:var(--sel);color:var(--cu-ink)} /* ===== 2.8.95 : écran de jeu « Épuré » (maquette A retouchée, choisie par Théo le 16/10/2026). Échiquier plus grand (304 px en 360×640 au lieu de 288), liseré cuivre fin ; en-tête : anneau plus visible, compteur en gras ; une rangée : Indice (cuivre plein) · ◀ ▶ (un seul bloc) · Passer → (discret) ; bulle de Fifou à la hauteur de son texte. Ne touche ni au dessin des cases et des pièces, ni au glisser-déposer (2.8.91) : pas d'overflow, transform ni filter sur .bov / #board. ===== */ @media (max-width:820px), (pointer:coarse) and (max-width:1366px){ :root{--bw:min(100vw - 24px,100dvh - 336px);--bubmax:calc(100dvh - var(--bw) - 244px);--ffw:clamp(48px,calc(100dvh - var(--bw) - 290px),76px)} /* en-tête */ body #tab-train .thead{height:38px;margin-bottom:4px;gap:12px} body .thring,body .thring svg{width:34px;height:34px} body .thring circle{stroke-width:3.4} body .thring .bg{stroke:rgba(var(--sel-rgb),.22)} body .tht #thday{overflow:visible;font:500 13px/18px var(--f-ui)!important;color:var(--mut);letter-spacing:.01em} body .tht #thday b{font:800 18px/18px var(--f-ui)!important;font-variant-numeric:tabular-nums;color:var(--fg);margin-right:3px;letter-spacing:-.01em} body .thsub .thmode,body .thsub .pcs-mini{width:20px;height:20px} body #thead #su-gear{width:38px;height:38px;border-radius:var(--r-m);background:var(--sheet);box-shadow:inset 0 0 0 1px var(--line)} /* échiquier : coins, liseré cuivre et halo léger, ombre ; coordonnées discrètes */ body #tab-train .bov{border-radius:var(--r-m)!important;box-shadow:0 0 0 1px rgba(var(--sel-rgb),.55),0 0 0 4px rgba(var(--sel-rgb),.09),0 14px 30px rgba(0,0,0,.45)} body #board{border-radius:var(--r-m)} body #board .coord{font-size:1.9px;font-weight:600;opacity:.7} /* matériel pris : rangées de 18 px, avantage dans une pastille cuivre */ body #tab-train .caps{height:18px} body #tab-train #capT{margin:0 auto 4px} body #tab-train #capB{margin:4px auto 0} body #tab-train .caps .cadv{font:700 12px/18px var(--f-ui);height:18px;padding:0 6px;border-radius:var(--r-s);background:rgba(var(--sel-rgb),.16);color:var(--cu2);margin-left:4px} /* rangée d'actions : Indice · ◀ ▶ · Passer → ; Coup suivant prend la place d'Indice ; la question de Passer prend Indice et Passer, ◀ ▶ restent à droite */ body #tab-train .grow,body #tab-train .grow:has(#tgo:not([hidden])),body #tab-train .grow:has(#rnav:not([hidden])){grid-template-columns:minmax(0,1fr) auto auto;margin-top:8px;column-gap:8px} body #tab-train .grow>#hintb,body #tab-train .grow>.tgo{grid-column:1;grid-row:1} body #tab-train .grow>.gmid{grid-column:2;grid-row:1} body #tab-train .grow>#next{grid-column:3;grid-row:1} body #tab-train .grow>.skipq{grid-column:1/3;grid-row:1} body #tab-train .grow:has(#skipq:not([hidden]))>.gmid{grid-column:3} body #tab-train .grow .bnav{gap:0;border-radius:var(--r-b);background:var(--sheet);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden} body #bprev,body #bnext{width:44px;min-width:44px!important;background:transparent;border:0;border-radius:0;font-size:16px;color:var(--fg)} body #bnext{box-shadow:inset 1px 0 0 var(--line)} body #tab-train .grow>#hintb{border-radius:var(--r-b);border:0!important;background:linear-gradient(180deg,#eaa572,#dc8a4f);color:var(--cu-ink);font:700 16px var(--f-ui)!important;box-shadow:0 6px 16px rgba(var(--sel-rgb),.25),inset 0 1px 0 rgba(255,255,255,.25)} body #tab-train .grow>#hintb::before{background:var(--cu-ink)} body #tab-train .grow>#next{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-b);box-shadow:inset 0 0 0 1px var(--line);color:var(--mut)!important;font:600 14px var(--f-ui)!important;padding:0 10px 0 12px!important} body #tab-train .grow>#next::after{content:'';flex:none;width:15px;height:15px;margin-left:5px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat} body #tab-train .grow>.tgo{border-radius:var(--r-b)} /* Fifou et sa bulle : la bulle suit son texte (au plus --bubmax, puis défile avec un fondu), Fifou centré à côté */ body #tab-train .bwrap{margin-top:8px;min-height:var(--bubmax);align-items:center;gap:10px} body #tab-train .bwrap .bishop{flex:0 0 var(--ffw)!important;width:var(--ffw)!important;max-width:var(--ffw);height:auto;margin-bottom:-2px} body #tab-train .bubble{height:auto;min-height:0;max-height:var(--bubmax);overflow:hidden;display:flex;flex-direction:column;padding:8px 12px;border-radius:var(--r-l) var(--r-l) var(--r-l) var(--r-s);background:var(--sheet)!important;border:1px solid rgba(var(--fg-rgb),.08)!important;box-shadow:0 8px 20px rgba(0,0,0,.28);margin:0} body #tab-train .bubble::before,body #tab-train .bubble::after{display:none} body #tab-train .bubble.ok{border-color:rgba(var(--green-rgb),.55)!important} body #tab-train .bubble.bad{border-color:rgba(var(--red-rgb),.55)!important} body #tab-train .bin{min-height:0;overflow-y:auto;scrollbar-width:none} body #tab-train .bin::-webkit-scrollbar{display:none} body #tab-train .bubble.more .bin{-webkit-mask-image:linear-gradient(#000 calc(100% - 22px),transparent);mask-image:linear-gradient(#000 calc(100% - 22px),transparent)} body #tab-train .tstatus{font:500 14.5px/1.36 var(--f-ui);margin:0;text-wrap:pretty} } @media (max-width:820px) and (max-height:700px), (pointer:coarse) and (max-width:1366px) and (max-height:700px){body #tab-train .tstatus{font-size:14px;line-height:1.3}} .tcard,.home-card,.ovpane,#settings .tcard,#profil .tcard,#repertoire .tcard{background-image:linear-gradient(180deg,rgba(255,255,255,.025),transparent 40%)} .hero{background:linear-gradient(165deg,#283c63,#17233c 72%);border-color:rgba(var(--sel-rgb),.55);box-shadow:0 0 0 1px rgba(var(--sel-rgb),.12),0 22px 44px -18px rgba(var(--sel-rgb),.45)} /* boutons cuivre « jeton » : rebord de 4 px en cuivre brûlé qui s'écrase au toucher */ #home .hgo,#tab-train #su-go,#tab-train #ov-new,body #tab-train .grow>#hintb,body #tab-train .grow>.tgo{background:linear-gradient(180deg,#eeaa74,#dc8d52);color:var(--cu-ink);box-shadow:0 4px 0 var(--cu3),0 12px 26px -8px rgba(var(--sel-rgb),.55);transition:transform .08s,box-shadow .08s} #home .hgo:active,#tab-train #su-go:active,#tab-train #ov-new:active,body #tab-train .grow>#hintb:active,body #tab-train .grow>.tgo:active{transform:translateY(4px);box-shadow:0 0 0 var(--cu3)!important} /* un seul bouton fort par rangée : Indice passe en cuivre tonal quand Réessayer est affiché */ body #tab-train .grow:has(#rnav:not([hidden]))>#hintb{background:rgba(var(--sel-rgb),.16);color:var(--cu2);box-shadow:inset 0 0 0 1.5px rgba(var(--sel-rgb),.5);transform:none} body #tab-train .grow:has(#rnav:not([hidden]))>#hintb::before{background:var(--cu2)} @media (prefers-reduced-motion:reduce){#home .hgo,#tab-train #su-go,#tab-train #ov-new,body #tab-train .grow>#hintb,body #tab-train .grow>.tgo{transition:none}} /* « Commencer » : un fondu sous le bouton collant cache ce qui passe dessous, et la page garde de la marge en bas */ #tab-train #su-go{box-shadow:0 4px 0 var(--cu3),0 -10px 12px -2px rgba(var(--bg-rgb),.9)} #train-setup{padding-bottom:16px} /* chiffres en Public Sans : Young Serif reste pour les mots */ #pf-dj .dj-n b,#pf-el .dj-n b,#tu-dj .dj-n b{font:800 50px/1 var(--f-ui)!important;letter-spacing:-.03em;font-variant-numeric:tabular-nums lining-nums} #tu-dj .dj-n b{font-size:76px!important} .dpt-d .dpt-v,.dpt-d .dpt-v b{font:800 22px/1 var(--f-ui)!important;font-variant-numeric:tabular-nums} .streak .sk-n b{font:800 20px/1 var(--f-ui)!important;font-variant-numeric:tabular-nums} .su-h{font-weight:400} /* interrupteurs : éteint = piste à contour parchemin et rond clair ; allumé = piste cuivre et rond craie */ #settings .sw{background:transparent;box-shadow:inset 0 0 0 2px rgba(var(--mut-rgb),.55)} #settings .sw i{background:#d9d2c6} #settings .sw.on{background:var(--sel);box-shadow:none} #settings .sw.on i{background:#fbf7f0} .dp-swt{background:transparent;box-shadow:inset 0 0 0 2px rgba(var(--mut-rgb),.55)} .dp-swt i{background:#d9d2c6} .dp-sw.on .dp-swt{box-shadow:none}.dp-sw.on .dp-swt i{background:#fbf7f0} /* fin de ligne : ligne parfaite en vert avec Fifou qui saute, ligne avec erreurs en ambre */ .ovbil.parfait .ovh{color:var(--vert2)} .ovbil.erreurs .ovh{color:#f2c46b} .ovbil.parfait .ovff .bishop{animation:ov-saut .6s cubic-bezier(.3,1.6,.5,1) .15s both} @keyframes ov-saut{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-14px) scale(1.06)}70%{transform:translateY(0) scale(.97)}100%{transform:none}} @media (prefers-reduced-motion:reduce){.ovbil.parfait .ovff .bishop{animation:none}} /* Réglages : les carrousels s'effacent au bord au lieu de couper les noms */ #settings .pcar{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent);padding-right:28px} /* tuto : 5 niveaux = 3 en haut, 2 centrés en bas */ .tu-lvs{grid-template-columns:repeat(6,minmax(0,1fr))} .tu-lvs>.tu-lv{grid-column:span 2} .tu-lvs>.tu-lv:nth-child(4):nth-last-child(2){grid-column:2/span 2} @media (max-width:820px), (pointer:coarse) and (max-width:1366px){ /* écran de jeu : la bulle se cale sous les boutons (plus de trou en 412) */ body #tab-train .bwrap{align-items:flex-start} /* question de Passer : phrase courte en gras */ body #tab-train .skipq p{font:700 15px/1.2 var(--f-ui);text-align:left} } /* ===== 2.9.x : barre de jeu en 4 cases égales (maquette « barre C », choisie par Théo le 18/10/2026) et fenêtre « Passer cette ligne ? » (maquette « fenêtre A »). Un seul bloc arrondi, 4 cases de même largeur et de même hauteur : Indice · Retour · Suivant · Passer, icône au-dessus du mot. « Coup suivant » prend la case d'Indice, « Réessayer » les cases de Retour et Suivant. Mode libre et grand écran inchangés. ===== */ #bprev .gl,#bnext .gl{display:none} @media (max-width:820px), (pointer:coarse) and (max-width:1366px){ /* 52 px au lieu de 48 : les 4 px sont pris sur les marges autour de la barre, l'échiquier garde sa taille */ :root{--kh:52px} body:not(.libre) #tab-train .grow{margin-top:6px!important} body:not(.libre) #tab-train .bwrap{margin-top:6px} body:not(.libre) #tab-train .grow,body:not(.libre) #tab-train .grow:has(#tgo:not([hidden])),body:not(.libre) #tab-train .grow:has(#rnav:not([hidden])){display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:var(--kh);column-gap:0;row-gap:0;border-radius:var(--r-l);background:var(--sheet);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden} body:not(.libre) #tab-train .grow>.gmid,body:not(.libre) #tab-train .grow #bnav:not([hidden]){display:contents} body:not(.libre) #tab-train .grow:has(#rnav:not([hidden])) #bnav{display:none} body:not(.libre) #tab-train .grow>#hintb,body:not(.libre) #tab-train .grow>.tgo{grid-column:1;grid-row:1} body:not(.libre) #tab-train .grow #bprev{grid-column:2;grid-row:1} body:not(.libre) #tab-train .grow #bnext{grid-column:3;grid-row:1} body:not(.libre) #tab-train .grow #rnav{grid-column:2/4;grid-row:1;width:auto;align-self:stretch;margin:0} body:not(.libre) #tab-train .grow>#next{grid-column:4;grid-row:1;max-width:none} /* les 4 cases : même boîte, même arrondi (celui du bloc), même icône 20 px, même mot 12 px */ body:not(.libre) #tab-train .grow>#hintb,body:not(.libre) #tab-train .grow>#next,body:not(.libre) #tab-train .grow>.tgo,body:not(.libre) #tab-train .grow #bprev,body:not(.libre) #tab-train .grow #bnext,body:not(.libre) #tab-train .grow #rnav button#retry{ box-sizing:border-box;width:100%!important;min-width:0!important;height:var(--kh)!important;min-height:var(--kh)!important;margin:0;padding:0 4px!important; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; border:0!important;border-radius:0!important;background:transparent;box-shadow:none;color:var(--fg)!important; font:600 12px/1.1 var(--f-ui)!important;letter-spacing:0;text-align:center;white-space:normal;transition:transform 120ms,background-color 200ms} body:not(.libre) #tab-train .grow #bprev,body:not(.libre) #tab-train .grow #bnext,body:not(.libre) #tab-train .grow>#next,body:not(.libre) #tab-train .grow #rnav{box-shadow:inset 1px 0 0 var(--line)} body:not(.libre) #tab-train .grow button:active{transform:scale(.97)} body:not(.libre) #tab-train .grow button:focus-visible{outline:3px solid var(--blue);outline-offset:-3px} body:not(.libre) #tab-train .grow>#hintb{background:rgba(var(--sel-rgb),.12);color:var(--sel)!important} body:not(.libre) #tab-train .grow>#next{color:var(--mut)!important} body:not(.libre) #tab-train .grow>#next::after{display:none} body:not(.libre) #tab-train .grow>.tgo{background:var(--sel);color:var(--cu-ink)!important} body:not(.libre) #tab-train .grow #rnav button#retry{background:var(--red);color:#2a0d08!important} body:not(.libre) #tab-train .tboardbox:has(#endov:not([hidden])) .grow>#next{background:var(--sel);color:var(--cu-ink)!important} /* icônes : même masque 20 px partout */ body:not(.libre) #tab-train .grow>#hintb::before,body:not(.libre) #tab-train .grow>#next::before,body:not(.libre) #tab-train .grow #bprev::before,body:not(.libre) #tab-train .grow #bnext::before{content:"";display:block;flex:none;width:20px;height:20px;margin:0;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat} body:not(.libre) #tab-train .grow #bprev::before{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E")} body:not(.libre) #tab-train .grow #bnext::before{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E")} /* Coup suivant : la flèche du texte est remplacée par la même icône masquée que les autres cases */ body:not(.libre) #tab-train .grow>.tgo{font-size:0!important;padding:0 2px!important} body:not(.libre) #tab-train .grow>.tgo::before{content:"";display:block;flex:none;width:20px;height:20px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat} body:not(.libre) #tab-train .grow>.tgo span{font:600 12px/1.1 var(--f-ui)!important;white-space:nowrap;letter-spacing:-.01em} /* Réessayer (2 cases) : sur une ligne, le ↺ du texte sert d'icône */ body:not(.libre) #tab-train .grow #rnav button#retry{flex-direction:row;gap:6px;font:700 15px/1 var(--f-ui)!important} body:not(.libre) #tab-train .grow #rnav button#retry::before{display:none} body:not(.libre) #tab-train .grow #bprev .gi,body:not(.libre) #tab-train .grow #bnext .gi{display:none} body:not(.libre) #tab-train .grow #bprev .gl,body:not(.libre) #tab-train .grow #bnext .gl{display:block;font:inherit!important} body:not(.libre) #tab-train .grow #bprev:disabled,body:not(.libre) #tab-train .grow #bnext:disabled{opacity:.4} } /* fenêtre « Tu es sûr de vouloir passer cette ligne ? » : même famille que « Gros calcul en vue » (.lrd), fondu 200 ms puis carte 320 ms */ .skd{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(6,10,20,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:lrdfade .2s ease-out} .skd.out{animation:lrdfade .18s ease-in reverse forwards} .skd-c{position:relative;width:100%;max-width:340px;box-sizing:border-box;padding:60px 20px 18px;border-radius:var(--r-xl);background:linear-gradient(180deg,#1d2a47 0%,#16213a 60%);border:1px solid rgba(var(--sel-rgb),.4);box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);text-align:center;animation:lrdpop .32s cubic-bezier(.2,.9,.25,1.2)} .skd-ff{position:absolute;left:50%;top:-50px;transform:translateX(-50%);width:100px;height:100px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#2b3b60,#1a2541 70%);border:3px solid var(--sel);box-shadow:0 10px 24px rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center} /* 3.1.93 : Fifou fixe et centré sur son dessin (point d'interrogation compris), tout entier dans le rond */ .skd-ff .bishop{position:absolute;left:19px;top:6px;flex:none!important;min-width:0!important;width:68px!important;max-width:68px!important;height:auto;margin:0;animation:none} .skd-ff .bishop *{animation:none!important} .skd-c h3{margin:0;font:400 21px/1.25 var(--f-display);color:var(--fg)} .skd-b{display:flex;gap:12px;margin-top:18px} .skd-b button{flex:1;min-height:48px;border-radius:var(--r-b);font:700 16px/1 var(--f-ui)!important;cursor:pointer;transition:transform .12s} .skd-b button:active{transform:scale(.97)} .skd-b .skd-no{background:transparent;border:1px solid var(--line);color:var(--fg)} .skd-b .skd-ok{background:var(--sel);border:1px solid var(--sel);color:var(--cu-ink);box-shadow:0 4px 0 var(--cu3)} .skd-b button:focus-visible{outline:3px solid var(--blue);outline-offset:2px} @media (prefers-reduced-motion:reduce){.skd,.skd-c,.skd-ff .bishop{animation:none!important}} /* Indice puis Solution : après le 1er appui, la case Indice devient « Solution » (même taille), icône cible et teinte or de l'indice ; passage en 320 ms : l'icône pivote, la case pulse une fois. Calme si le téléphone demande moins d'animations. */ #hintb.sol::before{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='13' r='7'/%3E%3Ccircle cx='11' cy='13' r='2.6'/%3E%3Cpath d='M11 13l9-9M15.5 4H20v4.5'/%3E%3C/svg%3E")} body:not(.libre) #tab-train .grow>#hintb.sol{background:rgba(240,192,98,.2);color:var(--hint)!important;box-shadow:inset 0 0 0 1.5px rgba(240,192,98,.55)} #hintb.sol.morph{animation:solcase .32s cubic-bezier(.2,.9,.25,1.2)} #hintb.sol.morph::before{animation:solico .32s cubic-bezier(.2,.9,.25,1.2)} @keyframes solcase{0%{transform:scale(.92);background-color:rgba(240,192,98,.45)}100%{transform:none}} @keyframes solico{0%{transform:rotate(-120deg) scale(.4);opacity:0}100%{transform:none;opacity:1}} #board .solar{animation:solar .26s ease-out} @keyframes solar{0%{opacity:0}100%{opacity:.92}} @media (prefers-reduced-motion:reduce){#hintb.sol.morph,#hintb.sol.morph::before,#board .solar{animation:none}} /* 2.9.14 : repère « Recommandé » sous le cran 7 du curseur (bouton : y revenir) et sur l'interrupteur d'arrêt au gain */ .dpt-d .dpt-t span.rec{color:var(--sel);font-weight:700} .dp-recw{position:relative;height:40px;margin-top:6px} #tab-train .dp-rec,.dp-rec{position:absolute;top:6px;left:calc(16px + (100% - 32px) * 2 / 6);transform:translateX(-50%);display:inline-flex;align-items:center;gap:5px;min-height:32px;padding:0 12px;border-radius:var(--r-pill);border:1.5px solid var(--sel);background:transparent;color:var(--sel);font:700 13px/1 var(--f-ui);white-space:nowrap} .dp-rec::before{content:"";position:absolute;top:-7px;left:50%;margin-left:-6px;border:6px solid transparent;border-top:0;border-bottom:6px solid var(--sel)} .dp-rec svg{width:14px;height:14px;flex:none} #tab-train .dp-rec.on,.dp-rec.on{background:var(--sel);border-color:var(--sel);color:var(--bg)} .dp-rec:not(.on)::after{content:"";position:absolute;inset:-6px -4px} .dp-recb{display:inline-block;margin-left:4px;padding:2px 8px;border-radius:var(--r-pill);border:1.5px solid var(--sel);color:var(--sel);font:700 11px/1.3 var(--f-ui);vertical-align:2px;white-space:nowrap} .dp-sw.on .dp-recb{background:var(--sel);color:var(--bg)} /* 2.9.12 : bulle de reprise après une pause où les réglages ont changé (Reprendre ma ligne / Nouvelle ligne) */ #tstatus .pzq{display:flex;gap:8px;margin-top:6px} #tstatus .pz-b{flex:1;min-width:0;min-height:38px;padding:0 6px!important;white-space:nowrap;border-radius:var(--r-m);border:1px solid var(--sel);background:var(--sel);color:var(--cu-ink);font:700 14px/1 var(--f-ui)!important;cursor:pointer;box-shadow:0 3px 0 var(--cu3);transition:transform .12s} #tstatus .pz-b.pz-new{background:transparent;border-color:var(--line);color:var(--fg);box-shadow:none} #tstatus .pz-b:active{transform:scale(.97)} #tstatus .pz-b:focus-visible{outline:3px solid var(--blue);outline-offset:2px} /* ===== 2.9.x : après un coup réussi, « Coup suivant » seul en pleine largeur (maquette A + variante « Étincelles », choisies par Théo le 18/10/2026). Retour, Suivant et Passer disparaissent tant qu'il est là. Bouton jeton cuivre (dégradé, reflet, rebord) ; il arrive en grossissant avec un petit rebond (320 ms), son halo respire doucement en attendant (2,4 s, opacité seule) ; à l'appui il s'enfonce puis rebondit (180 ms), la flèche file et des étincelles cuivre partent du doigt (500 ms, app.js), puis la barre normale revient en fondu (200 ms). Animations coupées si le téléphone demande moins de mouvement. ===== */ @media (max-width:820px), (pointer:coarse) and (max-width:1366px){ body:not(.libre) #tab-train .grow:has(#tgo:not([hidden])){background:transparent;box-shadow:none;overflow:visible} body:not(.libre) #tab-train .grow:has(#tgo:not([hidden])) #bnav,body:not(.libre) #tab-train .grow:has(#tgo:not([hidden]))>#next{display:none!important} body:not(.libre) #tab-train .grow>.tgo{position:relative;grid-column:1/5;flex-direction:row;gap:10px;padding:0 16px!important; border-radius:var(--r-l)!important;background:linear-gradient(180deg,#f0b07e 0%,#e0955a 55%,#d4844a 100%);color:var(--cu-ink)!important; box-shadow:0 4px 0 var(--cu3),inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 0 rgba(0,0,0,.08); transition:box-shadow 120ms ease-out,filter 120ms;animation:tgoIn 320ms cubic-bezier(.2,.9,.25,1.35) both} body:not(.libre) #tab-train .grow>.tgo span{position:relative;font:700 17px/1 var(--f-ui)!important;letter-spacing:.01em;text-shadow:0 1px 0 rgba(255,255,255,.25)} body:not(.libre) #tab-train .grow>.tgo::before{position:relative;width:22px;height:22px} /* halo cuivre qui respire (seule l'opacité bouge) */ body:not(.libre) #tab-train .grow>.tgo::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;box-shadow:0 8px 26px rgba(var(--sel-rgb),.6);opacity:.35;pointer-events:none;animation:tgoHalo 2.4s ease-in-out 400ms infinite} body:not(.libre) #tab-train .grow>.tgo:hover{filter:brightness(1.04)} body:not(.libre) #tab-train .grow>.tgo:active{transform:translateY(3px);box-shadow:0 1px 0 var(--cu3),inset 0 1px 0 rgba(255,255,255,.4)} body:not(.libre) #tab-train .grow>.tgo.tap{animation:tgoTap 180ms ease-out both;filter:brightness(1.08)} body:not(.libre) #tab-train .grow>.tgo.tap::before{animation:tgoGo 180ms ease-in forwards} body:not(.libre) #tab-train .grow>.tgo:focus-visible{outline:3px solid var(--blue);outline-offset:3px} /* la barre normale revient en douceur */ body:not(.libre) #tab-train .grow>#hintb,body:not(.libre) #tab-train .grow #bprev,body:not(.libre) #tab-train .grow #bnext,body:not(.libre) #tab-train .grow>#next{animation:barIn 200ms ease-out backwards} } /* étincelles posées par app.js au point d'appui, hors du bouton (elles finissent leur vol après qu'il a disparu) */ .tgo-sp{position:fixed;z-index:400;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:radial-gradient(circle,#fff3e6 0%,#f2b783 45%,rgba(224,149,90,0) 72%);pointer-events:none;will-change:transform,opacity;animation:tgoSp 500ms cubic-bezier(.15,.7,.3,1) forwards} @keyframes barIn{from{opacity:0;transform:translateY(4px)}} @keyframes tgoIn{0%{opacity:0;transform:scale(.88)}70%{opacity:1;transform:scale(1.03)}100%{opacity:1;transform:none}} @keyframes tgoHalo{0%,100%{opacity:.35}50%{opacity:1}} @keyframes tgoTap{0%{transform:none}45%{transform:translateY(3px) scale(.98);box-shadow:0 1px 0 var(--cu3),inset 0 1px 0 rgba(255,255,255,.4)}100%{transform:translateY(-1px) scale(1.02)}} @keyframes tgoGo{to{transform:translateX(18px);opacity:0}} @keyframes tgoSp{from{transform:none;opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(.3);opacity:0}} @media (prefers-reduced-motion:reduce){body #tab-train .grow>button,body #tab-train .grow #bprev,body #tab-train .grow #bnext,body #tab-train .grow>.tgo,body #tab-train .grow>.tgo::before,body #tab-train .grow>.tgo::after{animation:none!important}.tgo-sp{display:none}} /* ===== 2.9.21 : refonte de la page de jeu (maquette A, choisie par Théo le 18/10/2026). Même ordre qu'avant (en-tête, matériel pris, échiquier, matériel pris, barre, Fifou) ; l'échiquier est dans un cadre bleu en fondu, sa taille dépend de la place réelle, et Fifou et sa bulle prennent tout le reste jusqu'au menu : rien ne défile, aucun trou. Toujours rien sur .bov ni #board (ni overflow, ni transform, ni filter) : le cadre est un élément à part (.tframe, ajouté par ui.js). ===== */ /* rond du défi : même couleur partout selon le palier (data-defi posé par ui.js) */ .thring .fg,.hring .fg{transition:stroke-dashoffset .6s,stroke .3s} /* 2.9.43 : par tours (data-tour = couleur du tour en cours, data-sous = couleur du tour fini dessous, posés par gdaRond dans ui.js) */ .thring .un,.hring .un{fill:none;stroke-linecap:round} .thring .un{stroke-width:4}.hring .un{stroke-width:6} @media (max-width:820px), (pointer:coarse) and (max-width:1366px){body .thring .un{stroke-width:3.4}} .thring[data-sous="0"] .un,.hring[data-sous="0"] .un{display:none} /* ombre fine sous le tour en cours : sa tête et ses bords se détachent du tour fini, même sur le petit rond de la page de jeu */ .thring:not([data-sous="0"]) .fg,.hring:not([data-sous="0"]) .fg{filter:drop-shadow(0 0 1.2px rgba(4,10,20,.85))} body .hring[data-tour="2"] .fg,body .thring[data-tour="2"] .fg{stroke:var(--defi-t2)} body .hring[data-tour="3"] .fg,body .thring[data-tour="3"] .fg{stroke:var(--defi-t3)} body .hring[data-tour="4"] .fg,body .thring[data-tour="4"] .fg{stroke:var(--defi-t4)} body .hring[data-sous="1"] .un,body .thring[data-sous="1"] .un{stroke:var(--defi-t1)} body .hring[data-sous="2"] .un,body .thring[data-sous="2"] .un{stroke:var(--defi-t2)} body .hring[data-sous="3"] .un,body .thring[data-sous="3"] .un{stroke:var(--defi-t3)} /* le compte (« 7 / 5 ») reste en vert clair une fois l'objectif atteint : lisible quel que soit le tour */ body .thead:not([data-defi="0"]) #thday b{color:var(--defi-tx)} /* fin d'un tour : le rond pulse une fois (durée « célébration » de la charte) */ @media (prefers-reduced-motion:no-preference){.thring.tourfin svg,.hring.tourfin svg{animation:tourfin .5s cubic-bezier(.2,.8,.2,1)}} @keyframes tourfin{0%{scale:1}40%{scale:1.16}100%{scale:1}} /* coordonnées : plus grandes, opaques, couleurs contrastées (echecs.js) */ body #board .coord,body #tuboard .coord,.coord{font-size:2.6px;font-weight:800;opacity:1} /* cadre de l'échiquier */ /* 2.9.24 : plus de cadre ; un halo bleu qui se fond dans le fond autour de l'échiquier (ombres de .tframe : rien ne déborde dans la page, rien sur .bov ni #board) */ #tab-train .tframe{margin-inline:auto;width:fit-content;border-radius:var(--r-m);box-shadow:0 0 40px 10px rgba(var(--halo-rgb),.32)} body:has(#tab-train:not([hidden])):not(.home-mode):not(.tsetup):not([class*="scr-"]){background:radial-gradient(ellipse 95% 48% at 50% 40%,rgba(var(--halo-rgb),.42),rgba(var(--halo-rgb),.14) 60%,rgba(var(--halo-rgb),0) 100%) var(--bg) fixed} body #tab-train .tframe .bov{margin:0!important;box-shadow:0 0 0 1px rgba(var(--sel-rgb),.45),0 10px 24px rgba(0,0,0,.35)!important} /* en-tête : le compteur se coupe avant la roue au lieu de passer dessous (grande police du téléphone, gros compteur) */ body .tht #thday{display:flex;align-items:baseline;min-width:0;overflow:hidden} body .tht #thday b{flex:none} body .tht #thday .thw{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} body .thsub{flex:1;min-width:0} @media (max-width:820px), (pointer:coarse) and (max-width:1366px){ /* --g marge de côté, --fr épaisseur du cadre, --hd en-tête, --cp rangée de matériel pris, --bub place minimale de la bulle */ :root{--g:6px;--fr:0px;--hd:38px;--cp:18px;--bub:80px; --bw:min(100vw - 2*var(--g) - 2*var(--fr),var(--apph,100dvh) - var(--navh) - var(--sat,0px) - 14px - var(--hd) - 2*var(--cp) - 2*var(--fr) - var(--kh) - var(--bub) - 34px)} body:has(#tab-train:not([hidden])):not(.home-mode):not(.tsetup):not([class*="scr-"]){padding-block-start:4px;padding-bottom:var(--navh);padding-inline:var(--g)} /* 3.0.88 : pas sur Paramètres et Mon répertoire, qui touchaient les bords de l'écran ; 3.1.51 : ni sur Varier l'entraînement ; 3.1.102 : ni sur Mon profil et Fifou Expert */ body:not(.home-mode):not(.tsetup):not(.scr-settings):not(.scr-repertoire):not(.scr-modes):not(.scr-profil):not(.scr-boutique) main:has(>#tab-train:not([hidden])){padding-inline:0} body #tab-train .twrap{display:block} body #tab-train .tboardbox{display:flex;flex-direction:column;height:calc(var(--apph,100dvh) - var(--navh) - var(--sat,0px) - 14px);width:auto} body #tab-train .thead{flex:none;height:var(--hd);margin:0 0 2px;width:auto;max-width:none} body #tab-train .caps{flex:none;width:auto;height:var(--cp);margin:2px var(--fr)!important} body #tab-train .tframe{flex:none;padding:var(--fr);border-radius:calc(var(--r-m) + var(--fr))} body #tab-train .bov{width:var(--bw)!important} body #tab-train .grow{flex:none;align-self:stretch;width:auto!important;max-width:none;margin:8px 0 0!important} /* Fifou et sa bulle remplissent le reste ; Fifou grandit avec la place (56 à 112 px) */ body #tab-train{--ffw:clamp(56px,calc(var(--apph,100dvh) - var(--navh) - var(--sat,0px) - var(--bw) - 220px),112px)} body #tab-train .bwrap{flex:1 1 0;width:auto;min-height:0!important;margin:8px 0 0!important;align-items:center!important} body #tab-train .bwrap .bishop{flex:0 0 var(--ffw)!important;width:var(--ffw)!important;max-width:var(--ffw)!important} body #tab-train .bubble{flex:1;align-self:center;height:auto;max-height:100%} } @media (max-width:820px) and (min-height:760px), (pointer:coarse) and (max-width:1366px) and (min-height:760px){body #tab-train .tstatus{font-size:16.5px;line-height:1.4}} /* 2.9.20 : l'accueil tient sur une seule page, sans défilement ni rebond. La page fait la hauteur visible (100dvh, barre d'adresse comprise), les cartes suivent la hauteur d'écran (clamp + dvh) ; Fifou et sa phrase sont dans la carte de la série (ui.js). */ html:has(>body.home-mode),body.home-mode{overflow:hidden;overscroll-behavior:none;height:100%} body.home-mode{padding-block:0} .home-mode main{height:100dvh;display:flex;flex-direction:column;padding-top:max(clamp(6px,1.8dvh,16px),env(safe-area-inset-top,0px));padding-bottom:calc(var(--navh) + clamp(6px,1.6dvh,14px))} .home-mode #home{display:flex;flex-direction:column;justify-content:space-between;flex:1 1 auto;min-height:0;gap:clamp(6px,1.5dvh,12px);padding:0;width:100%} .home-mode #home>*{flex:none;margin:0!important} .home-mode #home>.hero{flex:0 1 34dvh;align-content:center} .streak{grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:center;padding:clamp(6px,1.2dvh,10px) 12px;gap:clamp(4px,.9dvh,7px)} .streak .sk-top,.streak .days{grid-column:2} .streak .sk-top{flex-wrap:wrap;row-gap:2px} .streak .sk-l{font-size:clamp(10px,3.1vw,11.5px)} .streak .days{gap:2px} .streak .days i{width:clamp(22px,3.6dvh,28px);height:clamp(22px,3.6dvh,28px)} #home .streak>.home-fifou{grid-row:1/4;width:clamp(44px,9dvh,66px)!important;min-width:0;align-self:center;margin:0} #home .streak .hsay{grid-column:2;padding:0;background:none;border:0;box-shadow:none;font-size:clamp(12.5px,2dvh,14px);line-height:1.3;color:var(--mut)} .hero{padding:clamp(10px,2.2dvh,24px) clamp(10px,3.5vw,14px);gap:clamp(8px,3.2dvh,32px)} .hero .hln{gap:clamp(8px,2.5vw,12px)} .hero .hff{width:clamp(48px,12dvh,104px);height:clamp(50px,12.5dvh,108px)} .hero .hn{font-size:clamp(16px,3dvh,25px)} .hero .hring,.hero .hring svg{width:clamp(46px,min(8.5dvh,15vw),72px);height:clamp(46px,min(8.5dvh,15vw),72px)} #home .hgo{min-height:clamp(48px,9dvh,76px);font-size:clamp(17px,2.6dvh,20px)} #home .home-menu{grid-template-columns:repeat(2,minmax(0,1fr))} #home .home-menu .home-card{min-height:clamp(48px,10dvh,84px);padding:clamp(4px,.8dvh,8px) clamp(6px,2.5vw,10px);gap:clamp(6px,2.5vw,10px)} #home .home-menu .home-t{font-size:clamp(12.5px,3.9vw,14px)!important} #home .home-menu .hff{width:clamp(34px,6dvh,44px);height:clamp(34px,6dvh,44px)} /* 2.9.25 : page « Réglage des lignes » (maquette A, titre de la B, numéros de la C) : titre souligné de cuivre, une carte par réglage numérotée 1 2 3, valeur de la longueur sous son titre, phrase collée au curseur, interrupteur redessiné, bulles de l'Étendue agrandies avec une bulle de détail sous le personnage choisi */ body.tsetup:has(#tab-train:not([hidden])) #apptitle::after{content:"";display:block;width:44px;height:3px;margin-top:8px;border-radius:2px;background:var(--sel)} body.tsetup:has(#tab-train:not([hidden])) #apptitle{margin-bottom:14px} #train-setup .tcard:has(#texig){background:none!important;border:0!important;box-shadow:none!important;padding:0!important} #train-setup .tcard:has(#texig)>h2{display:none} #train-setup .tcard .dpt{margin:0 0 12px;padding:12px 16px 16px;border-radius:var(--r-l);background:var(--sheet);border:1px solid var(--edge);box-shadow:var(--lift)} #train-setup .sx{display:flex;align-items:center;gap:10px;margin:0 0 12px} #train-setup .sx-n{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--sel);color:var(--cu-ink);font:700 14px/1 var(--f-ui)} #train-setup .sx-t{flex:1;min-width:0;margin:0;font:400 19px/1.2 var(--f-display);color:var(--fg);text-wrap:balance} #train-setup .sx-t label{cursor:default} /* longueur : le titre d'abord, la valeur ensuite (plus petite), Recommandé à droite ; crans discrets, phrase juste dessous */ #train-setup .lx-v{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:32px;margin:-4px 0 2px} #train-setup .dpt-d .dpt-v,#train-setup .dpt-d .dpt-v b{font:700 15px/1.2 var(--f-ui)!important;color:var(--sel)} #train-setup .dp-rec{position:relative!important;top:auto;left:auto;transform:none!important} #train-setup .dp-rec::before{display:none} #train-setup .dpt-d #tdepth{height:40px;margin-top:0} #train-setup .dpt-d .dpt-t{margin-top:-2px;font:500 13px/1 var(--f-ui);color:var(--mut)} #train-setup .dpt-d .dpt-t span.rec{color:var(--sel);font-weight:700} #train-setup .dpt-t span.rec i{margin-right:1px;font-size:10px;font-style:normal;vertical-align:1px} #train-setup .dp-gl{margin:8px 0 0;padding:9px 12px;border-radius:var(--r-m);background:rgba(var(--sel-rgb),.08);font:500 14px/1.35 var(--f-ui)} #train-setup .sw-sep{height:1px;margin:16px 0 0;background:var(--edge)} /* interrupteur d'arrêt au gain */ #train-setup .dp-sw{min-height:64px;margin-top:14px;padding:10px 12px 10px 14px;gap:12px;border-radius:var(--r-l);border:1.5px solid var(--line);background:var(--tint);transition:border-color .25s,background .25s} #train-setup .dp-sw.on{border-color:rgba(var(--sel-rgb),.7);background:linear-gradient(135deg,rgba(var(--sel-rgb),.16),rgba(var(--sel-rgb),.05))} #train-setup .dp-sw .dp-ic{box-sizing:border-box;width:36px;height:36px;padding:8px;border-radius:50%;background:var(--sheet);color:var(--mut);transition:color .25s,background .25s} #train-setup .dp-sw.on .dp-ic{background:var(--sel);color:var(--cu-ink)} #train-setup .dp-swl{display:flex;flex-direction:column;align-items:flex-start;gap:5px;font:600 15px/1.3 var(--f-ui)} #train-setup .dp-recb{margin:0;padding:2px 8px;font:700 11px/1.3 var(--f-ui)} #train-setup .dp-swt{width:56px;height:34px;border-radius:var(--r-pill);background:transparent;box-shadow:inset 0 0 0 2px rgba(var(--mut-rgb),.5);transition:background .25s,box-shadow .25s} #train-setup .dp-swt i{top:4px;left:4px;width:26px;height:26px;background:#d9d2c6;box-shadow:0 2px 4px rgba(0,0,0,.35);transition:left .25s cubic-bezier(.3,1.4,.6,1),background .25s} #train-setup .dp-sw.on .dp-swt{background:var(--sel);box-shadow:none} #train-setup .dp-sw.on .dp-swt i{left:26px;background:#fbf7f0} #train-setup .dp-sw.on .dp-swt i::after{content:"";position:absolute;left:9px;top:6px;width:6px;height:11px;border:solid var(--sel);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)} /* étendue : bulles plus grandes, Fifou entier et centré ; bulle de détail sous le personnage choisi */ #train-setup .pladder{height:108px} #train-setup .pladder:before{left:42px;right:42px} #train-setup .pl-s{width:84px} #train-setup .pl-f{width:76px;height:76px;transform:scale(.86);transition:transform .35s cubic-bezier(.3,1.2,.5,1),opacity .3s,border-color .3s,box-shadow .3s} #train-setup .pl-s.on .pl-f{transform:scale(1.08)} #train-setup .pl-f svg{width:100%;height:100%;margin:0;min-width:0} #train-setup .pl-lab span{width:96px} #train-setup .pl-lab span:first-child,#train-setup .pl-lab span:last-child{width:auto;white-space:nowrap} #train-setup .pl-lab span:nth-child(2){text-align:center} #train-setup .pl-det{position:relative;display:flex;flex-direction:column;gap:3px;margin-top:14px;padding:10px 14px 12px;border-radius:var(--r-l);border:1.5px solid var(--sel);background:linear-gradient(135deg,rgba(var(--sel-rgb),.16),rgba(var(--sel-rgb),.05))} #train-setup .pl-det::before{content:"";position:absolute;top:-9px;left:var(--ax,50%);margin-left:-8px;width:14px;height:14px;background:var(--sheet);border-left:1.5px solid var(--sel);border-top:1.5px solid var(--sel);border-top-left-radius:3px;transform:rotate(45deg);transition:left .35s cubic-bezier(.3,1.2,.5,1)} #train-setup .pl-det[data-v="0"]{--ax:42px}#train-setup .pl-det[data-v="1"]{--ax:50%}#train-setup .pl-det[data-v="2"]{--ax:calc(100% - 42px)} #train-setup .pd-t{font:400 19px/1.2 var(--f-display);color:var(--sel)} #train-setup .pd-d{font:500 14px/1.35 var(--f-ui);color:var(--fg)} #train-setup .pl-det.anim>*{animation:pldet .35s ease both} @keyframes pldet{0%{opacity:0;transform:translateY(4px)}100%{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){#train-setup .pl-det.anim>*{animation:none}#train-setup .pl-det::before,#train-setup .pl-f,#train-setup .dp-sw,#train-setup .dp-swt,#train-setup .dp-swt i{transition:none}} /* 2.9.28 : même espace sous « Commencer » qu'au-dessus (18 px entre la dernière carte et le bouton, 18 px entre son rebord et la barre du bas) */ #train-setup{padding-bottom:0} #tab-train #su-go{margin-bottom:11px;bottom:calc(var(--navh) + 22px)} /* 2.9.29 : repère « Recommandé » sur la tuile Meilleur coup, à cheval sur son bord haut (plein quand la tuile est choisie, comme sur l'interrupteur) */ #train-setup .dpt-x .sx{margin-bottom:18px} #train-setup .extiles button{position:relative} #train-setup .ex-rec{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);padding:2px 8px;border-radius:var(--r-pill);border:1.5px solid var(--sel);background:var(--sheet);color:var(--sel);font:700 11px/1.3 var(--f-ui)!important;white-space:nowrap;width:max-content} #train-setup .extiles button[aria-pressed="true"] .ex-rec{background:var(--sel);color:var(--bg)} /* 2.9.29 : l'interrupteur montre « +3 » (gain net de matériel) à la place du drapeau (2.9.31 : sans cavalier) */ #train-setup .dp-sw .dp-gn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:0;flex:none;width:40px;height:40px;padding:0;border-radius:50%} #train-setup .dp-sw:has(.dp-gn){gap:10px;padding-left:12px} #train-setup .dp-gn b{font:800 15px/1 var(--f-ui);font-variant-numeric:tabular-nums} /* ===== 2.9.32 : retouches de la page de jeu (Théo, 18/10/2026). Halo plus discret ; barre et bulle de Fifou à la même distance (10 px), le bloc matériel pris / échiquier / barre / Fifou est centré dans la place sous l'en-tête ; la bulle suit son texte et défile en elle-même au-delà de la place restante ; la page ne défile ni ne rebondit. ===== */ body:has(#tab-train:not([hidden])):not(.home-mode):not(.tsetup):not([class*="scr-"]){background:radial-gradient(ellipse 95% 48% at 50% 40%,rgba(var(--halo-rgb),.2),rgba(var(--halo-rgb),.07) 60%,rgba(var(--halo-rgb),0) 100%) var(--bg) fixed} #tab-train .tframe{box-shadow:0 0 36px 8px rgba(var(--halo-rgb),.18)} @media (max-width:820px), (pointer:coarse) and (max-width:1366px){ html:has(>body #tab-train:not([hidden])):not(:has(>body.home-mode,>body.tsetup,>body[class*="scr-"])){overflow:hidden;overscroll-behavior:none} body #tab-train{--gap:10px;--bubmax:calc(var(--apph,100dvh) - var(--navh) - var(--sat,0px) - 14px - var(--hd) - 2px - 2*var(--cp) - 8px - var(--bw) - var(--kh) - 2*var(--gap))} body #tab-train #capT{margin-top:auto!important} body #tab-train .grow{margin-top:var(--gap)!important} /* zone de Fifou de hauteur fixe (au plus 160 px) : le bloc ne bouge pas quand le texte de la bulle change */ body #tab-train{--bubz:min(var(--bubmax),160px)} body #tab-train .bwrap{flex:none;height:var(--bubz);min-height:0!important;margin:var(--gap) 0 auto!important} body #tab-train .bubble{max-height:var(--bubz);align-self:flex-start} /* Fifou à côté de la bulle, plus petit (56 à 84 px), le haut aligné sur la bulle */ body #tab-train{--ffw:clamp(56px,calc(var(--apph,100dvh) - var(--navh) - var(--sat,0px) - var(--bw) - 250px),84px)} body #tab-train .bwrap{align-items:flex-start!important} } /* 2.9.32 : échiquier à coins carrés (demande de Théo) */ #tab-train .tframe,body #tab-train .tframe,body #tab-train .bov,#tab-train .bov,#tuto .bov,body #board,#board,#tuboard{border-radius:0!important} /* 2.9.33 · Mon répertoire, maquette A (2.9.35 : échiquier de l'ouverture un peu réduit pour garder « Gambit dame » sur une ligne, Découvrir un peu plus grand) : grand échiquier à droite de chaque ouverture (Découvrir en pastille sous son nom), variantes en grille de 2 colonnes (échiquier moyen, case et nom dessous) ; lignes de 44-48 px */ #pf-rep .pf-ouv{padding:10px 0 2px} #pf-rep .rp-hc{display:flex;align-items:center;gap:12px} #pf-rep .rp-col{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px} #pf-rep .pf-oh{min-height:48px;gap:12px} #pf-rep .rp-o{width:min(48%,calc(100% - 164px));max-width:190px;height:auto;aspect-ratio:1;border-radius:var(--r-s);box-shadow:0 1px 4px rgba(0,0,0,.4)} #pf-rep .pf-det{margin:8px 0 0} #pf-rep .pf-det>summary{min-height:44px} #pf-rep button.pf-all{min-height:44px;padding:0;gap:12px} #pf-rep .rp-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:6px 0 12px} #pf-rep button.pf-sub{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:0 8px;min-height:0;padding:0;border-top:0!important;border-radius:var(--r-s)} #pf-rep .pf-sub .rp-s{grid-column:1/-1;width:100%;height:auto;aspect-ratio:1;margin:0 0 4px;border-radius:var(--r-s);box-shadow:0 1px 4px rgba(0,0,0,.4)} #pf-rep .pf-sub .ck{width:22px;height:22px} #pf-rep .pf-sub.on>.ck::after{width:6px;height:11px;border-width:0 2.5px 2.5px 0} #pf-rep .pf-sub .pf-l{min-height:40px;justify-content:center} #pf-rep .pf-sub .pf-l b{font:600 14px/1.2 var(--f-ui)} #pf-rep .pf-soon{min-height:48px} /* 2.9.37 : le liseré cuivre de la tête (contour et bouton, dessinés hors de .fa-head) respire avec elle, comme un seul objet ; spécificité nulle (:where) pour que chaque « animation:none » existant (tuiles, mini-Fifous) l'arrête aussi */ @keyframes ff-respire{0%,100%{transform:none}50%{transform:translateY(-4px) rotate(-1.5deg) scale(1.02)}} svg .fa-head{animation-name:ff-respire} :where(svg) :where(path[d^="M100 30 C126 40"][stroke="#f2b27a"],circle[cx="100"][cy="21"][stroke="#f2b27a"]){transform-box:view-box;transform-origin:100px 150px;animation:ff-respire 3s ease-in-out infinite} @media (prefers-reduced-motion:reduce){svg .fa-head,:where(svg) :where(path[d^="M100 30 C126 40"][stroke="#f2b27a"],circle[cx="100"][cy="21"][stroke="#f2b27a"]){animation:none!important}} /* 2.9.42 · Mon répertoire : famille (Gambit dame) = case commune et échiquier, puis ses ouvertures dans un menu repliable, en retrait sous un filet */ #pf-rep .rp-fam{padding:10px 0 2px;border-top:1px solid var(--line)} #pf-rep .rp-fam:first-child{border-top:0} #pf-rep .rp-fh b{font:800 19px/1.2 var(--f-ui)} #pf-rep .rp-fam>.rp-hc .rp-o{width:min(46%,calc(100% - 176px))} #pf-rep .rp-fl .rp-o{width:min(48%,calc(100% - 170px))} #pf-rep .rp-fdet>summary{font-weight:600} #pf-rep .rp-fl{margin:0 0 6px 2px;padding-left:10px;border-left:2px solid var(--line)} #pf-rep .rp-fl>.pf-ouv:first-child{border-top:0} /* 3.1.78 · « Variantes mineures » : case de la grille comme les variantes, nom en couleur de sélection */ #pf-rep .rp-mh .pf-l b{color:var(--sel)} /* 3.0.23 : onglets Toutes · Blancs · Noirs et une carte par camp, avec son bandeau (roi, « Avec les Blancs », nombre cochées) */ .rp-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 0 12px;border-bottom:1px solid var(--line)} .rp-tabs:has(>[hidden]){grid-template-columns:repeat(2,minmax(0,1fr))} .rp-tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:52px;padding:4px 2px 6px;border:0!important;border-bottom:3px solid transparent!important;border-radius:0!important;background:none!important;color:var(--mut)!important;font:600 15px/1.1 var(--f-ui)} .rp-tabs button small{font:500 12px/1 var(--f-ui);color:var(--mut);opacity:.8;white-space:nowrap} .rp-tabs button.on{color:var(--cu2)!important;border-bottom-color:var(--sel)!important} .rp-tabs button:focus-visible{outline:3px solid var(--sel);outline-offset:-3px} .rp-tabs .rp-tl{display:flex;align-items:center;gap:6px} .rp-ti,.rp-ti img{display:block;width:22px;height:22px;min-width:0;flex:none} #pf-rep .rp-band{display:flex;align-items:center;gap:10px;margin:-14px -16px 4px;padding:10px 16px;border-bottom:1px solid var(--line);border-radius:var(--r-m) var(--r-m) 0 0;background:var(--tint)} #pf-rep .rp-bk,#pf-rep .rp-bk img{display:block;width:34px;height:34px;min-width:0;flex:none} #pf-rep .rp-bk img{filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))} #pf-rep .rp-band b{font:600 19px/1.15 var(--f-display);color:var(--fg)} #pf-rep .rp-bn{margin-left:auto;font:600 13px/1 var(--f-ui);color:var(--mut);white-space:nowrap} #pf-rep .rp-band+.pf-ouv,#pf-rep .rp-band+.rp-fam,#pf-rep .rp-band+.pf-soon{border-top:0} /* 3.0.28 : titres de groupe (premiers coups, puis nom du groupe) dans les cartes de camp et le sommaire de l'Arbre ; ouvertures « Bientôt » avec leurs premiers coups et leurs variantes prévues en petit */ #pf-rep .rp-gr{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin:14px 0 4px;padding:0;font:600 13px/1.3 var(--f-ui);color:var(--gris);text-transform:uppercase;letter-spacing:.08em} #pf-rep .rp-band+.rp-gr{margin-top:8px} /* 3.0.33 : petit échiquier de la position du groupe, à droite du titre (même taille que les « Bientôt ») */ #pf-rep .rp-gr:has(.rp-g){align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:12px} #pf-rep .rp-gt{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;min-width:0} #pf-rep .rp-gr .rp-g{flex:none;width:88px;height:88px;margin:4px 0;border-radius:var(--r-s);overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.4)} #pf-rep .rp-gr .rp-g svg{display:block;width:100%;height:100%;min-width:0} #pf-rep .rp-gc{color:var(--cu2);text-transform:none;letter-spacing:.02em} #pf-rep .rp-gr+.pf-ouv,#pf-rep .rp-gr+.rp-fam,#pf-rep .rp-gr+.pf-soon{border-top:0} #pf-rep .pf-sl{display:flex;flex-direction:column;gap:2px;min-width:0;padding:6px 0} #pf-rep .pf-sl small{font:500 13px/1.3 var(--f-ui);color:var(--mut)} #pf-rep .pf-soon .pf-tag{align-self:flex-start;margin:4px 0 0;padding:4px 8px;font-size:12px} #pf-rep .pf-soon .pf-sl{flex:1} #pf-rep .pf-soon:has(.rp-b){opacity:1} #pf-rep .pf-soon:has(.rp-b)>.ck,#pf-rep .pf-soon:has(.rp-b)>.pf-sl{opacity:.5} #pf-rep .pf-soon .rp-b{opacity:.85} #pf-rep .pf-soon .rp-b{flex:none;width:88px;height:88px;margin:8px 0;border-radius:var(--r-s);overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.4)} #pf-rep .pf-soon .rp-b svg{display:block;width:100%;height:100%} /* 3.0.28 : recherche de Mon répertoire, au-dessus des onglets Toutes · Blancs · Noirs */ .rp-cherche{width:min(80%,320px);margin:0 auto 10px} .rp-cherche input{box-sizing:border-box;width:100%;min-height:40px;padding:8px 12px 8px 38px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8.5' cy='8.5' r='6'/%3E%3Cpath d='M13 13l5 5'/%3E%3C/svg%3E") no-repeat 12px 50%;background-size:18px;color:var(--fg);font:500 16px/1.2 var(--f-ui)} .rp-cherche input::placeholder{color:var(--mut)} .rp-cherche input:focus-visible{outline:3px solid var(--sel);outline-offset:1px} #pf-rep .rp-out{display:none!important} /* 2.9.44 : page Paramètres (ex-Réglages) plus aérée : intitulés Échiquier / Pièces en petites capitales sans nom choisi à droite, 3 jeux de pièces sur une ligne, icône cuivre en pastille devant chaque ligne, lignes de 60 px */ #settings .st-top{margin-bottom:6px} #settings .st-sec{padding:12px 18px 10px;margin-bottom:18px} #settings .st-gt{margin:6px 0 10px} #settings .st-lab{margin:14px 0 10px;font:600 13px/1.2 var(--f-ui);color:var(--gris);text-transform:uppercase;letter-spacing:.08em} #settings .st-gt+.st-lab{margin-top:4px} #settings .pcar .popt{flex:0 0 92px;width:92px} #settings .pcar .pvsvg{max-width:78px} #settings #st-sets{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:2px 0 14px} #settings #st-sets .popt{padding:6px;gap:4px} #settings #st-sets .popt span{font-size:12.5px!important;line-height:1.15;text-align:center} #settings #st-sets .pvsvg{width:100%;max-width:none;min-width:0} #settings .st-row{min-height:60px;gap:14px;padding:8px 0} #settings .st-ic{flex:none;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--r-m);background:var(--tint);color:var(--sel)} #settings .st-ic svg{display:block;width:22px;height:22px;min-width:0} #settings .swrow label{flex-direction:row;justify-content:flex-start;align-items:center;text-align:left} #settings .st-row.st-vr{justify-content:flex-start} #settings .st-seg{padding:0 0 14px} #settings .st-link b{flex:1} /* ===== 2.9.45 · tuto refait : marges de côté ; démo sur l'échiquier de l'entraînement (halo bleu, barre Indice · Retour · Suivant, Indice puis Solution, coup refusé) ; fin propre au tuto (replay, éclats de cuivre, bandeau) ; Mon répertoire dans le profil ; visite qui se touche. Tout est rangé sous body.tu-dmo, .tu-dm, body.tu-rep, .tu-act : les tutos d'ouverture (body.to-on) ne changent pas. Rien sur svg.fifou-defs ; chaque nouveau SVG a min-width:0. ===== */ body.tu-on:not(.to-on) #tuto{padding-inline:12px;box-sizing:border-box} body.tu-dmo:not(.to-on) #tuto{padding-inline:6px} body.tu-dmo #tuto .tu-top{padding-inline:6px} body.tu-dmo{background:radial-gradient(ellipse 95% 48% at 50% 40%,rgba(var(--halo-rgb),.2),rgba(var(--halo-rgb),.07) 60%,rgba(var(--halo-rgb),0) 100%) var(--bg) fixed} html:has(>body.tu-dmo){overscroll-behavior:none} body.tu-dmo{padding-block:0!important} body.tu-dmo #tuto{margin-top:0!important;margin-bottom:0!important} /* bloc échiquier / barre / Fifou centré dans la place sous la barre d'étapes ; échiquier de la taille de l'entraînement */ .tu-dm{--tbw:max(200px,min(100vw - 12px,var(--apph,100dvh) - 56px - 62px - 130px - 20px,560px));display:flex;flex-direction:column;justify-content:center;min-height:calc(var(--apph,100dvh) - 72px);box-sizing:border-box;padding-bottom:8px} .tu-dm .tframe{flex:none;margin:0 auto;width:fit-content;box-shadow:0 0 36px 8px rgba(var(--halo-rgb),.18)} body.tu-on #tuto .tu-dm .tframe .bov{width:var(--tbw)!important;max-width:none;margin:0!important;box-shadow:0 0 0 1px rgba(var(--sel-rgb),.45),0 10px 24px rgba(0,0,0,.35)!important} .tu-dm .tu-bar,.tu-dm .bwrap{width:var(--tbw);max-width:100%;margin-inline:auto!important;box-sizing:border-box} .tu-dm .bwrap{flex:none;margin-top:10px!important;align-items:flex-start!important} body.tu-on #tuto .tu-dm .bubble{height:auto;min-height:0;max-height:160px;flex:1} /* 3.0.15 : la place de la bulle est réservée (160 px, moins si l'écran manque de hauteur) : l'échiquier ne bouge plus quand la bulle grandit ou rétrécit, et la page ne dépasse plus l'écran (le navigateur ne cache plus sa barre, ce qui changeait --apph et la taille) */ body.tu-on #tuto .tu-dm{height:calc(var(--apph,100dvh) - 72px);min-height:0} body.tu-on #tuto .tu-dm .bwrap{flex:0 1 160px;min-height:0} body.tu-on #tuto .tu-dm .bubble{max-height:100%} #tuto .tu-dm .shk{transform-box:fill-box;transform-origin:50% 50%;animation:pshk .24s ease-in-out .16s} #tuto .tu-dm .errfl{opacity:0;animation:errfl .6s ease-out .4s} #tuto .tu-dm .hfl{animation:hfl .45s ease-in-out 2} #tuto .tu-dm .rpop{transform-box:fill-box;transform-origin:50% 50%;animation:rpop .22s ease-out} #tuto .tu-dm .solar{animation:solar .26s ease-out} /* barre : mêmes cases, icônes et couleurs que la barre de l'entraînement */ .tu-bar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));height:52px;margin-top:10px;border-radius:var(--r-l);background:var(--sheet);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden} .tu-bar button{box-sizing:border-box;width:100%;min-width:0;height:52px;margin:0;padding:0 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;border-radius:0;background:transparent;color:var(--fg);font:600 12px/1.1 var(--f-ui)!important;cursor:pointer;transition:transform 120ms,background-color 200ms} .tu-bar button[hidden]{display:none} .tu-bar button+button{box-shadow:inset 1px 0 0 var(--line)} .tu-bar button:active{transform:scale(.97)} .tu-bar button:focus-visible{outline:3px solid var(--blue);outline-offset:-3px} .tu-bar button:disabled{opacity:.4;cursor:default} .tu-bar .tu-bh,.tu-bar .tu-bp,.tu-bar .tu-bnx{--ico:none} .tu-bar .tu-bh::before,.tu-bar .tu-bp::before,.tu-bar .tu-bnx::before{content:"";display:block;flex:none;width:20px;height:20px;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat} .tu-bar .tu-bh{background:rgba(var(--sel-rgb),.12);color:var(--sel);--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9 18h6%22/%3E%3Cpath d=%22M10 21h4%22/%3E%3Cpath d=%22M12 3a6 6 0 00-4 10.5c.7.7 1 1.5 1 2.5h6c0-1 .3-1.8 1-2.5A6 6 0 0012 3z%22/%3E%3C/svg%3E")} .tu-bar .tu-bh.sol{background:rgba(240,192,98,.2);color:var(--hint);box-shadow:inset 0 0 0 1.5px rgba(240,192,98,.55);--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='13' r='7'/%3E%3Ccircle cx='11' cy='13' r='2.6'/%3E%3Cpath d='M11 13l9-9M15.5 4H20v4.5'/%3E%3C/svg%3E")} .tu-bar .tu-bh.sol.morph{animation:solcase .32s cubic-bezier(.2,.9,.25,1.2)} .tu-bar .tu-bp{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E")} .tu-bar .tu-bnx{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E")} .tu-bar #tu-retry.tu-br{grid-column:2/4;flex-direction:row;gap:6px;background:var(--red);color:#2a0d08;font:700 15px/1 var(--f-ui)!important} .tu-bar.go{grid-template-columns:1fr;background:transparent;box-shadow:none;overflow:visible} .tu-bar #tu-go.tu-bg{grid-column:1/-1;flex-direction:row;gap:10px;border-radius:var(--r-l);background:linear-gradient(180deg,#f0b07e 0%,#e0955a 55%,#d4844a 100%);color:var(--cu-ink);box-shadow:0 4px 0 var(--cu3),inset 0 1px 0 rgba(255,255,255,.4)!important;font:700 17px/1 var(--f-ui)!important;animation:tgoIn 320ms cubic-bezier(.2,.9,.25,1.35) both} .tu-bar .tu-bg:active{transform:translateY(3px)} /* fin de la démo */ .tu-fx{position:absolute;inset:0;pointer-events:none;z-index:4} .tu-fx svg{display:block;width:100%;height:100%;min-width:0;overflow:visible} .tu-dm .tframe.tu-rp #tuboard{filter:brightness(.6) saturate(.85);transition:filter .4s} .tu-ray line{stroke:#f7c897;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:tuRay .7s .2s ease-out forwards;filter:drop-shadow(0 0 1.5px #e0955a)} .tu-ray circle{fill:none;stroke:#f7c897;stroke-width:1;opacity:0;animation:tuRing .4s .7s ease-out forwards} @keyframes tuRay{to{stroke-dashoffset:0}} @keyframes tuRing{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}} .tu-ray circle{transform-box:fill-box;transform-origin:50% 50%} .tu-sh .tu-fl{fill:#f7c897;transform-box:fill-box;transform-origin:50% 50%} .tu-ban{position:absolute;left:50%;top:50%;z-index:5;width:84%;box-sizing:border-box;padding:14px 14px 16px;transform:translate(-50%,-50%);border-radius:var(--r-l);text-align:center;background:linear-gradient(160deg,rgba(23,34,58,.95),rgba(15,24,44,.97));box-shadow:0 0 0 1.5px var(--sel),0 0 40px 6px rgba(var(--sel-rgb),.45)} .tu-ban[hidden]{display:none} .tu-ban.in{animation:tuBan .5s cubic-bezier(.2,.9,.25,1.3) both} @keyframes tuBan{from{opacity:0;transform:translate(-50%,-50%) scale(.6)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}} .tu-bk{margin:0;font:400 30px/1.05 var(--f-display);color:var(--sel)} .tu-bs{margin:6px 0 0;font:600 15px/1.3 var(--f-ui);color:var(--fg)} .tu-bn{display:inline-block;margin-top:8px;padding:3px 14px;border-radius:999px;background:var(--sel);color:var(--cu-ink);font:800 20px/1.2 var(--f-ui);font-variant-numeric:tabular-nums} /* réduire les animations : fin calme (la case de la dame s'illumine, le bandeau apparaît sans mouvement) */ .tu-dm .tframe.tu-calme .bov{box-shadow:0 0 0 2px var(--sel),0 0 30px 6px rgba(var(--sel-rgb),.4)!important} @media (prefers-reduced-motion:reduce){.tu-bar button,.tu-bar .tu-bg,.tu-ban.in,.tu-ray line,.tu-ray circle,#tuto .tu-dm .shk,#tuto .tu-dm .hfl,#tuto .tu-dm .rpop,#tuto .tu-dm .solar,.tu-bar .tu-bh.sol.morph{animation:none!important;transition:none!important} .tu-ray line{stroke-dashoffset:0}.tu-ray circle{opacity:1}#tuto .tu-dm .errfl{animation:none;opacity:0}} /* Elo : l'aide « Tu ne connais pas ton Elo ? » au-dessus des niveaux */ .tu-aide{display:flex;align-items:center;gap:10px;margin:0;padding:9px 12px;border-radius:var(--r-m);background:rgba(var(--sel-rgb),.1);border:1px solid rgba(var(--sel-rgb),.35);font:500 15px/1.35 var(--f-ui);color:var(--fg);text-align:left} .tu-aide i{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--sel);color:var(--cu-ink);font:800 15px/1 var(--f-ui);font-style:normal} .tu-aide b{color:var(--sel);font-weight:700} /* profil, question 2 : l'écran Mon répertoire sous la barre du tuto */ body.tu-rep #repertoire .rp-tete{display:none!important} body.tu-rep #repertoire{padding-bottom:84px} .tu-rtop{position:sticky;top:0;z-index:5;margin:0 0 6px;padding-bottom:4px;background:var(--bg)} .tu-rtop .tu-ff{margin:4px 0 6px} .tu-rtop .bubble{flex:1;height:auto!important;min-height:0!important;margin:0 0 6px;padding:10px 12px} .tu-rtop .tstatus{font-size:17px;line-height:1.35;margin:0} .tu-rnav{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:20;max-width:616px;margin:0 auto} /* 3.1.57 : Suivant grisé tant qu'aucune ouverture n'est cochée, mais opaque (il flotte au-dessus des cartes) */ .tu-rnav button:disabled{opacity:1;background:var(--sheet);border-color:var(--line);color:rgba(var(--fg-rgb),.4)} /* visite : réglage « À toi » qui se touche, barre du bas mise en valeur, bulle relevée au-dessus de la barre */ .tu-spot.tu-act{pointer-events:auto} .tu-atoi{position:absolute;right:10px;top:-12px;z-index:3;padding:3px 10px;border-radius:999px;background:var(--sel);color:var(--cu-ink);font:800 12px/1.3 var(--f-ui);box-shadow:0 2px 8px rgba(0,0,0,.4);pointer-events:none} body.tu-visit #botnav.tu-spot{position:fixed;z-index:81;border-radius:0} #tu-layer.tu-up .tu-coach{bottom:calc(var(--navh,64px) + 16px)} .tu-sn .tu-vb{min-width:40px;padding:0;background:var(--sheet);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line);font-size:20px} .tu-sn .tu-vb:disabled{opacity:.35} #st-styles.tu-spot{padding:8px} body.tu-rep #repertoire{padding-inline:12px;box-sizing:border-box} .pcar.tu-spot>.tu-atoi{top:3px;right:6px} /* 2.9.56 : « Si je gagne du matériel : » Je m'arrête / Je continue (#tgain), cadre Recommandé autour de « Je m'arrête » ; plus de bouton Recommandé au-dessus du curseur */ .dp-gq{margin:16px 0 0 2px;font:600 14px/1.3 var(--f-ui);color:var(--mut)} .dp-gs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px} .dp-go{position:relative;display:flex;padding:13px 4px 4px;border:1.5px solid transparent;border-radius:calc(var(--r-l) + 5px)} .dp-gor{border:1.5px dashed rgba(var(--sel-rgb),.8)} .dp-gr{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);padding:2px 9px;border-radius:var(--r-pill);border:1.5px solid var(--sel);background:var(--sheet);color:var(--sel);font:700 11.5px/1.3 var(--f-ui);white-space:nowrap;z-index:1} .dp-go.on .dp-gr{background:var(--sel);color:var(--bg)} #train-setup .dp-gs button,.dp-gs button{flex:1;min-height:56px;margin:0;padding:8px 6px!important;border-radius:var(--r-l)!important;border:1.5px solid var(--line);background:var(--tint)!important;color:var(--mut)!important;font:700 14.5px/1.2 var(--f-ui);text-align:center;cursor:pointer} .dp-gs button i{display:block;margin-top:2px;font:500 12px/1.2 var(--f-ui);font-style:normal;opacity:.85} #train-setup .dp-gs button[aria-checked="true"],.dp-gs button[aria-checked="true"]{border-color:var(--sel);background:var(--sel)!important;color:var(--bg)!important} .dp-gs button:focus-visible{outline:2px solid var(--sel);outline-offset:2px} /* 2.9.47 · profil du tuto sans défilement : la page fait la hauteur de l'écran (barre d'adresse comprise), sans les marges du body */ body.tu-on:not(.to-on){padding-block:0!important} body.tu-on:not(.to-on) #tuto{margin-top:0!important;margin-bottom:0!important;padding-top:8px} body.tu-on:not(.to-on) .tu-pq{min-height:0;height:calc(var(--apph,100dvh) - 72px);box-sizing:border-box;padding-bottom:8px} body.tu-on:not(.to-on) .tu-pq .tu-nav{margin-bottom:0} @media (max-height:660px){body.tu-on:not(.to-on) .tu-pq #tu-qb{gap:8px} #tuto .tu-pq .tu-ffs{height:72px}#tuto .tu-pq .tu-ffs .pcs{width:66px!important;max-width:66px!important} #tuto .tu-pq .tu-ec{gap:6px;padding:10px 12px}.tu-pq .tu-lv{min-height:40px}.tu-pq .tu-lvs{gap:6px} .tu-pq .tu-aide{padding:6px 10px;font-size:14px}.tu-pq .tu-aide i{width:22px;height:22px;font-size:13px} body.tu-on:not(.to-on) .tu-pq .tu-nav{padding-top:4px}.tu-pq .tu-nav button{min-height:46px}} @media (max-height:600px){#tuto .tu-pq .tu-ffs{height:58px}#tuto .tu-pq .tu-ffs .pcs{width:54px!important;max-width:54px!important} .tu-pq .tu-q{margin:4px 0 2px}.tu-pq .tu-r{height:28px}.tu-pq .tu-lv{min-height:36px;padding-block:2px}} @media (max-height:740px){#tuto .tu-pq .tu-ec{gap:10px}} @media (max-height:600px){#tuto .tu-pq .tu-ec{gap:5px}.tu-pq .tu-ect{font-size:12.5px;line-height:1.3}.tu-pq .tu-ff .bubble{padding:8px 10px}.tu-pq .tu-ff .tstatus{font-size:15px;line-height:1.3}} /* ===== 2.9.49 : « Essayer un autre coup » = petit carré à gauche de « Coup suivant » (icône flèche retour, choisie par Théo le 18/10/2026). Même hauteur que Coup suivant, qui prend le reste de la largeur ; s'il est seul (adversaire automatique), il prend la place de l'Indice. Bulle d'explication (#tundotip) les deux premières fois, puis sur appui long (app.js). ===== */ #tab-train .grow>#tundo{grid-column:2;grid-row:1;box-sizing:border-box;width:48px;min-width:48px;height:48px;min-height:48px;padding:0;margin:0;justify-self:end; display:flex;align-items:center;justify-content:center;border:0;border-radius:var(--r-m);background:var(--sheet);color:var(--sel); box-shadow:inset 0 0 0 1.5px rgba(var(--sel-rgb),.55),0 4px 0 rgba(0,0,0,.22);cursor:pointer;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none; transition:transform 120ms,box-shadow 120ms} #tab-train .grow>#tundo[hidden]{display:none} #tab-train .grow>#tundo::before{content:"";display:block;flex:none;width:24px;height:24px;background:currentColor;-webkit-mask:var(--ico-undo) center/contain no-repeat;mask:var(--ico-undo) center/contain no-repeat} #tab-train .grow>#tundo:active{transform:translateY(3px);box-shadow:inset 0 0 0 1.5px rgba(var(--sel-rgb),.55),0 1px 0 rgba(0,0,0,.22)} #tab-train .grow>#tundo:focus-visible{outline:3px solid var(--blue);outline-offset:3px} #tab-train .grow>#tundo:hover{background:var(--tint)} :root{--ico-undo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14L4 9l5-5'/%3E%3Cpath d='M4 9h10.5a5.5 5.5 0 0 1 0 11H11'/%3E%3C/svg%3E")} #tab-train .grow:has(#tundo:not([hidden]))>#hintb{display:none!important} #tab-train .grow:has(#tundo:not([hidden]))>.tgo{grid-column:3/4} @media (max-width:820px), (pointer:coarse) and (max-width:1366px){ body:not(.libre) #tab-train .grow:has(#tundo:not([hidden])):has(#tgo:not([hidden])){grid-template-columns:var(--kh) minmax(0,1fr)!important;column-gap:8px!important} body:not(.libre) #tab-train .grow:has(#tundo:not([hidden]))>.tgo{grid-column:2/3} body:not(.libre) #tab-train .grow>#tundo{grid-column:1;width:var(--kh);min-width:44px;height:var(--kh);min-height:44px;border-radius:var(--r-l);animation:tgoIn 320ms cubic-bezier(.2,.9,.25,1.35) both} /* adversaire automatique : Coup suivant absent, le carré reste dans le bloc des 4 cases à la place de l'Indice */ body:not(.libre) #tab-train .grow:has(#tundo:not([hidden])):not(:has(#tgo:not([hidden])))>#tundo{width:100%;border-radius:0;box-shadow:none;background:rgba(var(--sel-rgb),.12)} } .tundotip{position:fixed;z-index:300;box-sizing:border-box;max-width:min(260px,calc(100vw - 16px));margin:0;padding:9px 12px;border-radius:var(--r-m); background:var(--sheet);color:var(--mut);box-shadow:inset 0 0 0 1px rgba(var(--sel-rgb),.55),0 8px 24px rgba(0,0,0,.4);font:500 13.5px/1.3 var(--f-ui);pointer-events:none; animation:barIn 200ms ease-out both} .tundotip b{display:block;margin-bottom:2px;color:var(--sel);font-weight:700} .tundotip[hidden]{display:none} .tundotip::after{content:"";position:absolute;left:var(--tipx,19px);bottom:-6px;width:12px;height:12px;margin-left:-6px;background:var(--sheet);box-shadow:inset -1px -1px 0 rgba(var(--sel-rgb),.55);transform:rotate(45deg);border-bottom-right-radius:2px} @media (prefers-reduced-motion:reduce){#tab-train .grow>#tundo,.tundotip{animation:none!important;transition:none}} /* 2.9.55 : carte Continuer autour d'une grande scène (Fifou joue son cavalier). La scène prend la place libre de la carte, qui prend elle-même la place libre de l'accueil : l'accueil tient toujours sur une page. Le rond du défi est un badge dans la scène, le titre (familles d'ouvertures) tient sur deux lignes au plus. Fifou respire (fa-head, liseré compris ; plus de clignement depuis 2.9.90), le cavalier avance un peu, les étincelles scintillent et la lueur de la scène suit la respiration ; immobile si « réduire les animations ». */ #home>.hsc{display:none} .home-mode #home>.hero{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-content:stretch;gap:clamp(6px,1.4dvh,12px);padding:clamp(8px,1.4dvh,14px) clamp(10px,3.5vw,14px) clamp(10px,1.8dvh,16px);overflow:hidden} .hero .hsc{position:relative;display:flex;align-items:flex-end;justify-content:center;flex:1 1 auto;min-height:0;margin:calc(-1*clamp(8px,1.4dvh,14px)) calc(-1*clamp(10px,3.5vw,14px)) 0} .hero .hsc::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 75% at 45% 40%,rgba(var(--sel-rgb),.30),rgba(var(--sel-rgb),.07) 55%,transparent 75%);animation:fj-lueur 3s ease-in-out infinite;pointer-events:none} .hero .hsc svg.fjou{position:relative;display:block;width:100%;height:100%;min-width:0;max-height:100%;overflow:hidden} .hero .hsc .hring{position:absolute;top:clamp(6px,1.2dvh,12px);right:clamp(8px,3vw,14px);border-radius:50%;background:rgba(11,19,40,.72);box-shadow:0 0 0 3px rgba(11,19,40,.35)} .hero .htx{min-width:0} /* 3.0.27 : maquette A, le titre seul en grand (police de titre), centré entre deux filets cuivre */ .hero .htx{text-align:center} .hero .hk{display:flex;align-items:center;gap:clamp(8px,2.6vw,12px);margin:0;font:400 clamp(20px,3.3dvh,27px)/1.1 var(--f-display);color:var(--fg);text-wrap:balance} .hero .hk::before,.hero .hk::after{content:"";flex:1 0 18px;min-width:18px;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--sel-rgb),.7))} .hero .hk::after{background:linear-gradient(270deg,transparent,rgba(var(--sel-rgb),.7))} .fjou .fj-push{animation:fj-pousse 3s ease-in-out infinite} .fjou .fj-tw>*{transform-box:fill-box;transform-origin:50% 50%;animation:fa-tw 2.4s ease-in-out infinite} .fjou .fj-tw>:nth-child(2){animation-delay:-.8s}.fjou .fj-tw>:nth-child(3){animation-delay:-1.6s} @keyframes fj-pousse{0%,60%,100%{transform:none}75%{transform:translateX(3px)}} @keyframes fj-lueur{0%,100%{opacity:.8}50%{opacity:1}} @media (prefers-reduced-motion:reduce){.hero .hsc::before,.fjou .fj-push,.fjou .fj-tw>*{animation:none!important}} .home-mode #home>.hero.hsc-0{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:10px} .hero.hsc-0 .hsc{grid-column:2;grid-row:1;flex:none;margin:0} .hero.hsc-0 .hsc::before,.hero.hsc-0 .hsc svg.fjou{display:none} .hero.hsc-0 .hsc .hring{position:relative;top:auto;right:auto} .hero.hsc-0 .htx{grid-column:1;grid-row:1} .hero.hsc-0 .hgo{grid-column:1/-1} /* 2.9.59 : carte de la série en trois étages réguliers (titre, compteur sur sa ligne, jours), phrase de Fifou sous un filet */ .streak{row-gap:clamp(5px,1.1dvh,9px);column-gap:14px;padding:clamp(8px,1.5dvh,12px) 14px} .streak .sk-top{flex-direction:column;align-items:flex-start;gap:clamp(2px,.5dvh,4px)} .streak .days{gap:4px} .streak .sk-l{white-space:normal} #home .streak .hsay{padding-top:clamp(5px,1dvh,8px);border-top:1px solid var(--line);border-radius:0} /* 2.9.59 : Mon profil sur une seule page, sans défilement ; les deux cartes se partagent la hauteur au-dessus de la barre du bas. La carte Mon Elo a une hauteur fixe : la phrase du niveau et la note de catégorie ont chacune une zone de hauteur fixe (la note reste en place, invisible, quand elle est vide), donc rien ne bouge quand on déplace le curseur. */ html:has(>body.scr-profil),body.scr-profil{overflow:hidden;overscroll-behavior:none;height:100%} body.scr-profil{padding-block:0} .scr-profil main{height:100dvh;display:flex;flex-direction:column;padding-top:max(clamp(6px,1.8dvh,16px),env(safe-area-inset-top,0px));padding-bottom:calc(var(--navh) + clamp(6px,1.6dvh,14px))} body.scr-profil #profil{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;gap:clamp(6px,1.4dvh,12px);width:100%} #profil>.su-h{margin:0;flex:none;font-size:clamp(22px,4dvh,30px)} #profil .tcard{margin:0;min-height:0;display:flex;flex-direction:column;padding-block:clamp(8px,1.6dvh,16px)} #profil #pf-el{flex:1.45 1 0} #profil #pf-dj{flex:1 1 0} #profil .st-h{margin:0 0 clamp(2px,.8dvh,8px);flex:none} #pf-dj .dj,#pf-el .dj{grid-template-columns:clamp(44px,10dvh,76px) 1fr;flex:1 1 auto;align-content:center} #pf-dj .dj-ff,#pf-el .dj-ff{width:clamp(44px,10dvh,76px);height:clamp(52px,12dvh,92px)} #pf-dj .dj-ff svg,#pf-el .dj-ff svg{width:100%;height:100%;min-width:0} #pf-dj .dj-n b,#pf-el .dj-n b{font-size:clamp(30px,6.4dvh,50px)!important} #pf-el .dj-c{font-size:clamp(15px,2.8dvh,20px);white-space:nowrap} #pf-dj .dj-c{min-height:0;font-size:clamp(13px,2.3dvh,17px)} #pf-el>.dj{flex:1 1 0;min-height:min-content} #pf-dj .dj-r,#pf-el .dj-r{flex:none;height:clamp(36px,6.5dvh,48px);margin-top:clamp(2px,.8dvh,8px)} #pf-dj .dj-t,#pf-el .dj-t{flex:none} /* très petite hauteur (texte agrandi) : titres plus petits, repères 400 / 2400+ cachés pour que tout tienne */ @media (max-height:620px){#profil #pf-el{flex-grow:1.85}#profil>.su-h{font-size:20px;line-height:1.1}#pf-dj .dj-r,#pf-el .dj-r{height:32px;margin-top:0}#pf-dj .dj-n b,#pf-el .dj-n b{font-size:28px!important}#profil .st-h{font-size:14px;margin-bottom:0}#pf-el .dj-t{display:none}#pf-dj .dj-c{line-height:1.2}#pf-dj .dj-n span,#pf-el .dj-n span{font-size:14px}} /* 2.9.59 : petite hauteur (texte agrandi) : la carte de la série se resserre pour que les tuiles de l'accueil restent au-dessus de la barre */ @media (max-height:560px){.streak{row-gap:3px;padding-block:6px}.streak .sk-l{white-space:nowrap;letter-spacing:.02em;font-size:10px} #home .streak .hsay{padding-top:3px;font-size:12px;line-height:1.25}#home .streak>.home-fifou{width:40px!important}} /* 2.9.63 : Réglage des lignes — repère « Recommandé » commun (.rb, légende fine dans le bord haut du bouton, sans pastille ni étoile), valeur de la longueur affichée une seule fois (plus de repères 5…Max), Je m'arrête / Je continue sans cadre pointillé (coche si choisi, grisé sinon). Carte Boutique (#go-shop, écran #boutique) à la place de Mon répertoire dans le menu de l'accueil (go-rep caché, gardé pour la barre du bas). */ #train-setup .rb{font:700 9.5px/12px var(--f-ui)!important;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:var(--sel);pointer-events:none} #train-setup .rb[hidden]{display:none} #train-setup .extiles .rb,#train-setup .dp-gs .rb{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);padding:0 6px;background:var(--sheet);z-index:1} #train-setup .extiles button{overflow:visible} #train-setup .lx-v{justify-content:flex-start;gap:10px} #train-setup .lx-v .rb{padding-left:10px;border-left:1px solid var(--line);line-height:14px!important} #train-setup .dpt-d .dp-row{margin-bottom:4px} .dp-gs{margin-top:12px} .dp-go{padding:0;border:0} #train-setup .dp-gs button{position:relative;min-height:60px;transition:background var(--d-2,200ms),color var(--d-2,200ms),opacity var(--d-2,200ms)} #train-setup .dp-gs button[aria-checked="false"]{opacity:.62;background:transparent!important} #train-setup .dp-gs button[aria-checked="true"]{color:var(--cu-ink)!important;box-shadow:0 0 0 1px var(--sel)} .dp-gs .gk{display:inline-grid;place-items:center;width:16px;height:16px;margin:0 6px 0 0;vertical-align:-2px;border-radius:50%;border:1.5px solid currentColor;box-sizing:border-box} .dp-gs button[aria-checked="true"]>.gk{background:var(--cu-ink);border-color:var(--cu-ink)} .dp-gs button[aria-checked="true"]>.gk:after{content:"";width:7px;height:3.5px;border-left:2px solid var(--sel);border-bottom:2px solid var(--sel);transform:rotate(-45deg) translate(1px,-1px)} .i-shop{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 8h14l-1 12H6L5 8z%22/%3E%3Cpath d=%22M9 8V6a3 3 0 0 1 6 0v2%22/%3E%3C/svg%3E")} #home #go-rep{display:none} body.scr-boutique #boutique{display:block} body.scr-boutique #apptitle,body.scr-boutique #home,body.scr-boutique main>.tabs,body.scr-boutique #tab-train{display:none} /* 2.9.75 : couleur de la bulle selon la note du coup du joueur (mêmes couleurs que les pastilles de l'échiquier) : gaffe rouge, erreur orange, imprécision jaune */ body #tab-train .bubble.bad{border-color:#e0474c!important;border-width:2px;background:#2c1d25} body #tab-train .bubble.bad::before{border-right-color:#e0474c} body #tab-train .bubble.mis{border-color:#e07a1f!important;border-width:2px;background:#2c2320} body #tab-train .bubble.imp{border-color:rgba(201,138,0,.75)!important} .bubble.mis .pct-hl{background:color-mix(in srgb,#e07a1f 22%,transparent)} /* 3.1.0 : une seule taille de texte pour toutes les bulles de Fifou (jeu, tuto, accueil, rappels) : 16 px, interligne 1,3 ; la police ne descend plus (ui.js) : un message trop long prend sa version courte. Les pastilles (.rq, .cq) restent à 14 px, sans quoi elles grossiraient la ligne où elles sont ; les boutons de puzzle (.pzq) et les pastilles de fin de ligne (.finch) gardent leur taille. */ :root{--fifou-fs:16px;--fifou-lh:1.3} body #tab-train #bin .tstatus,body #tab-train #bin .tstatus *:not(.finch):not(.finch *):not(.pzq):not(.pzq *):not(.rq):not(.rq *):not(.cq), body #tab-train #bin .tcm,body #tab-train #bin .tcm *,body #tab-train #bin .tfpos,body #tab-train #bin .tfpos *,body #tab-train #bin .topn, body #tuto .bubble .tstatus,body #tuto .bubble .tstatus *:not(button),body #home .hsay,body #home .streak .hsay,body .rap-bub{font-size:var(--fifou-fs)!important;line-height:var(--fifou-lh)!important} body #tab-train #bin .rq,body #tab-train #bin .cq{font-size:14px!important;line-height:1.2!important;padding-top:0;padding-bottom:0} body #tab-train #bin .rq .sm{width:18px;height:18px} body #tab-train #bin .tstatus .finch{margin:0 0 1px} /* ===== 2.9.72 : jeu libre refait (maquettes « réglage A » et « jeu B », choisies par Théo le 18/10/2026) ===== Page de réglage dans l'écran Autres modes (body.md-jlr, modes.js) : pleine hauteur, sans défilement. Page de jeu (body.jl, app.js) : l'écran de S'entraîner, avec le bandeau de l'ordinateur au-dessus de l'échiquier, le tien en dessous, et la barre à 4 cases Autre coup · Retour · Suivant · Abandon. Tout nouveau SVG garde min-width:0 (svg{min-width:3036px} plus haut). */ html:has(>body.md-jlr),body.md-jlr{overflow:hidden;overscroll-behavior:none;height:100%} body.md-jlr{padding-block:0} .md-jlr main{height:var(--apph,100dvh);display:flex;flex-direction:column;padding-top:max(clamp(8px,2dvh,18px),env(safe-area-inset-top,0px));padding-bottom:calc(var(--navh) + clamp(8px,1.8dvh,16px))} body.md-jlr #modes{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;width:100%} .jlr{display:flex;flex-direction:column;justify-content:space-between;flex:1 1 auto;min-height:0;gap:8px} .jlr[hidden]{display:none} .jlr .bishop,.jlr svg{min-width:0} .jlr-top{display:flex;align-items:center;gap:10px} .jlr-top .su-h{margin:0} .jlr-back{flex:none;width:40px;height:40px;border-radius:var(--r-m);border:0;background:var(--tint);color:var(--fg);cursor:pointer;position:relative} .jlr-back::before{content:"";position:absolute;left:16px;top:14px;width:10px;height:10px;border-left:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg)} .jlr-ff{display:flex;align-items:center;gap:10px} .jlr-ff .md-ff{width:50px;height:58px} .jlr-ff .md-ff .bishop{width:42px!important;max-width:42px;height:50px} .jlr-ff .md-bul{padding:9px 12px;font-size:14px;line-height:1.35;min-height:calc(3 * 1.35em + 18px);display:flex;align-items:center} .jlr-c{padding:clamp(10px,1.6dvh,14px) 14px;border-radius:var(--r-l);background:var(--sheet);border:1px solid var(--edge);box-shadow:var(--lift)} .jlr-c h3{margin:0 0 clamp(6px,1.1dvh,10px);font:600 13px/1.2 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--mut)} .jlr-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .jlr-seg button{min-height:clamp(56px,8.5dvh,72px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:4px;border-radius:var(--r-m);border:1px solid var(--line);background:var(--bg);color:var(--fg);font:600 14px/1.1 var(--f-ui);cursor:pointer} .jlr-seg button.on{border-color:var(--sel);background:var(--tint);color:var(--sel)} .jlr-seg img{width:28px;height:28px;display:block} .jlr-2{display:flex}.jlr-2 img+img{margin-left:-8px} .jlr-seg button:focus-visible,.jlr-elo button:focus-visible,.jlr-go:focus-visible,.jlr-back:focus-visible{outline:3px solid var(--blue);outline-offset:2px} #jl-force{transition:opacity .2s} #jl-force.off{opacity:.45} .jlr-elo{display:flex;align-items:baseline;gap:8px;min-height:36px} .jlr-elo b{font:400 32px/1 var(--f-display);color:var(--fg);font-variant-numeric:tabular-nums} .jlr-elo span{font:600 15px/1 var(--f-ui);color:var(--sel)} .jlr-elo button{margin-left:auto;align-self:center;min-height:32px;padding:0 12px;border-radius:var(--r-pill);border:0;background:var(--tint);color:var(--mut);font:600 13px/1 var(--f-ui);cursor:pointer} .jlr-elo button[hidden]{display:none} .jlr-r{-webkit-appearance:none;appearance:none;width:100%;height:44px;margin:4px 0 0;padding:0;background:transparent;touch-action:pan-y;cursor:pointer;--p:35%} .jlr-r::-webkit-slider-runnable-track{height:8px;border-radius:var(--r-xs);background:linear-gradient(90deg,var(--sel) 0 var(--p),var(--line) var(--p) 100%)} .jlr-r::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:30px;height:30px;margin-top:-11px;border-radius:50%;background:var(--sel);border:3px solid var(--fg);box-shadow:0 2px 6px rgba(0,0,0,.45)} .jlr-r::-moz-range-track{height:8px;border-radius:var(--r-xs);background:var(--line)} .jlr-r::-moz-range-progress{height:8px;border-radius:var(--r-xs);background:var(--sel)} .jlr-r::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--sel);border:3px solid var(--fg)} .jlr-r:focus-visible{outline:2px solid var(--sel);outline-offset:2px;border-radius:var(--r-s)} .jlr-sw{display:flex;align-items:center;gap:12px} .jlr-sw>div{flex:1;min-width:0} .jlr-sw b{display:block;font:600 15px/1.25 var(--f-ui)} .jlr-sw span{display:block;margin-top:2px;font:400 13px/1.3 var(--f-ui);color:var(--mut)} .jlr-sw .sw{width:52px;height:32px;min-height:32px;border:0;background:transparent;box-shadow:inset 0 0 0 2px rgba(var(--mut-rgb),.55)} .jlr-sw .sw i{top:4px;left:4px;background:#d9d2c6} .jlr-sw .sw.on{background:var(--sel);box-shadow:none} .jlr-sw .sw.on i{transform:translateX(20px);background:#fbf7f0} .jlr-go{flex:none;display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;border:0;border-radius:var(--r-b);background:linear-gradient(180deg,var(--cu2),var(--sel));color:var(--cu-ink);font:700 17px/1 var(--f-ui);box-shadow:0 4px 0 var(--cu3);cursor:pointer;margin-bottom:4px} .jlr-go:active{transform:translateY(2px);box-shadow:0 2px 0 var(--cu3)} @media (max-height:700px){.jlr-ff .md-ff{width:44px;height:50px}.jlr-ff .md-ff .bishop{width:36px!important;max-width:36px;height:44px}.jlr-sw span{display:none}.jlr-top .su-h{font-size:24px}} /* 3.0.95 : adversaire du jeu libre (Fifou Logique / Fifou Machine), accessoires bulle de pensée et engrenages (svg.fifou-defs-adv) */ .bishop[data-a~="pensee"] .ac-pensee,.bishop[data-a~="engrenages"] .ac-engrenages{display:inline} .jlr-adv{display:grid;grid-template-columns:1fr 1fr;gap:8px} .jlr-adv button{display:flex;align-items:center;gap:6px;min-height:clamp(64px,11dvh,92px);padding:6px 8px 6px 4px;border-radius:var(--r-m);border:1px solid var(--line);background:var(--bg);color:var(--fg);text-align:left;font:600 15px/1.15 var(--f-ui);cursor:pointer} .jlr-adv button.on{border-color:var(--sel);background:var(--tint);color:var(--sel);box-shadow:0 0 0 1px var(--sel) inset} .jlr-adv .bishop{flex:none;width:clamp(42px,7.4dvh,62px)!important;max-width:none;height:clamp(50px,8.9dvh,74px);min-width:0} .jlr-an{display:flex;flex-direction:column;gap:3px;min-width:0} .jlr-an b{font:600 15px/1.15 var(--f-ui)!important} .jlr-an em{font:400 12.5px/1.25 var(--f-ui)!important;font-style:normal;color:var(--mut)} .jlr-adv button.on .jlr-an em{color:var(--fg)} .jlr-c.off .jlr-adv{opacity:.45} .jlr-dit{margin:8px 2px 0;font:400 14px/1.35 var(--f-ui);color:var(--fg)} .jlr-dit[hidden]{display:none} .jlr-c[hidden]{display:none} @media (max-height:700px){.jlr-adv button{min-height:0;padding:4px 6px;flex-direction:column;gap:0;text-align:center}.jlr-adv .bishop{width:44px!important;height:52px}.jlr-an em{display:none} .jlr-seg button{min-height:46px;flex-direction:row;gap:6px}.jlr-seg img{width:22px;height:22px}.jlr{gap:6px} #jl-force .jlr-elo b{font-size:24px}#jl-force{padding-top:8px;padding-bottom:4px}#jl-force .jlr-r{margin-top:2px;margin-bottom:0}#jl-force h3{margin-bottom:2px}} /* 3.0.96 : évaluations au choix en jeu libre (quatre pastilles, même style que les camps) */ .jlr-evs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px} .jlr-evs button{min-height:clamp(40px,6dvh,48px);padding:4px 2px;border-radius:var(--r-m);border:1px solid var(--line);background:var(--bg);color:var(--fg);font:600 13px/1.15 var(--f-ui)!important;cursor:pointer;text-align:center} .jlr-evs button.on{border-color:var(--sel);background:var(--tint);color:var(--sel)} .jlr-evs button:focus-visible{outline:3px solid var(--blue);outline-offset:2px} .jlr-evp{margin:6px 2px 0;font:400 13px/1.3 var(--f-ui);color:var(--mut)} @media (max-height:700px){.jlr-evp{display:none}#jl-evc{padding-top:8px;padding-bottom:8px}#jl-evc h3{margin-bottom:5px}.jlr-evs button{min-height:36px;font-size:12.5px!important} #jl-force .jlr-r{height:30px}.jlr{gap:5px}.jlr-adv .bishop{width:40px!important;height:46px}.jlr-seg button{min-height:42px}} .ovtff .bishop{min-width:0} @media (min-width:821px) and (pointer:fine), (min-width:1367px){.md-jlr main{max-width:640px}} /* page de jeu */ #jlop,#jlme,#jlundo,#jlquit{display:none} body.jl #thead,body.jl #capT,body.jl #capB,body.jl #pnav,body.jl #hintb,body.jl #next,body.jl #tgo,body.jl #skipq,body.jl #tundo,body.jl #tundotip,body.jl #tana,body.jl #endov,body.jl #su-gear,body.jl #rnav,body.jl .tfpos,body.jl #tcm{display:none!important} body.jl #jlop,body.jl #jlme{display:flex} .jlps{align-items:center;gap:8px;height:34px;margin:0 auto 6px;width:max(200px,var(--bw));max-width:560px;min-width:0} .jlps.me{margin:6px auto 0} .jlav{flex:none;width:30px;height:30px;border-radius:var(--r-s);background:var(--tint);display:flex;align-items:center;justify-content:center;overflow:hidden} .jlav img{width:24px;height:24px;display:block} .jlav .bishop{flex:none!important;min-width:0!important;width:24px!important;max-width:24px;height:30px;margin-top:4px} .jlnm{flex:none;white-space:nowrap;font:400 15px/1.1 var(--f-ui)} .jlnm b{font-weight:600} .jlnm small{font:500 13px/1 var(--f-ui);color:var(--mut)} .jltr{flex:none;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(var(--green-rgb),.25);opacity:0;transition:opacity .2s} .jlps.tour .jltr{opacity:1} .jlcap{margin-left:auto;display:flex;align-items:center;gap:4px;min-width:0;overflow:hidden} .jlcap .cg{display:inline-flex;align-items:center;background:var(--sq-l);border-radius:var(--r-s);padding:0 3px;height:20px} .jlcap img{width:18px;height:18px;display:block} .jlcap .cg img+img{margin-left:-10px} .jlcap .cadv{font:600 13px/1 var(--f-ui);color:var(--mut)} @media (max-width:820px), (pointer:coarse) and (max-width:1366px){ body.jl #tab-train .grow>#jlundo{grid-column:1;grid-row:1} body.jl #tab-train .grow>#jlquit{grid-column:4;grid-row:1;box-shadow:inset 1px 0 0 var(--line)} body.jl #tab-train .grow>#jlundo,body.jl #tab-train .grow>#jlquit{ box-sizing:border-box;width:100%!important;min-width:0!important;height:var(--kh)!important;min-height:var(--kh)!important;margin:0;padding:0 4px!important; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; border:0!important;border-radius:0!important;background:transparent;box-shadow:none;color:var(--fg); font:600 12px/1.1 var(--f-ui)!important;letter-spacing:0;text-align:center;white-space:normal;cursor:pointer;transition:transform 120ms,background-color 200ms} body.jl #tab-train .grow>#jlquit{box-shadow:inset 1px 0 0 var(--line);color:var(--mut)} body.jl #tab-train .grow>#jlundo{background:rgba(var(--sel-rgb),.12);color:var(--sel)} body.jl #tab-train .grow>#jlundo:disabled{background:transparent;color:var(--mut);opacity:.45;cursor:default} body.jl #tab-train .grow>#jlquit.fin{background:var(--sel);color:var(--cu-ink)} body.jl #tab-train .grow>#jlundo::before,body.jl #tab-train .grow>#jlquit::before{content:"";display:block;flex:none;width:20px;height:20px;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat} body.jl #tab-train .grow>#jlundo::before{--ico:var(--ico-undo)} body.jl #tab-train .grow>#jlquit::before{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4M5 4h11l-2 4 2 4H5'/%3E%3C/svg%3E")} body.jl #tab-train .grow>#jlquit.fin::before{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.6M20 4v5h-5'/%3E%3C/svg%3E")} body.jl #tab-train .grow>#jlundo:focus-visible,body.jl #tab-train .grow>#jlquit:focus-visible{outline:3px solid var(--blue);outline-offset:-3px} } @media (min-width:821px) and (pointer:fine), (min-width:1367px){body.jl #jlundo,body.jl #jlquit{display:inline-flex;align-items:center;justify-content:center}} /* 2.9.69 : en-tête du mode « Mes erreurs fréquentes » : le titre remplace le rond, le compteur et la roue ; hauteur de l'en-tête inchangée */ #thead .thtitle{display:none;flex:1;min-width:0;margin:0;font:var(--t1);letter-spacing:-.005em;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} body.errmode #thead .thtitle{display:block} body.errmode #thead .thring,body.errmode #thead .tht,body.errmode #thead #su-gear,body.errmode #su-gear{display:none!important} /* Mode Puzzles (app.js, body.puz) : écran de S'entraîner avec sa barre Indice · Retour · Suivant · Passer ; en-tête = titre du puzzle (ouverture concernée) et série sans faute, sans le rond du jour ni la roue des réglages */ body.puz #thead .thtitle{display:block;font-size:17px;line-height:1.15} body.puz #thead .thring,body.puz #thead .tht,body.puz #thead #su-gear,body.puz #su-gear,body.puz #pnav,body.puz #tgo,body.puz #tundo,body.puz #tundotip,body.puz #skipq,body.puz #tana,body.puz .tfpos,body.puz #tcm,body.puz #ovday,body.puz #ovcp,body.puz #jlop,body.puz #jlme,body.puz #jlundo,body.puz #jlquit{display:none!important} #thead .puzserie{display:none} body.puz #thead .puzserie{display:inline-block;flex:none;margin-left:8px;padding:3px 9px;border-radius:var(--r-pill);background:rgba(224,149,90,.16);color:var(--sel);font:700 13px/1.2 var(--f-ui);white-space:nowrap} /* l'ouverture sur sa propre ligne, sous « Puzzle » : un nom long (Gambit dame accepté sur e6) tient en entier en 360 px */ body.puz #thead .thtitle .puzo{display:block;margin-top:1px;font:500 13px/1.2 var(--f-ui);color:var(--mut);overflow:hidden;text-overflow:ellipsis} /* 2.9.77 : erreur de l'adversaire (fil « Bulle orange sur erreur adverse », maquette C choisie par Théo le 18/10/2026) : bulle orange avec un léger halo (rouge pour une gaffe), pastille au contour de la même couleur, Fifou surpris à la loupe avec un « ! » */ body #tab-train .bubble.oe{border-color:#e07a1f!important;border-width:2px;background:#2c2320!important;box-shadow:0 0 0 3px rgba(224,122,31,.22),0 8px 20px rgba(0,0,0,.28)!important} body #tab-train .bubble.oe::before{border-right-color:#e07a1f}body #tab-train .bubble.oe::after{border-right-color:#2c2320} body #tab-train .bubble.og{border-color:#e0474c!important;border-width:2px;background:#2c1d25!important;box-shadow:0 0 0 3px rgba(224,71,76,.22),0 8px 20px rgba(0,0,0,.28)!important} body #tab-train .bubble.og::before{border-right-color:#e0474c}body #tab-train .bubble.og::after{border-right-color:#2c1d25} .cq.oe{background:transparent;border:1.5px solid #e07a1f;color:#ffa24a} .cq.og{background:transparent;border:1.5px solid #e0474c;color:#ff8a8f} .bubble.oe .pct-hl{background:color-mix(in srgb,#e07a1f 22%,transparent)}.bubble.og .pct-hl{background:color-mix(in srgb,#e0474c 22%,transparent)} .bishop[data-a~="exclam"] .ac-exclam{display:inline} .bishop[data-a~="rouge"] .ac-exclam .ex-bg{fill:#ff8a8f} /* 2.9.82 : fenêtre « Contre quel adversaire veux-tu jouer ? » (maquette D, choisie par Théo le 18/10/2026) : deux tuiles côte à côte avec un Fifou chacune (cadre cuivre + repère Recommandé sur l'ordinateur adapté), bande de l’Elo liée à la tuile de gauche (2.9.87 : Elo de l’ordinateur au curseur), Retour en lien discret. */ #tab-train #ovsub{gap:10px} #ovsub svg{min-width:0} #ovsub .ovt{font:600 19px/1.25 var(--f-display);text-align:center;text-wrap:balance} #ovsub .ovtiles{display:grid;grid-template-columns:1fr 1fr;gap:10px} #ovsub .ovtile{position:relative;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:8px;margin:0;min-height:0;padding:14px 10px 12px;border-radius:var(--r-l);background:var(--sheet);border:1px solid var(--line);box-shadow:var(--lift);text-align:center;font:700 15px/1.25 var(--f-ui);color:var(--fg);cursor:pointer} #ovsub .ovtile.cu{border:1.5px solid var(--sel);background:linear-gradient(180deg,rgba(var(--sel-rgb),.12),var(--sheet) 70%)} #ovsub .ovtile:focus-visible,#ovsub .ovback:focus-visible{outline:3px solid var(--blue);outline-offset:2px} #ovsub .ovtile .rb{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);padding:0 6px;background:var(--sheet);font:700 9.5px/12px var(--f-ui)!important;letter-spacing:.08em;text-transform:uppercase;color:var(--sel);white-space:nowrap;pointer-events:none} #ovsub .ovtff{flex:none;display:flex;align-items:center;justify-content:center;width:60px;height:68px;border-radius:var(--r-m);background:var(--tint)} #ovsub .ovtff .bishop{width:50px!important;max-width:50px;height:60px;display:block} #ovsub .ovband{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:var(--r-m);background:var(--tint);border-left:3px solid var(--sel)} #ovsub .ovback{align-self:center;display:flex;background:none;border:0;align-items:center;gap:6px;min-height:40px;padding:0 10px;font:600 14px/1 var(--f-ui);color:var(--mut)!important;text-decoration:none} #ovsub .ovback::before{content:"";width:7px;height:7px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)} /* 2.9.87 : Elo de l'ordinateur réglé au curseur (mêmes nombre, niveau et curseur que Jeu libre : .jlr-elo, .jlr-r) ; bouton « Lancer la partie » dessous */ #ovsub .ovbh{display:flex;align-items:center;gap:8px} #ovsub .ovbh label{font:600 12px/1.2 var(--f-ui)!important;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)} #ovsub .jlr-elo{min-height:30px} #ovsub .jlr-elo b{font-size:30px} #ovsub .jlr-r{height:40px;margin:0} #ovsub #ov-go{min-height:48px;margin:2px 0 0;padding:0 16px;border:0;border-radius:var(--r-b);background:linear-gradient(180deg,var(--cu2),var(--sel));color:var(--cu-ink);box-shadow:0 4px 0 var(--cu3);font:700 16px/1 var(--f-ui)!important} #ovsub #ov-go:active{transform:translateY(2px);box-shadow:0 2px 0 var(--cu3)} /* Tuto, arrêts « Varier l’entraînement » (tuto.js, badges) : « Gratuit » sur Jeu libre, « Expert » et cadenas cuivre sur les autres, le temps de la visite */ .tu-bdg{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:3px 8px;border-radius:var(--r-pill,999px);font:700 12px/1.1 var(--f-ui);vertical-align:2px;white-space:nowrap} .tu-bdg svg{display:block;width:10px;height:12px;min-width:0;flex:none} .tu-bdg-g{background:rgba(var(--green-rgb),.16);color:var(--vert2);border:1px solid rgba(var(--green-rgb),.4)} .tu-bdg-e{background:rgba(var(--sel-rgb),.16);color:var(--cu2);border:1px solid rgba(var(--sel-rgb),.5)} #tu-vn,#tu-vnext{white-space:nowrap} /* ===== 2.9.89 : bulle de Fifou de hauteur fixe, sans défilement (ui.js : police jusqu'à 13 px, puis version courte du texte) ===== */ #tab-train .bin,body #tab-train .bin{overflow:hidden!important} #tab-train .bubble.more .bin{-webkit-mask-image:none!important;mask-image:none!important} @media (max-width:820px), (pointer:coarse) and (max-width:1366px){body #tab-train .bubble{height:var(--bubz)}} #bin .vx{display:none!important} /* « Pourquoi ? » : le détail remplace le texte de la bulle ; « Retour » le referme */ #bin .twhy{white-space:nowrap} /* « Suivant » (3.1.61) : après un coup hors ligne remplacé par celui de la ligne, la suite attend l'appui ; même bouton que « Suite » du tuto */ #bin .tsuiv{position:relative;float:right;margin:-2px 0 0 14px;min-height:26px;height:26px;padding:0 16px;border-radius:var(--r-s);border:0;background:var(--sel);color:var(--cu-ink);font:700 15px/1 var(--f-ui);cursor:pointer} #tab-train .bubble:has(.tsuiv){padding-bottom:3px!important} /* position connue dans la bulle : nom et commentaire sur la même ligne, sans filet (une ligne de gagnée à 360×640) */ #bin .tfpos{margin-top:2px;padding-top:0;border-top:0} #bin .tfpos .tfn,#bin .tfpos .tft{display:inline;margin:0} #bin .tfpos .tfn::after{content:' · '} /* 2.9.95 : « Appuie encore pour quitter » (retour.js), au-dessus de la barre du bas */ .rt-toast{position:fixed;white-space:nowrap;left:50%;bottom:calc(var(--navh) + 16px);z-index:400;transform:translate(-50%,8px);max-width:calc(100% - 32px);padding:10px 18px;border-radius:999px;background:rgba(var(--fg-rgb),.94);color:rgb(var(--bg-rgb));font-weight:600;font-size:15px;line-height:1.3;text-align:center;box-shadow:0 6px 20px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s} .rt-toast.on{opacity:1;transform:translate(-50%,0)} /* ===== 3.0.1 : jeu libre, fenêtre de fin de partie (maquette A, choisie le 19/10/2026) et confirmation d'abandon (app.js, jlFen) ===== Mêmes classes que « Gros calcul en vue » (.lrd), coins carrés ; Fifou dans un médaillon carré cuivre posé sur le haut de la carte. */ .jlf svg{min-width:0} .jlf .lrd-c{max-width:340px;padding:60px 18px 18px;border-radius:0;display:flex;flex-direction:column;gap:10px} .jlf .lrd-ff{top:-50px;width:100px;height:100px;border-radius:0;align-items:flex-end} .jlf .lrd-ff .bishop{width:72px!important;max-width:72px!important;height:auto;margin-bottom:5px;animation:none} .jlf .lrd-c h3{margin:0;font-size:26px;text-wrap:balance} .jlf.win .lrd-c h3{color:var(--cu2)} .jlf.win .lrd-ff{box-shadow:0 0 0 6px rgba(var(--sel-rgb),.18),0 10px 24px rgba(0,0,0,.45)} .jlf .lrd-b{margin-top:4px;gap:10px} .jlf .lrd-b button{border-radius:0;min-height:48px;font:700 16px/1 var(--f-ui)} .jlf .lrd-ok{background:linear-gradient(180deg,var(--cu2),var(--sel));border:0;box-shadow:0 4px 0 var(--cu3)} .jlf .lrd-ok:active{transform:translateY(2px);box-shadow:0 2px 0 var(--cu3)} .jlf .lrd-no,.jlf .jlf-menu{flex:1;background:transparent;border:1px solid var(--line);color:var(--fg);cursor:pointer} .jlf .jlf-menu:focus-visible{outline:3px solid var(--blue);outline-offset:2px} .jlf-s{margin:0;font:500 14px/1.35 var(--f-ui);color:var(--mut)} .jlf-c{margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px} .jlf-c span{padding:3px 8px;border:1px solid var(--line);background:var(--tint);font:600 12px/1.3 var(--f-ui);color:var(--mut)} .jlf-q{margin:0;padding:10px 12px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-left:3px solid var(--sel);font:400 15px/1.4 var(--f-ui);color:var(--fg);text-align:left} .jlq .lrd-c h3{font-size:23px} /* 3.0.3 · Mon objectif du jour : scènes animées de Fifou par palier (objectif-fifous.js). Tout le fou bouge d'un bloc (liseré compris), sans clignement ; « réduire les animations » fige la pose. */ .djs{min-width:0;overflow:visible} .djs .fa-head,.djs :where(path[d^="M100 30 C126 40"][stroke="#f2b27a"],circle[cx="100"][cy="21"][stroke="#f2b27a"]){animation:none!important} .djs [class^="dj-"],.djs [class*=" dj-"]{transform-box:view-box} .djs .dj-f{transform-origin:100px 222px} .dj-a1 .dj-f{animation:dj-breath 5s ease-in-out infinite} @keyframes dj-breath{0%,100%{transform:none}50%{transform:scale(1.025,1.035)}} .dj-a1b .dj-f{animation:dj-sway 6s ease-in-out infinite} @keyframes dj-sway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}} .dj-a2 .dj-f{animation:dj-nod 2s ease-in-out infinite} @keyframes dj-nod{0%,100%{transform:none}50%{transform:translateY(3px) rotate(1.5deg)}} .dj-a3 .dj-f{animation:dj-lean 2s ease-in-out infinite} @keyframes dj-lean{0%,55%,100%{transform:none}25%{transform:translateY(5px) scale(1.02,.97)}} .dj-a3b .dj-f{animation:dj-metro 1.5s ease-in-out infinite} @keyframes dj-metro{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}} .dj-a4 .dj-f{animation:dj-bounce 1s cubic-bezier(.3,0,.4,1) infinite} @keyframes dj-bounce{0%,100%{transform:none}30%{transform:translateY(-8px)}55%{transform:scale(1.03,.96)}} .dj-a4b .dj-f{animation:dj-hop .8s cubic-bezier(.3,0,.4,1) infinite} @keyframes dj-hop{0%,100%{transform:scale(1.04,.95)}45%{transform:translateY(-16px) scale(.98,1.03)}} .dj-a5 .dj-f{animation:dj-dodge 1.2s ease-in-out infinite} @keyframes dj-dodge{0%,100%{transform:translateX(-8px) rotate(-4deg)}50%{transform:translateX(8px) rotate(4deg)}} .dj-a5b .dj-f{animation:dj-loom 1.6s ease-in-out infinite} @keyframes dj-loom{0%,100%{transform:none}50%{transform:translateX(6px) rotate(5deg) scale(1.03)}} .djs .dj-trem{transform-origin:184px 246px;animation:dj-trem .25s linear infinite} @keyframes dj-trem{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}} .dj-a6 .dj-f,.dj-a6b .dj-f{animation:dj-float 2.2s ease-in-out infinite} @keyframes dj-float{0%,100%{transform:translateY(-8px)}50%{transform:translateY(-20px)}} .djs .dj-steam{animation:dj-steam 4s ease-in-out infinite}.djs .dj-steam.d2{animation-delay:-2s} @keyframes dj-steam{0%{transform:translateY(6px);opacity:0}40%{opacity:1}100%{transform:translateY(-12px);opacity:0}} .djs .dj-note{animation:dj-note 4s ease-in-out infinite} @keyframes dj-note{0%{transform:translate(0,10px) rotate(-8deg);opacity:0}30%,70%{opacity:1}100%{transform:translate(8px,-14px) rotate(8deg);opacity:0}} .djs .dj-snail{animation:dj-snail 8s ease-in-out infinite alternate} @keyframes dj-snail{from{transform:translateX(6px)}to{transform:translateX(-14px)}} .djs .dj-step{animation:dj-step 6s infinite} @keyframes dj-step{0%,28%{transform:none}33%,61%{transform:translateX(40px)}66%,92%{transform:translateX(80px)}96%{transform:translateX(80px);opacity:0}97%{transform:none;opacity:0}100%{opacity:1}} .djs .dj-push{animation:dj-push 4s infinite} @keyframes dj-push{0%,20%{transform:none}35%,85%{transform:translate(12px,-14px) scale(.92)}95%,100%{transform:none}} .djs .dj-hand{transform-origin:166px 104px;animation:dj-spin 3s steps(12) infinite} @keyframes dj-spin{to{transform:rotate(360deg)}} .djs .dj-btnL{animation:dj-pressL 1s infinite}.djs .dj-btnR{animation:dj-pressL 1s infinite -.5s} @keyframes dj-pressL{0%,40%{transform:none}50%,90%{transform:translateY(5px)}} .djs .dj-handL{transform-origin:157px 201px;animation:dj-spin 4s linear infinite}.djs .dj-handR{transform-origin:180px 201px;animation:dj-spin 5s linear infinite} .djs .dj-drop{animation:dj-drop 1.6s ease-in infinite}.djs .dj-drop.d2{animation-delay:-.8s} @keyframes dj-drop{0%{transform:translateY(-4px);opacity:0}20%{opacity:1}100%{transform:translateY(18px);opacity:0}} .djs .dj-gl{transform-origin:80px 178px;animation:dj-jab .6s ease-in-out infinite} .djs .dj-gr{transform-origin:120px 178px;animation:dj-jab .6s ease-in-out infinite -.3s} @keyframes dj-jab{0%,100%{transform:none}50%{transform:translateY(-10px) scale(1.08)}} .djs .dj-sl{animation:dj-sl .6s ease-in-out infinite} @keyframes dj-sl{0%,100%{opacity:.2}50%{opacity:1}} .djs .dj-shadow{transform-origin:100px 240px;animation:dj-grow 2s ease-in-out infinite} @keyframes dj-grow{0%,100%{transform:scale(.94);opacity:.75}50%{transform:scale(1.06);opacity:1}} .djs .dj-eyes{animation:dj-glare 2s ease-in-out infinite} @keyframes dj-glare{0%,100%{opacity:.6}50%{opacity:1}} .djs .dj-fl{transform-origin:100px 130px;animation:dj-flick .5s ease-in-out infinite alternate} .djs .dj-fl.f2{animation-delay:-.2s}.djs .dj-fl.f3{animation-delay:-.35s;animation-duration:.6s}.djs .dj-fl.f4{animation-delay:-.1s}.djs .dj-fl.f5{animation-delay:-.4s} @keyframes dj-flick{from{transform:scale(.94,.9)}to{transform:scale(1.04,1.08)}} .djs .dj-tw{transform-box:fill-box;transform-origin:50% 50%;animation:dj-tw 1.2s ease-in-out infinite}.djs .dj-tw.t1{animation-delay:-.4s}.djs .dj-tw.t2{animation-delay:-.8s} @keyframes dj-tw{0%,100%{transform:scale(.4);opacity:.3}50%{transform:scale(1);opacity:1}} .djs .dj-rays{transform-origin:100px 104px;animation:dj-spin 14s linear infinite} .djs .dj-bolt{animation:dj-bolt 1.4s infinite}.djs .dj-bolt.b2{animation-delay:-.5s}.djs .dj-bolt.b3{animation-delay:-.9s} @keyframes dj-bolt{0%,30%,100%{opacity:0}34%,44%{opacity:1}38%{opacity:.4}} @media (prefers-reduced-motion:reduce){.djs *{animation:none!important}.djs .dj-bolt{opacity:1}} /* le fou dans la scène garde la taille de son repère (les règles svg des cases de Fifou ne doivent pas le toucher) */ .djs .bishop,#tuto .tu-pq .tu-ffs .djs .bishop,#tuto .tu-ffs .djs .bishop{width:200px!important;height:240px!important;min-width:0!important;max-width:none!important;display:inline!important} .tu-ffs .djs{display:block;width:76px;height:92px} #tuto .tu-pq .tu-ffs .djs{width:108px;height:130px} @media (max-height:700px){#tuto .tu-pq .tu-ffs .djs{width:80px;height:96px}} /* 3.0.5 : fin de puzzle sous l'échiquier (app.js, puzBilan) : résultat en titre dans la bulle, Indice devient Rejouer, Puzzle suivant en orange */ #tstatus .puzres{display:block;font:400 17px/1.2 var(--f-display);color:var(--vert2)} #tstatus .puzres.rate{color:var(--cu2)} #hintb.rej::before{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E")!important} body.puz #tab-train .grow>#next.fin{background:var(--sel)!important;color:var(--cu-ink)!important} /* 3.0.6 : bilan de fin de ligne dans la bulle de Fifou (app.js, finBulle), comme la fin de puzzle : titre, pastilles, objectif du jour ; Indice devient Rejouer (#hintb.rej, bloc 3.0.5) et Ligne suivante passe en orange */ #tstatus .finch{display:flex;gap:6px;margin:4px 0 3px} #tstatus .finch>span{flex:1 1 auto;display:flex;align-items:baseline;justify-content:center;gap:4px;padding:2px 6px;border-radius:999px;background:rgba(var(--fg-rgb),.07);white-space:nowrap;font:600 11px/1.15 var(--f-ui);color:var(--mut)} #tstatus .finch b{font:700 15px/1.1 var(--f-ui);color:var(--fg)} #tstatus .finch .v b{color:var(--vert2)} body:not(.puz) #tab-train .grow>#next.fin{background:var(--sel)!important;color:var(--cu-ink)!important} /* 3.0.7 : Fifou Expert (expert.js) : page de l'option, cadenas des modes, aperçu, limite du jour, pauses entre deux lignes, objectif plafonné à 20 */ .xp-ff{display:block;line-height:0} .xp-ff .bishop{display:block;width:100%!important;max-width:none;height:auto!important;min-width:0} .xp-lock{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:var(--r-pill);font:700 12px/1.1 var(--f-ui);background:rgba(var(--sel-rgb),.16);color:var(--cu2);border:1px solid rgba(var(--sel-rgb),.5);white-space:nowrap} .xp-lock svg,.md-lk svg{display:block;width:10px;height:12px;min-width:0;flex:none} .xp-top{display:flex;gap:12px;align-items:center;margin:0 0 10px} .xp-top .xp-ff{width:64px;flex:none} .xp-top .su-h{margin:0}.xp-top p{margin:2px 0 0;color:var(--mut);font-size:14px;line-height:19px} /* 3.0.13 : page Fifou Expert en tableau Gratuit / Expert (maquette C de Théo), « Publicités » mise en avant */ .xp-t{margin:12px 0 0;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line);background:var(--sheet)} .xp-r{display:grid;grid-template-columns:1fr 72px 86px;align-items:stretch;min-height:38px;font-size:14px;line-height:17px} .xp-r>span{display:flex;align-items:center;padding:6px 8px} .xp-r>span+span{justify-content:center;text-align:center} .xp-r>span:last-child{background:rgba(var(--sel-rgb),.09)} .xp-r+.xp-r{border-top:1px solid var(--line)} .xp-rh{min-height:30px;font:700 12.5px/1.2 var(--f-ui);color:var(--mut);background:#1b2843} .xp-rh>span:last-child{color:var(--cu-ink);background:linear-gradient(180deg,var(--cu2),var(--sel))} .xp-star{min-height:54px;background:linear-gradient(90deg,rgba(var(--sel-rgb),.2),rgba(var(--sel-rgb),.05))} .xp-star>span:first-child{font:400 18px/1.15 var(--f-display);color:#ffe0c2} .xp-star>span:last-child{font:800 13px var(--f-ui);color:var(--cu2)} .xp-no{color:var(--gris)}.xp-ok{color:var(--vert2);font-weight:800} .xp-star .xp-ok{color:var(--cu2)} @media (min-height:760px){.xp-r{min-height:46px;font-size:15px}.xp-star{min-height:62px}.xp-top .xp-ff{width:72px}} /* 3.0.94 (Théo, 23/10) : le bouton suit le tableau dans la page (n'est plus collé en bas), il ne le chevauche plus */ .xp-bot{margin:16px 0 0} .xp-buy{display:block;width:100%;min-height:52px;border-radius:var(--r-b);border:0;background:var(--sel);color:var(--cu-ink);font:700 17px/1.2 var(--f-ui);box-shadow:0 6px 18px rgba(0,0,0,.4);cursor:pointer;padding:8px 12px} .xp-buy small{display:block;font:500 12.5px var(--f-ui);opacity:.8} .xp-rest{display:block;margin:6px auto 0;background:none;border:0;color:var(--cu2);font:600 14px var(--f-ui);text-decoration:underline;text-underline-offset:3px;padding:6px;cursor:pointer} .xp-msg{margin:6px 0 0;text-align:center;font-size:13px;line-height:17px;color:var(--fg)} .xp-msg:empty{display:none} .xp-msg:not(:empty)~.xp-leg{display:none} .xp-leg{margin:0;text-align:center;font-size:11.5px;line-height:15px;color:var(--gris)} @media (max-height:700px){.xp-r{min-height:33px}.xp-star{min-height:46px}.xp-top .xp-ff{width:52px}.xp-top .su-h{font:var(--t2);font-size:22px}} /* 3.0.98 (Théo, 23/10) : page Fifou Expert sur un seul écran, barre du bas comprise : tailles selon la hauteur (dvh), Fifou et titre plus petits, lignes du tableau resserrées, « Restaurer mes achats » à la suite de la mention légale */ .xp-top{gap:10px;margin:0} .xp-top .xp-ff{width:clamp(44px,7.6dvh,64px)} .xp-top .su-h{font:var(--t2);font-size:clamp(22px,3.4dvh,28px);line-height:1.1} .xp-top p{margin:2px 0 0;font-size:14px;line-height:18px} .xp-t{margin-top:clamp(8px,1.6dvh,14px)} .xp-r{min-height:clamp(30px,5.2dvh,44px);line-height:17px} .xp-r>span{padding:3px 8px} .xp-rh{min-height:clamp(26px,4dvh,34px)} .xp-star{min-height:clamp(38px,6.4dvh,56px)} .xp-bot{margin-top:clamp(10px,2dvh,16px)} .xp-buy{min-height:clamp(48px,7dvh,56px);padding:6px 12px} .xp-pied{margin:clamp(6px,1.4dvh,12px) 0 0;text-align:center;font-size:12.5px;line-height:17px;color:var(--gris)} .xp-pied .xp-msg{margin:0 0 4px} .xp-pied .xp-leg{display:inline;font-size:12.5px;line-height:17px} .xp-pied .xp-rest{display:inline;margin:-8px 0;padding:10px 2px;font:600 13.5px/17px var(--f-ui)} /* 3.1.102 (Théo, 24/10) : page Fifou Expert : marges de côté (12 px de main + 6 px = 18 px, en-tête, tableau et bouton alignés) ; la page prend toute la hauteur au-dessus de la barre du bas : l'en-tête, les lignes du tableau et le bouton grandissent avec la hauteur, toujours sans défilement */ body.scr-boutique{padding-block:0} .scr-boutique main{min-height:var(--apph,100dvh);box-sizing:border-box;display:flex;flex-direction:column;padding-top:max(clamp(12px,2.6dvh,26px),env(safe-area-inset-top,0px));padding-bottom:calc(var(--navh) + clamp(8px,2dvh,18px))} body.scr-boutique #boutique{flex:1 1 auto;display:flex;flex-direction:column;padding-inline:6px} .scr-boutique .xp-page{flex:1 1 auto;display:flex;flex-direction:column} .scr-boutique .xp-top{gap:12px} .scr-boutique .xp-top .xp-ff{width:clamp(48px,9.4dvh,84px)} .scr-boutique .xp-top .su-h{font-size:clamp(24px,4.2dvh,34px)} .scr-boutique .xp-top p{font-size:clamp(14px,2.1dvh,16px);line-height:1.3} .scr-boutique .xp-t{flex:none;margin-top:clamp(10px,2.4dvh,22px)} .scr-boutique .xp-r{min-height:clamp(34px,7dvh,60px);font-size:clamp(14px,2.1dvh,16px);line-height:1.2} .scr-boutique .xp-rh{min-height:clamp(26px,4.6dvh,40px);font-size:clamp(12.5px,1.9dvh,15px)} .scr-boutique .xp-star{min-height:clamp(44px,8.4dvh,72px)} /* la place qui reste (abonné sans bouton, grands écrans) se partage au-dessus et au-dessous du tableau (::before et ::after placés par order) */ .scr-boutique .xp-page::before,.scr-boutique .xp-page::after{content:"";flex:1 1 0} .scr-boutique .xp-top{order:0}.scr-boutique .xp-page::before{order:1}.scr-boutique .xp-t{order:2}.scr-boutique .xp-page::after{order:3}.scr-boutique .xp-bot{order:4}.scr-boutique .xp-pied{order:5} .scr-boutique .xp-star>span:first-child{font-size:clamp(18px,2.7dvh,22px)} .scr-boutique .xp-star>span:last-child{font-size:clamp(13px,2dvh,16px)} .scr-boutique .xp-bot{margin-top:clamp(12px,2.6dvh,24px)} .scr-boutique .xp-buy{min-height:clamp(52px,8.4dvh,70px);font-size:clamp(17px,2.4dvh,19px)} .scr-boutique .xp-buy small{font-size:clamp(12.5px,1.8dvh,14px)} .scr-boutique .xp-pied{margin-top:clamp(8px,1.8dvh,16px)} /* écran étroit : colonnes Gratuit / Expert plus serrées pour que les intitulés tiennent sur une ligne malgré les marges */ @media (max-width:380px){.scr-boutique .xp-r{grid-template-columns:1fr 58px 76px}.scr-boutique .xp-r>span{padding-inline:6px}} /* petite hauteur (barre d'adresse, texte agrandi) : en-tête et écarts resserrés */ @media (max-height:600px){.scr-boutique .xp-top .xp-ff{width:44px}.scr-boutique .xp-top .su-h{font-size:22px}.scr-boutique .xp-t{margin-top:8px}.scr-boutique .xp-bot{margin-top:10px}.scr-boutique .xp-buy{min-height:48px}.scr-boutique .xp-pied{margin-top:6px}.scr-boutique .xp-r{min-height:32px}.scr-boutique .xp-rh{min-height:26px}.scr-boutique .xp-star{min-height:40px}} .md-lk{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(var(--sel-rgb),.16);border:1px solid rgba(var(--sel-rgb),.5);color:var(--cu2)} .md-lk svg{width:11px;height:13px} body.xp-on .md-lk,body.tu-visit .md-lk{display:none} body:not(.xp-on) .md-card:has(.md-lk) .md-chev{display:none} .xp-ov{position:fixed;inset:0;z-index:700} .xp-dim{position:absolute;inset:0;background:rgba(5,9,18,.62)} .xp-sh{position:absolute;left:0;right:0;bottom:0;max-width:560px;margin:0 auto;background:var(--sheet);border-radius:var(--r-xxl) var(--r-xxl) 0 0;border-top:1px solid var(--edge);padding:10px 16px calc(14px + env(safe-area-inset-bottom));box-shadow:0 -10px 30px rgba(0,0,0,.45)} .xp-sh:before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 10px} .xp-sh-h{display:flex;align-items:center;gap:8px;margin:0 0 8px}.xp-sh-h h3{font:var(--t2);margin:0} .xp-pv{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;margin:0 0 12px} .xp-pv ul{margin:0;padding:0 0 0 16px;font-size:14px;line-height:19px;display:grid;gap:4px} .xp-bd{width:136px;aspect-ratio:1;display:grid;grid-template-columns:repeat(8,1fr);border-radius:var(--r-s);overflow:hidden;position:relative} .xp-bd span{position:relative}.xp-bd span.xp-hl{box-shadow:inset 0 0 0 2px var(--hint)} .xp-bd img{position:absolute;inset:0;width:100%;height:100%} .xp-bd em{position:absolute;right:4px;bottom:4px;font:700 10px var(--f-ui);font-style:normal;background:rgba(var(--bg-rgb),.8);color:var(--fg);padding:2px 6px;border-radius:var(--r-pill)} .xp-card{display:grid;place-items:center;padding:16px;background:rgba(5,9,18,.72)} .xp-c{width:100%;max-width:380px;background:var(--sheet);border:1px solid var(--edge);border-radius:var(--r-xxl);padding:16px;text-align:center;box-shadow:0 18px 40px rgba(0,0,0,.5)} .xp-c .xp-ff{width:92px;margin:0 auto 6px} .xp-c h3{font:var(--t2);margin:0 0 6px}.xp-c p{margin:0 0 12px;font-size:15px;line-height:21px} .xp-pts{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin:0 0 14px} .xp-pts span{font:600 12.5px var(--f-ui);padding:4px 9px;border-radius:var(--r-pill);background:var(--tint);color:var(--fg)} .xp-sec{display:block;width:100%;margin-top:8px;min-height:44px;border-radius:var(--r-b);background:transparent;border:1px solid var(--line);color:var(--fg);font:600 15px var(--f-ui);cursor:pointer} /* 3.0.15 · pause sans pub : Fifou et sa bulle qui présente Fifou Expert, bouton d'achat dans la bulle (pas de nouvel SVG : copie de #bishop) */ .xp-bl{width:100%;max-width:380px;display:flex;flex-direction:column;align-items:stretch} .xp-bl>.xp-ff{width:88px;margin:0 0 0 10px} .xp-bb{position:relative;margin-top:10px;background:var(--sheet);border:1.5px solid var(--sel);border-radius:var(--r-xxl);padding:14px 14px 10px;text-align:center;box-shadow:0 18px 40px rgba(0,0,0,.5)} .xp-bb::before{content:"";position:absolute;top:-9px;left:44px;width:16px;height:16px;background:var(--sheet);border-left:1.5px solid var(--sel);border-top:1.5px solid var(--sel);transform:rotate(45deg)} .xp-bb h3{font:var(--t2);margin:0 0 6px}.xp-bb p{margin:0 0 10px;font-size:15px;line-height:21px}.xp-bb p b{color:var(--cu2)} .xp-bb .xp-pts{margin-bottom:12px} .xp-bb .xp-msg{margin:6px 0 0;font-size:12.5px;line-height:16px;color:var(--mut)}.xp-bb .xp-msg:empty{display:none} .xp-lnk{display:block;width:100%;min-height:44px;margin-top:2px;border:0;background:none;color:var(--sel);font:600 14px var(--f-ui);cursor:pointer} .xp-bl>.xp-sec{margin-top:10px;background:var(--bg)} /* 3.0.93 : page « Noter l'appli » (note.js) : Fifou et son étoile cuivrée, lien « Plus tard » discret */ .nt-sc{position:relative;width:112px;margin:0 0 0 6px;line-height:0} .nt-sc .xp-ff{width:100%} .nt-st{position:absolute;inset:0;width:100%;height:100%;min-width:0;overflow:visible;pointer-events:none} .nt-big{transform-box:fill-box;transform-origin:50% 60%;animation:nt-sway 3.2s ease-in-out infinite} .nt-halo{animation:nt-glow 3.2s ease-in-out infinite} .nt-tw{animation:nt-tw 2.6s ease-in-out infinite} @keyframes nt-sway{0%,100%{transform:rotate(-7deg) translateY(0)}50%{transform:rotate(6deg) translateY(-4px)}} @keyframes nt-glow{0%,100%{opacity:.5}50%{opacity:1}} @keyframes nt-tw{0%,100%{transform:scale(.55);opacity:.35}50%{transform:scale(1.1);opacity:1}} @media (prefers-reduced-motion:reduce){.nt-big,.nt-halo,.nt-tw{animation:none}} .nt-go{display:flex;align-items:center;justify-content:center;gap:8px} .nt-go svg{width:20px;height:20px;min-width:0;flex:none} .nt-lt{display:block;margin:10px auto 0;background:var(--bg);border-radius:999px;border:0;color:var(--mut);font:600 14px var(--f-ui);text-decoration:underline;text-underline-offset:3px;padding:8px 16px;min-height:40px} @media (max-height:660px){.nt-sc{width:88px}} @media (max-height:660px){.xp-bl>.xp-ff{width:68px}.xp-bb{padding:10px 12px 6px}.xp-bb p{font-size:14px;line-height:19px;margin-bottom:8px}} .xp-goal{display:flex;align-items:center;gap:8px;width:100%;margin:2px 0 0;padding:0;background:none;border:0;text-align:left;font:400 13.5px/18px var(--f-ui);color:var(--mut);cursor:pointer} .xp-goal b{color:var(--cu2);font-weight:600}.xp-goal-t{cursor:default} .xp-goal[hidden]{display:none} .xp-bump{animation:xp-bump .45s} @keyframes xp-bump{30%{transform:translateX(4px)}60%{transform:translateX(-3px)}} @media (prefers-reduced-motion:reduce){.xp-bump{animation:none}} /* curseur de l'objectif : zone hachurée au-delà de la limite gratuite (--xl posé par gdaExpert.curseur ; 3.0.48 : 10 depuis 3.0.34, avant 20 = 33,3 %) */ .dj-r.xp-cap::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--sel) 0 var(--p),var(--line) var(--p) var(--xl,33.3%),transparent var(--xl,33.3%)),repeating-linear-gradient(135deg,rgba(var(--sel-rgb),.45) 0 4px,var(--line) 4px 8px)!important} .dj-r.xp-cap::-moz-range-track{background:linear-gradient(90deg,var(--line) 0 var(--xl,33.3%),transparent var(--xl,33.3%)),repeating-linear-gradient(135deg,rgba(var(--sel-rgb),.45) 0 4px,var(--line) 4px 8px)} /* 3.0.13 : objectif du jour sans Fifou Expert (maquette 2A) : zone 21-50 réservée, curseur gris à cadenas en glissant, message de Fifou au lâcher (expert.js, gdaExpert.curseur) */ .xp-zl{display:flex;margin:6px 0 -19px;pointer-events:none;position:relative;z-index:1} .xp-zl[hidden]{display:none} .xp-zl span{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;font:700 11px/13px var(--f-ui);color:var(--cu2);white-space:nowrap} .xp-zl svg{width:9px;height:11px;min-width:0;display:block} #pf-dj .dj-r.xp-in::-webkit-slider-thumb,#tu-dj .dj-r.xp-in::-webkit-slider-thumb{background:#6b7590 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M3 6V4.2a3 3 0 0 1 6 0V6' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3Crect x='1' y='6' width='10' height='7.5' rx='1.8' fill='%23fff'/%3E%3C/svg%3E") center/11px 13px no-repeat;border-color:#c9cfdb} #pf-dj .dj-r.xp-in::-moz-range-thumb,#tu-dj .dj-r.xp-in::-moz-range-thumb{background:#6b7590;border-color:#c9cfdb} .xp-gris{opacity:.45;transition:opacity var(--d-2,200ms)} /* 3.0.15 : Fifou du palier réservé visible mais grisé (ses animations continuent) */ .dj-ff.xp-gris{opacity:.7;filter:grayscale(1) brightness(.85);transition:opacity var(--d-2,200ms),filter var(--d-2,200ms)} .xp-goal.xp-ffm{gap:8px;margin-top:4px;padding:4px 8px;border-radius:var(--r-m);background:linear-gradient(180deg,rgba(var(--sel-rgb),.16),rgba(var(--sel-rgb),.06));border:1px solid rgba(var(--sel-rgb),.55);color:var(--fg);font-size:12.5px;line-height:16px;animation:xp-ffm .35s ease-out} .xp-goal.xp-ffm .xp-ff{width:34px;flex:none;display:block;line-height:0} .xp-goal.xp-ffm .xp-ff .bishop{display:block;width:100%!important;max-width:none;height:auto!important;min-width:0} .xp-goal.xp-ffm b{color:var(--cu2)}.xp-goal.xp-ffm .xp-go{white-space:nowrap;font-weight:700} @keyframes xp-ffm{from{opacity:0;transform:translateY(4px)}} @media (prefers-reduced-motion:reduce){.xp-goal.xp-ffm{animation:none}} #tu-dj .xp-goal.xp-ffm{margin-top:0;padding:2px 6px;font-size:12px;line-height:15px}#tu-dj .xp-goal.xp-ffm .xp-ff{width:26px} #tu-dj .xp-goal.xp-ffm .xp-ff .bishop,#tuto #tu-dj .xp-ffm .bishop{width:100%!important;height:auto!important;max-width:none!important;min-width:0!important} /* 3.0.24 : longueur des lignes jusqu'au coup 15 — échelle de chiffres sous le curseur (#tdsc, un par cran, alignés sur le centre du bouton de 32 px), le 10 en cuivre avec « ★ Recommandé » dessous, le cran choisi en blanc ; plus de « Coup N » au-dessus du curseur */ #train-setup .dpt-d .sx{margin-bottom:6px} #train-setup .dpt-d .dp-row{margin-bottom:0} .dp-sc{position:relative;height:40px;margin:-2px 0 0} #train-setup .dp-sc span{position:absolute;top:0;left:calc(16px + (100% - 32px) * var(--i) / 10);transform:translateX(-50%);font:600 15px/1 var(--f-ui)!important;color:var(--mut);font-variant-numeric:tabular-nums;transition:color var(--d-2,200ms)} #train-setup .dp-sc span.r{color:var(--sel);font-weight:800!important} #train-setup .dp-sc span.r::after{content:"★ " attr(data-r);position:absolute;left:50%;top:20px;transform:translateX(-50%);white-space:nowrap;font:700 10px/1 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--sel)} #train-setup .dp-sc span.on{color:var(--fg);font-weight:800!important} #train-setup .dp-sc span.r.on{color:var(--sel)} /* 3.0.35 : Fifous de la Série de la semaine (calendrier) et de la tuile Mon profil (carte d’échecs), fifous-accueil.js ; généré par fifous-serie-profil/generateur/gen_app.py */ .fss{min-width:0;overflow:visible} .fss .bishop *,.fss .bishop{animation:none!important} .fss [class^="fs-"],.fss [class*=" fs-"]{transform-box:view-box} .fss .fs-f{transform-origin:100px 222px} .fs-a1 .fs-f{animation:fs-nod 3s ease-in-out infinite} @keyframes fs-nod{0%,60%,100%{transform:none}70%{transform:translateY(3px) rotate(1.5deg)}82%{transform:translateY(-2px)}} .fss .fs-tick{transform-origin:178px 112px;animation:fs-tick 3s cubic-bezier(.3,1.4,.5,1) infinite} @keyframes fs-tick{0%,55%{transform:scale(0);opacity:0}68%{transform:scale(1.2);opacity:1}76%,92%{transform:none;opacity:1}100%{transform:none;opacity:0}} .fs-a2 .fs-f{animation:fs-sway 4s ease-in-out infinite} @keyframes fs-sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}} .fss .fs-fl{transform-origin:160px 86px;animation:fs-flick .6s ease-in-out infinite alternate} @keyframes fs-flick{from{transform:scale(.94,.9)}to{transform:scale(1.04,1.08)}} .fss .fs-sp{transform-box:fill-box;transform-origin:50% 50%;animation:fs-tw 1.6s ease-in-out infinite}.fss .fs-sp.s2{animation-delay:-.5s}.fss .fs-sp.s3{animation-delay:-1s} @keyframes fs-tw{0%,100%{transform:scale(.4);opacity:.3}50%{transform:scale(1);opacity:1}} .fs-a3 .fs-f{animation:fs-proud 3.2s ease-in-out infinite} @keyframes fs-proud{0%,100%{transform:none}50%{transform:scale(1.03,1.04)}} .fss .fs-shine{animation:fs-shine 3.2s ease-in-out infinite} @keyframes fs-shine{0%,40%,100%{opacity:0;transform:translateX(-36px)}55%{opacity:1}70%{opacity:0;transform:translateX(10px)}} .fs-a4 .fs-f{animation:fs-lean 3s ease-in-out infinite} @keyframes fs-lean{0%,100%{transform:none}50%{transform:rotate(3deg) translateX(3px)}} .fss .fs-glint{animation:fs-glint 3s ease-in-out infinite} @keyframes fs-glint{0%,40%,100%{opacity:.2}55%{opacity:1}} .fss .fs-pip.on{fill:#e0955a} @media (prefers-reduced-motion:reduce){.fss *{animation:none!important}} /* la case du jour ne se coche que si l'objectif du jour est atteint (ui.js : fs-fait) */ .fss:not(.fs-fait) .fs-tick{display:none} /* le fou dans la scène garde la taille de son repère (les règles .bishop de l'accueil ne doivent pas le toucher) */ .fss .bishop,.hff .fss .bishop,#home .fss .bishop{width:200px!important;height:240px!important;min-width:0!important;max-width:none!important;flex:none!important;display:inline!important;overflow:visible!important;border-radius:0!important} .hff .fss{display:block;width:100%;height:100%;min-width:0;overflow:visible} /* 3.0.36 : « Elo Chess.com » en petit gris à droite de chaque choix d'Elo (Mon profil, tuto, adversaire, jeu libre) ; ne change aucune hauteur */ .elo-ref{float:right;margin-left:auto;padding-left:8px;font-family:var(--f-ui);font-size:11px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--gris);white-space:nowrap} .tu-num{position:relative} .tu-num .elo-ref{position:absolute;top:100%;right:0;margin-top:4px;padding:0} /* 3.0.37 · Mon répertoire en grille (choix de Théo, 22/10) : cartes de 3 par ligne sous chaque titre de groupe ; le panneau des variantes d'une carte prend toute la largeur juste sous sa ligne (grid-auto-flow dense : les cartes suivantes de la ligne restent au-dessus). .pf-ouv et .rp-fam en display:contents : leur carte et leur panneau sont des cases de la grille. Nouveaux SVG : min-width:0. */ #pf-rep .rp-gg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row dense;gap:14px 8px;margin:6px 0 10px} #pf-rep .rp-gg[hidden],#pf-rep .rp-gr[hidden],#pf-rep .rp-pan[hidden]{display:none!important} #pf-rep .rp-gg>.pf-ouv,#pf-rep .rp-gg>.rp-fam{display:contents} #pf-rep .rp-card{display:flex;flex-direction:column;gap:3px;min-width:0;padding:0;border:0} #pf-rep .rp-card>.rp-mini{width:100%;height:auto;max-width:none;aspect-ratio:1;margin:0 0 3px;border-radius:var(--r-s);box-shadow:0 1px 4px rgba(0,0,0,.4);cursor:pointer} #pf-rep .rp-card>.rp-mini svg{display:block;width:100%;height:100%;min-width:0} #pf-rep .rp-card>.rp-vide{background:var(--tint);box-shadow:none;cursor:default} #pf-rep .pf-ouv:has(>.rp-card .pf-oh.on)>.rp-card>.rp-mini,#pf-rep .rp-fam:has(>.rp-card .pf-oh.on)>.rp-card>.rp-mini{outline:3px solid var(--sel);outline-offset:-3px} #pf-rep .rp-open>.rp-card>.rp-mini{box-shadow:0 0 0 2px var(--cu2),0 1px 4px rgba(0,0,0,.4)} #pf-rep .rp-cn{display:flex;align-items:flex-start;gap:6px;width:100%;min-height:0;padding:0;border:0;background:none;color:var(--fg);text-align:left} #pf-rep .rp-cn .ck{width:20px;height:20px;border-radius:6px;border-width:2px;margin-top:0} #pf-rep .rp-cn.on>.ck::after{width:5px;height:10px;border-width:0 2.5px 2.5px 0} #pf-rep .rp-cn.mid>.ck::after{width:9px} #pf-rep .rp-cn b{font:600 13px/1.25 var(--f-ui);color:var(--fg);min-width:0;overflow-wrap:anywhere;hyphens:auto} #pf-rep .rp-fam .rp-cn b{font-weight:800} #pf-rep .rp-cc,#pf-rep .rp-pc{display:block;font:500 11px/1.3 var(--f-ui);color:var(--mut);overflow-wrap:anywhere} #pf-rep .rp-pc{color:var(--cu2);font-weight:600} /* 3.1.85 : plus de coups sous le nom (cachés, gardés pour la recherche) ; « Variantes » et « Bientôt » calés en bas de la carte : alignés sur la rangée */ #pf-rep .rp-cc[hidden]{display:none} #pf-rep .rp-card>.rp-vb{margin-top:auto} #pf-rep .rp-pc:empty,#repertoire:not(.rp-tri-pop) #pf-rep .rp-pc{display:none} #pf-rep .rp-vb{align-self:flex-start;max-width:100%;min-height:32px;margin:2px 0 0;padding:4px 8px!important;white-space:nowrap;font-size:11px!important;border:1px solid var(--line)!important;border-radius:var(--r-pill);background:none;color:var(--cu2);font:600 12px/1.1 var(--f-ui)} #pf-rep .rp-vb>span{font-size:11px!important;line-height:1.2!important} #pf-rep .rp-vb::after{content:" ▾"} #pf-rep .rp-vb[aria-expanded="true"]{background:var(--tint);border-color:var(--sel)!important} #pf-rep .rp-vb[aria-expanded="true"]::after{content:" ▴"} #pf-rep .rp-vb:focus-visible,#pf-rep .rp-cn:focus-visible{outline:3px solid var(--sel);outline-offset:2px} #pf-rep .pf-soon.rp-card{display:flex;flex-direction:column;align-items:stretch;min-height:0;border:0;opacity:1} #pf-rep .pf-soon.rp-card>.rp-mini{opacity:.6;cursor:default} #pf-rep .rp-fl .pf-ouv>.rp-card>.rp-mini{cursor:default} #pf-rep .pf-soon.rp-card .rp-cn b{color:var(--mut)} #pf-rep .pf-soon.rp-card .ck{border-style:dashed;opacity:.6} #pf-rep .pf-soon.rp-card .pf-tag{align-self:flex-start;margin:auto 0 0;padding:3px 7px;font-size:11px} #pf-rep .rp-pan{grid-column:1/-1;margin:-4px 0 2px;padding:10px 12px 4px;border:1px solid var(--line);border-top:2px solid var(--sel);border-radius:var(--r-s);background:var(--tint);min-width:0} #pf-rep .rp-ph{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin:0 0 6px;font:500 13px/1.3 var(--f-ui);color:var(--mut)} #pf-rep .rp-ph b{font:700 16px/1.25 var(--f-ui);color:var(--fg)} #pf-rep .rp-pan .pf-list>.pf-all{border-top:0!important} #pf-rep .rp-pan .rp-grid{gap:10px} #pf-rep .rp-pan .rp-gg{margin:4px 0 8px} .rp-tri{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px} .rp-tri button{min-height:36px;padding:6px 12px;border:1px solid var(--line)!important;border-radius:var(--r-pill)!important;background:none!important;color:var(--mut)!important;font:600 13px/1 var(--f-ui)} .rp-tri button.on{background:var(--sel)!important;border-color:var(--sel)!important;color:var(--sheet)!important} .rp-tri button:focus-visible{outline:3px solid var(--sel);outline-offset:2px} .rp-tri-n{margin:0 0 10px;font:500 12px/1.35 var(--f-ui);color:var(--mut)} /* 3.0.69 · onglets + tri collés en haut de Mon répertoire ; collée, la barre se resserre (nombres masqués) avec un trait et une ombre */ .rp-barre{position:sticky;top:0;z-index:20;background:var(--bg);padding-top:env(safe-area-inset-top,0px);margin-bottom:6px;transition:box-shadow .2s} .rp-barre .rp-tri{margin-bottom:0;padding-bottom:8px} .rp-barre.colle{box-shadow:0 1px 0 var(--line),0 6px 12px -6px rgba(0,0,0,.55)} .rp-barre.colle .rp-tabs{margin-bottom:8px} .rp-barre.colle .rp-tabs button{min-height:40px;padding:4px 2px} .rp-barre.colle .rp-tabs button small{display:none} /* 3.0.38 : fenêtre « Écrire à Fifou » (signaler.js) ; mêmes fenêtres que Fifou Expert (.xp-ov, .xp-sh, .xp-card) */ .rt-sh{max-height:calc(100% - 8px);overflow:auto;display:flex;flex-direction:column}.rt-sh>*{flex:none} .rt-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 0 8px} .rt-seg button{min-height:40px;border-radius:var(--r-m);border:1.5px solid var(--line);background:var(--tint);color:var(--fg);font:600 14px var(--f-ui);cursor:pointer} .rt-seg button.on{background:var(--sel);border-color:var(--sel);color:var(--cu-ink)} .rt-tx{width:100%;box-sizing:border-box;height:96px;resize:none;border-radius:var(--r-m);border:1.5px solid var(--line);background:var(--bg);color:var(--fg);font:16px/20px var(--f-ui);padding:8px 10px} .rt-tx::placeholder{color:var(--mut)}.rt-tx:focus{outline:none;border-color:var(--sel)} .rt-n{display:flex;justify-content:flex-end;font:12px var(--f-ui);color:var(--mut);margin:2px 0 6px} .rt-inf{border:1px solid var(--line);border-radius:var(--r-m);padding:8px 10px 6px;margin:0 0 10px} .rt-inf>label{display:flex;align-items:center;gap:8px;font:600 14px var(--f-ui);cursor:pointer} .rt-inf input{accent-color:var(--sel);width:18px;height:18px;margin:0} .rt-chips{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 0} .rt-chip,.rt-chip[aria-pressed]{min-height:30px;min-width:0;display:inline-flex;align-items:center;gap:4px;font:12.5px/16px var(--f-ui);padding:4px 8px;border-radius:var(--r-pill,999px);background:var(--tint);border:1px solid var(--line);color:var(--fg);text-align:left;cursor:pointer} .rt-chip:before{content:"✓";color:var(--sel);font-weight:700} .rt-chip[aria-pressed].off{opacity:.5;text-decoration:line-through}.rt-chip.off:before{content:"✕";color:var(--mut)} .rt-aide{font:12px/15px var(--f-ui);color:var(--mut);margin:4px 0 0} .rt-plein{font:15px/21px var(--f-ui);text-align:center;margin:4px 0 14px} #rt-go:disabled{opacity:.5;cursor:default} #rt-ov svg{min-width:0} @media (max-height:660px){.rt-tx{height:64px}.rt-sh .xp-sh-h{margin-bottom:6px}} /* 3.0.34 : carte « Mon objectif du jour » recadrée (profil et tuto). Tout tient dans la carte et rien ne bouge quand on fait glisser le curseur : la phrase du palier (ou « Réservé à Fifou Expert ») a une zone de deux lignes, la note Expert et le message de Fifou au lâcher une zone fixe. Profil : la carte Mon Elo prend la hauteur de son contenu (3.0.39 : plus de vide entre la note de catégorie et le curseur) et donne le reste à l'objectif ; la note de catégorie a une zone fixe de trois lignes en petit (sa plus longue phrase, resserrée dans profil.js), sous le curseur, la scène de Fifou grandit, repères des paliers sous le curseur. */ #profil #pf-el{flex:none} #pf-el>.dj{flex:none} .pf-ticks{position:relative;height:16px;margin:0 16px!important;padding:0!important;flex:none} .pf-ticks span{position:absolute;top:0;transform:translateX(-50%);font-variant-numeric:tabular-nums} .pf-ticks span.on{color:var(--sel);font-weight:700} #pf-dj .dj{grid-template-columns:clamp(64px,14dvh,112px) 1fr;row-gap:2px} #pf-dj .dj-ff{width:clamp(64px,14dvh,112px);height:clamp(77px,16.8dvh,134px)} /* 3.1.102 : la place libérée sous Mon Elo (sous-textes retirés) revient à la scène de l'objectif : Fifou et nombre un peu plus grands */ #pf-dj .dj{grid-template-columns:clamp(64px,17dvh,136px) 1fr} #pf-dj .dj-ff{width:clamp(64px,17dvh,136px);height:clamp(77px,20.4dvh,163px)} #pf-dj .dj-n b{font-size:clamp(30px,7.2dvh,60px)!important} #pf-dj .dj-n span{white-space:nowrap} #pf-el .dj{grid-template-columns:clamp(56px,12.4dvh,104px) 1fr} #pf-el .dj-ff{width:clamp(56px,12.4dvh,104px);height:clamp(64px,14.8dvh,124px)} #pf-el .dj-n b{font-size:clamp(30px,7.6dvh,64px)!important} #pf-dj .dj-n{align-self:end} #pf-dj .dj-c{align-self:start;height:2.7em;line-height:1.35;overflow:hidden;display:flex;align-items:flex-start} #pf-dj .xp-goal{flex:none;height:48px;box-sizing:border-box;overflow:hidden;margin-top:clamp(2px,.6dvh,6px)} #pf-dj .xp-goal.xp-ffm{margin-top:clamp(2px,.6dvh,6px);animation:none} #tu-dj .dj-c{height:2.7em;line-height:1.35;display:flex;align-items:center;justify-content:center;overflow:hidden} #tu-dj .xp-goal{flex:none;height:44px;box-sizing:border-box;overflow:hidden} #tu-dj .xp-goal.xp-ffm{margin-top:2px;animation:none} /* 3.0.39 : tuto, étape Elo : la phrase du niveau a une zone fixe de trois lignes (elle faisait bouger le curseur et les niveaux de 3 px) */ #tuto .tu-ect{height:3lh;min-height:0} /* tuto : les flammes de la scène 50 ne touchent plus « Question 3 sur 3 » */ #tuto .tu-pq:has(#tu-dj) .tu-ff{margin-top:14px} /* petite hauteur (360×640) : Fifou de l'Elo, scène et curseurs un peu resserrés pour que les deux cartes tiennent sans couper */ @media (max-height:700px){#pf-el .dj{grid-template-columns:56px 1fr}#pf-el .dj-ff{width:56px;height:64px} #pf-dj .dj,#pf-el .dj{row-gap:0}#pf-dj .dj{grid-template-columns:72px 1fr}#pf-dj .dj-ff{width:72px;height:84px}#pf-dj .dj-r,#pf-el .dj-r{height:36px}} @media (max-height:620px){#pf-dj .dj-c{height:2.4em;line-height:1.2}#pf-dj .xp-goal{height:44px}} /* 3.1.102 : 360×640 : place libérée sous Mon Elo, la scène de l'objectif reprend un Fifou plus grand */ @media (max-height:700px) and (min-height:621px){#pf-dj .dj{grid-template-columns:100px 1fr}#pf-dj .dj-ff{width:100px;height:120px}} /* 3.0.40 · jetons d'essai (jetons.js) : jamais montrés à un abonné Fifou Expert (body.xp-on) */ .jt-coin{display:block;width:22px;height:22px;min-width:0;flex:none} .jt-vide{opacity:.28;filter:grayscale(1)} .jt-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .jt-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 4px;border-radius:var(--r-pill);background:rgba(var(--sel-rgb),.16);border:1px solid rgba(var(--sel-rgb),.55);color:var(--cu2);font:800 13px/1 var(--f-ui);font-variant-numeric:tabular-nums;white-space:nowrap} body.xp-on .jt-badge,body.xp-on .jt-bar,body.xp-on .jt-chip{display:none!important} /* accueil : la pièce et son chiffre au coin du petit Fifou de la tuile Varier l'entraînement */ .jt-badge{position:absolute;top:-7px;right:-9px;width:24px;height:24px;z-index:2;filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))} .jt-badge .jt-coin{width:24px;height:24px} .jt-badge b{position:absolute;inset:0 0 1px;display:grid;place-items:center;font:400 13px/1 var(--f-display);color:var(--cu-ink)} /* Varier l'entraînement : les jetons sous le titre, et le jeton à la place du cadenas */ .jt-bar{display:flex;align-items:center;gap:8px;margin:2px 0 10px;font-size:13.5px;line-height:17px;color:var(--mut);white-space:nowrap} .jt-bar b{color:var(--cu2)} @media (max-height:700px){.jt-bar{margin:0 0 6px}} .jt-slots{display:flex;gap:2px;flex:none}.jt-slots .jt-coin{width:20px;height:20px} .md-lk.jt-lk{background:none!important;border-color:transparent!important} .md-lk.jt-lk .jt-coin{width:30px;height:30px} /* fenêtre « Utiliser 1 jeton » */ .jt-hd{display:flex;align-items:center;gap:12px;margin:0 0 10px} .jt-hd .jt-coin{width:54px;height:54px} .jt-hd h3{font:var(--t2);margin:0}.jt-hd p{margin:2px 0 0;font-size:14px;line-height:19px;color:var(--mut)}.jt-hd p b{color:var(--cu2)} .jt-q{font:700 17px/22px var(--f-ui);margin:0 0 4px} .jt-v{margin:0 0 12px;font-size:14px;line-height:19px}.jt-v b{color:var(--cu2)} .jt-row{display:grid;grid-template-columns:1fr 1fr;gap:8px} .jt-row .xp-buy{min-height:48px;font-size:16px}.jt-row .xp-sec{margin:0;min-height:48px} .jt-rap{display:flex;align-items:center;gap:10px;margin:12px 0 0;padding:9px 12px;border-radius:var(--r-l);border:1px solid rgba(var(--sel-rgb),.45);background:rgba(var(--sel-rgb),.08);font-size:13px;line-height:17px;text-align:left;width:100%;color:var(--fg);cursor:pointer} .jt-rap .xp-ff{width:34px;flex:none}.jt-rap b{color:var(--cu2)} /* encart de la page Fifou Expert */ .jt-gagne{display:flex;align-items:center;gap:10px;margin:10px 0 0;padding:9px 12px;border-radius:var(--r-l);background:var(--sheet);border:1px solid var(--line);font-size:13px;line-height:17px} .jt-gagne .jt-coin{width:30px;height:30px}.jt-gagne b{color:var(--cu2)} .jt-gagne .jt-mini{flex:none;font:700 12px var(--f-ui);color:var(--mut);white-space:nowrap} @media (max-height:700px){.jt-gagne{margin-top:8px;padding:6px 10px;font-size:12.5px;line-height:16px}.jt-gagne .jt-coin{width:26px;height:26px}} /* fin d'une partie d'essai */ .jt-fin .xp-c{padding:14px}.jt-b{color:var(--cu2)} .jt-enc small{font-weight:500;color:var(--mut)} /* en-tête de l'entraînement : partie d'essai en cours */ .thead{position:relative} /* 3.1.79 (maquette C) : gain d'un jeton, la réserve se remplit. Plateau fixe sous #thead (jetons.js anime), puis pastille « n / 5 » à gauche de Mes lignes. Départ à 1,1 s, après la célébration de l'objectif ; transform et opacity seulement ; jamais de défilement (texte court, nowrap sur les chiffres). */ .jt-an{position:fixed;z-index:60;pointer-events:none;box-sizing:border-box;background:#1b2848;border:1px solid rgba(var(--sel-rgb),.5);border-radius:16px; padding:11px 13px 12px;box-shadow:0 14px 30px rgba(0,0,0,.55);color:var(--fg);opacity:0;transform-origin:85% 0; animation:jt-an 2.4s cubic-bezier(.3,.8,.3,1) 1.1s both} .jt-an-p{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 6px;animation-name:jt-anp;animation-duration:3.6s} .jt-an-0{animation-duration:3s} @keyframes jt-an{0%{opacity:0;transform:translateY(-40px) scaleY(.6)}12%{opacity:1;transform:none}82%{opacity:1;transform:none}100%{opacity:0;transform:translate(-12px,-44px) scale(.3)}} @keyframes jt-anp{0%{opacity:0;transform:translateY(-16px)}10%,88%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-10px)}} .jt-an svg{min-width:0} .jt-an .jt-sr{top:0;left:0} .jt-an-r{display:flex;align-items:center;gap:10px} .jt-an-s{display:flex;gap:6px;flex:none} .jt-an-c{position:relative;display:block;width:34px;height:34px;border-radius:50%;background:rgba(5,9,18,.55);box-shadow:inset 0 2px 4px rgba(0,0,0,.6)} .jt-an-c .jt-coin{position:absolute;inset:0;width:34px;height:34px} .jt-an-v>.jt-coin{opacity:.25;filter:grayscale(1)} .jt-an-nv>.jt-coin{opacity:0} .jt-an-d{position:absolute;inset:0;display:block;opacity:0;animation:jt-and .6s cubic-bezier(.5,0,.75,0) 1.5s both} @keyframes jt-and{0%{opacity:1;transform:translateY(-120px) rotateY(0) scale(1.5)}100%{opacity:1;transform:none}} .jt-an-nv{animation:jt-anb .4s cubic-bezier(.2,.9,.3,1.5) 2.1s both} @keyframes jt-anb{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}} .jt-an-e{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;border-radius:50%;background:var(--cu2);opacity:0;animation:jt-ane .6s ease-out 2.1s both} @keyframes jt-ane{0%{opacity:1;transform:rotate(var(--a)) translateX(10px)}100%{opacity:0;transform:rotate(var(--a)) translateX(30px)}} .jt-an-n{position:relative;margin-left:auto;display:flex;align-items:baseline;gap:3px;white-space:nowrap;font-variant-numeric:tabular-nums} .jt-an-n b{font:400 26px/1 var(--f-display);color:var(--cu2)} .jt-an-n i{font:700 14px/1 var(--f-ui);font-style:normal;color:var(--mut)} .jt-an-n1{position:absolute;left:0;top:0;animation:jt-ano .01s linear 2.1s both} .jt-an-g .jt-an-n2{animation:jt-ann .4s cubic-bezier(.2,.9,.3,1.5) 2.1s both} @keyframes jt-ano{to{opacity:0}} @keyframes jt-ann{0%{opacity:0;transform:translateY(-10px) scale(1.4)}100%{opacity:1;transform:none}} .jt-an-t{margin:9px 0 1px;font:400 16px/20px var(--f-display);color:var(--cu2)} .jt-an-x{margin:0;font:600 14px/19px var(--f-ui);color:var(--fg)} .jt-an-x b{color:var(--cu2)} .jt-an-p .jt-an-x{flex:1;min-width:0} .jt-an-ff{width:44px;flex:none}.jt-an-ff .xp-ff{display:block;width:44px} @media (max-width:370px){.jt-an-s{gap:4px}.jt-an-c,.jt-an-c .jt-coin{width:30px;height:30px}.jt-an-x{font-size:13.5px;line-height:18px}} .jt-anp{position:fixed;z-index:60;pointer-events:none;display:flex;align-items:center;gap:4px;height:26px;padding:0 9px 0 3px;border-radius:999px; background:#3a2615;border:1px solid rgba(var(--sel-rgb),.6);color:var(--cu2);font:800 13px/1 var(--f-ui);font-variant-numeric:tabular-nums;white-space:nowrap; animation:jt-anpi .35s cubic-bezier(.2,.9,.3,1.4) both,jt-ano .4s ease 4.9s forwards} .jt-anp.jt-vite{animation:jt-anpi .25s ease both,jt-ano .4s ease 2.1s forwards} .jt-anp .jt-coin{width:20px;height:20px;min-width:0} @keyframes jt-anpi{0%{opacity:0;transform:scale(.5)}100%{opacity:1;transform:none}} body.xp-on .jt-an,body.xp-on .jt-anp{display:none!important} #thead.jt-anq #thday .thw{display:none} /* réduire les animations : pas de mouvement, le plateau final apparaît et disparaît en fondu */ @media (prefers-reduced-motion:reduce){ .jt-an{animation-name:jt-anf;animation-timing-function:ease} .jt-an-d,.jt-an-nv,.jt-an-g .jt-an-n2,.jt-anp,.jt-anp.jt-vite{animation:none} .jt-an-d{opacity:1}.jt-an-e,.jt-an-n1{display:none}} @keyframes jt-anf{0%{opacity:0}10%,88%{opacity:1}100%{opacity:0}} .jt-chip{margin-left:auto;padding:2px 8px 2px 3px;font-size:12px;flex:none}.jt-chip .jt-coin{width:18px;height:18px} body.puz #thead .jt-chip,body.errmode #thead .jt-chip{order:1;margin-left:8px} /* 3.0.45 · Mon répertoire : titres de groupe pliables (repertoire.js, gda-rep-plie). Nom du groupe en gros, coups en petit à côté, nombre d'ouvertures dessous, échiquier et flèche à droite ; toucher le titre plie ou déplie la grille, avec une petite animation */ #pf-rep .rp-gr,#pf-rep .rp-gr:has(.rp-g){display:block;margin:6px 0 0;padding:0;border-top:1px solid var(--line);font:inherit;text-transform:none;letter-spacing:0;color:var(--fg)} #pf-rep .rp-band+.rp-gr{margin-top:4px;border-top:0} #pf-rep .rp-gh{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;margin:0;padding:8px 0!important;border:0!important;border-radius:0!important;background:none!important;color:var(--fg);text-align:left;cursor:pointer} #pf-rep .rp-gh:focus-visible{outline:3px solid var(--sel);outline-offset:2px} #pf-rep .rp-gt{display:block;flex:1;min-width:0} #pf-rep .rp-gn2{font:600 19px/1.2 var(--f-display);color:var(--fg)} #pf-rep .rp-gn2{display:block} #pf-rep .rp-gc{display:block;margin-top:2px;font:600 13px/1.25 var(--f-ui);color:var(--cu2);letter-spacing:.02em} #pf-rep .rp-gs{display:block;margin-top:3px;font:500 12px/1.3 var(--f-ui);color:var(--mut)} #pf-rep .rp-gr .rp-g{width:60px;height:60px;margin:0} #pf-rep .rp-chev{flex:none;position:relative;width:30px;height:30px;border:1px solid var(--line);border-radius:50%;transition:transform .2s ease,background-color .2s} /* 3.0.50 : flèche recentrée dans son rond (le V dessiné par deux bords d'un carré tourné est décalé du centre du carré ; mesuré à 0,1 px près, pliée et dépliée) */ #pf-rep .rp-chev::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-8px 0 0 -5px;border:solid var(--cu2);border-width:0 2px 2px 0;transform:rotate(45deg)} #pf-rep .rp-plie .rp-chev{transform:rotate(-90deg)} #pf-rep .rp-gh[aria-expanded="true"] .rp-chev{background:var(--tint)} #pf-rep .rp-plie .rp-gn2{color:var(--mut)} #pf-rep .rp-gg.rp-ferme{display:none} #pf-rep .rp-gg.rp-in{animation:rp-in .22s ease-out} #pf-rep .rp-gg.rp-sort{animation:rp-in .17s ease-in reverse forwards} @keyframes rp-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){#pf-rep .rp-chev{transition:none}#pf-rep .rp-gg.rp-in,#pf-rep .rp-gg.rp-sort{animation:none}} /* la règle des 16 px mini sur les span (téléphone) écrasait les deux tailles : nom en gros, coups en petit, forcés ici */ #pf-rep .rp-gr .rp-gn2{font-size:20px!important} #pf-rep .rp-gr .rp-gc{font-size:14px!important} /* 3.0.48 : refonte du tuto — barre Indice · Retour · Suivant à sa vraie hauteur (52 px : écrasée à 47 px par la colonne, le bas des mots était coupé) ; bouton « Suite » plus petit dans les bulles (sans compteur, aligné à droite) pour que le texte tienne sans défilement */ .tu-dm .tu-bar{flex:none} .tu-sn button{min-height:34px;padding:0 16px;font-size:14px} .tu-dm .bubble{position:relative} .tu-dm .tu-sn{position:absolute;right:10px;bottom:8px;margin:0} .tu-dm .tu-sn button{min-height:28px;height:28px;padding:0 14px} .tu-dm .tu-sp{display:inline-block;width:80px;height:27px;vertical-align:middle} /* 3.0.51 : fin de ligne réussie : pastilles (coups justes, évaluation) puis une phrase de stratégie de Fifou, sans titre ; à la position finale, la case Suivant de la barre devient « Contre l'ordi » (vert, texte foncé : contraste élevé) */ #tstatus .finch{margin:0 0 4px} #tstatus .finph{color:var(--fg)} #bjo[hidden]{display:none!important} #bjo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:0;border-radius:var(--r-m);background:var(--green);color:var(--bg);font:700 14px/1.1 var(--f-ui);min-height:44px;padding:2px 6px} #bjo .gi{font-size:16px;line-height:1} /* 3.0.92 : séparateur en border-left (et non box-shadow inset) : sur les écrans à densité non entière, le trait se décalait d’1 px dans le vert, qui semblait déborder à gauche */ body:not(.libre) #tab-train .grow #bjo{grid-column:3;grid-row:1;box-sizing:border-box;width:100%;min-width:0;height:var(--kh,52px);min-height:0;margin:0;padding:2px 4px!important;border-radius:0;background:var(--green);color:var(--bg)!important;font:700 14px/1.1 var(--f-ui)!important;white-space:normal;text-align:center;border-left:1px solid var(--line)!important;background-clip:padding-box;box-shadow:none} #tab-train #bjo .gl{display:block;font:inherit!important;color:inherit;white-space:normal} body:not(.libre) #tab-train .grow #bjo:active{transform:scale(.97)} /* 3.0.60 : audit graphique de Fifou. Petit format : fifou.js pose .ff-s sur toute copie de #bishop de moins de 60 px de large ; traits épaissis (le contour ne descend plus sous ~1,5 px) et détails .ffd cachés (reflets secondaires de l'iris, joues, filet de la fente). */ .ff-s .ffd{display:none} .ff-s [stroke="#0b1328"][stroke-width="5"]{stroke-width:8.5} .ff-s [stroke="#0b1328"][stroke-width="4"]{stroke-width:7} .ff-s [stroke="#0b1328"][stroke-width="3.5"]{stroke-width:5.5} .ff-s [stroke="#0b1328"][stroke-width="5.5"]{stroke-width:7.5} .ff-s [stroke="#0b1328"][stroke-width="6.5"]{stroke-width:8.5} .ff-s [stroke="#0b1328"][stroke-width="3.6"]{stroke-width:6} .ff-s [stroke="#f2b27a"][stroke-width="9"]{stroke-width:14} .ff-s circle[fill="#0b1328"][r="6.0"],.ff-s circle[fill="#0b1328"][r="6"]{r:7.5} .ff-s circle[fill="#fff"][r="4.1"]{r:4.6} /* respiration décalée : chaque copie a sa phase et sa durée (variables posées par fifou.js) ; le liseré cuivré garde les mêmes que la tête */ svg .fa-head,:where(svg) :where(path[d^="M100 30 C126 40"][stroke="#f2b27a"],circle[cx="100"][cy="21"][stroke="#f2b27a"]){animation-delay:var(--ffd,0s);animation-duration:var(--ffdur,3s)} /* 3.0.70 · Rappel quotidien du défi (rappels.js) : Paramètres › Rappels, feuille de l'heure, bulle de demande d'autorisation (3.0.91 : classes en rap- au lieu de rp-, réservé à Mon répertoire : .rp-g et .rp-b écrasaient le petit échiquier des titres de groupe et des « Bientôt ») */ #settings .st-rap-note{margin:2px 0 6px;font:400 13px/1.4 var(--f-ui);color:var(--mut)} .rap-sh h3{font:var(--t2);margin:0 0 4px} .rap-g{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0 12px} .rap-g.rap-m{margin:0 0 14px;padding-top:12px;border-top:1px solid var(--line)} .rap-b{min-height:44px;border-radius:12px;border:1.5px solid var(--line);background:var(--tint);color:var(--fg);font:600 15px/1 var(--f-ui);cursor:pointer;padding:0} .rap-b.on{background:var(--sel);border-color:var(--sel);color:var(--cu-ink)} .rap-ok{display:block;width:100%;min-height:48px;border-radius:var(--r-pill);border:0;background:var(--sel);color:var(--cu-ink);font:700 16px/1.2 var(--f-ui);cursor:pointer;padding:0 14px} .rap-no{display:block;width:100%;min-height:44px;margin-top:8px;border-radius:var(--r-pill);border:1.5px solid var(--line);background:none;color:var(--fg);font:600 15px/1 var(--f-ui);cursor:pointer} .rap-pt{margin:10px 0 0;text-align:center;font:400 13px/1.4 var(--f-ui);color:var(--mut)} .rap-row{display:flex;gap:10px;align-items:flex-end;margin:4px 0 14px} .rap-ff{flex:none;width:96px;height:112px;display:block} .rap-ff .bishop{display:block;width:96px!important;max-width:96px!important;min-width:0!important;height:112px!important;flex:none!important} .rap-bub{flex:1;min-width:0;background:#fbf5ec;color:#0b1328;border-radius:16px 16px 16px 4px;padding:10px 12px;font:400 15px/1.35 var(--f-ui)} .rap-bub b{display:block;margin-bottom:3px;font-weight:700} @media (max-height:600px){.rap-ff{width:72px;height:84px}.rap-ff .bishop{width:72px!important;max-width:72px!important;height:84px!important}.rap-bub{font-size:14px}} /* ===== 3.0.77 : tablettes (iPad, pliables ouverts) ; les écrans tactiles jusqu'à 1366 px gardent la mise en page téléphone (media « pointer:coarse »). Page de jeu : une colonne de 760 px au plus, centrée, échiquier plus grand que 560 px si la hauteur le permet. ===== */ @media (min-width:700px) and (max-width:820px), (pointer:coarse) and (min-width:700px) and (max-width:1366px){ :root{--bw:min(min(100vw,760px) - 2*var(--g) - 2*var(--fr),var(--apph,100dvh) - var(--navh) - var(--sat,0px) - 14px - var(--hd) - 2*var(--cp) - 2*var(--fr) - var(--kh) - var(--bub) - 34px)} body #tab-train .tboardbox{max-width:760px;margin-inline:auto} #board,body #tab-train .bov{max-width:none} .caps{max-width:none} } /* ===== 3.0.77 : pas de paysage sur téléphone. L'appli installée (Android, Capacitor) est bloquée en portrait ; ailleurs (Safari iPhone, navigateur) un écran demande de remettre le téléphone droit. Tablettes : le paysage reste possible (hauteur > 500 px). ===== */ #tourner{display:none} @media (orientation:landscape) and (max-height:500px) and (pointer:coarse){ #tourner{display:flex;position:fixed;inset:0;z-index:10000;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;background:var(--bg,#10192b);color:var(--fg,#f3eee6);text-align:center} #tourner img{width:88px;height:88px;animation:tn-tourne 2.4s ease-in-out infinite} #tourner b{font:400 24px/1.2 var(--f-display)} #tourner span{font:400 16px/1.4 var(--f-ui);color:var(--mut)} html,body{overflow:hidden!important} } @keyframes tn-tourne{0%,30%{transform:rotate(90deg)}60%,100%{transform:rotate(0)}} @media (prefers-reduced-motion:reduce){#tourner img{animation:none}} /* ===== 3.0.77 : très petits écrans (texte du téléphone agrandi, qui réduit la place en px CSS ; iPhone SE avec les barres de Safari). Les pages pleine hauteur sans défilement (accueil, profil, réglage du Jeu libre) défilent quand elles ne tiennent plus, le bouton « Lancer la partie » reste en bas de l'écran, la barre du bas garde ses icônes. ===== */ html:has(>body.md-jlr){overflow-x:hidden;overflow-y:auto;height:auto} body.md-jlr{overflow:visible;height:auto} .md-jlr main{height:auto;min-height:var(--apph,100dvh)} .jlr-go{position:sticky;bottom:calc(var(--navh) + 8px);z-index:2} @media (max-height:520px), (max-width:300px){ html:has(>body.home-mode),html:has(>body.scr-profil){overflow-x:hidden;overflow-y:auto;height:auto} body.home-mode,body.scr-profil{overflow:visible;height:auto} .home-mode main,.scr-profil main{height:auto;min-height:var(--apph,100dvh)} } /* page de jeu : l'échiquier et la rangée de boutons d'abord, à la largeur de l'écran si la hauteur le permet ; Fifou et sa bulle juste dessous (on fait défiler) */ @media (max-height:520px) and (max-width:820px), (max-width:300px) and (max-height:900px){ :root{--bw:min(100vw - 2*var(--g) - 2*var(--fr),max(var(--apph,100dvh) - var(--navh) - var(--sat,0px) - 14px - var(--hd) - 2*var(--cp) - 2*var(--fr) - var(--kh) - var(--bub) - 34px,var(--apph,100dvh) - var(--navh) - var(--sat,0px) - var(--hd) - 2*var(--cp) - var(--kh) - 40px))} body #tab-train .tboardbox{height:auto} body #tab-train .bwrap{flex:none;min-height:110px!important} } @media (max-width:300px){ #botnav .nvb span{font-size:11px!important;white-space:normal;line-height:1.1;text-align:center} } /* ===== 3.0.88 : écrans étroits (texte du téléphone agrandi, 320 px) ===== */ @media (max-width:330px){ /* tuto, question Elo : la case Elo passe sous le niveau au lieu de déborder ; noms de niveau entiers */ .tu-eh{flex-wrap:wrap} .tu-eh>div:first-child{flex:1 1 160px;min-width:0} .tu-lv{font-size:13px;letter-spacing:-.01em;overflow-wrap:anywhere} /* en-tête du jeu : « 0 / 10 » seul (l'anneau et son libellé disent le reste) */ body .tht #thday .thw{display:none} /* puzzle : nom de l'ouverture en plus petit */ body.puz #thead .thtitle .puzo{font-size:12px;letter-spacing:-.01em} /* réglage des lignes : sans l'icône d'ouverture, graduations une sur deux, libellés de l'étendue plus petits */ #train-setup .su-ouv .so-i{display:none} #train-setup button.su-ouv{grid-template-columns:minmax(0,1fr) auto} #train-setup .su-ouv .so-l,#train-setup .su-ouv .so-n{grid-column:1} #train-setup .su-ouv .so-c{grid-column:2;padding:0 10px} .dpt-d .dpt-t span:nth-child(even){visibility:hidden} #train-setup .pl-lab span{font-size:12px;width:auto!important;min-width:0;overflow-wrap:anywhere} .pl-s{width:60px}.pl-f{width:54px;height:54px} /* Paramètres : petites roues crantées */ #settings .st-meca{width:84px;height:60px} } /* texte du téléphone très agrandi (moins de 250 px CSS de large) : les libellés passent à la ligne, les décorations rétrécissent */ @media (max-width:250px){ .streak .sk-l,#home .home-t{white-space:normal;overflow-wrap:anywhere;min-width:0} #home .home-card .hc-txt{min-width:0} #settings .st-meca{display:none} #train-setup .pl-s{width:46px}#train-setup .pl-f{width:42px;height:42px} #train-setup .su-ouv .so-c{grid-column:1;grid-row:3;justify-self:start;margin-top:6px} #train-setup .extiles{grid-template-columns:1fr} #train-setup .dp-gs{grid-template-columns:minmax(0,1fr)} #train-setup .dp-sc span{font-size:12px!important} #train-setup .dp-sc span:nth-child(even):not(.r):not(.on){visibility:hidden} #train-setup .pl-lab span:first-child,#train-setup .pl-lab span:last-child{white-space:normal} #train-setup .pl-lab span{font-size:11px;overflow-wrap:anywhere} #settings .st-row{flex-wrap:wrap;row-gap:4px} #settings .st-row b{flex:1 1 0;min-width:0;overflow-wrap:anywhere} #settings .st-link .st-val{min-width:0;overflow-wrap:anywhere} #settings .st-chev{display:none} .rp-tete>svg.bishop{display:none} h2,h2.su-h,.su-p{overflow-wrap:anywhere;min-width:0} .jlr-seg{grid-template-columns:minmax(0,1fr)!important;display:grid} .jlr-elo{flex-wrap:wrap} #jlop,#jlme{min-width:0;flex-wrap:wrap} .lrd-ok,.lrd-no{min-width:0;white-space:normal;overflow-wrap:anywhere} .tu-skip{flex:0 1 auto;min-width:0;padding:4px 8px;font-size:12px;line-height:1.2;white-space:normal} :has(>.rp-bn),:has(>.pf-ds),:has(>.tu-skip){flex-wrap:wrap} .rp-bn,#pf-rep .rp-bn,.pf-ds{white-space:normal;min-width:0} .jlps{width:var(--bw)} .tu-env{font-size:20px;overflow-wrap:anywhere} #jlop .jlnm,#jlme .jlnm{flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis} } /* ===== 3.0.89 : iPhone ===== */ /* barre d'état transparente (black-translucent) : le haut des écrans fixes passe sous l'heure et la batterie */ /* --sat : place prise en plus par la barre d'état en haut de la page de jeu (main a déjà 8 px de marge) ; ôtée des hauteurs de la page de jeu */ :root{--sat:max(0px,env(safe-area-inset-top,0px) - 8px)} .tu-vtop{padding-top:env(safe-area-inset-top,0px)} /* aide à l'installation sur iPhone (appareil.js), une seule fois */ .ios-inst{position:fixed;left:12px;right:12px;bottom:calc(var(--navh) + 12px);z-index:210;display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:var(--r-b);background:var(--sheet);border:1px solid var(--sel);color:var(--fg);box-shadow:0 8px 28px rgba(0,0,0,.45);animation:lrdfade .2s ease-out} .ios-inst img{flex:none;width:48px;height:48px;min-width:0} .ios-inst-x{flex:1;min-width:0} .ios-inst b{display:block;font:700 15px/1.25 var(--f-ui)} .ios-inst p{margin:4px 0 0;font:500 13px/1.35 var(--f-ui);color:var(--mut)} .ios-inst button{flex:none;min-height:44px;padding:0 14px;border-radius:var(--r-m);border:0;background:var(--sel);color:var(--cu-ink);font:700 15px/1 var(--f-ui);cursor:pointer} @media (max-width:330px){.ios-inst{flex-wrap:wrap}.ios-inst button{width:100%}} /* 3.1.5 (audit) : petits écrans, les étincelles et les accessoires de Fifou ne mordent plus sur « Question N sur 3 » */ @media (max-height:660px){#tuto .tu-pq .tu-ff{margin-top:12px}#tuto .tu-pq:has(#tu-dj) .tu-ff{margin-top:28px}} /* 3.1.5 (audit) : aperçu d'un mode Fifou Expert sans jeton : comment gagner un jeton d'essai */ .xp-jt{margin:0 0 12px;font:500 13.5px/1.4 var(--f-ui);color:var(--mut);text-align:center} /* 3.1.5 (audit) : niveaux du tuto, « Intermédiaire » et « Experimentado » ne touchent plus les bords en 360 */ @media (max-width:380px){.tu-lv{font-size:13px;letter-spacing:-.015em;padding-inline:2px}} /* 3.1.26 · tuto plus guidant (tuto.js) : « Suite » / « Coup suivant » s'illumine une fois quand on touche ailleurs (halo cuivré) ; bulles plus aérées : « Suite » sous le texte avec un vrai espace, un peu plus de marge intérieure */ .tu-glow{animation:tu-glow .9s ease-out} @keyframes tu-glow{0%{box-shadow:0 0 0 0 rgba(var(--sel-rgb),.7)}30%{box-shadow:0 0 0 4px rgba(var(--sel-rgb),.55),0 0 18px 6px rgba(var(--sel-rgb),.5);transform:scale(1.06)}100%{box-shadow:0 0 0 12px rgba(var(--sel-rgb),0),0 0 18px 6px rgba(var(--sel-rgb),0);transform:none}} @media (prefers-reduced-motion:reduce){.tu-glow{animation:none;outline:2px solid var(--sel);outline-offset:3px}} body.tu-on #tuto .tu-dm .bubble{padding:10px 14px} .tu-dm .tu-sn{right:12px;bottom:10px} .tu-dm .tu-sp{width:96px;height:28px;margin-top:8px;vertical-align:top} .tu-coach .bubble{padding:14px 16px} .tu-coach .tu-sn,.tu-fin .tu-sn{margin-top:12px} /* même écart (12 px) entre la carte Étendue du répertoire et « Commencer » qu'entre les cartes ; pendant la visite du tuto, « Commencer » n'est plus collé en bas de l'écran (il venait se coller sous la carte mise en valeur) */ #tab-train #su-go{margin-top:12px} body.tu-visit #tab-train #su-go{position:static} /* 3.1.26 · page de fin du tuto (tuto.js fin) : rayons cuivrés en fond (comme la scène de victoire), carte « Tuto terminé » et « Je me lance ! » */ .tu-fin2{position:relative;display:flex;flex-direction:column;justify-content:center;gap:18px;min-height:calc(var(--apph,100dvh) - 72px);padding:0 4px 16px;box-sizing:border-box} .tu-rays{position:fixed;left:50%;top:36%;width:640px;height:640px;margin:-320px 0 0 -320px;pointer-events:none;z-index:0; background:radial-gradient(circle,rgba(var(--sel-rgb),.24),rgba(var(--sel-rgb),.06) 45%,rgba(var(--sel-rgb),0) 68%),repeating-conic-gradient(rgba(var(--sel-rgb),.11) 0 6deg,transparent 6deg 18deg); -webkit-mask:radial-gradient(circle,#000 0,#000 22%,transparent 64%);mask:radial-gradient(circle,#000 0,#000 22%,transparent 64%);animation:tu-rays 80s linear infinite} @keyframes tu-rays{to{transform:rotate(360deg)}} .tu-card{position:relative;z-index:1;margin-top:104px;padding:58px 18px 18px;border-radius:var(--r-xxl);background:linear-gradient(180deg,#1b2846,#141e35); box-shadow:0 0 0 1px rgba(var(--sel-rgb),.55),0 0 0 6px var(--bg),0 0 0 7px rgba(var(--sel-rgb),.3),0 20px 40px rgba(0,0,0,.45);display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center} .tu-cff{position:absolute;top:-108px;left:50%;width:132px;margin-left:-66px} #tuto .tu-cff .bishop{width:132px!important;max-width:none!important;flex:none!important;display:block;animation:tu-pop .5s cubic-bezier(.2,1.4,.4,1) both} @keyframes tu-pop{from{transform:scale(.6) translateY(20px);opacity:0}} .tu-rib{display:flex;align-items:center;gap:8px;margin:0;font:800 11px/1 var(--f-ui);letter-spacing:2px;text-transform:uppercase;color:var(--sel)} .tu-rib:before,.tu-rib:after{content:"";width:26px;height:1px;background:rgba(var(--sel-rgb),.6)} .tu-ft{margin:0;font:400 32px/1.1 var(--f-display);color:var(--fg);text-wrap:balance} .tu-fm{margin:0;font:400 16px/1.45 var(--f-ui);color:rgba(var(--fg-rgb),.86);text-wrap:pretty} .tu-rec{display:flex;gap:8px;width:100%;margin-top:6px} .tu-rec div{flex:1;min-width:0;padding:10px 4px;border-radius:var(--r-m);background:rgba(var(--fg-rgb),.05);border:1px solid rgba(var(--fg-rgb),.08)} .tu-rec b{display:block;font:800 20px/1.1 var(--f-ui);color:var(--cu2)} .tu-rec span{display:block;margin-top:3px;font:600 11px/1.2 var(--f-ui);color:var(--mut)} #tuto .tu-lance{position:relative;z-index:1;display:block;width:100%;min-height:58px;padding:0 16px;border:0;border-radius:var(--r-l);background:linear-gradient(180deg,#eeaa74,#dc8d52);color:var(--cu-ink); font:700 18px/58px var(--f-ui);text-align:center;white-space:nowrap;box-shadow:0 4px 0 var(--cu3),0 14px 30px -8px rgba(var(--sel-rgb),.6);cursor:pointer;transition:transform .08s,box-shadow .08s} #tuto .tu-lance i{font-style:normal;font-size:22px;margin-left:10px} #tuto .tu-lance:active{transform:translateY(4px);box-shadow:0 0 0 var(--cu3)} @media (prefers-reduced-motion:reduce){.tu-rays,#tuto .tu-cff .bishop,#tuto .tu-lance{animation:none;transition:none}} /* 3.1.21 · Mon répertoire : section par premier coup des Blancs (« Sur 1.e4 » / « Contre 1.e4 », 1.d4, autres) au-dessus des groupes de familles (repertoire.js, .rp-pc1) : pastille cuivre du coup, intitulé, cochées / total à droite ; bandeau sur toute la largeur de la carte */ #pf-rep .rp-pc1{display:flex;align-items:center;gap:12px;margin:14px -16px 0;padding:10px 16px;border-top:2px solid var(--sel);background:rgba(var(--sel-rgb),.10)} #pf-rep .rp-band+.rp-pc1{margin-top:-4px} #pf-rep .rp-pc1+.rp-gr{margin-top:4px;border-top:0} #pf-rep .rp-pk{flex:none;min-width:52px;height:40px;padding:0 8px;border-radius:var(--r-s);background:var(--sel);color:var(--sheet);font:700 17px/40px var(--f-ui)!important;text-align:center;white-space:nowrap} #pf-rep .rp-pc1>b{flex:1;min-width:0;font:600 18px/1.15 var(--f-display);color:var(--fg)} #pf-rep .rp-pn{flex:none;font:700 15px/1 var(--f-ui)!important;color:var(--cu2);white-space:nowrap} #pf-rep .rp-pc1+.rp-pop:not([hidden]),#pf-rep .rp-pop:not([hidden]){margin-top:10px} /* 3.1.34 · question 2 du tuto (tuto.js repFix) : bulle de Fifou fixée en haut, resserrée quand on fait défiler ; la barre de Mon répertoire se range dessous */ body.tu-rep .tu-rtop{z-index:21} body.tu-rep #repertoire .rp-barre{top:var(--tu-rh,0px)} .tu-rtop.tu-cmp .tu-top,.tu-rtop.tu-cmp .tu-q{display:none} .tu-rtop.tu-cmp{padding-top:calc(6px + env(safe-area-inset-top,0px))} .tu-rtop.tu-cmp .tu-ff{margin:0 0 4px} #tuto .tu-rtop.tu-cmp .tu-ffs,.tu-rtop.tu-cmp .tu-ffs,.tu-rtop.tu-cmp .tu-ffs .bishop{width:56px!important;max-width:56px} /* 3.1.22 : ligne alternative : la barre de choix (#anav) prend toute la barre sous l'échiquier (proposition, puis fin) */ #anav[hidden]{display:none!important} body #tab-train .grow:has(#anav:not([hidden]))>#hintb,body #tab-train .grow:has(#anav:not([hidden]))>#next,body #tab-train .grow:has(#anav:not([hidden]))>.tgo,body #tab-train .grow:has(#anav:not([hidden]))>.tundo,body #tab-train .grow:has(#anav:not([hidden])) #bnav,body #tab-train .grow:has(#anav:not([hidden])) #rnav,body #tab-train .grow:has(#anav:not([hidden])) #pnav{display:none!important} body #tab-train .grow:has(#anav:not([hidden]))>.gmid{display:flex!important;grid-column:1/-1!important;grid-row:1/-1!important;width:100%;align-self:stretch} body #tab-train .grow #anav{display:flex;flex:1;width:100%;align-self:stretch;margin:0;gap:0;border-radius:var(--r-m);overflow:hidden} body #tab-train .grow #anav button{flex:1 1 0;min-width:0;min-height:var(--kh,48px);margin:0;padding:0 10px;border:0;border-radius:0;font:700 15px/1.15 var(--f-ui)!important;white-space:normal;cursor:pointer;transition:transform 120ms} body #tab-train .grow #anav button:active{transform:scale(.97)} body #tab-train .grow #anav button:focus-visible{outline:3px solid var(--blue);outline-offset:-3px} body #tab-train .grow #anav .a-ok{background:linear-gradient(180deg,var(--cu2),var(--sel));color:var(--cu-ink)} body #tab-train .grow #anav .a-no{background:transparent;color:var(--fg);box-shadow:inset 1px 0 0 var(--line)} body #tab-train .grow #anav .a-no[hidden]{display:none} /* 3.1.102 (Théo) : dans la proposition, « Revenir à la ligne » est le bouton principal en cuivre et « Continuer cette ligne » le bouton secondaire (la fin garde « Reprendre la ligne » seul, en cuivre) */ body #tab-train .grow #anav.prop .a-ok{background:transparent;color:var(--fg)} body #tab-train .grow #anav.prop .a-no{background:linear-gradient(180deg,var(--cu2),var(--sel));color:var(--cu-ink);box-shadow:none} /* 3.1.51 · Varier l'entraînement en grandes cartes illustrées (maquette A, Théo 24/10) : titre + bouton rond du tutoriel, barre des jetons, puis 2 × 2 cartes qui remplissent l'écran sans défilement ; chaque carte : grand Fifou sous un projecteur cuivre, indicateur en haut à droite (Gratuit, cadenas Expert ou « 1 jeton »), nom, phrase et compteur. Les petits svg du menu ont min-width:0 (règle svg globale). */ #modes .md-menu{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto 1fr auto;column-gap:10px;align-items:center; height:calc(var(--apph,100dvh) - 20px - var(--navh) - 22px);max-height:820px} #modes .md-menu>.su-h{grid-column:1;grid-row:1;margin:0;font-size:clamp(22px,3.6dvh,28px);line-height:1.15;min-width:0} #modes .md-tuto{grid-column:2;grid-row:1;width:46px;height:46px;padding:0;border-radius:50%;display:grid;place-items:center;background:var(--sheet);border:1px solid var(--line);cursor:pointer} #modes .md-tuto .bishop{width:30px!important;max-width:30px;height:36px;min-width:0} #modes .md-menu>.jt-bar{grid-column:1 / -1;grid-row:2;margin:clamp(6px,1.2dvh,10px) 0 0;padding:6px 12px;border-radius:var(--r-m);background:rgba(var(--sel-rgb),.08);border:1px solid rgba(var(--sel-rgb),.25)} #modes .md-menu>.jt-bar[hidden]{display:none} #modes .md-list{grid-column:1 / -1;grid-row:3;align-self:stretch;min-height:0;margin-top:clamp(8px,1.4dvh,12px);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto 1fr auto;column-gap:clamp(8px,1.4dvh,12px)} /* sous-grille : dans une rangée, les deux cartes ont la même hauteur de texte, donc des Fifous de même taille */ #modes .md-list>.md-card{grid-row:span 2} #modes .md-list>.md-card:nth-child(n+3){margin-top:clamp(8px,1.4dvh,12px)} @supports (grid-template-rows:subgrid){#modes .md-list>.md-card{display:grid;grid-template-rows:subgrid;row-gap:0}} #modes .md-msg{grid-column:1 / -1;grid-row:4;margin-top:10px} /* message de Fifou sous les cartes (rien à revoir, puzzles en chargement) : les phrases laissent la place, les Fifous gardent leur taille */ #modes .md-menu:has(.md-msg:not([hidden])) .md-t .md-s{display:none} #modes .md-card{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:0;min-height:0;padding:0;overflow:hidden;text-align:left; border-radius:var(--r-xl);background:linear-gradient(180deg,#22314f 0%,var(--sheet) 62%);border:1px solid rgba(var(--sel-rgb),.28);box-shadow:0 6px 18px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.05)} #modes .md-c-libre{border-color:rgba(var(--sel-rgb),.6);box-shadow:0 0 0 1px rgba(var(--sel-rgb),.15),0 8px 22px rgba(var(--sel-rgb),.12)} #modes .md-card:focus-visible{outline:2px solid var(--sel);outline-offset:2px} #modes .md-card:active{transform:scale(.985)} #modes .md-st{position:relative;flex:1 1 auto;min-height:0;display:flex;align-items:flex-end;justify-content:center;padding-top:20px} #modes .md-spot{position:absolute;left:8%;right:8%;top:10%;bottom:0;background:radial-gradient(closest-side,rgba(var(--sel-rgb),.24),rgba(var(--sel-rgb),.08) 60%,transparent)} #modes .md-sol{position:absolute;left:18%;right:18%;bottom:2px;height:14%;max-height:18px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.45),transparent)} #modes .md-st .bishop{position:relative;flex:none;height:92%!important;max-height:min(190px,24dvh);width:auto!important;max-width:none;min-width:0} #modes .md-lk,#modes .md-free{position:absolute;top:8px;right:8px;width:auto;height:auto;display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:var(--r-pill);font:600 11.5px/1.1 var(--f-ui);white-space:nowrap} #modes .md-lk{background:rgba(var(--bg-rgb),.75);color:var(--cu2);border:1px solid rgba(var(--sel-rgb),.45)} #modes .md-lk svg{width:9px;height:11px;min-width:0;flex:none} #modes .md-lk.jt-lk{background:rgba(var(--bg-rgb),.75)!important;border-color:rgba(var(--sel-rgb),.45)!important;color:var(--sel)} #modes .md-lk.jt-lk .jt-coin{width:15px;height:15px;margin-left:-4px} #modes .md-free{background:rgba(var(--green-rgb),.12);color:var(--vert2);border:1px solid rgba(var(--green-rgb),.35)} body.tu-visit #modes .md-free,body.xp-on #modes .md-lk,body.tu-visit #modes .md-lk{display:none} #modes .md-t .tu-bdg{position:absolute;top:8px;right:8px;margin:0} #modes .md-t{flex:none;display:flex;flex-direction:column;gap:2px;padding:6px 12px 10px;min-width:0} #modes .md-t b{font:400 17px/1.15 var(--f-display);color:var(--fg)} #modes .md-t b span{font:inherit;color:inherit} #modes .md-t .md-tc{display:none} @media (max-width:379px){#modes .md-t .md-tl{display:none}#modes .md-t .md-tc{display:inline}#modes .md-t{padding-inline:10px}} #modes .md-t .md-s{font:400 12.5px/1.3 var(--f-ui);color:var(--mut)} /* les span ont 16 px au moins sur téléphone (règle globale) : le compteur passe à 13 px, comme la barre du bas, pour tenir sur une ligne */ #modes .md-t .md-n{font:600 13px/1.2 var(--f-ui);font-size:13px!important;color:var(--sel)} #modes .md-n:empty{display:none} @media (max-height:700px){#modes .md-t{padding:4px 10px 8px}#modes .md-t b{font-size:16px}#modes .md-t .md-s{font-size:12px;line-height:1.25}} @media (prefers-reduced-motion:reduce){#modes .md-card:active{transform:none}} /* 3.1.75 : bouton « ⚙ Mes lignes » dans l'en-tête de jeu (à la place de la roue seule) ; pastille au contour cuivré. Texte directement dans le bouton ; la taille est forcée ici parce que les boutons ont 16 px au moins sur téléphone (règle globale). */ body #thead #su-gear.su-lbl{width:auto;min-width:0;height:38px;padding:0 12px 0 10px;display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill); background:rgba(var(--sel-rgb),.12);box-shadow:inset 0 0 0 1.5px rgba(var(--sel-rgb),.7);color:var(--sel);font:700 15px/1.05 var(--f-ui);font-size:15px!important;white-space:nowrap;max-width:50%;overflow:hidden;text-overflow:ellipsis} body #thead #su-gear.su-lbl::before{position:static;inset:auto;width:18px;height:18px;flex:none} body #thead #su-gear.su-lbl[hidden]{display:none} body #thead #su-gear.su-lbl:focus-visible{outline:3px solid var(--fg);outline-offset:2px} /* 3.1.95 · Mon répertoire, échiquiers agrandis (choix A de Théo, 24/10) : 3 cartes par ligne, marges de la carte de camp et espaces réduits ; échiquier des titres de groupe à 42 % de la largeur (flèche à sa gauche, sous le titre) ; variantes en grille de 3 comme les cartes */ #repertoire .rp-camp{padding-left:8px;padding-right:8px} #pf-rep .rp-band,#pf-rep .rp-pc1{margin-left:-8px;margin-right:-8px;padding-left:12px;padding-right:12px} #pf-rep .rp-gg{gap:12px 6px} #pf-rep .rp-card>.rp-mini,#pf-rep .pf-sub .rp-s{border-radius:var(--r-xs)} #pf-rep .rp-gh{gap:8px;padding:10px 0!important} #pf-rep .rp-gt{order:1} #pf-rep .rp-chev{order:2;align-self:flex-end;margin-bottom:2px} #pf-rep .rp-gr .rp-g{order:3;width:42%;max-width:220px;height:auto;aspect-ratio:1;border-radius:var(--r-xs)} #pf-rep .rp-pan{padding:10px 8px 4px} #pf-rep .rp-pan .rp-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 6px} #pf-rep button.pf-sub{align-items:start;align-content:start;gap:0 6px;background:none!important} #pf-rep .pf-sub .rp-s{margin:0 0 6px} #pf-rep .pf-sub .ck{width:20px;height:20px;border-radius:6px;border-width:2px;margin-top:0} #pf-rep .pf-sub.on>.ck::after{width:5px;height:10px;border-width:0 2.5px 2.5px 0} #pf-rep .pf-sub.mid>.ck::after{width:9px} #pf-rep .pf-sub .pf-l{min-height:0;justify-content:flex-start;min-width:0} #pf-rep .pf-sub .pf-l b{font:600 13px/1.25 var(--f-ui);overflow-wrap:anywhere;hyphens:auto} #pf-rep .pf-sub.on>.rp-s{outline:3px solid var(--sel);outline-offset:-3px}