/* Styles de Fifou Training. Jetons de couleur, arrondis et polices repris de Fifou Openings 3.1.216 (style.css). */
: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;
  --cu-ink:#1d1107;
  --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}
@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")}
@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")}
html{color-scheme:dark;-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 var(--f-ui);overscroll-behavior-y:none;
  padding:max(20px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(16px,env(safe-area-inset-left))}
button{touch-action:manipulation;font:inherit}
.ecran[hidden]{display:none!important}

/* --- accueil --- */

.bouton{background:var(--sel);color:#1d1107;border:0;border-radius:var(--r-pill);padding:14px 28px;font-weight:600;cursor:pointer}
.bouton:disabled{opacity:.5;cursor:default}
.note{font-size:13px;color:var(--gris)}

/* --- 0.2.0 : composants repris de Fifou Openings 3.1.216 (style.css) : cartes de l'accueil, icônes, boutons --- */
.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")}
.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")}
.rp-tete{display:flex;gap:12px;align-items:center;margin:4px 0 14px}
.rp-tete img{width:56px;height:56px;flex:none}
.seg[hidden]{display:none}
.seg{display:flex;flex:none;border:2px solid var(--line);border-radius:var(--r-pill);overflow:hidden}
.seg button{min-height:44px!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}
.ft-select{width:100%;min-height:44px;padding:0 12px;border:2px solid var(--line);border-radius:12px;background:var(--tint);color:var(--fg);font:600 15px/1.2 var(--f-ui)}
.seg button[aria-pressed="true"]{background:var(--sel);color:var(--cu-ink)}
button{font:inherit;font-size:15px;padding:8px 14px;border-radius:var(--r-m);border:1px solid transparent;background:var(--tint);color:var(--fg);font-weight:600;cursor:pointer;min-height:44px}
button:disabled{opacity:.5;cursor:default}
button:focus-visible,input:focus-visible{outline:2px solid var(--sel);outline-offset:2px}
.sub{margin:0 0 14px;color:var(--mut);font-size:15px;max-width:70ch}

/* --- 0.2.0 : nouvelle partie et paramètres --- */
#nouvelle,#parametres{max-width:520px;margin:0 auto}
#nouvelle h2,#parametres h2{font:400 24px/1.2 var(--f-display);margin:0}
#nouvelle h3,#parametres h3{font-size:16px;margin:18px 0 8px}
.elo-l{display:flex;align-items:center;gap:12px}
.elo-l output{font:400 28px/1 var(--f-display);min-width:72px;text-align:center;color:var(--sel)}
.pm{width:44px;padding:0;font-size:22px}
#nv-curseur{width:100%;accent-color:var(--sel);margin-top:8px}
.seg button{flex:1}
.bas{display:flex;gap:12px;justify-content:space-between;margin-top:24px}
.bas .bouton{flex:1}

/* --- 0.2.0 : écran de partie (sans défilement à 360 × 640 ; l'échiquier n'est jamais réduit par un script) ---
   0.22.0 : disposition et mesures du jeu libre de Fifou Openings 3.1.281 (bandeaux .jlps, cadre .tframe, barre .grow, .bwrap) */
:root{--bw:min(100vw - 32px,100dvh - var(--navh) - 304px,560px)} /* 0.57.0 : barre du bas visible en partie, la tuile Conseil reste au-dessus */
@media (max-height:699px){#partie>:not(.tframe){width:min(100vw - 32px,560px)}} /* 0.57.0 : échiquier plus petit sous 700 px de haut, bandeaux, barre et bulle gardent toute la largeur */
@media (min-height:700px){:root{--bw:min(100vw - 12px,100dvh - var(--navh) - 330px,560px)}} /* 0.55.0 : sans liste des coups ni barre du bas, échiquier presque pleine largeur comme Openings (100vw − 12 px) */
#partie{display:flex;flex-direction:column;align-items:center}
#partie>*{width:max(200px,var(--bw))}
body.ec-partie{padding-top:max(8px,env(safe-area-inset-top));padding-bottom:var(--navh)}
.tframe{border-radius:var(--r-m);box-shadow:0 0 40px 10px rgba(var(--halo-rgb),.32)} /* 0.61.0 (Théo) : halo bleu fondu comme Openings 2.9.24 */
.bov{position:relative;border-radius:var(--r-m);box-shadow:0 0 0 1px rgba(var(--sel-rgb),.45),0 10px 24px rgba(0,0,0,.35)}
.bov svg{display:block;width:100%;min-width:0;height:auto;border-radius:var(--r-m);touch-action:none}
.coord{font:600 2.2px var(--f-ui);pointer-events:none}
.jlps{display:flex;align-items:center;gap:8px;height:34px;margin:0 0 6px}
.jlps.me{margin:6px 0 0}
.jlav{display:flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;border-radius:var(--r-s);background:var(--tint);overflow:hidden}
.jlav svg,.jlav img{display:block;width:26px;height:26px;min-width:0}
.jlnm{min-width:0;font:16px/1.1 var(--f-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jlnm b{font-weight:600}
.jlnm small{font:500 13px/1 var(--f-ui);color:var(--mut)} /* 0.61.0 : Elo de Fifou en petit, comme Openings */
.jltr{flex:none;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(var(--green-rgb),.25);visibility:hidden}
.jlps.tour .jltr{visibility:visible}
/* 0.61.0 : pièces prises (capsRow d'Openings) et +N, à gauche juste après le nom ; la pendule reste à droite */
.pt-caps{display:flex;align-items:center;gap:4px;flex:0 4 auto;min-width:0;overflow:hidden}
.pt-caps .cg{display:inline-flex;align-items:center;background:var(--sq-l,#ead9bf);border-radius:var(--r-s);padding:0 3px;height:20px}
.pt-caps img{width:18px;height:18px;display:block}.pt-caps .cg img+img{margin-left:-10px}
.pt-caps .cadv{font:600 13px/1 var(--f-ui);color:var(--mut)}
@media (max-width:380px){#partie .jlps{gap:6px}#partie .jlnm{font-size:14px}} /* 0.61.0 : nom, Elo et pièces prises tiennent sur une ligne à 360 px */
.pt-h{margin-left:auto;font:700 18px/1 var(--f-ui);font-variant-numeric:tabular-nums;padding:6px 10px;border-radius:var(--r-s);background:var(--sheet);border:1px solid var(--line);color:var(--mut)}
.pt-h.on{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.pt-h[hidden]{display:none}
:is(#partie,#defi) .grow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;height:52px;margin:6px 0 0;border-radius:var(--r-l);background:var(--sheet);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
:is(#partie,#defi) .grow button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:52px;min-height:52px;padding:0 4px;margin:0;border:0;border-radius:0;background:transparent;color:var(--fg);font:600 12px/1.1 var(--f-ui);text-align:center;box-shadow:inset 1px 0 0 var(--line)}
:is(#partie,#defi) .grow>button:first-child,:is(#partie,#defi) .grow>button[hidden]+.pt-nav{box-shadow:none}
:is(#partie,#defi) .grow button:disabled{opacity:.45;background:transparent;color:var(--mut)}
:is(#partie,#defi) .grow button:active:not(:disabled){background:var(--tint)}
:is(#partie,#defi) .grow button::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}
#pt-conseil{--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='M9 18h6M10 21h4M12 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'/%3E%3C/svg%3E")}
#pt-reprendre{--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='M9 14L4 9l5-5'/%3E%3Cpath d='M4 9h10.5a5.5 5.5 0 010 11H11'/%3E%3C/svg%3E")}
#pt-fin{--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")}
/* 0.61.0 : Nulle (½ dans un rond), Retour et Suivant (chevrons d'Openings) */
#pt-nulle{--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='12' cy='12' r='9'/%3E%3Cpath d='M8 10h8M8 14h8'/%3E%3C/svg%3E")}
#pt-prec{--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='M15 5l-7 7 7 7'/%3E%3C/svg%3E")}
#pt-suiv{--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='M9 5l7 7-7 7'/%3E%3C/svg%3E")}
.bwrap{display:flex;align-items:flex-start;gap:10px;margin:10px 0 4px}
.bwrap>.ffd{width:64px;height:77px;flex:none;margin-bottom:-2px} /* 0.61.0 : Fifou plus grand, bulle de taille fixe (pas de vide) */
#partie .bubble{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;height:84px;padding:8px 12px;border-radius:16px 16px 16px 8px;background:var(--sheet);border:1px solid rgba(var(--fg-rgb),.08);box-shadow:0 8px 20px rgba(0,0,0,.28);overflow:hidden}
#partie .bubble p{margin:0;font:500 16px/1.3 var(--f-ui)}
@media (max-width:380px){.bwrap{gap:6px;margin-top:8px}.bwrap>.ffd{width:48px;height:58px}#partie .bubble{height:88px;padding:4px 8px}}
.bubble{display:flex;gap:10px;align-items:center;min-height:60px;padding:6px 10px;border-radius:var(--r-l);background:var(--sheet)}
.bubble p{margin:0;font-size:16px;line-height:1.3}
/* 0.55.0 : Conseil en tuile à part, sous la bulle de Fifou (audit du design, Théo) */
#partie .pt-tuile{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;margin:8px 0 0;padding:0 12px;border-radius:var(--r-l);border:1px solid rgba(var(--sel-rgb),.45);background:rgba(var(--sel-rgb),.12);color:var(--sel);font:700 15px/1.1 var(--f-ui)}
#partie .pt-tuile[hidden]{display:none}
#partie .pt-tuile::before{content:"";display:block;flex:none;width:22px;height:22px;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
#partie .pt-tuile:disabled{opacity:.45;border-color:var(--line);background:var(--sheet);color:var(--mut)}
#partie .pt-tuile:active:not(:disabled){background:var(--tint)}
/* 0.61.0 (maquette A) : Conseil et Reprendre un coup en deux demi-tuiles sous la bulle ; seule, une tuile prend toute la largeur */
#partie .pt-aides{display:flex;gap:8px;margin:6px 0 0}#partie .pt-aides[hidden]{display:none}
#partie .pt-aides .pt-tuile{flex:1 1 0;min-width:0;height:48px;margin:0;padding:0 8px;font-size:14px;gap:6px;text-align:center}
#partie .pt-aides .pt-tuile::before{width:20px;height:20px}
#partie .pt-tuile2{border-color:var(--line);background:var(--sheet);color:var(--fg)}

/* --- 0.2.0 : fenêtres (promotion, menu de fin, fin de partie) --- */
.ft-fen{position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(var(--bg-rgb),.72)}
.ft-fen-c{width:min(100%,380px);padding:20px;border-radius:var(--r-xl);background:var(--sheet);border:1px solid var(--line);text-align:center;box-shadow:0 10px 32px rgba(0,0,0,.5)}
.ft-fen h3{font:400 22px/1.2 var(--f-display);margin:0 0 10px}
.ft-fen p{margin:0 0 10px;color:var(--mut)}
.ft-fen-ff{display:block;margin:0 auto 10px;border-radius:var(--r-l)}
.ft-menu{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.ft-promo{display:flex;gap:8px;justify-content:center}
.ft-promo button{width:64px;height:64px;padding:6px}
.ft-promo img{width:100%;height:100%}
.ft-finp.gagne h3{color:var(--green)}
.ft-finp.perdu h3{color:var(--red)}

/* --- 0.3.0 : bilan de fin de partie --- */
#bilan{max-width:520px;margin:0 auto;padding-bottom:24px}
#bilan h2{font:400 24px/1.2 var(--f-display);margin:0}
#bilan h3{font-size:16px;margin:18px 0 8px}
#bilan .rp-tete img{width:64px;height:64px;border-radius:var(--r-m)}
#bilan .rp-tete p{margin:2px 0 0}
.bi-tuiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bi-t{display:flex;flex-direction:column;align-items:center;padding:12px;border-radius:var(--r-l);background:var(--sheet)}
.bi-v{font:400 32px/1.1 var(--f-display);color:var(--sel)}
.bi-l{font-size:14px;color:var(--mut)}
.bi-phrase{font-size:17px;font-weight:600;margin:12px 0 4px}
.bi-bov{width:min(100%,320px);margin:12px auto 0}
.bi-m{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;margin-bottom:8px;font-weight:400;padding:10px}
.bi-m img{border-radius:var(--r-s);flex:none}
.bi-m[aria-pressed="true"]{outline:2px solid var(--sel);background:var(--tint);color:var(--fg)}
.bi-mt{display:block;font-weight:700;color:var(--sel)}
.bi-m b{color:var(--fg)}
.er-sec{margin:14px 0 6px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}

/* --- 0.5.0 : vitrine (barres : adversaire de Fifou en cuivre, ordinateur classique en gris) --- */
#vitrine{max-width:520px;margin:0 auto;padding-bottom:24px}
#vitrine h2{font:400 24px/1.2 var(--f-display);margin:0}
#vitrine .rp-tete img{border-radius:var(--r-m)}
.vi-graph{display:flex;flex-direction:column;gap:10px;margin:14px 0 6px}
.vi-l{display:grid;grid-template-columns:44px 1fr;gap:2px 8px;align-items:center}
.vi-c{grid-row:span 2;font-weight:700;color:var(--fg);font-variant-numeric:tabular-nums}
.vi-b{display:flex;align-items:center;gap:6px;height:16px}
.vi-bar{height:12px;border-radius:var(--r-xs);min-width:2px}
.vi-bar.a,.vi-k.a{background:var(--sel)}
.vi-bar.o,.vi-k.o{background:var(--gris)}
.vi-v{font-size:13px;color:var(--mut);font-variant-numeric:tabular-nums}
.vi-avenir{grid-column:2;font-size:14px;color:var(--gris);font-style:italic}
.vi-leg{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--mut);flex-wrap:wrap}
.vi-k{display:inline-block;width:12px;height:12px;border-radius:var(--r-xs);margin-left:6px}
.bi-ouv{padding:10px 12px;border-radius:var(--r-m);background:var(--sheet);font-size:15px}
.bi-ouv a{color:var(--cu2);font-weight:600}

/* --- 0.6.0 : position personnalisée et « Mes erreurs » --- */
#editeur,#erreurs{max-width:520px;margin:0 auto;padding-bottom:24px}
#editeur h2,#erreurs h2{font:400 24px/1.2 var(--f-display);margin:0}
/* 0.38.0 : maquette C (titre court, échiquier en grand, palette au pouce, carte « Les deux camps », FEN repliée, bulle + « Jouer » collés en bas) */
.ed-tete{display:flex;align-items:center;gap:10px;margin:0 0 8px}.ed-tete .ffd{width:38px;height:46px;flex:none}#editeur .ed-tete h2{font-size:22px}
#editeur .bi-bov{width:100%;max-width:440px;margin:0 auto 8px}
.ed-pal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin:0 0 8px}
.ed-pal button{height:46px;min-height:46px;padding:3px;border-radius:var(--r-m);border:1px solid var(--line);background:var(--tint);display:flex;align-items:center;justify-content:center}
.ed-pal img{width:36px;height:36px;max-width:100%;display:block}
.ed-pal button[aria-pressed="true"]{background:var(--sel);border-color:var(--sel)}
.ed-pal .ed-gomme{grid-column:7;grid-row:1/span 2;height:auto;font:600 20px/1 var(--f-ui);color:var(--mut)}
.ed-pal .ed-gomme[aria-pressed="true"]{color:var(--cu-ink,#1d1107)}
.ed-outils{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 0 12px}
.ed-outils button{min-height:44px;padding:0 6px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--tint);color:var(--fg);font:600 14px/1.1 var(--f-ui);display:flex;align-items:center;justify-content:center;gap:6px}
.ed-outils i{font-style:normal;color:var(--sel);font-size:16px}
/* 0.51.0 : trait en deux tuiles (mêmes que la couleur de « Prépare ta partie ») */
#editeur .ed-trait{margin:0 0 12px}
#editeur .ed-trait button{position:relative;min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:4px;border-radius:var(--r-m);border:1px solid var(--line);background:var(--bg);color:var(--fg);font:600 15px/1.1 var(--f-ui)}
#editeur .ed-trait button[aria-checked="true"]{border-color:var(--sel);background:var(--tint);color:var(--sel);box-shadow:inset 0 0 0 1px var(--sel)}
#editeur .ed-trait img{width:32px;height:32px}
.ed-bas{position:sticky;bottom:calc(var(--navh) + 6px);z-index:5;margin-top:8px;padding-top:10px;background:linear-gradient(180deg,rgba(15,23,41,0),var(--bg) 30%)}
.ed-bas .bouton{width:100%;min-height:52px;font-size:16px}
.ed-msg{display:flex;align-items:center;gap:8px;margin:0 0 6px}.ed-msg[hidden]{display:none}
.ed-msg .ffd{width:44px;height:53px;flex:none}
.ed-msg p{margin:0;flex:1;padding:10px 12px;border-radius:16px 16px 16px 6px;background:var(--sheet);border:1px solid rgba(var(--red-rgb),.55);font:500 15px/1.3 var(--f-ui)}
.ed-msg.ok p{border-color:rgba(var(--green-rgb),.5)}
#bi-rejouer-m{width:100%;margin-bottom:8px}
/* 0.7.0 : réglages d'apparence et échiquier vivant, repris d'Openings (style.css 3.1.216 : #settings, .popt, .sw, .pdot.dotin, .pchk-in) */
#parametres .pa-lab{margin:12px 0 6px;font:600 15px/1.2 var(--f-ui);color:var(--fg)}
#parametres .pcar{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding:2px 28px 12px 2px;margin:0 -2px;scrollbar-width:none;touch-action:pan-x pan-y;-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
#parametres .pcar::-webkit-scrollbar{display:none}
#parametres .pcar .popt{flex:0 0 76px;width:76px;scroll-snap-align:start;padding:5px;gap:4px}
#parametres .pcar .popt span{font-size:12px;line-height:1.15;text-align:center}
#parametres .pcar .pvsvg{max-width:64px}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.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 13px var(--f-ui)}
.popt span{font-size:13px;text-align:center}
.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:96px;height:auto;aspect-ratio:1;border-radius:var(--r-s);display:block;shape-rendering:crispEdges;min-width:0}
.pvsvg image{shape-rendering:auto}
.pa-seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:2px 0 4px}
.pa-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)}
.pa-seg button.on{background:var(--sel);border-color:var(--sel);color:var(--cu-ink)}
.swrow{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:52px;margin-top:8px}
.swrow label{flex:1;min-width:0;font:600 15px/1.2 var(--f-ui);cursor:pointer}
.sw{width:52px;height:32px;min-height:32px;border-radius:var(--r-pill);border:0;background:#2b3651;position:relative;padding:0;flex:none}
.sw i{position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;background:var(--mut);transition:transform .15s}
.sw.on{background:var(--sel)}.sw.on i{transform:translateX(20px);background:var(--cu-ink)}
.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}}
/* 0.8.0 : garde-fou (bouton « Jouer quand même ») et sous-texte des interrupteurs */
.pt-garde{width:100%;margin-top:8px;background:var(--bad);color:var(--fg);border:1.5px solid var(--red)}
.swrow label .note{display:block;margin-top:2px;font-weight:400;font-size:13px}

/* --- 0.11.0 : premier lancement, prochaine étape --- */

/* --- 0.13.0 : mes progrès --- */
#progres{max-width:520px;margin:0 auto;padding-bottom:24px}
#progres h2{font:400 24px/1.2 var(--f-display);margin:0}
#progres h3{font-size:16px;margin:18px 0 8px}

/* --- 0.15.0 : défi du jour --- */
#defi h2{font:400 24px/1.2 var(--f-display);margin:0}
#bi-lecon{width:100%;margin-top:8px}
/* 0.17.0 : liens « À propos » des Paramètres (licences, confidentialité) */
.pa-liens{display:flex;flex-direction:column;gap:8px;margin:6px 0 12px}
.pa-liens a{display:flex;align-items:center;min-height:48px;padding:0 16px;border-radius:var(--r-m);background:var(--sheet);border:1px solid var(--line);color:var(--fg);text-decoration:none;font-weight:600}

.bi-t[hidden]{display:none}
.bi-tuiles:has(.bi-t[hidden]){grid-template-columns:1fr}
/* Zones tactiles d'au moins 44 px (0.17.0, audit C2) : l'interrupteur garde son dessin, sa zone touchable déborde */
.sw::after{content:'';position:absolute;inset:-6px -4px}
input[type=range]{width:100%;min-height:44px;margin:0;accent-color:var(--sel);cursor:pointer}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg[role=application]:focus{outline:none}svg[role=application]:focus-visible{outline:3px solid var(--sel);outline-offset:2px}
.i-jouer{--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 5v14l11-7z%22/%3E%3C/svg%3E")}
.i-defi{--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 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9z%22/%3E%3C/svg%3E")}
.i-progres{--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 20V10M10 20V4M16 20v-7M22 20H2%22/%3E%3C/svg%3E")}
.i-erreurs{--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 1 0 3-6.7L3 8%22/%3E%3Cpath d=%22M3 3v5h5%22/%3E%3C/svg%3E")}
.i-pos{--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=%2218%22 height=%2218%22 rx=%222%22/%3E%3Cpath d=%22M3 9h18M3 15h18M9 3v18M15 3v18%22/%3E%3C/svg%3E")}
.i-vitrine{--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=%229%22 r=%226%22/%3E%3Cpath d=%22M8.5 14L7 22l5-3 5 3-1.5-8%22/%3E%3C/svg%3E")}
/* Accueil plus court (0.17.0, audit I7) : cartes plus serrées, les trois dernières en petites tuiles côte à côte */
/* Mots expliqués sur demande (0.17.0, audit C4) */
.aide{margin:12px 0;color:var(--mut);font-size:15px}.aide summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:600;color:var(--fg)}.aide p{margin:6px 0}

/* --- 0.19.0 : revoir la partie (maquette A) : sans défilement à 360 × 640 ; tiroirs du détail et des notes --- */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#revue{--rbw:min(100vw - 32px - var(--evw),100dvh - var(--navh) - 296px,560px);--evw:22px;display:flex;flex-direction:column;align-items:center;gap:8px}
body:has(#revue:not([hidden])){padding-top:max(8px,env(safe-area-inset-top));padding-bottom:var(--navh)}
#revue>.rv-tete,#rv-vue{width:max(240px,calc(var(--rbw) + var(--evw)))}
/* 0.42.0 : barre d'évaluation à côté de l'échiquier, camp du joueur en bas (A : fine à gauche, un chiffre ; B : large à droite, deux chiffres) */
.rv-plat{display:grid;grid-template-columns:calc(var(--evw) - 6px) 1fr;gap:6px}
.rv-eval{position:relative;overflow:hidden;border-radius:var(--r-s);background:#3b3836;box-shadow:0 0 0 1px var(--line)}
.rv-eval.rv-ev-n{background:#f1ede4}
.rv-eval>i{position:absolute;left:0;right:0;bottom:0;height:50%;background:#f1ede4;transition:height .45s cubic-bezier(.3,.7,.3,1)}
.rv-eval.rv-ev-n>i{background:#3b3836}
.rv-eval span{position:absolute;left:0;right:0;text-align:center;font:700 9px/1 var(--f-ui,inherit);font-variant-numeric:tabular-nums;letter-spacing:-.3px;white-space:nowrap}
.rv-eval-h{top:4px}.rv-eval-b{bottom:4px}
.rv-eval.rv-ev-w .rv-eval-h,.rv-eval.rv-ev-n .rv-eval-b{color:#f1ede4}
.rv-eval.rv-ev-w .rv-eval-b,.rv-eval.rv-ev-n .rv-eval-h{color:#3b3836}
#revue[data-barre="a"] .rv-eval[data-tete="b"] .rv-eval-h,#revue[data-barre="a"] .rv-eval[data-tete="h"] .rv-eval-b{visibility:hidden}
#revue[data-barre="a"] .rv-eval span{font-size:9px;writing-mode:vertical-rl;transform:rotate(180deg);top:auto;bottom:auto}
#revue[data-barre="a"] .rv-eval .rv-eval-h{top:4px}#revue[data-barre="a"] .rv-eval .rv-eval-b{bottom:4px}
#revue[data-barre="b"]{--evw:34px}
#revue[data-barre="b"] .rv-eval span{font-size:10px}
#revue[data-barre="b"] .rv-plat{grid-template-columns:1fr calc(var(--evw) - 6px)}
#revue[data-barre="b"] .rv-eval{order:2}
@media (prefers-reduced-motion:reduce){.rv-eval>i{transition:none}}
#rv-vue{display:flex;flex-direction:column;gap:6px}
/* 0.42.0 : sur les grands écrans (échiquier limité par la largeur), le bloc de la revue se centre dans la hauteur libre */
#revue{min-height:calc(100dvh - var(--navh) - 16px)}
#rv-vue{flex:1;justify-content:center}
#rv-vue[hidden]{display:none}
.rv-tete{display:flex;align-items:center;gap:8px;height:44px}
.rv-tete .retour{width:44px;padding:0;font-size:24px;line-height:1}
.rv-tete h2{flex:1;min-width:0;margin:0;font:400 19px/1.1 var(--f-display)}
/* 0.29.0 (audit des fonctions) : titre sur 2 lignes plutôt que coupé (« Revoir la par… » à 360 px) */
@media (max-width:380px){.rv-tete h2{font-size:17px}}
.rv-notes{display:flex;flex-direction:column;align-items:flex-end;gap:0;padding:2px 10px;line-height:1.1;background:var(--sheet)}
.rv-notes .note{font-size:11px}
.rv-notes b{font-size:15px;color:var(--sel);font-variant-numeric:tabular-nums}
.rv-graph{display:block;width:100%;height:36px;flex:1 1 36px;min-height:36px;max-height:132px;border-radius:var(--r-s);cursor:pointer}
.rv-pt{stroke:var(--bg);stroke-width:1.5}
.rv-graph{background:var(--sheet);box-shadow:inset 0 0 0 1px var(--line)}
/* 0.48.0 : Fifou à côté de sa bulle (jeu libre d'Openings), cadrés ensemble ; la bulle remplit la hauteur libre et reste un bouton (détail du coup).
   Hiérarchie : note du coup en gros, puis le coup et les chances, puis « touche pour le détail » */
#revue .rv-bw{min-height:104px;margin:4px 0 0;gap:8px;align-items:stretch}
#revue .rv-bw>.ffd{align-self:flex-end;width:76px;height:91px;flex:none}
.rv-bulle{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;height:auto;min-height:0;padding:10px 14px;border-radius:18px 18px 18px 6px;background:var(--sheet);border:1px solid rgba(var(--fg-rgb),.08);box-shadow:0 8px 20px rgba(0,0,0,.28);overflow:hidden;text-align:left;font-weight:400;color:var(--fg)}
.rv-bulle>span{display:flex;flex-direction:column;gap:3px}
.rv-bulle .rv-l1{display:flex;align-items:center;gap:6px;font:700 19px/1.2 var(--f-ui)}
.rv-bulle .rv-l1 .rv-dot{flex:none}
.rv-bulle .rv-l2{display:flex;flex-wrap:wrap;column-gap:10px;font:500 15px/1.3 var(--f-ui);color:var(--fg);opacity:.85}
.rv-bulle .rv-l2 b{font-weight:700}
.rv-nw{white-space:nowrap}
.rv-l3{display:block;font:600 12.5px/1.2 var(--f-ui);color:var(--sel);text-align:right}
.rv-l3:empty{display:none}
@media (max-width:380px){#revue .rv-bw{min-height:92px;gap:6px}#revue .rv-bw>.ffd{width:56px;height:67px}.rv-bulle{padding:8px 12px}.rv-bulle .rv-l1{font-size:16px}.rv-bulle .rv-l2{font-size:13px}}
.rv-bulle:disabled{opacity:1;cursor:default}
.rv-l1{display:block;font-size:15px;font-weight:700;line-height:1.25}
.rv-l2{display:block;font-size:13px;color:var(--mut);line-height:1.3;font-weight:400}
/* 0.48.0 : une tuile longue comme la barre .grow de la partie : ◀ | action | ▶ */
.rv-nav{display:grid;grid-template-columns:64px 1fr 64px;height:52px;margin-top:4px;border-radius:var(--r-l);background:var(--sheet);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.rv-nav>button{height:52px;min-height:52px;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:var(--fg);font:600 18px/1 var(--f-ui);box-shadow:none}
.rv-nav>button:disabled{color:var(--mut);opacity:.45}
.rv-nav>button:active:not(:disabled){background:var(--tint)}
/* 0.49.0 : l'action est un bouton arrondi posé dans la tuile (marge, icône), plus un bloc collé aux bords */
.rv-nav>.bouton{display:flex;align-items:center;justify-content:center;gap:8px;height:40px;min-height:40px;margin:6px 0;padding:0 14px;border-radius:var(--r-pill);font:700 15.5px/1.1 var(--f-ui);color:#1d1107;background:var(--sel);box-shadow:0 2px 0 rgba(0,0,0,.25)}
.rv-nav>.bouton::before{content:"";flex:none;width:18px;height:18px;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.rv-nav>.bouton[data-a="rejouer"]{--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='M3 12a9 9 0 109-9 9.7 9.7 0 00-6.7 2.8L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E")}
.rv-nav>.bouton[data-a="suivante"]{--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='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.rv-nav>.bouton:disabled{color:var(--mut);background:transparent;box-shadow:inset 0 0 0 1px var(--line);opacity:.7}
.rv-nav>.bouton:active:not(:disabled){background:var(--cu2,var(--sel));transform:translateY(1px);box-shadow:none}
.rv-dot{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 3px;border-radius:var(--r-pill);font:700 11px/1 var(--f-ui);color:var(--pst);background:var(--gris);vertical-align:middle}
.rv-book{background:var(--blue);fill:var(--blue)}
.rv-fort{background:var(--cu2);fill:var(--cu2)}
/* 0.28.0 : couleurs des notes d'Openings (RCOL) */
.rv-best{background:#1f9d55;fill:#1f9d55}.rv-excellent{background:#7cc44f;fill:#7cc44f}.rv-good{background:#7f9c8e;fill:#7f9c8e}
.rv-inacc{background:#f0b429;fill:#f0b429}
.rv-miss,.rv-mistake{background:#f08c2e;fill:#f08c2e}
.rv-blunder{background:#e0474c;fill:#e0474c}
.rv-dot.rv-sm{background:none;padding:0;min-width:22px}.rv-dot.rv-sm .sm{width:22px;height:22px;display:block}
.rv-autre{background:var(--gris);fill:var(--gris)}
.rv-badge text{fill:var(--pst)}
#rv-tout{width:100%;margin-top:4px}
.rv-voile{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:120}
.rv-tiroir{position:fixed;left:0;right:0;bottom:0;z-index:121;max-height:88dvh;overflow:auto;background:var(--sheet);border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.45);
  padding:12px max(16px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:8px}
.rv-tiroir[hidden]{display:none}
.rv-tiroir>*{width:100%;max-width:560px;margin-left:auto;margin-right:auto}
.rv-tiroir h3{margin:2px auto 0;font:400 17px/1.2 var(--f-display);color:var(--cu2)}
.rv-tiroir .bubble{background:var(--bg)}
.rv-tiroir .bubble p{font-size:15px}
.rv-crans{display:flex}
.rv-crans button{flex:1;min-width:0;font-variant-numeric:tabular-nums}
.rv-mv{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;font-size:14px;margin:2px 0}
.rv-mv-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.rv-bar{display:block;height:8px;border-radius:4px;background:var(--grid);overflow:hidden}
.rv-bar i{display:block;height:100%;border-radius:4px}
.rv-mot{font-size:13px;color:var(--mut);text-align:right;min-width:84px}
.rv-trouve{margin:4px auto 0;font-size:14px;font-weight:600}
.rv-trouve:empty{display:none}
.rv-fermer{margin-top:4px}
.rv-table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.rv-table th,.rv-table td{padding:5px 6px;white-space:nowrap;text-align:right;border-bottom:1px solid var(--line)}
.rv-table th:first-child,.rv-table td:first-child{text-align:left;white-space:normal}
.rv-table th{color:var(--mut);font-weight:600;font-size:13px}
.rv-tp td{font-weight:700;color:var(--sel)}

/* --- 0.22.0 : charte d'Openings (commun/charte.css) : adaptations de Training --- */
body{padding-bottom:calc(var(--navh) + 12px)}
body.ec-accueil{padding-top:0;padding-bottom:0}
#accueil .home-card{position:relative}
.hc-n{position:absolute;top:6px;right:8px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--sel);color:var(--cu-ink);font:700 13px/22px var(--f-ui);text-align:center}
.hc-n[hidden]{display:none}
/* Fifou dessiné à la place des photos (0.22.0) : span.ffd (commun/fifou.js, data-ff) */
.ffd{display:block;flex:none;width:56px;height:67px}
.ffd svg{display:block;width:100%;height:100%;min-width:0}
.rp-tete .ffd{overflow:hidden;width:60px;height:60px;border-radius:var(--r-b);background:var(--tint);box-shadow:inset 0 0 0 1px var(--line)}
#bilan .rp-tete .ffd{width:68px;height:68px}
.bi-m .ffd{width:42px;height:42px;border-radius:var(--r-s);background:var(--tint)}
.rv-bulle .ffd{width:44px;height:52px}
#partie .bubble p{text-align:left}
/* 0.22.1 : Mes progrès, Mes erreurs, Défi du jour et bilan rangés comme les pages d'Openings (cartes .tcard, titres en Fraunces,
   pas de bouton Retour sur les écrans de la barre du bas, action principale à portée du pouce) */
.ecran .tcard .note{font-size:14px}
.ecran .tcard h3{font:400 20px/1.2 var(--f-display);margin:0 0 10px;color:var(--fg)}
.ecran .tcard p{margin:0 0 10px}
.ecran .tcard>:last-child{margin-bottom:0}
#progres h2,#erreurs h2,#bilan h2{font:400 28px/1.15 var(--f-display)}
#progres>.bas,#erreurs .retour{display:none}
.bi-m{background:var(--sheet);border:1px solid var(--edge);box-shadow:var(--lift);border-radius:var(--r-m);padding:12px;margin-bottom:10px}
.bi-m .ffd{width:48px;height:48px}
#er-liste>.note{background:var(--sheet);border:1px solid var(--edge);border-radius:var(--r-m);padding:14px 16px;font-size:15px;color:var(--fg)}
#erreurs .bas{position:sticky;bottom:calc(var(--navh) + 8px);margin-top:16px}
#er-go{min-height:56px;font-size:17px;box-shadow:0 4px 0 rgba(0,0,0,.25)}
/* 0.58.0 : défi du jour peaufiné (demande de Théo, REGLES §18) : même disposition, mais la barre .grow et la bulle .bwrap de la partie,
   en-tête aligné sur le calendrier, échiquier plus grand et bloc centré dans la hauteur (pas de trou sur grand écran) */
#defi{--dbw:min(100vw - 32px,100dvh - var(--navh) - 246px,560px);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;box-sizing:border-box;min-height:calc(100dvh - var(--navh) - 12px - max(10px,env(safe-area-inset-top)));padding-bottom:0}
@media (min-height:700px){#defi{--dbw:min(100vw - 12px,100dvh - var(--navh) - 290px,560px);gap:12px}}
body:has(#defi:not([hidden])){padding-top:max(10px,env(safe-area-inset-top))}
#defi>*{width:var(--dbw);flex:none}
#defi .grow{margin:0}
#defi>[hidden]{display:none!important}
#defi .coord{font-size:2.7px;font-weight:700}
/* en-tête : le titre en haut du calendrier, les pastilles en bas, bords alignés */
.df-tete{display:flex;align-items:stretch;gap:12px}
.df-cal{width:52px;height:56px;flex:none;border-radius:var(--r-m);background:var(--sheet);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;overflow:hidden}
.df-cal[hidden]{display:none}
.df-cal small{width:100%;text-align:center;background:var(--sel);color:#1d1107;font:800 12px/18px var(--f-ui);letter-spacing:.03em}
.df-cal b{flex:1;display:flex;align-items:center;font:400 26px/1 var(--f-display);color:var(--fg)}
.df-mid{min-width:0;flex:1;display:flex;flex-direction:column;justify-content:space-between}
#defi .df-mid h2{font:400 24px/26px var(--f-display);margin:-1px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#df-sous{margin:4px 0 0;font-size:14px}
.df-puces{display:flex;gap:6px;flex-wrap:wrap}.df-puces:empty{display:none}
.df-serie,.df-theme,.df-puce{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:var(--r-pill);font:600 13px/1 var(--f-ui);white-space:nowrap;background:var(--tint);color:var(--fg);border:1px solid var(--line)}
.df-serie[hidden],.df-theme[hidden]{display:none}
.df-serie{background:rgba(var(--sel-rgb),.16);color:var(--sel);border-color:transparent;font-weight:700}
.df-serie::before,.df-theme::before{content:"";flex:none;width:12px;height:14px;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.df-serie{--ico:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2c1 3.5 5 5.5 5 10.5a5 5 0 0 1-10 0c0-2.2 1-3.6 2.2-4.8.2 1.6 1 2.6 2 3C10.6 8 11.2 5 12 2z"/></svg>')}
.df-theme{--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%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 018 0v3'/%3E%3C/svg%3E");color:var(--cu2);background:rgba(var(--sel-rgb),.08);border:1px dashed rgba(var(--sel-rgb),.55)}
.df-theme.vu,.df-puce.th{color:var(--green);background:rgba(var(--green-rgb),.16);border:1px solid rgba(var(--green-rgb),.35)}
.df-theme.vu::before{display:none}
/* barre : celle de la partie (.grow, .pt-nav) ; Indice « k/3 », Réessayer cuivré quand il sert, ▶ cuivré sur une position passée */
#df-indice{--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='M9 18h6M10 21h4M12 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'/%3E%3C/svg%3E")}
#df-reessayer{--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='M3 12a9 9 0 109-9 9.7 9.7 0 00-6.7 2.8L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E")}
#defi .grow #df-indice.on,#defi .grow #df-apres.on{color:var(--sel)}
#defi .grow #df-reessayer.on{color:var(--sel);background:var(--tint);font-weight:700}
#df-indice-l{font-variant-numeric:tabular-nums}
.df-fin{justify-content:center;align-items:center;min-height:52px}
/* Fifou et sa bulle : .bwrap de la partie, Fifou plus grand, pointe vers lui */
#defi .bwrap{margin:0;align-items:flex-start;min-height:100px}/* hauteur réservée : rien ne bouge d'un état à l'autre */
#defi .bwrap>.ffd{width:60px;height:72px;margin:0}
#defi .bubble{position:relative;gap:0;flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:84px;padding:8px 12px;border-radius:16px;background:var(--sheet);border:1px solid rgba(var(--fg-rgb),.08);box-shadow:0 8px 20px rgba(0,0,0,.28)}
#defi .bubble::before{content:"";position:absolute;left:-7px;top:26px;width:12px;height:12px;background:var(--sheet);border-left:1px solid rgba(var(--fg-rgb),.08);border-bottom:1px solid rgba(var(--fg-rgb),.08);transform:rotate(45deg)}
#defi .bubble p{margin:0;font:500 16px/1.3 var(--f-ui)}
.df-tag{display:inline-block;margin-bottom:4px;padding:3px 8px;border-radius:var(--r-pill);background:rgba(var(--sel-rgb),.18);color:var(--sel);font:700 12px/1 var(--f-ui);text-transform:uppercase;letter-spacing:.04em}
.df-tag[hidden]{display:none}.df-tag.ok{background:rgba(var(--green-rgb),.18);color:var(--green)}.df-tag.ko{background:rgba(var(--red-rgb),.18);color:var(--red)}
#defi .bubble .df-sm{margin-top:4px;font:500 14px/1.25 var(--f-ui);color:var(--mut)}
#defi .bubble .df-sm[hidden]{display:none}
#df-suivant{min-height:56px}
@media (min-height:740px){.df-cal{width:56px;height:64px}.df-cal b{font-size:28px}#defi .df-mid h2{font-size:27px;line-height:32px}
  #defi .bwrap{min-height:132px}#defi .bwrap>.ffd{width:80px;height:96px}#defi .bubble{min-height:96px;padding:12px 16px}#defi .bubble::before{top:36px}#defi .bubble p{font-size:17px}#defi .bubble .df-sm{font-size:15px}
  .df-serie,.df-theme,.df-puce{font-size:14px;height:28px;padding:0 12px}}
.bi-t{border:1px solid var(--edge);box-shadow:var(--lift)}
#bilan .ft-menu .bas{margin-top:8px}
#bi-revue,#bi-revanche{min-height:52px;width:100%}
#progres .tcard,#bilan .tcard{margin:0 0 12px}

/* 0.22.3 : un Fifou par carte de l'accueil (commun/fifous-cartes.js) ; la scène reste dans sa tuile, actions à l'appui (.go) */
.hff .fcs{overflow:hidden;border-radius:var(--r-b)}
/* classee : Médaille d’or */.fs-cmed{transform-origin:176px 100px;animation:fc-swing 4s ease-in-out infinite} .fs-cmdf{transform-origin:178px 162px} .fs-cgl{animation:fc-glint 4s ease-in-out infinite} .go .fs-cmdf{animation:fc-flip .9s ease-in-out} /* entrainement : Haltère */.fs-ccurl{transform-origin:164px 172px;animation:fc-curl 3.4s ease-in-out infinite} .fs-cdrop{animation:fc-drop 3.4s ease-in infinite} .go .fs-ccurl{animation:fc-curl .55s ease-in-out 2} /* defi : Page du jour */.fs-cst2{transform-origin:175px 144px;animation:fc-tw 3.2s ease-in-out infinite} .fs-cok{transform-origin:206px 170px;transform:scale(0)} .go .fs-cok{animation:fc-stamp .9s cubic-bezier(.3,1.6,.5,1) forwards} /* erreurs : Pansement sur le pion */.fs-cpw{transform-origin:186px 212px;animation:fc-wob 3.6s ease-in-out infinite} .fs-cfx path{transform-box:fill-box;transform-origin:50% 50%;transform:scale(0)} .go .fs-cfx path{animation:fc-stamp .7s ease-out forwards} .go .fs-cfx .fs-cs2{animation-delay:.12s} /* progres : Courbe qui monte */.fs-cln path{stroke-dasharray:70;stroke-dashoffset:0} .fs-cup{transform-origin:200px 114px;animation:fc-nudge 2.8s ease-in-out infinite} .go .fs-cln path{animation:fc-draw2 .8s ease-out} .go .fs-cup{animation:fc-fade .8s ease-out} /* parametres : Rouage et clé */.fs-cgr{transform-origin:172px 150px;animation:fc-rot 14s linear infinite} .go .fs-cgr{animation:fc-rot2 .8s cubic-bezier(.3,1.3,.5,1)} /* position : Planchette et crayon */.fs-cpc{transform-origin:200px 186px;animation:fc-write 2.6s ease-in-out infinite} .go .fs-cpc{animation:fc-write .35s ease-in-out 3} /* vitrine : Miroir */.fs-cgl2{animation:fc-glint2 4.2s ease-in-out infinite} .go .fs-cgl2{animation:fc-glint2 .9s ease-in-out} @keyframes fc-curl{0%,60%,100%{transform:rotate(0)}75%{transform:rotate(-14deg)}}
@keyframes fc-draw2{0%{stroke-dashoffset:70}100%{stroke-dashoffset:0}}
@keyframes fc-drop{0%,55%{transform:translateY(0);opacity:1}90%{transform:translateY(14px);opacity:0}100%{opacity:0}}
@keyframes fc-fade{0%,70%{opacity:0}100%{opacity:1}}
@keyframes fc-flip{0%{transform:scaleX(1)}25%{transform:scaleX(0)}50%{transform:scaleX(-1)}75%{transform:scaleX(0)}100%{transform:scaleX(1)}}
@keyframes fc-glint{0%,55%{transform:translateX(-40px)}85%,100%{transform:translateX(44px)}}
@keyframes fc-glint2{0%,55%{transform:translateX(-46px)}85%,100%{transform:translateX(46px)}}
@keyframes fc-nudge{0%,100%{transform:translate(0,0)}50%{transform:translate(2px,-3px)}}
@keyframes fc-rot{to{transform:rotate(360deg)}}
@keyframes fc-rot2{from{transform:rotate(0)}to{transform:rotate(120deg)}}
@keyframes fc-stamp{0%{transform:scale(0)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes fc-swing{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes fc-tw{0%,70%,100%{transform:scale(1) rotate(0)}85%{transform:scale(1.18) rotate(18deg)}}
@keyframes fc-wob{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-4deg)}88%{transform:rotate(3deg)}}
@keyframes fc-write{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(-3px,1px) rotate(-3deg)}50%{transform:translate(1px,-1px)}75%{transform:translate(-2px,2px) rotate(2deg)}}
/* --- 0.23.0 : « Prépare ta partie » (#nouvelle), comme « Prépare ton entraînement » et le jeu libre d'Openings : cartes, un Fifou par choix, « ★ Recommandé », Jouer au pouce --- */

#nouvelle h3{margin:0 0 8px;font:600 13px/1.2 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
#nouvelle .tcard h3+*{margin-top:0}
#nouvelle .pp-c,#classe .pp-c{margin:0 0 10px;padding:12px 14px;border-radius:var(--r-l)}
#nouvelle .pp-c>h3:not(:first-child),#classe .pp-c>h3:not(:first-child){margin-top:12px}
.pp-top{display:flex;align-items:center;gap:10px;margin:0 0 4px}
.pp-top .su-h{flex:1;margin:0}
.pp-back{flex:none;width:44px;height:44px;min-height:44px;padding:0;border-radius:var(--r-m);border:0;background:var(--tint);color:var(--fg);position:relative}
.pp-back::before{content:"";position:absolute;left:18px;top:16px;width:10px;height:10px;border-left:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg)}
.pp-ff{width:44px;height:52px;flex:none}
.pp-ff svg,.pp-f svg{width:100%;height:100%;display:block}
.pp-sec{font:400 20px/1.2 var(--f-display);margin:12px 2px 8px;color:var(--fg)}
.pp-dit{display:block;margin:6px 0 0;font:400 13.5px/1.35 var(--f-ui);color:var(--mut)}
/* tuiles illustrées (jlr-adv d'Openings) */
.pp-adv{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#nouvelle .pp-adv button,#classe .pp-adv button{position:relative;display:flex;align-items:center;gap:4px;min-height:64px;padding:6px 8px 6px 2px;border-radius:var(--r-m);border:1px solid var(--line);background:var(--bg);color:var(--fg);text-align:left;font:600 14.5px/1.15 var(--f-ui)}
#nouvelle .pp-adv button.on,#classe .pp-adv button.on{border-color:var(--sel);background:var(--tint);color:var(--sel);box-shadow:0 0 0 1px var(--sel) inset}
.pp-f{width:44px;height:52px;flex:none;display:block}
.pp-rb{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);padding:0 6px;background:var(--sheet);font:700 10px/13px var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--sel);white-space:nowrap;pointer-events:none}
/* segments (camps avec les rois, comme Openings ; nombres) */
.pp-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pp-seg.pp-n4{grid-template-columns:repeat(4,1fr);margin-top:8px}
.pp-seg.pp-n2{grid-template-columns:1fr 1fr;margin-top:8px}
#nouvelle .pp-seg button,#classe .pp-seg button{position:relative;min-height:46px;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)}
#nouvelle #nv-couleur button{min-height:60px}
#nouvelle .pp-seg button.on,#classe .pp-seg button.on{border-color:var(--sel);background:var(--tint);color:var(--sel)}
.pp-seg img{width:28px;height:28px;display:block}
.pp-2{display:flex}.pp-2 img+img{margin-left:-8px}
/* cadence en curseur : le Fifou et la phrase changent à chaque cran */
.pp-ouv{display:flex;align-items:center;gap:6px}
.pp-ouv .pp-f{width:40px;height:48px}
/* aides : un Fifou, un titre, une phrase ; interrupteur à droite */
.pp-row{display:flex;align-items:center;gap:8px}
.pp-row>div{flex:1;min-width:0}
.pp-row b{font:600 15px/1.25 var(--f-ui)}
.pp-row .pp-f{width:40px;height:48px}
.pp-sw{padding:10px 0 0;margin-top:10px;border-top:1px solid var(--line)}
.pp-rec{display:inline-block;vertical-align:1px;font:700 9.5px/1 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--sel);border:1px solid rgba(var(--sel-rgb),.5);border-radius:var(--r-pill);padding:3px 6px}
/* Jouer au pouce, au-dessus de la barre du bas */
.pp-bas{position:sticky;bottom:calc(var(--navh) + 6px);z-index:5;margin-top:12px;padding-top:10px;background:linear-gradient(180deg,rgba(15,23,41,0),var(--bg) 30%)}
#nouvelle .pp-go,#ouvertures .pp-go,#classe .pp-go{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),0 12px 26px -8px rgba(var(--sel-rgb),.55);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.pp-go small{font:600 12px var(--f-ui);opacity:.8}
.pp-go:active{transform:translateY(2px);box-shadow:0 2px 0 var(--cu3)}
/* Fifou des réglages : la taille vient de son cadre (la charte donne 68 px aux Fifou sur téléphone) */
.pp-f .bishop,.pp-ff .bishop{display:block;flex:none!important;width:100%!important;max-width:100%!important;height:100%;min-width:0}
/* ouverture : 3 tuiles (mon répertoire, libre, personnaliser), Fifou au-dessus du nom */
.pp-adv.pp-3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* 0.26.0 : tuiles d'ouverture et de cadence toutes de la même taille, quel que soit le nom (2 lignes au plus) ; la taille du nom est fixée sur le span */
#nouvelle .pp-3 button,#nouvelle .pp-4 button,#classe .pp-3 button{flex-direction:column;justify-content:center;gap:2px;height:108px;min-height:108px;padding:8px 2px;text-align:center;font-size:13px;letter-spacing:-.01em}
#nouvelle .pp-3 button>span:last-child,#nouvelle .pp-4 button>span:last-child,#classe .pp-3 button>span:last-child{display:flex;align-items:center;justify-content:center;height:2.3em;max-width:100%;font-size:inherit!important;line-height:1.15}
#nouvelle .pp-3 .pp-f,#classe .pp-3 .pp-f{width:44px;height:52px}
.pp-adv.pp-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
#nouvelle .pp-4 button{height:92px;min-height:92px;padding:6px 2px}
#nouvelle .pp-4 .pp-f{width:38px;height:46px}
/* 0.26.0 : couleur en tête, sans cadre ; en-tête de l'Elo avec un petit Fifou en entier */
#nouvelle .pp-coul,#classe .pp-coul{margin:6px 0 12px}
#nouvelle .pp-coul button,#classe .pp-coul button{min-height:60px}
.pp-h{display:flex;align-items:center;gap:8px}.pp-h h3{flex:1;margin:0}
.pp-h .pp-f{width:30px;height:36px}
#nouvelle .curseur{margin-top:2px}
#nouvelle .pp-3 button.off:not(.on){opacity:.55}
#nouvelle .pp-lien{display:block;width:100%;margin-top:8px;min-height:44px;border-radius:var(--r-m);border:1px solid var(--sel);background:transparent;color:var(--sel);font:700 15px var(--f-ui)}
/* « Mes ouvertures » (#ouvertures) : 0.47.0, règles de Mon répertoire d'Openings 3.1.284 (style.css, .rp-* sous #pf-rep) recopiées sous #ov-liste ;
   écarts : flèche retour dans l'en-tête, carte entière et case de 44 px d'appui au moins, pas de variantes */
#ouvertures{max-width:520px;margin:0 auto}
#ouvertures .ov-tete{align-items:flex-start;margin:0 0 12px}
#ouvertures .ov-tete .pp-ff{width:52px;height:60px}
#ouvertures .ov-tete>div{flex:1;min-width:0}
#ouvertures .ov-tete .su-h{margin:0 0 4px}
#ouvertures .ov-tete .su-p{margin:0;font:400 14px/1.35 var(--f-ui);color:var(--mut)}
#ouvertures .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}
#ouvertures .on>.ck,#ouvertures .mid>.ck{background:var(--sel);border-color:var(--sel)}
#ouvertures .on>.ck::after{content:"";width:7px;height:13px;border:solid var(--cu-ink);border-width:0 3px 3px 0;transform:translateY(-2px) rotate(45deg)}
#ouvertures .mid>.ck::after{content:"";width:12px;height:3px;background:var(--cu-ink);border-radius:2px}
#ouvertures .rp-cherche{width:min(80%,320px);margin:0 auto 10px}
#ouvertures .rp-cherche input{box-sizing:border-box;width:100%;min-height:44px;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)}
#ouvertures .rp-cherche input::placeholder{color:var(--mut)}
#ouvertures .rp-cherche input:focus-visible{outline:3px solid var(--sel);outline-offset:1px}
#ouvertures .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}
#ouvertures .rp-barre.colle{box-shadow:0 1px 0 var(--line),0 6px 12px -6px rgba(0,0,0,.55)}
#ouvertures .rp-barre.colle .rp-tabs{margin-bottom:8px}
#ouvertures .rp-barre.colle .rp-tabs button{min-height:44px;padding:4px 2px}
#ouvertures .rp-barre.colle .rp-tabs button small{display:none}
#ouvertures .rp-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 0 12px;border-bottom:1px solid var(--line)}
#ouvertures .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;border-bottom:3px solid transparent;border-radius:0;background:none;color:var(--mut);font:600 15px/1.1 var(--f-ui)}
#ouvertures .rp-tabs button small{font:500 12px/1 var(--f-ui);color:var(--mut);opacity:.8;white-space:nowrap}
#ouvertures .rp-tabs button.on{color:var(--cu2);border-bottom-color:var(--sel)}
#ouvertures .rp-tabs button:focus-visible{outline:3px solid var(--sel);outline-offset:-3px}
#ouvertures .rp-tl{display:flex;align-items:center;gap:6px}
#ouvertures .rp-ti,#ouvertures .rp-ti img{display:block;width:22px;height:22px;min-width:0;flex:none}
#ouvertures .rp-rien{margin:8px 4px;color:var(--mut);text-align:center}
#ov-liste .tcard{margin-bottom:12px;border:1px solid var(--edge);box-shadow:var(--lift);background-image:linear-gradient(180deg,rgba(255,255,255,.025),transparent 40%)}
#ov-liste .rp-camp{padding-left:8px;padding-right:8px}
#ov-liste .rp-camp[hidden],#ov-liste .rp-pan[hidden],#ov-liste .rp-out{display:none!important}
#ov-liste .rp-band{display:flex;align-items:center;gap:10px;margin:-14px -8px 4px;padding:10px 12px;border-bottom:1px solid var(--line);border-radius:var(--r-m) var(--r-m) 0 0;background:var(--tint)}
#ov-liste .rp-bk,#ov-liste .rp-bk img{display:block;width:34px;height:34px;min-width:0;flex:none}
#ov-liste .rp-bk img{filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
#ov-liste .rp-band b{font:600 19px/1.15 var(--f-display);color:var(--fg)}
#ov-liste .rp-bn{margin-left:auto;font:600 13px/1 var(--f-ui);color:var(--mut);white-space:nowrap}
#ov-liste .rp-pc1{display:flex;align-items:center;gap:12px;margin:14px -8px 0;padding:10px 12px;border-top:2px solid var(--sel);background:rgba(var(--sel-rgb),.10)}
#ov-liste .rp-band+.rp-pc1{margin-top:-4px}
#ov-liste .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);text-align:center;white-space:nowrap}
#ov-liste .rp-pc1>b{flex:1;min-width:0;font:600 18px/1.15 var(--f-display);color:var(--fg)}
#ov-liste .rp-pn{flex:none;font:700 15px/1 var(--f-ui);color:var(--cu2);white-space:nowrap}
#ov-liste .rp-gr{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)}
#ov-liste .rp-pc1+.rp-gr{margin-top:4px;border-top:0}
#ov-liste .rp-gh{display:flex;align-items:center;gap:8px;width:100%;min-height:56px;margin:0;padding:10px 0;border:0;border-radius:0;background:none;color:var(--fg);text-align:left;cursor:pointer}
#ov-liste .rp-gh:focus-visible{outline:3px solid var(--sel);outline-offset:2px}
#ov-liste .rp-gt{display:block;flex:1;min-width:0;order:1}
#ov-liste .rp-gn2{display:block;font:600 20px/1.2 var(--f-display);color:var(--fg)}
#ov-liste .rp-gc{display:block;margin-top:2px;font:600 14px/1.25 var(--f-ui);color:var(--cu2);letter-spacing:.02em}
#ov-liste .rp-gs{display:block;margin-top:3px;font:500 12px/1.3 var(--f-ui);color:var(--mut)}
#ov-liste .rp-chev{flex:none;order:2;align-self:flex-end;margin-bottom:2px;position:relative;width:30px;height:30px;border:1px solid var(--line);border-radius:50%;transition:transform .2s ease,background-color .2s}
#ov-liste .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)}
#ov-liste .rp-plie .rp-chev{transform:rotate(-90deg)}
#ov-liste .rp-gh[aria-expanded="true"] .rp-chev{background:var(--tint)}
#ov-liste .rp-plie .rp-gn2{color:var(--mut)}
#ov-liste .rp-gr .rp-g{order:3;flex:none;width:42%;max-width:220px;height:auto;aspect-ratio:1;margin:0;border-radius:var(--r-xs);overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.4)}
#ov-liste .rp-mini{display:block;background:var(--line)}
#ov-liste .rp-mini svg{display:block;width:100%;height:100%;min-width:0}
#ov-liste .rp-gg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row dense;gap:12px 6px;margin:6px 0 10px}
#ov-liste .rp-gg.rp-ferme{display:none}
#ov-liste .rp-gg.rp-in{animation:rp-in .22s ease-out}
#ov-liste .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){#ov-liste .rp-chev{transition:none}#ov-liste .rp-gg.rp-in,#ov-liste .rp-gg.rp-sort{animation:none}}
#ov-liste .rp-gg>.pf-ouv,#ov-liste .rp-gg>.rp-fam{display:contents}
#ov-liste .rp-card{display:flex;flex-direction:column;gap:3px;min-width:0;padding:0;border:0}
#ov-liste .rp-card>.rp-mini{width:100%;height:auto;max-width:none;aspect-ratio:1;margin:0 0 3px;border-radius:var(--r-xs);box-shadow:0 1px 4px rgba(0,0,0,.4);cursor:pointer;overflow:hidden}
#ov-liste .pf-ouv:has(>.rp-card .pf-oh.on)>.rp-card>.rp-mini,#ov-liste .rp-fam:has(>.rp-card .pf-oh.on)>.rp-card>.rp-mini{outline:3px solid var(--sel);outline-offset:-3px}
#ov-liste .rp-open>.rp-card>.rp-mini{box-shadow:0 0 0 2px var(--cu2),0 1px 4px rgba(0,0,0,.4)}
#ov-liste .rp-cn{display:flex;align-items:flex-start;gap:6px;width:100%;min-height:44px;padding:0;border:0;background:none;color:var(--fg);text-align:left}
#ov-liste .rp-cn .ck{width:20px;height:20px;border-radius:6px;border-width:2px;margin-top:0}
#ov-liste .rp-cn.on>.ck::after{width:5px;height:10px;border-width:0 2.5px 2.5px 0}
#ov-liste .rp-cn.mid>.ck::after{width:9px}
#ov-liste .rp-cn b{font:600 13px/1.25 var(--f-ui);color:var(--fg);min-width:0;overflow-wrap:anywhere;hyphens:auto}
#ov-liste .rp-fam .rp-cn b{font-weight:800}
#ov-liste .rp-vb{align-self:flex-start;max-width:100%;min-height:44px;margin:2px 0 0;padding:4px 10px;white-space:nowrap;border:1px solid var(--line);border-radius:var(--r-pill);background:none;color:var(--cu2);font:600 12px/1.1 var(--f-ui)}
#ov-liste .rp-vb::after{content:" ▾"}
#ov-liste .rp-vb[aria-expanded="true"]{background:var(--tint);border-color:var(--sel)}
#ov-liste .rp-vb[aria-expanded="true"]::after{content:" ▴"}
#ov-liste .rp-vb:focus-visible,#ov-liste .rp-cn:focus-visible{outline:3px solid var(--sel);outline-offset:2px}
#ov-liste .rp-pan{grid-column:1/-1;margin:-4px 0 2px;padding:10px 8px 4px;border:1px solid var(--line);border-top:2px solid var(--sel);border-radius:var(--r-s);background:var(--tint);min-width:0}
#ov-liste .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)}
#ov-liste .rp-ph b{font:700 16px/1.25 var(--f-ui);color:var(--fg)}
#ov-liste .rp-pan .rp-gg{margin:4px 0 8px}
#nouvelle .pp-lien[hidden]{display:none}
/* 0.23.0 : conseil et reprise peuvent être retirés (« Prépare ta partie ») : la barre se partage entre les boutons restants */
:is(#partie,#defi) .grow{display:flex}:is(#partie,#defi) .grow>button{flex:1 1 0;min-width:0}:is(#partie,#defi) .grow .pt-nav{flex:none;width:112px}
:is(#partie,#defi) .grow button[hidden]{display:none}
/* 0.33.1 : Paramètres comme Openings (charte.css, section 3) ; la barre du bas remplace Retour */
#parametres>.bas{display:none}
#parametres .st-ic svg{min-width:0}
#parametres .st-ff{width:34px;height:41px;overflow:visible;background:none;border-radius:0}
#parametres .pa-langue{grid-template-columns:repeat(2,minmax(0,1fr))}
/* 0.23.1 (Théo) : Fifou se voit en entier, sans cadre : plus de fond, de coin arrondi ni de découpe autour de lui ; tête seule (data-tete) abandonnée */
.hff,.hff .bishop,.hff .ffp,.hff .fcs{background:none;border-radius:0;overflow:visible}
.rp-tete .ffd{overflow:visible;width:56px;height:67px;background:none;box-shadow:none;border-radius:0}
#bilan .rp-tete .ffd{width:60px;height:72px}
.bi-m .ffd{width:40px;height:48px;background:none;border-radius:0}
.jlav{background:none;overflow:visible;border-radius:0}
/* --- 0.25.0 : tutoriel de premier lancement (ecrans/tuto.js, maquette B) : plein écran, sans barre du bas --- */
body.ec-tuto{padding:0}
body.ec-tuto #botnav,body.ec-tuto #apptitle{display:none}
#tuto:not([hidden]){position:fixed;inset:0;z-index:150;display:flex;flex-direction:column;overflow:hidden;
  background:radial-gradient(120% 70% at 50% 28%,#18284a 0%,#10192b 62%);color:var(--fg);font-family:var(--f-ui);
  padding:max(8px,env(safe-area-inset-top,0px)) 16px max(14px,env(safe-area-inset-bottom,0px));box-sizing:border-box}
#tuto>*{width:100%;max-width:480px;margin-left:auto;margin-right:auto}
.tu-tt{display:flex;align-items:center;gap:8px;height:44px;flex:none}
.tu-rt,.tu-ps{border:0;background:none;color:var(--mut);font:600 15px var(--f-ui);min-height:44px;min-width:64px;padding:0 2px;cursor:pointer}
.tu-rt{text-align:left}.tu-ps{text-align:right}
.tu-rt[hidden],.tu-ps[hidden]{display:block;visibility:hidden}
.tu-dots{flex:1;display:flex;gap:7px;justify-content:center;align-items:center}
.tu-dots i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.tu-dots i.on{background:var(--sel);width:22px;border-radius:9px}
.tu-scene{flex:0 1 auto;height:min(178px,26vh);display:flex;align-items:flex-end;justify-content:center;position:relative}
.tu-scene.pt{height:min(128px,17vh)}
.tu-scene::before{content:"";position:absolute;left:50%;bottom:4px;width:230px;height:200px;max-height:110%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(var(--halo-rgb),.55),transparent)}
.tu-scene svg.bishop{position:relative;height:100%;width:auto!important;flex:none!important;aspect-ratio:200/240;max-width:none!important;min-width:0}
.tu-q{font:400 22px/1.2 var(--f-display);text-align:center;margin:10px 4px 14px;text-wrap:balance;flex:none}
.tu-pl{display:flex;flex-direction:column;gap:9px;flex:none}
.tu-op{min-height:54px;border-radius:var(--r-b);border:1.5px solid rgba(var(--sel-rgb),.55);background:rgba(var(--fg-rgb),.06);color:var(--fg);font:700 16px var(--f-ui);cursor:pointer;padding:6px 12px}
.tu-op small{display:block;font-weight:500;font-size:12.5px;color:var(--mut);margin-top:1px}
.tu-op.on{background:var(--sel);color:var(--cu-ink);border-color:var(--sel)}
.tu-op.on small{color:var(--cu-ink);opacity:.8}
.tu-op:focus-visible,.tu-go:focus-visible,.tu-rt:focus-visible,.tu-ps:focus-visible{outline:3px solid var(--fg);outline-offset:2px}
.tu-note{color:var(--mut);font-size:13px;text-align:center;margin:auto 0 0;padding-top:10px}
.tu-go{margin-top:auto;flex:none;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);box-shadow:0 6px 18px rgba(0,0,0,.4);cursor:pointer}
.tu-go small{display:block;font-size:13.5px;font-weight:500;opacity:.85;margin-top:2px}
.tu-lien{flex:none;border:0;background:none;color:var(--mut);font:600 14px var(--f-ui);min-height:40px;margin-top:4px;cursor:pointer}
.tu-cur{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-m);padding:10px 12px}
.tu-v{font:400 28px var(--f-display);text-align:center}.tu-v small{font:500 13px var(--f-ui);color:var(--mut)}
.tu-cur input{width:100%;accent-color:var(--sel);margin:10px 0 4px;min-height:32px}
.tu-bn{display:flex;justify-content:space-between;align-items:center;color:var(--mut);font-size:12px;gap:8px}
.tu-bn button{border:1px solid var(--line);border-radius:99px;background:none;color:var(--fg);font:600 14px var(--f-ui);min-height:40px;min-width:64px}
.tu-av{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-m);padding:10px 12px;flex:none}
.tu-avl{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;margin-bottom:8px}
.tu-avl b{font:700 14px var(--f-ui);grid-column:1/3}
.tu-bar{height:10px;border-radius:9px;background:var(--line);overflow:hidden}
.tu-bar i{display:block;height:100%;background:var(--sel);border-radius:9px}
.tu-avl.o .tu-bar i{background:var(--gris)}
.tu-avl em{font:400 18px var(--f-display);font-style:normal}
.tu-avs{color:var(--mut);font-size:12px;line-height:1.3;margin:0}
.tu-vit{display:block;border:0;background:none;color:var(--cu2);font:700 13.5px var(--f-ui);min-height:44px;padding:0;margin:0 0 -8px;cursor:pointer;text-align:left}
.tu-pq{list-style:none;padding:0;margin:10px 0 12px;display:flex;flex-direction:column;gap:6px;flex:none}
.tu-pq li{font-size:14px;line-height:1.3;padding-left:22px;position:relative}
.tu-pq li::before{content:"✓";position:absolute;left:2px;color:var(--vert2);font-weight:800}
.tu-res{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-m);padding:2px 12px;flex:none}
.tu-res div{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.tu-res div:last-child{border:0}.tu-res em{font-style:normal;color:var(--mut)}.tu-res b{text-align:right}
.tu-mod{color:var(--mut);font-size:13px;text-align:center;margin:8px 0 10px;flex:none}
/* bulles de la première partie : Fifou entier, sans cadre, à la place de la bulle habituelle */
body.tu-astuce #partie .bwrap{visibility:hidden}
.tu-bulle{position:fixed;left:0;right:0;bottom:calc(var(--navh,64px) + 8px);z-index:160;display:flex;align-items:flex-end;gap:8px;max-width:480px;margin:0 auto;padding:0 12px;box-sizing:border-box;pointer-events:none}
.tu-bf{flex:none;width:72px;height:86px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.45))}
.tu-bf svg.bishop{width:100%!important;max-width:none!important;flex:none!important;height:100%}
.tu-bb{flex:1;min-width:0;position:relative;background:var(--sheet);border:1px solid var(--line);border-radius:16px 16px 16px 8px;padding:10px 12px;box-shadow:0 10px 26px rgba(0,0,0,.5);pointer-events:auto}
.tu-bt{display:block;color:var(--cu2);font:700 11px var(--f-ui);letter-spacing:.06em;text-transform:uppercase;margin-bottom:2px}
.tu-bb p{margin:0;font:500 15px/1.3 var(--f-ui)}
.tu-bok{display:block;margin:8px 0 0 auto;border:0;border-radius:99px;background:var(--sel);color:var(--cu-ink);font:700 14px var(--f-ui);min-height:40px;padding:0 18px;cursor:pointer}
@media (max-height:680px){.tu-q{font-size:20px;margin:6px 4px 10px}.tu-op{min-height:50px}.tu-pq{gap:4px;margin:8px 0 8px}.tu-avl{margin-bottom:6px}}
/* ===== 0.24.0 : fin de partie classée (ecrans/classe-fin.js), maquette v6 du fil Elo Fifou. Écran plein, toujours sombre (scène de cinéma). ===== */
#classe-fin{position:fixed;inset:0 0 var(--navh) 0;z-index:120;overflow:hidden;display:flex;flex-direction:column;gap:8px;padding:14px 14px 10px;isolation:isolate;color:#f3eee6;font-family:var(--f-ui);
 --sel:#e0955a;--cu2:#f2b783;--cu3:#9b5426;--green:#57c98a;--red:#f08070;--p40:#ffd23f;--mut:#c9b8a0;--fg:#f3eee6;--sheet:#17223a;--line:#2a3754;
 background:radial-gradient(120% 55% at 50% 0%,rgba(63,103,181,.30),transparent 60%),linear-gradient(180deg,#121c33 0%,#0d1527 60%,#0a1120 100%)}
#classe-fin[hidden]{display:none}
#classe-fin>*{position:relative;z-index:2}#classe-fin>.cf-lueur,#classe-fin>.cf-bokeh{position:absolute;z-index:0}
#classe-fin::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;z-index:0;pointer-events:none;opacity:.04;background:repeating-conic-gradient(#f3eee6 0 25%,transparent 0 50%) 0 0/36px 36px;-webkit-mask:linear-gradient(transparent,#000 75%);mask:linear-gradient(transparent,#000 75%)}
#classe-fin>*{max-width:520px;width:100%;margin-left:auto;margin-right:auto}#classe-fin>.cf-lueur{width:560px;max-width:none}
:is(#classe-fin,#bilan) .cf-vic svg.bishop{width:200px!important;max-width:none!important;height:240px!important;flex:none!important;min-width:0}
#classe-fin .cf-avatar svg.bishop{width:48px!important;max-width:none!important;height:58px!important;flex:none!important;margin:0}
/* 0.59.0 : Fifou et sa bulle centrés dans le vide, puis « Analyse de la partie » (bouton principal, pleine largeur) et « Menu principal » en secondaire de même hauteur (REGLES §18) */
#classe-fin .cf-fin{flex:1 1 auto;min-height:0;gap:12px}#classe-fin .cf-bul{margin:auto 0}#classe-fin .cf-ana{width:100%;flex:none}
#classe-fin .cf-btn2{width:100%;min-height:56px;flex:none;border:0;border-radius:var(--r-b);background:transparent;color:var(--sel);box-shadow:inset 0 0 0 1.5px var(--sel);padding:0 14px;font:600 16px/1.15 var(--f-ui);cursor:pointer}
#classe-fin .cf-btn2:active{background:var(--tint)}
/* 0.59.0 : petits écrans (360 × 640) : tout tient sans défiler avec les deux grands boutons (espaces, titre et lignes resserrés ; animation inchangée) */
@media (max-height:700px){#classe-fin{gap:5px;padding-top:8px;padding-bottom:8px}#classe-fin .cf-fin{gap:10px}#classe-fin .cf-titre{font-size:31px}#classe-fin .cf-carte{padding-top:5px;padding-bottom:6px}
#classe-fin .cf-bul p{font-size:14px;line-height:1.25;padding:6px 11px}#classe-fin .cf-ana{min-height:56px}#classe-fin .cf-btn2{min-height:48px}
 #classe-fin .cf-zone{transition:height .4s ease}#classe-fin .cf-zone.cf-z2{height:86px}
 #classe-fin .cf-z2 .cf-tu{display:grid;grid-template-columns:auto auto;justify-content:center;grid-template-areas:"l l" "a s";column-gap:10px;row-gap:0;align-items:center;justify-items:center;padding:5px 12px}
 #classe-fin .cf-z2 .cf-lb{grid-area:l}#classe-fin .cf-z2 .cf-sb{grid-area:s;text-align:left;justify-self:start}#classe-fin .cf-z2 .cf-sb:empty{display:none}#classe-fin .cf-z2 .cf-anneau{grid-area:a;width:56px;height:56px;margin:2px 0 0}#classe-fin .cf-z2 .cf-medaille{grid-area:a;transform:scale(.85);margin:-4px 0 -6px}
 #classe-fin .cf-z2 .cf-puce{top:auto;bottom:8px}}
#classe-fin{gap:8px}
/* 0.75.0 : tout tient au-dessus de la barre du bas ; la scène de Fifou (entier, plus petit) cède la place aux boutons */
#classe-fin .cf-hero{flex:1 1 auto;min-height:0;justify-content:flex-end}#classe-fin .cf-scene{flex:1 1 auto;min-height:60px;height:96px;max-height:190px}
#classe-fin .cf-fin{flex:none}#classe-fin .cf-bul{margin:0}
#cf-cf{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:8}
.cf-bokeh{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}.cf-bokeh i{position:absolute;bottom:-20px;border-radius:50%;background:radial-gradient(circle,rgba(255,210,166,.5),transparent 70%);animation:cf-monte linear infinite;opacity:0}
:is(#classe-fin,#bilan).cf-lose .cf-bokeh i{background:radial-gradient(circle,rgba(156,195,255,.42),transparent 70%)}@keyframes cf-monte{0%{transform:translateY(0);opacity:0}15%{opacity:.75}100%{transform:translateY(-700px);opacity:0}}
.cf-lueur{position:absolute;z-index:0;left:50%;top:-120px;width:560px;height:560px;margin-left:-280px;border-radius:50%;pointer-events:none;transition:background .8s;background:radial-gradient(circle,rgba(255,190,120,.30),rgba(224,149,90,.08) 38%,transparent 62%)}
:is(#classe-fin,#bilan).cf-lose .cf-lueur{background:radial-gradient(circle,rgba(110,150,230,.26),rgba(63,103,181,.08) 38%,transparent 62%)}#classe-fin.cf-record .cf-lueur{background:radial-gradient(circle,rgba(255,215,90,.42),rgba(255,180,60,.12) 38%,transparent 62%)}
/* héros */
.cf-hero{display:flex;flex-direction:column;align-items:center;flex:none}
.cf-scene{height:96px;width:100%;display:flex;justify-content:center;align-items:flex-end;position:relative}
.cf-vic{height:100%;width:auto;overflow:visible;display:block}
:is(#classe-fin,#bilan).cf-win .v-lose,:is(#classe-fin,#bilan).cf-lose .v-win{display:none}:is(#classe-fin,#bilan).cf-lose .v-ombre{display:none}
.v-beam{animation:cf-faisceau 7s ease-in-out infinite alternate}@keyframes cf-faisceau{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
.v-mote{fill:#ffe9c4;animation:cf-poussiere 6s ease-in-out infinite}:is(#classe-fin,#bilan).cf-lose .v-mote{fill:#cfe0ff}@keyframes cf-poussiere{0%,100%{transform:translate(0,0);opacity:.15}50%{transform:translate(6px,-14px);opacity:.8}}
.v-glow{transform-box:fill-box;transform-origin:50% 50%;animation:cf-vglow 2.6s ease-in-out infinite}@keyframes cf-vglow{50%{transform:scale(1.08);opacity:.75}}
.v-f{transform-box:fill-box;transform-origin:50% 100%;animation:cf-vfeuille .55s cubic-bezier(.3,1.6,.5,1) backwards}@keyframes cf-vfeuille{from{transform:scale(0);opacity:0}}
.v-tw{transform-box:fill-box;transform-origin:50% 50%;animation:cf-vtw 1.9s ease-in-out infinite}@keyframes cf-vtw{0%,100%{transform:scale(.3);opacity:.15}50%{transform:scale(1);opacity:1}}
.v-glint{transform-box:fill-box;transform-origin:50% 50%;animation:cf-vglint 2.8s ease-in-out infinite}@keyframes cf-vglint{0%,72%,100%{opacity:0;transform:scale(.3) rotate(0)}82%{opacity:1;transform:scale(1.2) rotate(45deg)}}
.v-pod{animation:cf-vpod .7s cubic-bezier(.2,.9,.3,1.15) .15s backwards}@keyframes cf-vpod{from{transform:translateY(46px);opacity:0}}
.cf-vic .ac-cape{transform-box:fill-box;transform-origin:50% 0;animation:cf-cape 2.6s ease-in-out infinite}@keyframes cf-cape{50%{transform:skewX(-4deg) scaleX(1.04)}}
.cf-titre{font-family:var(--f-display);font-size:36px;line-height:1.05;letter-spacing:.01em;margin-top:2px;white-space:nowrap}
.cf-titre span{display:inline-block;opacity:0;background:linear-gradient(180deg,#fff4e4 8%,#f6c49a 42%,#d27d40 78%,#a25a26);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 rgba(11,19,40,.9)) drop-shadow(0 4px 10px rgba(224,149,90,.35))}
:is(#classe-fin,#bilan).cf-lose .cf-titre span{background:linear-gradient(180deg,#ffffff 8%,#d6e2f8 45%,#93a9d6);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 2px 0 rgba(11,19,40,.9)) drop-shadow(0 4px 10px rgba(63,103,181,.4))}
.cf-orne{display:flex;align-items:center;gap:8px;margin-top:3px;opacity:0}.cf-orne i{display:block;height:1px;width:46px;background:linear-gradient(90deg,transparent,var(--cu2))}.cf-orne i+b+i{background:linear-gradient(90deg,var(--cu2),transparent)}
.cf-orne b{font-size:12px;color:var(--mut);font-weight:600;letter-spacing:.02em;padding:2px 10px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
:is(#classe-fin,#bilan).cf-lose .cf-orne i{background:linear-gradient(90deg,transparent,#9cb4e4)}:is(#classe-fin,#bilan).cf-lose .cf-orne i+b+i{background:linear-gradient(90deg,#9cb4e4,transparent)}
/* carte Elo */
.cf-carte{border-radius:20px;padding:8px 14px 9px;position:relative;opacity:0;overflow:hidden;
 background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.02)),rgba(18,27,48,.75);border:1px solid rgba(242,183,131,.38);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 12px 28px rgba(0,0,0,.38);backdrop-filter:blur(8px)}
:is(#classe-fin,#bilan).cf-lose .cf-carte{border-color:rgba(156,195,255,.3)}
.cf-carte-h{display:flex;justify-content:center;align-items:center;gap:7px;font-size:12px;color:var(--mut);letter-spacing:.18em;text-transform:uppercase;font-weight:800}.cf-carte-h svg{flex:none}
.cf-ligne-n{display:flex;justify-content:center;align-items:center;position:relative;height:56px}
.cf-odo{display:flex;font-family:var(--f-display);font-size:48px;line-height:1.18;height:1.18em;overflow:hidden;font-variant-numeric:tabular-nums;transition:color .4s,filter .4s}
.cf-odo .cf-dg{height:1.18em;overflow:hidden;width:.62em;text-align:center}.cf-odo .cf-col{display:flex;flex-direction:column;transition:transform .32s cubic-bezier(.2,.9,.25,1.15)}.cf-odo .cf-col span{height:1.18em;line-height:1.18em;display:block}
.cf-odo.cf-up{color:#93f0bb;filter:drop-shadow(0 0 10px rgba(87,201,138,.4))}.cf-odo.cf-down{color:#ffc7a3;filter:drop-shadow(0 0 8px rgba(240,128,112,.28))}.cf-odo.cf-gold{color:#ffe08a;filter:drop-shadow(0 0 12px rgba(255,210,63,.6))}
.cf-delta{position:absolute;right:0;top:50%;transform:translateY(-50%);font-weight:800;font-size:15px;border-radius:999px;padding:3px 10px;opacity:0;font-variant-numeric:tabular-nums}
.cf-delta.cf-g{color:#0d2a1a;background:linear-gradient(180deg,#9df3c2,#3cbf76);box-shadow:0 4px 12px rgba(60,191,118,.35)}.cf-delta.cf-r{color:#2a0f0b;background:linear-gradient(180deg,#ffbcb0,#e0705f);box-shadow:0 4px 12px rgba(224,112,95,.3)}.cf-delta.cf-o{color:#2a1d00;background:linear-gradient(180deg,#fff2b0,#f5c542);box-shadow:0 4px 14px rgba(245,197,66,.45)}
.cf-avant{position:absolute;left:0;top:50%;transform:translateY(-50%);font-size:11px;color:var(--mut);text-align:left;line-height:1.25;opacity:0}.cf-avant b{display:block;font-size:14px;color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums}
.cf-jauge{height:8px;background:rgba(255,255,255,.07);border-radius:9px;display:flex;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.45);position:relative}
.cf-jauge i{display:block;height:100%;width:0;position:relative;overflow:hidden;transition:width 1s cubic-bezier(.2,.8,.2,1)}
.cf-jauge i::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-100%);animation:cf-reflet 1.9s ease-in-out infinite}@keyframes cf-reflet{to{transform:translateX(100%)}}
.cf-jauge .cf-g{background:linear-gradient(90deg,#2fae5f,#8ef0b6)}.cf-jauge .cf-r{background:linear-gradient(90deg,#c9584a,#f08070)}.cf-jauge .cf-o{background:linear-gradient(90deg,#f5c542,#fff0b0)}
.cf-carte-b{display:flex;justify-content:space-between;font-size:12px;color:var(--mut);margin-top:5px;font-variant-numeric:tabular-nums}.cf-carte-b .cf-rec{color:var(--mut);font-weight:600;display:flex;align-items:center;gap:4px;transition:color .3s}.cf-carte-b .cf-rec.cf-bat{color:var(--p40)}
.cf-ruban{position:absolute;top:8px;right:10px;opacity:0;font-size:12px;font-weight:800;letter-spacing:.12em;padding:2px 9px;border-radius:999px;color:#2a1d00;background:linear-gradient(180deg,#fff2b0,#f5c542 60%,#d6a01c);box-shadow:0 2px 10px rgba(245,197,66,.45)}
/* lignes */
.cf-carte,.cf-fin{flex:none}
.cf-vg{color:#0d2a1a;background:linear-gradient(180deg,#9df3c2,#3cbf76)}.cf-vr{color:#2a0f0b;background:linear-gradient(180deg,#ffbcb0,#e0705f)}.cf-vo{color:#2a1d00;background:linear-gradient(180deg,#fff2b0,#f5c542)}.cf-vn{color:var(--fg);background:rgba(255,255,255,.12)}
/* zone : cadran puis tuiles */
.cf-zone{position:relative;height:112px;flex:none}
.cf-cadran{position:absolute;inset:0;display:none;border-radius:18px}.cf-cadran.cf-on{display:block}.cf-cadran svg{display:block;margin:auto;overflow:visible}
.cf-pr{position:absolute;left:0;right:0;top:46px;text-align:center;font-family:var(--f-display);font-size:32px;line-height:1}.cf-pr small{font-family:var(--f-ui);font-size:12px;color:var(--mut);display:block;margin-top:5px;letter-spacing:.03em}
.cf-cadran.cf-voile{cursor:pointer}.cf-cadran.cf-voile svg{filter:saturate(.12) brightness(.72);opacity:.8}.cf-cadran.cf-voile #cf-aig,.cf-cadran.cf-voile #cf-moy,.cf-cadran.cf-voile #cf-moyt{opacity:0}
.cf-cadran.cf-voile #cf-prn{display:inline-block;background:linear-gradient(180deg,#fff2b0,#f5c542);-webkit-background-clip:text;background-clip:text;color:transparent;animation:cf-respq 1.3s ease-in-out infinite}
.cf-cadran.cf-voile small{color:var(--fg)!important;font-size:12.5px!important;font-weight:700;animation:cf-clign 1.4s ease-in-out infinite}
.cf-cadran.cf-voile::before{content:"";position:absolute;left:50%;top:56%;width:170px;height:170px;margin:-85px 0 0 -85px;border-radius:50%;background:radial-gradient(circle,rgba(255,210,63,.2),transparent 62%);animation:cf-respq 1.3s ease-in-out infinite;z-index:-1}
.cf-cadran.cf-voile::after{content:"";position:absolute;left:50%;top:6px;width:212px;height:106px;margin-left:-106px;border-radius:106px 106px 0 0;border:2px solid transparent;border-bottom:0;background:conic-gradient(from 270deg at 50% 100%,transparent 0deg,rgba(255,230,150,.9) 20deg,transparent 40deg) border-box;-webkit-mask:linear-gradient(#000 0 0) padding-box exclude,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) padding-box exclude,linear-gradient(#000 0 0);opacity:.0}
@keyframes cf-respq{50%{transform:scale(1.12)}}@keyframes cf-clign{50%{opacity:.5}}
.cf-tuiles{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:8px;opacity:0;pointer-events:none}
.cf-tu{border-radius:18px;padding:8px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden;
 background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015)),rgba(18,27,48,.7);border:1px solid rgba(255,255,255,.09);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.cf-tu .cf-lb{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--mut)}.cf-tu .cf-sb{font-size:12px;color:var(--mut);line-height:1.25}
.cf-anneau{position:relative;width:62px;height:62px;margin:3px 0 2px}.cf-anneau svg{position:absolute;inset:0}.cf-anneau b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-display);font-size:22px;font-weight:400}
.cf-puce{position:absolute;top:44px;right:9px;font-size:12px;font-weight:800;border-radius:999px;padding:0 7px}
.cf-medaille{position:relative;width:64px;height:66px;margin:2px 0 1px}.cf-medaille b{position:absolute;left:0;right:0;top:15px;font-family:var(--f-display);font-size:15px;color:#2a1607;text-shadow:0 1px 0 rgba(255,236,210,.6)}
/* fin */
.cf-fin{display:flex;flex-direction:column;gap:8px;margin-top:auto;opacity:0}
.cf-bul{display:flex;gap:9px;align-items:flex-end}
/* 0.68.0 (audit design 2) : Fifou entier à côté de sa bulle, sans rond ni bord (règle 10) */.cf-avatar{width:48px;height:58px;flex:none;display:grid;place-items:end center;overflow:visible}
.cf-bul p{margin:0;position:relative;border-radius:16px 16px 16px 5px;padding:8px 12px;font-size:15px;line-height:1.3;background:linear-gradient(180deg,#26375e,#1c2a49);border:1px solid rgba(255,255,255,.08);box-shadow:0 6px 14px rgba(0,0,0,.25)}
.notes{max-width:390px}.notes li{margin-bottom:6px}
#classe-fin [hidden]{display:none!important}#classe-fin .cf-tuiles.cf-seule{grid-template-columns:1fr}#classe-fin .cf-cadran.cf-attend{cursor:default}#classe-fin .cf-cadran.cf-attend #cf-prn{animation:none}
/* 0.24.0 : partie classée sans aide */
#partie.pt-classe #pt-conseil,#partie.pt-classe #pt-reprendre,#partie.pt-classe #pt-garde{display:none}
/* 0.24.0 : écran Classé */
/* 0.40.0 : partie classée sur une page (360×640 sans défiler) ; couleur, tuiles, curseur et bouton de « Prépare ta partie » */
#classe .cl-tete{display:flex;align-items:center;gap:8px;margin:-6px 0 4px}#classe .cl-tete h2{flex:1;margin:0;font-size:21px}
#classe .cl-tete .pp-f{width:28px;height:34px}
#classe .cl-pill{flex:none;padding:5px 10px;border-radius:var(--r-pill);background:var(--tint);color:var(--mut);font:600 13px var(--f-ui)}#classe .cl-pill b{color:var(--sel);font-size:15px}#classe .cl-pill[hidden]{display:none}
#classe .pp-coul{margin:0 0 8px}#classe .pp-coul button{min-height:48px;gap:2px;padding:2px 4px}#classe .pp-coul img{width:24px;height:24px}
#classe .pp-c{margin-bottom:8px;padding:8px 12px}#classe .pp-c>h3{margin:0 0 2px;font:400 16px/1.2 var(--f-display);color:var(--fg)}
#classe .pp-c .pp-dit{margin-top:0;font-size:12px;line-height:1.3}
#classe .pp-3 button{height:72px;min-height:72px;padding:2px;font-size:14px}#classe .pp-3 .pp-f{width:30px;height:36px}#classe .pp-3 button>span:last-child{height:1.3em}
#classe .cl-regles{list-style:none;margin:0;padding:0 2px;display:grid;gap:3px}
#classe .cl-regles li{display:flex;align-items:center;gap:8px;font:500 13.5px/1.2 var(--f-ui);color:var(--mut)}
#classe .cl-ic{flex:none;width:18px;height:18px;color:var(--sel)}#classe .cl-ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#classe .pp-bas{margin-top:8px;padding-top:6px}
/* maquette B choisie par Théo (02/11) : sans cadres, tuiles en ligne (Fifou à gauche), règles en 2 × 2 */
#classe .pp-c{background:none;border:0;box-shadow:none;padding:0 2px;margin-bottom:8px}
#classe .pp-3 button{flex-direction:row;height:56px;min-height:56px;gap:2px;padding:2px 6px 2px 0}#classe .pp-3 button>span:last-child{height:auto;justify-content:flex-start;text-align:left}
#classe .cl-regles{grid-template-columns:1fr 1fr;gap:6px}#classe .cl-regles li{padding:6px 8px;border-radius:var(--r-m);background:var(--tint);font-size:12.5px;min-height:40px}
/* Elo de départ déjà fixé : plus de curseur, la page s'étire jusqu'à la barre du bas et tout grandit */
#classe.cl-fixe:not([hidden]){display:flex;flex-direction:column;min-height:calc(100dvh - 32px - var(--navh))}
#classe.cl-fixe .cl-tete{margin:-4px 0 12px}#classe.cl-fixe .cl-tete h2{font-size:22px}#classe.cl-fixe .cl-tete .pp-f{width:40px;height:48px}
#classe.cl-fixe .cl-pill{padding:7px 12px;font-size:14px}#classe.cl-fixe .cl-pill b{font-size:18px}
#classe.cl-fixe .pp-coul{margin-bottom:14px}#classe.cl-fixe .pp-coul button{min-height:64px;gap:6px;font-size:15px}#classe.cl-fixe .pp-coul img{width:32px;height:32px}
#classe.cl-fixe .pp-c{margin-bottom:14px}#classe.cl-fixe .pp-c>h3{font-size:19px;margin-bottom:8px}
#classe.cl-fixe .pp-3 button{flex-direction:column;height:96px;min-height:96px;gap:4px;font-size:15px}#classe.cl-fixe .pp-3 .pp-f{width:44px;height:52px}#classe.cl-fixe .pp-3 button>span:last-child{justify-content:center;text-align:center}
#classe.cl-fixe .cl-regles{gap:8px}#classe.cl-fixe .cl-regles li{min-height:52px;padding:8px 10px;font-size:13.5px}#classe.cl-fixe .cl-ic{width:22px;height:22px}
#classe .cl-reinit{display:block;width:100%;min-height:44px;margin:6px 0 0;padding:4px 6px;border:0;background:none;color:var(--mut);font:500 12.5px/1.3 var(--f-ui);text-align:center}#classe .cl-reinit b{color:var(--sel);font-weight:600}#classe .cl-reinit[hidden]{display:none}
#classe.cl-fixe .pp-bas{margin-top:auto}
/* grands écrans : les tuiles grandissent avec la hauteur pour occuper la page */
#classe.cl-fixe .pp-coul button{min-height:clamp(64px,11dvh - 6px,92px)}#classe.cl-fixe .pp-3 button{height:clamp(96px,18dvh - 20px,156px);min-height:0}
#classe.cl-fixe .pp-3 .pp-f{width:clamp(44px,8dvh - 7px,64px);height:clamp(52px,9.5dvh - 9px,76px)}#classe.cl-fixe .cl-regles li{min-height:clamp(52px,10dvh - 12px,84px)}
#classe.cl-fixe .pp-coul,#classe.cl-fixe .pp-c{margin-bottom:clamp(14px,3dvh - 5px,26px)}
/* ligne rouge de Paramètres (réinitialiser, supprimer le compte) */
#parametres .st-row.cp-rouge,#parametres .st-row.cp-rouge b,#parametres .st-row.cp-rouge .st-ic{color:var(--red)}
/* 0.26.0 : Mes progrès refait (maquette A) : résumé, courbe complète, historique de toutes les parties ; Fifou entier, sans cadre */
#progres .up{color:var(--green)} #progres .dn{color:var(--red)}
.pg-tete{display:flex;gap:12px;align-items:center;margin:2px 0 12px}
.pg-ff{width:58px;height:70px;flex:none} .pg-ff svg{display:block;width:100%;height:100%}
.pg-tete h2{margin:0!important}
#progres .pg-hero{display:grid;grid-template-columns:1fr auto;gap:10px 8px}
#progres .pg-k{display:block;font:700 11px/1.2 var(--f-ui);letter-spacing:.07em;text-transform:uppercase;color:var(--mut)}
#progres .pg-big{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
#progres .pg-big b{font:400 40px/1.05 var(--f-display);font-variant-numeric:tabular-nums}
#progres .pg-big i{font:800 15px/1 var(--f-ui);font-style:normal}
#progres .pg-sans{grid-column:1/-1} #progres .pg-sans p{margin:4px 0 10px} #pg-classe-go{width:100%;min-height:48px}
#progres [hidden]{display:none!important}
#progres .pg-stats{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;border-top:1px solid var(--line);padding-top:10px}
#progres .pg-stats b{display:block;font:800 18px/1.1 var(--f-ui);font-variant-numeric:tabular-nums} #progres .pg-stats small{color:var(--mut);font:600 12px/1.2 var(--f-ui)}
#progres .pg-vnd .bar{display:flex;height:8px;border-radius:4px;overflow:hidden;gap:2px} #progres .pg-vnd .bar i{display:block}
#progres .pg-vnd .v{background:var(--green)} #progres .pg-vnd .n{background:var(--gris)} #progres .pg-vnd .d{background:var(--red)}
#progres .pg-vnd .lg{display:flex;justify-content:space-between;gap:4px;margin:4px 0 0;font:700 12px/1.2 var(--f-ui);color:var(--mut)}
#progres .pg-seg{display:flex;background:var(--tint);border-radius:var(--r-pill);padding:3px;gap:2px;margin:10px 0}
#progres .pg-seg button{flex:1;min-height:44px;padding:0 8px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--mut);font:700 14px/1.1 var(--f-ui);cursor:pointer}
#progres .pg-seg button[aria-pressed="true"]{background:var(--sel);color:var(--cu-ink,#1a1208)}
#progres .pg-seg.sm{margin:0;flex:none} #progres .pg-seg.sm button{min-height:40px;padding:0 10px;font-size:13px}
#progres .pg-seg button:focus-visible,#progres .pg-chips button:focus-visible{outline:3px solid var(--sel);outline-offset:2px}
#pg-courbe:focus{outline:none}
#progres .pg-gh{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
#progres .pg-gh h3{margin:0}
#progres .pg-chips{display:flex;gap:6px;margin:10px 0 4px;flex-wrap:wrap}
#progres .pg-chips button{min-height:40px;padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--line);background:transparent;color:var(--mut);font:600 13px/1 var(--f-ui);cursor:pointer}
#progres .pg-chips button[aria-pressed="true"]{border-color:var(--sel);color:var(--fg);background:rgba(var(--sel-rgb),.14)}
#pg-courbe{display:block;width:100%;height:auto;overflow:visible;touch-action:pan-y;border-radius:var(--r-s)}
#pg-courbe .gl{stroke:var(--line);stroke-width:1} #pg-courbe .ax{fill:var(--mut);font:600 10px var(--f-ui)}
#pg-courbe .ar{fill:rgba(var(--sel-rgb),.14)} #pg-courbe .ln{fill:none;stroke:var(--sel);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
#pg-courbe .pv{fill:var(--green)} #pg-courbe .pd{fill:var(--red)} #pg-courbe .pn{fill:var(--gris)}
#pg-courbe .vh{stroke:var(--fg);stroke-opacity:.35;stroke-dasharray:2 3} #pg-courbe .ps{fill:var(--bg);stroke:var(--fg);stroke-width:2.5}
#progres .pg-tip{display:flex;align-items:center;gap:8px;width:100%;margin:6px 0 8px;padding:8px 12px;min-height:44px;border-radius:var(--r-m);background:var(--tint);border:1px solid var(--edge,var(--line));color:var(--fg);text-align:left;font:500 13.5px/1.35 var(--f-ui);cursor:pointer}
#progres .pg-tip:disabled{cursor:default;opacity:1} #progres .pg-tip b{font-weight:700} #progres .pg-tip i{margin-left:auto;font:700 20px/1 var(--f-ui);font-style:normal;color:var(--mut)}
#progres .pg-ligne{display:grid;grid-template-columns:34px minmax(0,1fr) auto 12px;gap:10px;align-items:center;width:100%;min-height:58px;margin:0;padding:8px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;color:var(--fg);text-align:left;font:inherit;box-shadow:none}
#progres .pg-ligne:last-child{border-bottom:0}
#progres .pg-revoir{cursor:pointer}
#progres .pg-ligne .rb{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:800 15px/1 var(--f-ui);color:#0f1729}
#progres .rv{background:var(--green)} #progres .rn{background:var(--gris)} #progres .rd{background:var(--red)}
#progres .pg-ligne .mid{min-width:0}
#progres .pg-ligne .mid b{display:block;font:700 15px/1.25 var(--f-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #progres .pg-ligne .vs{font-weight:500;color:var(--mut)}
#progres .pg-ligne .mid small{display:block;color:var(--mut);font:500 12.5px/1.3 var(--f-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#progres .pg-ligne .pc{display:inline-block;width:9px;height:9px;margin-right:4px;border-radius:50%;border:1.5px solid var(--mut);vertical-align:-1px} #progres .pc.w{background:#f3eee6} #progres .pc.b{background:#0b1328}
#progres .pg-ligne .rt{text-align:right} #progres .pg-ligne .rt b{display:block;font:800 15px/1.2 var(--f-ui);font-variant-numeric:tabular-nums} #progres .pg-ligne .rt small{display:block;font:800 12.5px/1.3 var(--f-ui)}
#progres .pg-ligne .chev{color:var(--mut);font:700 18px/1 var(--f-ui)}
/* 0.42.0 : bouton « Revoir » visible sur chaque partie qui se revoit (la ligne entière reste cliquable) */
#progres .pg-ligne{grid-template-columns:34px minmax(0,1fr) auto auto}
#progres .pg-ligne .pg-rv{display:inline-flex;align-items:center;min-height:32px;padding:0 10px;border-radius:var(--r-pill);background:var(--sel);color:#1d1107;font:700 13px/1 var(--f-ui);white-space:nowrap}
#progres .pg-plus{width:100%;min-height:48px;margin-top:8px;border-radius:var(--r-m);border:1px solid var(--line);background:var(--tint);color:var(--fg);font:700 14px/1.2 var(--f-ui);cursor:pointer}
/* 0.28.0 : « Mes erreurs » en cartes (maquette C) : bulle de Fifou, la suivante en vedette, compteurs-filtres, lignes */
#erreurs .er-h{margin:2px 0 6px}
.er-tete{display:flex;align-items:flex-end;gap:8px;margin:0 0 10px}
.er-tete .ffd{flex:none;width:46px;height:56px}.er-tete .ffd .bishop{width:46px!important;max-width:46px;height:56px;min-width:0;display:block}
.er-bul{position:relative;flex:1;margin:0 0 12px;padding:10px 12px;border-radius:var(--r-l);background:var(--sheet);border:1px solid var(--line);font:400 14px/1.35 var(--f-ui);color:var(--mut)}
.er-bul b{color:var(--fg);font-weight:700}
.er-bul::before{content:"";position:absolute;left:-7px;bottom:14px;border:7px solid transparent;border-left:0;border-right-color:var(--line)}
.er-hero{display:grid;grid-template-columns:104px minmax(0,1fr);gap:12px;padding:12px;margin:0 0 12px;border-radius:var(--r-xl);background:linear-gradient(160deg,rgba(var(--sel-rgb),.16),var(--sheet) 55%);border:1px solid rgba(var(--sel-rgb),.45)}
.er-hb{width:104px;height:104px;border-radius:var(--r-s);overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.er-hb svg,.er-rb svg{display:block;width:100%;height:100%}
.er-ht{display:flex;flex-direction:column;gap:4px;min-width:0}.er-ht b{font:700 16px/1.2 var(--f-ui);color:var(--fg)}
.er-k{font:700 11.5px/1 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--sel)}
.er-o{font:400 12.5px/1.3 var(--f-ui);color:var(--mut)}
.er-hero #er-go{grid-column:1/-1;width:100%;min-height:52px;margin:0;font-size:17px}
.er-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 10px}
.er-tabs button{display:flex;flex-direction:column;align-items:center;gap:3px;min-height:56px;padding:8px 4px;border-radius:var(--r-m);background:var(--sheet);border:1px solid var(--line);color:var(--mut);font:600 12.5px/1.1 var(--f-ui)}
.er-tabs b{font:800 20px/1 var(--f-ui)}.er-tabs .t-r b{color:var(--sel)}.er-tabs .t-m b{color:var(--green)}
.er-tabs button.on{border-color:var(--sel);background:rgba(var(--sel-rgb),.1);color:var(--fg)}
.er-rows{display:flex;flex-direction:column;border-radius:var(--r-l);background:var(--sheet);border:1px solid var(--line);overflow:hidden}
.er-rows[hidden]{display:none}
.er-r{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;margin:0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;text-align:left;color:var(--fg);font:inherit}
.er-r:last-child{border-bottom:0}
button.er-r{cursor:pointer}button.er-r:active{background:var(--tint)}
.er-rb{flex:none;width:56px;height:56px;border-radius:6px;overflow:hidden}
.er-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.er-t b{font:700 14.5px/1.2 var(--f-ui)}
.er-st{flex:none;padding:3px 9px;border-radius:var(--r-pill);font:700 12px/1.2 var(--f-ui);white-space:nowrap}
.er-st.r{background:rgba(var(--sel-rgb),.18);color:var(--sel)}.er-st.m{background:rgba(var(--green-rgb),.16);color:var(--green)}
.er-rien{margin:0;padding:14px 12px}
.er-vide{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:4px 8px 14px}
.er-vide[hidden]{display:none}
.er-vff{width:120px;height:140px}.er-vff .bishop{width:120px!important;max-width:120px;height:140px;min-width:0}
.er-vide b{font:700 18px/1.2 var(--f-ui)}.er-vide p{margin:0 0 10px;color:var(--mut);font:400 14px/1.4 var(--f-ui);max-width:290px}.er-vide .bouton{min-height:50px;width:100%}
.er-tete[hidden],.er-hero[hidden],.er-tabs[hidden]{display:none}
/* retour d'une position : la ligne mise à jour clignote et sa pastille « pop » (comme la coche des pièges d'Openings) */
.er-maj{animation:er-flash 1.6s ease-out}
.er-maj .er-st{animation:er-pop .6s .25s cubic-bezier(.3,1.6,.5,1) both}
@keyframes er-flash{0%,30%{background:rgba(var(--green-rgb),.22)}100%{background:none}}
@keyframes er-pop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.er-maj,.er-maj .er-st{animation:none}}
.pt-er-retour{width:100%;margin-top:8px;min-height:44px;border-radius:var(--r-pill);background:var(--sheet);border:1.5px solid var(--sel);color:var(--sel);font-weight:600}
.pt-er-retour[hidden]{display:none}

/* 0.29.0 : accueil refait (maquette v7 de Théo). Carte Mes progrès, carte de partie (sélecteur, scène, deux boutons), tuiles 2 × 2. Cuivre seul, pas de jaune. */
body.ec-accueil #accueil{justify-content:flex-start;gap:clamp(6px,1.2dvh,12px)}
#accueil .ac-pg{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;row-gap:2px;align-items:center;width:100%;margin:0;
  padding:clamp(6px,1.2dvh,10px) 12px clamp(6px,1dvh,8px) 12px;border-radius:var(--r-l);background:var(--sheet);border:1px solid var(--edge);box-shadow:var(--lift);text-align:left;font:inherit;color:var(--fg);cursor:pointer}
#accueil .ac-pg:focus-visible{outline:3px solid var(--sel);outline-offset:2px}
#accueil .ac-pg .hff{grid-row:1/3;width:clamp(36px,6.4dvh,56px);height:clamp(38px,6.8dvh,60px)}
#accueil .ac-k{grid-column:2;grid-row:1;font:600 11px/1.2 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
#accueil .ac-v{grid-column:2;grid-row:2;display:flex;align-items:baseline;gap:8px}
#accueil .ac-v[hidden],#accueil .ac-vide[hidden]{display:none}
#accueil .ac-v b{font:400 clamp(24px,4.2dvh,32px)/1 var(--f-display)}
#accueil .ac-v i{font:800 13px/1 var(--f-ui);font-style:normal}#accueil .ac-v i.up{color:var(--green)}#accueil .ac-v i.down{color:var(--red,#f08070)}
#accueil .ac-vide{grid-column:2;grid-row:2;font:500 13.5px/1.3 var(--f-ui);color:var(--mut)}
#accueil .ac-c{grid-column:1/-1;display:block;width:100%;height:clamp(20px,3.6dvh,40px);overflow:visible}
#accueil .ac-c line,#accueil .ac-c polyline{vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;fill:none}
#accueil .ac-c-place{stroke:#c9b8a0;stroke-opacity:.35;stroke-width:4}
#accueil .ac-c-ligne{stroke:#e0955a;stroke-width:2}
#accueil .ac-c-pt{stroke-width:7.5}#accueil .ac-c-pt.up{stroke:var(--green)}#accueil .ac-c-pt.down{stroke:var(--red,#f08070)}#accueil .ac-c-pt.eg{stroke:#e0955a}
#accueil .ac-fl{flex:none;display:inline-flex;align-items:center;gap:4px;padding:3px 9px 3px 6px;border-radius:var(--r-pill);
  background:rgba(var(--sel-rgb),.14);border:1px solid rgba(var(--sel-rgb),.45);color:var(--cu2);font:800 12.5px/1 var(--f-ui);white-space:nowrap}
#accueil .ac-fl svg{width:14px;height:14px}#accueil .ac-fl.off{color:var(--mut);background:var(--tint);border-color:var(--line)}
body.ec-accueil #accueil>.ac-hero{gap:clamp(6px,1.2dvh,10px);padding:clamp(8px,1.4dvh,12px) 12px clamp(10px,1.6dvh,14px)}
#accueil .ac-mode{display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:var(--r-pill);background:rgba(11,19,40,.55);border:1px solid var(--line);position:relative;z-index:2;flex:none}
#accueil .ac-mode button{min-height:44px;display:flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:var(--r-pill);background:none;color:var(--mut);font:700 14px/1 var(--f-ui);cursor:pointer;padding:0 6px}
#accueil .ac-mode button svg{width:17px;height:17px;flex:none}
#accueil .ac-mode button.on{background:var(--sel);color:var(--cu-ink)}
#accueil .ac-mode button:focus-visible{outline:3px solid var(--fg);outline-offset:1px}
#accueil .ac-hero .hsc{margin:calc(-1*clamp(4px,.8dvh,8px)) -12px 0}
#accueil .ac-hero .hsc svg.sp{position:relative;display:block;width:100%;height:100%;overflow:visible}
#accueil .ac-hero .hk{font-size:max(16px,min(2.9dvh,4.7vw,22px))}
#accueil .ac-hero .hk::before,#accueil .ac-hero .hk::after{flex-basis:10px;min-width:10px}
#accueil .ac-bt{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:none}
#accueil .ac-b{min-height:clamp(52px,8.6dvh,64px);border-radius:var(--r-l);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 4px;
  font:700 15.5px/1.1 var(--f-ui);white-space:nowrap;cursor:pointer;color:var(--cu-ink);border:0;transition:transform .08s,box-shadow .08s}
#accueil .ac-b small{font:600 11px/1.1 var(--f-ui);opacity:.8;max-width:100%;overflow:hidden;text-overflow:ellipsis}
#accueil .ac-l::before{content:"";display:inline-block;vertical-align:-2px;width:13px;height:13px;margin-right:5px;background:currentColor}
#accueil .ac-b1{background:linear-gradient(180deg,#eeaa74,#dc8d52);box-shadow:0 4px 0 var(--cu3),0 12px 26px -8px rgba(var(--sel-rgb),.55)}
#accueil .ac-b1 .ac-l::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v16M4 12h16' stroke='black' stroke-width='3.4' stroke-linecap='round'/%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'%3E%3Cpath d='M12 4v16M4 12h16' stroke='black' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
#accueil .ac-b2 .ac-l::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15l13-7.5z'/%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'%3E%3Cpath d='M7 4.5v15l13-7.5z'/%3E%3C/svg%3E") center/contain no-repeat}
#accueil .ac-b2{background:linear-gradient(180deg,#f8d2ad,#efb784);box-shadow:0 4px 0 #b9692f,0 12px 26px -10px rgba(var(--sel-rgb),.45)}
#accueil .ac-b:not(:disabled):active{transform:translateY(4px);box-shadow:none}
#accueil .ac-b2.dis{background:rgba(201,184,160,.14);color:var(--mut);border:1.5px dashed rgba(201,184,160,.35);box-shadow:none;opacity:.7;cursor:default}
#accueil .ac-b1.arme{background:linear-gradient(180deg,#f3a48a,#d9765a);box-shadow:0 4px 0 #8f3f2a}
#accueil .ac-b:focus-visible{outline:3px solid var(--fg);outline-offset:2px}
@media (prefers-reduced-motion:reduce){#accueil .ac-b{transition:none}}
#accueil .ac-tl{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0}
#accueil .ac-tl .home-card{min-height:clamp(56px,10dvh,76px);flex-direction:row;align-items:center;justify-content:flex-start;gap:8px;padding:6px 10px;text-align:left}
#accueil .ac-tl .hff{width:clamp(34px,6dvh,52px);height:clamp(36px,6.3dvh,56px);flex:none}
#accueil .ac-tl .home-t{font-size:14px!important;line-height:1.2}
#accueil .ac-tl .hc-sub{display:none}
/* 0.31.0 : 3 tuiles sur une ligne (maquette A), Fifou au-dessus du nom ; Paramètres est dans la barre du bas */
#accueil .ac-tl{grid-template-columns:repeat(3,minmax(0,1fr))}
#accueil .ac-tl .home-card{grid-column:auto!important;flex-direction:column;justify-content:center;text-align:center;gap:2px;padding:4px;min-height:clamp(64px,10.5dvh,96px)}
#accueil .ac-tl .hc-txt{align-items:center}
#accueil .ac-tl .home-t{font-size:13px!important;white-space:normal}
/* 0.46.0 : bandeau « Aujourd'hui » ; 0.50.0 : maquette A (Théo, 03/11) : barre continue (cuivre, verte à 3/3), « n/3 », badge de série ; 3 cases à cocher,
   remplacées par Fifou et sa phrase quand les 3 sont faites */
#accueil .aj{width:100%;flex:none;display:flex;flex-direction:column;gap:6px;padding:7px 9px;border-radius:var(--r-l);background:var(--sheet);border:1px solid var(--edge);box-shadow:var(--lift)}
#accueil .aj-h{display:flex;align-items:center;gap:8px;min-height:22px}
#accueil .aj-k{flex:none;font:700 11px/1.2 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
#accueil .aj-bar{flex:1;min-width:30px;height:8px;border-radius:var(--r-pill);background:var(--tint);overflow:hidden}
#accueil .aj-bar i{display:block;height:100%;width:0;border-radius:var(--r-pill);background:linear-gradient(90deg,#eeaa74,#dc8d52);transition:width .6s}
#accueil .aj.fini .aj-bar i{background:linear-gradient(90deg,#7fe0aa,#3cbf76)}
#accueil .aj-n{flex:none;font:800 12px/1 var(--f-ui);font-variant-numeric:tabular-nums;color:var(--fg)}
#accueil .aj-et{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
#accueil .aj-et[hidden],#accueil .aj-fin[hidden]{display:none}
#accueil .aj-s{min-height:44px;min-width:0;display:flex;align-items:center;gap:6px;padding:0 8px;border-radius:var(--r-m);border:1px solid var(--line);
  background:rgba(11,19,40,.45);color:var(--fg);font:700 12.5px/1.15 var(--f-ui);text-align:left;cursor:pointer}
#accueil .aj-c{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid rgba(var(--sel-rgb),.7);display:grid;place-items:center}
#accueil .aj-l{min-width:0;overflow-wrap:anywhere}
#accueil .aj-s.ok{color:var(--mut);background:rgba(var(--green-rgb),.10);border-color:rgba(var(--green-rgb),.35);cursor:default}
#accueil .aj-s.ok .aj-c{background:#3cbf76;border-color:#3cbf76}
#accueil .aj-s.ok .aj-c::before{content:"";width:13px;height:13px;background:var(--bg);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%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'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
#accueil .aj-s.ok .aj-l{text-decoration:line-through;text-decoration-color:rgba(var(--mut-rgb),.5)}
#accueil .aj-s:focus-visible{outline:3px solid var(--sel);outline-offset:1px}
#accueil .aj-s:not(.ok):active{transform:translateY(1px)}
#accueil .aj-fin{display:flex;align-items:center;gap:8px;min-height:44px}
#accueil .aj-ff{flex:none;width:40px;height:46px;margin:-4px 0}#accueil .aj-ff svg{width:100%;height:100%;display:block}
#accueil .aj-dit{margin:0;font:600 13px/1.3 var(--f-ui);color:var(--fg)}#accueil .aj-dit b{color:var(--defi-tx)}
@media (prefers-reduced-motion:reduce){#accueil .aj-bar i{transition:none}}
/* 0.57.0 (demande de Théo) : la barre du bas reste visible pendant une partie (0.31.0 la cachait) */
/* 0.31.0 : Paramètres est joignable par la barre du bas, donc pas de bouton Retour (REGLES, comme Mes progrès) */
#parametres .bas .retour{display:none}

/* 0.40.0 : page Fifou Expert, copiée d'Openings 3.1.284 (style.css, .xp-*), sans les fenêtres d'aperçu ni de limite */
.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-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}}
.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 2px;line-height:16px}/* 3.1.181 : message sur 2 lignes sans faire défiler en 360×640 */
.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.161 : liens Confidentialité (et Conditions d'utilisation sur iPhone) à la suite de « Restaurer mes achats » */
.xp-pied .xp-lien{display:inline-block;margin:-10px 0 -10px 6px;padding:10px 2px;color:var(--gris);font:500 12.5px/17px var(--f-ui);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.xp-msg:not(:empty)~.xp-lien{display:none}
.xp-pied .xp-lien+.xp-lien::before{content:'·';display:inline-block;margin-right:6px;color:var(--gris);text-decoration:none}
.xp-ov{position:fixed;inset:0;z-index:700}
.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 h3{font:var(--t2);margin:0 0 6px}.xp-c p{margin:0 0 12px;font-size:15px;line-height:21px}
.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}
/* Training : Fifou dessiné de la page (span.xp-ff[data-ff]), jamais de cadre ; phrase du compte ; page sans défilement au-dessus de la barre */
.xp-top .xp-ff{height:calc(clamp(44px,7.6dvh,64px)*1.2)}
.xp-ff svg{display:block;width:100%;height:100%}
.xp-r{grid-template-columns:1fr 64px 88px}
/* 0.76.0 (maquette B) : un abonnement pour les deux applis (phrase d'en-tête en cuivre), deux tableaux titrés (nom de l'appli dans l'en-tête), lien « Télécharger » de Fifou Openings */
#expert .xp-top p.xp-deux{color:var(--cu2);font-weight:700}
.xp-t+.xp-t{margin-top:clamp(6px,1.2dvh,12px)}
#expert .xp-rh>.xp-tc{flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;padding:4px 10px}
.xp-tn{font:700 13.5px/1.2 var(--f-ui);color:var(--fg)}
.xp-dl{display:inline-block;margin:-8px 0 -10px -4px;padding:6px 4px 8px;color:var(--cu2);font:700 12.5px/1.2 var(--f-ui);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
#expert .xp-r{min-height:clamp(29px,4.6dvh,40px)}
#expert .xp-r>span{padding:2px 8px}
#expert .xp-star{min-height:clamp(32px,5.2dvh,46px)}
#expert .xp-star>span:first-child{font-size:clamp(16px,2.6dvh,18px)}
#expert{padding-top:clamp(8px,2dvh,18px)}
#pa-pubs[hidden]{display:none}
/* 0.52.0 : la couronne de l'accueil (.ac-xp, 0.40.0) laisse place à la carte Fifou Expert ci-dessous */
/* 0.52.0 : menu Fifou Expert (maquette B de Théo) : carte large de l'accueil (#accueil-expert.ac-xpc, à la place des 3 tuiles) et outils dans l'écran Expert (.xp-outils) */
#accueil .ac-xpc{display:flex;align-items:center;gap:10px;width:100%;min-height:clamp(56px,9dvh,72px);padding:6px 12px;border-radius:var(--r-l);border:1.5px solid var(--sel);background:linear-gradient(135deg,#2a2440,var(--sheet));color:var(--ink);font:inherit;text-align:left;cursor:pointer}
#accueil .ac-xpc>svg{width:26px;height:26px;color:var(--cu2);flex:none}
#accueil .ac-xpc.on{background:linear-gradient(135deg,#4a3420,var(--sheet))}
#accueil .ac-xpc-t{display:flex;flex-direction:column;min-width:0}
#accueil .ac-xpc-t b{font:700 16px/1.2 var(--f-ui)}
#accueil .ac-xpc-t small{font-size:12.5px;opacity:.75}
#accueil .ac-xpc-ff{display:flex;margin-left:auto;flex:none}
#accueil .ac-xpc-ff .hff{width:32px;height:36px;margin-left:-6px;background:none}
#accueil .ac-xpc:focus-visible{outline:3px solid var(--sel);outline-offset:2px}
#expert>.bas{margin-top:clamp(8px,1.6dvh,24px)}/* 0.53.0 : Retour au-dessus de la barre du bas à 360×640 */
/* 0.33.0 (audit des fonctions, B5) : « Prépare ta partie » en un écran ; la ligne des aides ouvre « Plus de réglages » (fermé par défaut) */
#nouvelle .pp-plus>summary{display:flex;align-items:center;gap:10px;min-height:48px;margin:0 0 10px;padding:6px 8px 6px 14px;cursor:pointer;list-style:none}
#nouvelle .pp-plus>summary::-webkit-details-marker{display:none}
#nouvelle #nv-aides-r{flex:1;min-width:0;font:600 14px/1.3 var(--f-ui);color:var(--fg)}
#nouvelle .pp-mod{display:inline-flex;align-items:center;gap:4px;min-height:36px;padding:0 10px;border-radius:var(--r-m);border:1px solid var(--sel);color:var(--sel);font:700 13px var(--f-ui);white-space:nowrap}
#nouvelle .pp-mod::after{content:'▾';transition:transform .2s}
#nouvelle .pp-plus[open] .pp-mod::after{transform:rotate(180deg)}
@media (max-height:700px){#nouvelle #nv-cad .pp-f{width:34px;height:40px}#nouvelle .pp-c{padding:10px 12px;margin-bottom:8px}#nouvelle #nv-cad-s{display:none}}

/* 0.34.0 (audit des fonctions, B6) : bilan court, deux gros boutons (Revoir la partie, Revanche) et un menu « … » */
#bilan .bi-go{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:10px;margin:6px 0 10px}
#bilan .bi-go .bouton{min-height:52px;margin:0}
#bilan .bi-go .bouton[hidden]{display:none}
/* 0.42.0 : en tête du bilan ; « Revoir la partie » en avant, « Revanche » en contour */
#bilan .bi-go{grid-template-columns:1fr;gap:8px;margin:12px 0 4px}
#bilan .bi-go #bi-revanche{min-height:48px;border-radius:var(--r-b);background:transparent;color:var(--sel);box-shadow:inset 0 0 0 1.5px var(--sel);padding:0 10px;font:600 16px var(--f-ui)}
#bilan .bi-go #bi-revue{min-height:56px;border-radius:var(--r-b);padding:0 10px;font:700 18px var(--f-ui);box-shadow:0 6px 18px rgba(0,0,0,.4)}
/* 0.55.0 : le dessin de Fifou du moment clé reste dans sa case (il débordait sur le texte) */
#bilan .bi-m .ffd{flex:none;overflow:hidden}#bilan .bi-m .ffd svg{width:100%!important;max-width:100%!important;height:100%;flex:none}
#revue .rv-tete{position:relative}
#revue .bi-plus{flex:none;position:static}#revue .bi-plus[hidden]{display:none}
#revue .bi-plus>summary{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--edge);border-radius:50%;cursor:pointer;list-style:none;color:var(--fg);background:var(--sheet)}
#revue .bi-plus>summary::-webkit-details-marker{display:none}#revue .bi-plus>summary::before{content:'…';font-size:20px;line-height:1;margin-top:-6px}#revue .bi-plus[open]>summary{border-color:var(--sel);color:var(--sel)}
#revue .rv-plus-p{position:absolute;right:0;top:calc(100% + 6px);z-index:60;width:min(320px,calc(100vw - 32px));max-height:calc(100dvh - var(--navh) - 80px);overflow:auto;padding:12px;border-radius:var(--r-l);background:var(--bg);border:1px solid var(--edge);box-shadow:0 16px 40px rgba(0,0,0,.55)}
#revue .rv-plus-p h3{margin:0 0 8px;font:600 15px var(--f-ui)}#revue .rv-plus-p .ft-menu{display:flex;flex-direction:column;gap:6px}#revue .rv-plus-p .ft-menu button{min-height:44px}#revue .rv-plus-p .aide{margin-top:8px}
/* 0.36.0 : notes des coups (smileys, pastilles, couleurs de bulle), copiées de Fifou Openings 3.1.284 (style.css : .rq, .rpop, bulle .bad/.mis/.imp, .vx) */
.rq{display:inline-flex;align-items:center;gap:5px;padding:0 10px 0 3px;border-radius:var(--r-pill);font-weight:700;font-size:14px!important;line-height:1.2;margin-right:4px;background:var(--tint);border:1.5px solid currentColor;vertical-align:-3px}
.rq .sm{width:18px;height:18px;flex:none;display:inline-block}
.rq.r-best{color:#1f9d55}.rq.r-excellent{color:#5aa63a}.rq.r-good{color:#6a8a7c}.rq.r-inacc{color:#c98a00}.rq.r-mistake{color:#e07a1f}.rq.r-blunder{color:#e0474c}
#partie .bubble.bad{border:2px solid #e0474c;background:#2c1d25}
#partie .bubble.mis{border:2px solid #e07a1f;background:#2c2320}
#partie .bubble.imp{border-color:rgba(201,138,0,.75)}
#partie .bubble .vx,.rv-bul .vx{display:none!important}
#partie .bubble p b{font-weight:700}
#pt-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){#pt-board .rpop{animation:none}}
/* 0.36.0 : ◀ ▶ pendant la partie (navigation d'Openings), dans la barre, une case pour les deux */
:is(#partie,#defi) .grow .pt-nav{display:flex;height:52px;box-shadow:inset 1px 0 0 var(--line)}
:is(#partie,#defi) .grow .pt-nav button{flex:1;min-width:0;box-shadow:none;font:600 16px/1 var(--f-ui);background:transparent;color:var(--fg)}
:is(#partie,#defi) .grow .pt-nav button::before{display:none}
:is(#partie,#defi) .grow .pt-nav button:disabled{color:var(--mut)}
.bi-mt .bi-sm{width:18px;height:18px;vertical-align:-4px;margin-right:5px;display:inline-block}

/* ---- 0.41.0 : Paramètres comme Openings (fenêtres .lrd : styles de commun/compte.js ; ici seulement le résumé d'un fichier) 3.1.284 (settings.js, rappels.js, progression.js, langue.js) ; Fifou toujours sans cadre ---- */
#parametres .st-meca{position:relative;flex:none;width:112px;height:72px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
#parametres .st-mff{position:absolute;left:0;bottom:0;width:52px;height:66px;z-index:1}
#parametres .st-mff .bishop{width:52px!important;max-width:52px;min-width:0;height:66px;flex:none!important;transform:rotate(8deg);transform-origin:50% 100%}
#parametres .st-cog{position:absolute;right:0;top:0;width:72px;height:72px}
#parametres .st-meca.spin .cg1{animation:cogq1 1.1s cubic-bezier(.3,.8,.3,1)}
#parametres .st-meca.spin .cg2{animation:cogq2 1.1s cubic-bezier(.3,.8,.3,1)}
#parametres .st-meca:focus-visible{outline:2px solid var(--sel);outline-offset:2px;border-radius:var(--r-m)}
@keyframes cogq1{to{transform:rotate(72deg)}}
@keyframes cogq2{to{transform:rotate(-103deg)}}
@media (prefers-reduced-motion:reduce){#parametres .st-meca.spin .cg1,#parametres .st-meca.spin .cg2{animation:none}}
#parametres .cp-row{justify-content:flex-start}
#parametres .cp-row>b{flex:1;min-width:0;text-align:start}
#parametres .cp-rsub{display:block;font:400 13px/1.3 var(--f-ui);color:var(--mut);margin-top:2px}
#parametres .st-rap-note{margin:2px 0 6px;font:400 13px/1.4 var(--f-ui);color:var(--mut)}
.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}
.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 16px/1.3 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}}
.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}
.lrd-d{margin:6px 0 0;font:500 13px/1.35 var(--f-ui);color:var(--mut)}
.lrd-d span{display:block;padding:3px 2px}
.lrd-d span+span{border-top:1px dashed var(--line)}
#langue{position:fixed;inset:0;z-index:9000;display:flex;flex-direction:column;background:radial-gradient(120% 70% at 50% 30%,#18284a 0%,#10192b 62%);color:var(--fg);font-family:var(--f-ui);padding:max(14px,2.5vh,env(safe-area-inset-top,0px)) 16px max(16px,env(safe-area-inset-bottom,0px));overflow:auto;animation:lg-in .3s ease-out}
@keyframes lg-in{from{opacity:0}
}
#langue.lg-out{transition:opacity .3s;opacity:0;pointer-events:none}
#langue .lg-top{display:flex;align-items:flex-end;gap:10px;margin-bottom:min(2vh,16px);max-width:480px;width:100%;margin-inline:auto}
#langue .lg-ff{flex:none;width:min(19vw,78px);height:min(23vw,94px);display:flex;align-items:flex-end;justify-content:center}
#langue .lg-ff .bishop{width:100%!important;max-width:none!important;min-width:0!important;height:100%!important;flex:none!important}
#langue .lg-bub{position:relative;flex:1;background:var(--sheet);border:1px solid var(--line);border-radius:16px;padding:10px 13px;font:400 clamp(17px,4.8vw,20px)/1.25 var(--f-display);text-wrap:balance}
#langue .lg-bub::before{content:"";position:absolute;left:-7px;bottom:16px;width:12px;height:12px;background:var(--sheet);border-left:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
#langue .lg-x{position:absolute;top:max(8px,env(safe-area-inset-top,0px));right:8px;z-index:2;width:44px;height:44px;border:0;background:none;color:var(--mut);font-size:26px;line-height:1;cursor:pointer}
#langue .lg-x~.lg-top{padding-right:40px;box-sizing:border-box}
#langue ul{list-style:none;margin:0 auto;padding:0;display:grid;gap:min(1.1vh,8px);align-content:start;flex:1;max-width:480px;width:100%}
#langue li button{width:100%;display:flex;align-items:center;gap:12px;min-height:max(46px,min(6.6vh,52px));padding:0 14px;border:1px solid var(--line);border-radius:12px;background:rgba(23,34,58,.85);color:var(--fg);font:600 17px/1.2 var(--f-ui);text-align:start;cursor:pointer}
#langue li button b{flex:1;font-weight:600}
#langue li button small{font-weight:400;font-size:13px;color:var(--mut)}
#langue .lg-c{flex:none;width:42px;height:24px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:7px;font:700 12px/1 var(--f-ui);letter-spacing:.06em;color:var(--mut)}
#langue .lg-c svg{width:15px;height:15px;min-width:0}
#langue li button[aria-checked="true"] .lg-c{border-color:var(--sel);color:var(--sel)}
#langue li button span.lg-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#langue li.lg-tel{margin-bottom:min(1.1vh,8px)}
#langue li button[aria-checked="true"]{border-color:var(--sel);background:rgba(224,149,90,.14)}
#langue li button[aria-checked="true"]::after{content:"\2713";color:var(--sel);font-weight:800;font-size:18px}
@media (prefers-reduced-motion:reduce){#langue{animation:none}
#langue.lg-out{transition:none}
}

#parametres [hidden]{display:none!important}

/* 0.44.0 : cran recommandé encadré comme Openings (#train-setup .rb) : bord cuivre, légende « ★ Recommandé » dans le bord haut, plus d'étoile seule.
   Rangées à 4 cases (conseils, cadence) : légende en casse normale pour tenir dans la case et son écart. */
#nouvelle .pp-seg button.r:not(.on),#nouvelle .pp-adv button.r:not(.on){border-color:rgba(var(--sel-rgb),.75)}
#nouvelle button.r .pp-rb{z-index:1}
#nouvelle #nv-conseils,#nouvelle #nv-evals,#nouvelle #nv-cad{margin-top:14px}
#nouvelle .pp-n4 .pp-rb,#nouvelle .pp-4 .pp-rb{padding:0 3px;font:700 10px/13px var(--f-ui);letter-spacing:0;text-transform:none}
/* ouverture : 2 tuiles (libre, personnaliser) */
#nouvelle .pp-adv.pp-o2{grid-template-columns:repeat(2,minmax(0,1fr))}
/* conseils au compteur (0.44.0, choix A) : − et + ronds, chiffre au centre encadré de cuivre quand c'est le cran recommandé ; raccourcis Aucun et Illimité en 2 boutons pleine largeur (Théo, 23h15) */
#nouvelle .pp-cpt{display:grid;grid-template-columns:52px 1fr 52px;gap:10px;align-items:center;margin-top:14px}
#nouvelle .pp-pm{width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--sel);font:600 28px/1 var(--f-ui);display:flex;align-items:center;justify-content:center;padding:0}
#nouvelle .pp-pm:disabled{opacity:.35}
#nouvelle .pp-val{position:relative;min-height:64px;border-radius:var(--r-m);border:1px solid var(--line);background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--fg)}
#nouvelle .pp-val.r{border:1.5px solid var(--sel);background:var(--tint)}
#nouvelle .pp-val b{font:700 26px/1 var(--f-ui);color:var(--sel);font-variant-numeric:tabular-nums}
#nouvelle .pp-val small{font:600 13px/1.2 var(--f-ui);margin-top:3px}
#nouvelle .pp-val .pp-rb[hidden]{display:none}
#nouvelle .pp-cch{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
#nouvelle .pp-chip{min-height:46px;padding:0 12px;border-radius:var(--r-m);border:1px solid rgba(var(--fg-rgb),.28);background:var(--tint);color:var(--fg);font:600 15px/1.1 var(--f-ui)}
#nouvelle .pp-chip.on{border-color:var(--sel);background:var(--tint);color:var(--sel)}
#nouvelle #nv-evals.pp-n2{row-gap:16px}
/* 0.56.0 : audit du design, lot 2 (choix de Théo, 03/11) : un seul bouton principal, en-têtes, 12 px minimum, retour d'Expert, en-tête de Mes erreurs */
/* bouton principal : celui de Prépare ta partie et de Classé (56 px, rayon 14, cuivre en dégradé, 18 px gras) partout */
.bouton{min-height:56px;border-radius:var(--r-b);padding:10px 20px;background:linear-gradient(180deg,var(--cu2),var(--sel));color:var(--cu-ink);font:700 18px/1.15 var(--f-ui);box-shadow:0 4px 0 var(--cu3),0 12px 26px -8px rgba(var(--sel-rgb),.55)}
.bouton:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px 0 var(--cu3)}
#nouvelle .pp-go,#ouvertures .pp-go,#classe .pp-go{font-size:18px}
#bilan .bi-go #bi-revue{box-shadow:0 4px 0 var(--cu3),0 12px 26px -8px rgba(var(--sel-rgb),.55)}
/* en-têtes : Fifou à gauche du titre (Mon répertoire d'Openings), titre en Young Serif */
#nouvelle .pp-top .pp-back{order:-2}#nouvelle .pp-top .pp-ff{order:-1}
#classe .cl-tete h2{font:400 22px/28px var(--f-display);letter-spacing:-.005em}
#expert .xp-top .pp-back{flex:none}
/* Mes erreurs : Fifou, titre et phrase dans un seul en-tête (plus de bulle sur une deuxième ligne) */
#erreurs .er-tete{align-items:center;gap:12px;margin:0 0 12px}
#erreurs .er-tete .ffd{width:52px;height:62px}#erreurs .er-tete .ffd .bishop{width:52px!important;max-width:52px;height:62px}
#erreurs .er-tete .ffd[hidden]{display:none}
#erreurs .er-h{margin:0}
#erreurs .er-bul{margin:2px 0 0;padding:0;border:0;background:none;font:400 15px/1.35 var(--f-ui);color:var(--mut)}
#erreurs .er-bul::before{display:none}
#erreurs .er-bul[hidden]{display:none}
/* texte de 12 px au minimum */
#accueil .ac-k,#accueil .aj-k,#progres .pg-k,#defi #df-mois,#erreurs .er-k,#revue #rv-notes .note{font-size:12px}
#accueil-jouer-s,#accueil-reprendre-s{font-size:12px}
#pg-courbe text.ax{font-size:12px}
#nouvelle .pp-rb,#nouvelle .pp-n4 .pp-rb,#nouvelle .pp-4 .pp-rb{font-size:12px}
#nouvelle .pp-4>button:last-child .pp-rb,#nouvelle .pp-n4>button:last-child .pp-rb{left:auto;right:4px;transform:translate(0,-50%)}
#nouvelle .pp-4>button:first-child .pp-rb,#nouvelle .pp-n4>button:first-child .pp-rb{left:4px;transform:translate(0,-50%)}
/* 0.56.0 : audit du design, lot 3 : historique de Mes progrès en lignes appuyables (chevron gris, plus de pastille par ligne), filtres de 44 px, fondu au-dessus des boutons collants */
#progres .pg-ligne{grid-template-columns:34px minmax(0,1fr) auto 14px}
#progres .pg-ligne .pg-rv{display:block;min-height:0;padding:0;border-radius:0;background:none;color:var(--mut);font:400 26px/1 var(--f-ui);text-align:center}
#progres .pg-revoir:active{background:var(--tint)}
#progres .pg-chips button,#progres .pg-seg.sm button{min-height:44px}
.pp-bas,.ed-bas{padding-top:26px;background:linear-gradient(180deg,rgba(var(--bg-rgb),0),var(--bg) 55%)}
/* 0.56.0 : audit du design, lot 4 (autres constats) */
.tu-scene{margin-top:auto}.tu-note{margin:14px 0 auto}/* contenu du tutoriel centré entre le haut et le bas (grands écrans) */
#nouvelle .pp-sw,#parametres .swrow{cursor:pointer}
.rv-tete h2{font-size:20px}@media (max-width:380px){.rv-tete h2{font-size:17px}}
#classe .cl-reinit{min-height:44px}
.bouton:disabled{opacity:.45}
.xp-pied .xp-lien{padding:14px 4px;margin:-14px 0 -14px 6px}
/* 0.60.0 : bilan épuré (maquette B du fil « Épurer l'écran de fin de partie ») : la fin animée du Classé (même scène, titre, éclats) dans l'appli,
   barre du bas gardée ; tout sur un écran sans défiler (360×640, 390×780, 412×830) */
html:has(>body.ec-bilan),body.ec-bilan{overflow:hidden;overscroll-behavior:none;height:100%}
body.ec-bilan{padding-block:0}
body.ec-bilan main{height:100dvh;display:flex;flex-direction:column;padding-top:max(8px,env(safe-area-inset-top,0px));padding-bottom:calc(var(--navh) + 10px)}
body.ec-bilan #apptitle,body.ec-bilan main>.tabs{display:none}
#bilan{position:relative;isolation:isolate;flex:1 1 auto;min-height:0;width:100%;max-width:520px;margin:0 auto;padding:0;display:flex;flex-direction:column;color:#f3eee6}
#bilan:not([hidden]){display:flex}
#bilan>*{position:relative;z-index:2}#bilan>.cf-lueur,#bilan>.cf-bokeh{position:absolute;z-index:0}#bilan>.cf-lueur{top:-140px}
#bilan .cf-toile{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:8}
#bilan .bi-hero{flex:1 1 auto;min-height:0;justify-content:flex-end}
#bilan .cf-scene{flex:1 1 auto;min-height:84px;height:auto;max-height:300px}
#bilan .cf-titre{font:400 36px/1.05 var(--f-display);margin:2px 0 0}
#bilan .cf-orne{width:100%;justify-content:center}#bilan .cf-orne b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 24px)}#bilan .cf-orne i{flex:1 1 0;min-width:8px}
#bilan #bi-attente{text-align:center;margin:14px 0 0;flex:none}
#bi-corps{flex:none;display:flex;flex-direction:column}#bi-corps[hidden]{display:none}
.bi-carte{display:flex;align-items:stretch;margin-top:12px;border-radius:20px;
 background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.02)),rgba(18,27,48,.75);border:1px solid rgba(242,183,131,.38);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 12px 28px rgba(0,0,0,.38)}
#bilan.cf-lose .bi-carte{border-color:rgba(156,195,255,.3)}
.bi-carte .bi-t{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:10px 8px;text-align:center;background:none;border:0;box-shadow:none;border-radius:0}
.bi-carte .bi-t+.bi-t{border-left:1px solid rgba(255,255,255,.09)}
.bi-carte .bi-t[hidden]{display:none}
.bi-carte .bi-l{font-size:14px;color:var(--mut);line-height:1.2}
.bi-anneau.cf-anneau{width:96px;height:96px;margin:4px 0 0}
.bi-anneau.cf-anneau b{display:flex;align-items:baseline;justify-content:center;gap:1px;padding-top:30px;font:400 30px/1 var(--f-display);font-variant-numeric:tabular-nums}
.bi-anneau.cf-anneau b small{font:600 13px/1 var(--f-ui);color:var(--mut)}
.bi-carte .bi-v{font:400 32px/1.1 var(--f-display);color:var(--sel);margin:6px 0 0;white-space:nowrap}.bi-carte .bi-v.bi-long{font-size:24px}
.bi-carte .bi-s{font-size:14px;color:var(--fg);line-height:1.2}
.bi-pts{display:flex;gap:6px;margin:4px 0 2px}.bi-pts[hidden]{display:none}.bi-pts i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.14)}.bi-pts i.ok{background:var(--sel)}
#bilan .bi-note{text-align:center;font-size:12.5px;margin:8px 0 0;line-height:1.3}
#bilan #bi-palier{margin:8px 0 0;text-align:center;font-size:14px}
#bilan .bi-go{margin:10px 0 0}
/* l'analyse reprend « Partager et plus » */
.bi-anneau.cf-anneau b.bi-trois{font-size:25px}
/* 0.57.0 : « Nulle ou abandon » en page entière (demande de Théo), style d'Openings */
.ft-fen.ft-page{z-index:90;align-items:stretch;justify-content:center;padding:0 0 var(--navh);background:var(--bg)}
.ft-page .ft-fen-c{width:min(100%,560px);display:flex;flex-direction:column;padding:max(14px,env(safe-area-inset-top)) 16px 16px;border:0;border-radius:0;background:none;box-shadow:none;text-align:left;overflow-y:auto}
.fp-top{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.fp-top .su-h{flex:1;margin:0;font:400 24px/1.2 var(--f-display)}
.fp-fifou{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.fp-fifou .ffd{flex:none;width:72px;height:86px;display:block}
.fp-fifou .ffd svg{width:100%;height:100%}
.fp-bul{flex:1;margin:0;padding:12px 14px;border-radius:var(--r-b);background:var(--sheet);border:1px solid var(--edge);box-shadow:var(--lift);font-size:16px;line-height:1.3;color:var(--fg)}
.ft-page .ft-menu{gap:10px;margin:0}
.fp-carte{display:flex;align-items:center;gap:14px;width:100%;min-height:72px;padding:12px 14px;text-align:left;border-radius:var(--r-b);background:var(--sheet);border:1px solid var(--edge);box-shadow:var(--lift);color:var(--fg);font:inherit}
.fp-carte:active{transform:scale(.985)}
.fp-ic{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--r-m);background:var(--tint);color:var(--sel)}
.fp-ic svg{width:24px;height:24px}
.fp-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.fp-t b{font-size:17px;line-height:1.25;font-weight:700}
.fp-t small{font-size:14px;line-height:1.3;color:var(--mut)}
.fp-chev{flex:none;font-size:26px;line-height:1;color:var(--mut)}
.fp-abandon .fp-ic{background:rgba(229,93,93,.14);color:#ef7b7b}
.fp-bas{margin-top:auto;padding-top:16px}
.fp-bas .bouton{width:100%}

/* ===== 0.68.0 : audit design n° 2 (AUDIT-DESIGN-2.md, tout validé par Théo le 03/11) ===== */
/* n° 2 : analyse de la partie, titre sur une ligne et précision dans la phrase dessous (modèle d'en-tête) ; « Erreur suivante » en tuile cuivre dans la barre de 52 px */
#revue .rv-tete{height:auto;min-height:52px}
#revue{--rbw:min(100vw - 32px - var(--evw),100dvh - var(--navh) - 304px,560px)}/* la tuile de 44 px dans la barre prend 8 px : l'échiquier les rend (sans défilement à 360 × 640, bulle la plus longue comprise) */
#revue .rv-tt{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
#revue .rv-tete h2{flex:none;max-width:100%;font-size:22px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:380px){#revue .rv-tete h2{font-size:19px;letter-spacing:-.01em}}
#revue .rv-notes{position:relative;flex-direction:row;align-items:baseline;gap:5px;padding:0;min-height:0;height:auto;background:none;box-shadow:none;border:0;color:var(--mut);font:500 15px/1.2 var(--f-ui)}
#revue .rv-notes::after{content:"›";color:var(--mut);margin-left:2px}
#revue .rv-notes::before{content:"";position:absolute;inset:-13px -8px}
#revue #rv-notes .note{font-size:15px;color:var(--mut)}
#revue .rv-notes b{font-size:15px}
.rv-nav>.bouton{height:44px;min-height:44px;margin:4px 6px;padding:0 10px;border-radius:12px;white-space:nowrap;font:700 16px/1.1 var(--f-ui);color:#1d1107;background:linear-gradient(180deg,var(--cu2,#f2b783),var(--sel));box-shadow:0 2px 0 rgba(0,0,0,.25)}
.rv-nav>.bouton:disabled{color:var(--mut);background:var(--tint);box-shadow:inset 0 0 0 1px var(--line);opacity:.7}
/* n° 3 : Position personnalisée, Fifou entier dans sa case (sans toucher le titre), palette de 44 px au moins, bouton principal au format commun */
#editeur .ed-tete .ffd{width:48px;height:56px;overflow:visible}
#editeur .ed-tete .ffd svg{width:48px!important;height:56px!important;max-width:none!important;flex:none!important}
#editeur .ed-pal{gap:2px}
#editeur .ed-bas .bouton{min-height:56px;font-size:18px}
/* n° 4 et 9 : Mes erreurs, bouton principal 56 px / 18 px collé au-dessus de la barre du bas (règle 1), même écran vide ; l'en-tête garde son Fifou */
#erreurs:not([hidden]){display:flex;flex-direction:column;min-height:calc(100dvh - 32px - var(--navh));box-sizing:border-box}
#erreurs .er-bas{margin-top:auto}
#erreurs .er-bas[hidden],#erreurs .er-bas .bouton[hidden]{display:none}
#erreurs .er-bas .bouton{width:100%;min-height:56px;margin:0;font-size:18px}
#erreurs .er-hero{align-items:center;width:100%;text-align:left;color:var(--fg);font:inherit;cursor:pointer;transition:transform .12s,border-color .12s}
#erreurs .er-hero:active{transform:scale(.98);border-color:var(--sel)}
/* 0.72.0 : intertitres de gravité (couleurs des évaluations), remise à zéro discrète en bas de liste */
.er-g{display:flex;align-items:center;gap:6px;margin:12px 2px 6px;font:700 12.5px/1 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.er-g:first-child{margin-top:0}.er-g i{width:9px;height:9px;border-radius:50%;flex:none}.er-g span{margin-left:auto;font-weight:600;letter-spacing:0;color:var(--mut)}
.er-raz{display:block;margin:14px auto 4px;padding:10px 14px;min-height:44px;background:none;border:0;color:var(--mut);font:600 13px/1.2 var(--f-ui);text-decoration:underline;text-underline-offset:3px}
.er-raz[hidden]{display:none}.er-raz:active{color:var(--fg)}
#erreurs .er-vide{flex:1;justify-content:center}
/* n° 5 : titres d'écran à 24 px partout (règle 2), 22 px seulement à côté d'une pastille */
#progres h2,#erreurs h2,#ouvertures h2,#expert h2{font-size:24px;line-height:1.2}
/* n° 6 : Partie classée, les blocs grandissent et se répartissent la hauteur au lieu d'un trou au-dessus du bouton (règle 7), toujours sans défilement à 360 × 640 */
#classe.cl-fixe:not([hidden]){justify-content:space-between}
#classe.cl-fixe .pp-bas{margin-top:8px}
#classe.cl-fixe .pp-coul button{min-height:clamp(64px,12dvh - 10px,92px)}
#classe.cl-fixe .pp-3 button{height:clamp(96px,22dvh - 40px,156px)}
#classe.cl-fixe .pp-3 .pp-f{width:clamp(44px,9dvh - 10px,64px);height:clamp(52px,10.5dvh - 12px,76px)}
#classe.cl-fixe .cl-regles li{min-height:clamp(52px,12dvh - 20px,84px)}
/* p2 : les titres espagnols tiennent sur une ligne à 360 (« Clasificatoria » à côté de la pastille, « Prepara tu partida » à 22 px sur petit écran) */
@media (max-width:380px){html[lang=es] #nouvelle .su-h{font-size:22px}}
#nouvelle .su-h,#classe .cl-tete h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (max-width:380px){#classe.cl-fixe .cl-tete{gap:6px}#classe.cl-fixe .cl-pill{padding:6px 9px;font-size:13px}#classe.cl-fixe .cl-pill b{font-size:16px}}
/* n° 7 : menu Fifou Expert d'un abonné, une carte « Abonnement actif » au lieu du tableau Publicités */
#expert .xp-actif{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;margin:10px 0 0;padding:10px 14px;border-radius:var(--r-l);border:1px solid rgba(var(--sel-rgb),.45);background:linear-gradient(160deg,rgba(var(--sel-rgb),.14),var(--sheet) 60%);color:var(--fg);text-align:left;font:inherit}
#expert .xp-actif>span:nth-child(2){flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
#expert .xp-actif b{font:700 16px/1.2 var(--f-ui)}#expert .xp-actif small{font:500 13px/1.3 var(--f-ui);color:var(--mut)}
#expert .xp-ok-ic{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(127,224,170,.16);color:var(--vert2);font:700 17px/1 var(--f-ui)}
#expert .xp-chev{flex:none;font-size:24px;line-height:1;color:var(--mut)}
/* n° 8 : Mes progrès sans aucune partie, courbe en pointillés, pas de compteurs vides, bouton 56 px collé au-dessus de la barre, sans défilement */
#progres.pg-vide:not([hidden]){display:flex;flex-direction:column;min-height:calc(100dvh - 32px - var(--navh));box-sizing:border-box}
#progres.pg-vide .pg-stats,#progres.pg-vide .pg-hi{display:none!important}
#progres.pg-vide .pg-bas{margin-top:auto}
#progres .pg-bas .bouton{width:100%;min-height:56px;margin:0;font-size:18px}
#pg-courbe .pt0{fill:none;stroke:var(--mut);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1 7;opacity:.8}
/* n° 10 : accueil, petites lignes des boutons à 12,5 px ; « Continuer » grisé un peu moins éteint (petite ligne à 0,75 au lieu de 0,56) */
#accueil .ac-b small{font-size:12.5px}#accueil .ac-b.arme small{font-size:12px;letter-spacing:-.01em}
#accueil .ac-b2.dis{opacity:.75}#accueil .ac-b2.dis small{opacity:1}
/* p5 et règle 9 : l'écran du compte Fifou ouvert depuis Paramètres laisse la barre du bas visible (plein écran seulement pendant le tutoriel) */
body:not(.ec-tuto) #cpt{bottom:var(--navh);padding-bottom:14px}
/* p4 : segments de Mes progrès à 44 px de large au moins (« All » en anglais) */
#progres .pg-seg button,#progres .pg-chips button{min-width:44px}
/* p1 et règle 12 : avec « moins d'animations » (téléphone) ou la vitesse « Aucune », plus aucune boucle sur le bilan ni la fin classée : l'état final seulement */
html.ft-calme #bilan *,html.ft-calme #bilan *::before,html.ft-calme #bilan *::after,html.ft-calme #classe-fin *,html.ft-calme #classe-fin *::before,html.ft-calme #classe-fin *::after{animation-duration:1ms!important;animation-delay:0s!important;animation-iteration-count:1!important}
@media (prefers-reduced-motion:reduce){#bilan *,#bilan *::before,#bilan *::after,#classe-fin *,#classe-fin *::before,#classe-fin *::after{animation-duration:1ms!important;animation-delay:0s!important;animation-iteration-count:1!important}}
/* n° 4, 8 et 9 : le bouton s'arrête à 10 px de la barre (pas de marge en dessous) ; sans partie, la courbe en pointillés est plus basse pour tenir sans défiler */
#erreurs:not([hidden]),#progres.pg-vide:not([hidden]){padding-bottom:0}
#erreurs>.bas{display:none}
#progres.pg-vide #pg-courbe{height:96px}
/* 0.69.0 (Théo, 04/11) : 4 tuiles en 2 × 2 sous la carte de partie : Défi | Mes erreurs / Fifou Expert | Position.
   Même taille pour les 4 ; Fifou à gauche, titre (et compteur utile) à droite. La tuile Expert garde la DA de la carte de 0.52.0
   (dégradé, contour cuivre, couronne, titre), avec un seul Fifou couronné à droite. La carte de partie cède la hauteur (sa scène est souple). */
#accueil .ac-q{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(50px,8.4dvh,72px);gap:clamp(6px,1dvh,8px);margin:0;flex:none;width:100%}
#accueil .ac-q>.home-card,#accueil .ac-q>.ac-xpc{grid-column:auto!important;min-width:0;min-height:0;margin:0;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:6px;
  padding:4px 8px 4px 6px;text-align:left;border-radius:var(--r-l);position:relative}
#accueil .ac-q .hff{flex:none;width:clamp(34px,5.6dvh,46px);height:clamp(36px,6dvh,50px);background:none}
#accueil .ac-q .hc-txt{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0}
#accueil .ac-q .home-t{font:700 14px/1.15 var(--f-ui)!important;white-space:normal;overflow-wrap:anywhere;color:var(--fg)}
#accueil .ac-q .hc-sub{display:block;font:500 12px/1.2 var(--f-ui);color:var(--mut);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
#accueil .ac-q #accueil-position .hc-sub{display:none}
#accueil .ac-q .hc-n{display:none}
#accueil .ac-q .hc-sub.on{color:var(--cu2);font-weight:700}
#accueil .ac-q .ac-xpc{width:auto;gap:4px;padding:4px 5px 4px 7px;min-height:0}
#accueil .ac-q .ac-xpc>svg{width:18px;height:18px}
#accueil .ac-q .ac-xpc-t b{font:700 14px/1.15 var(--f-ui);white-space:nowrap}
#accueil .ac-q .ac-xpc-t small{font-size:12px}
#accueil .ac-q .ac-xpc-ff{flex:none;margin-left:auto;width:clamp(32px,5.4dvh,46px);height:clamp(38px,6.2dvh,52px)}
#accueil .ac-q .ac-xpc-ff svg,#accueil .ac-q .ac-xpc-ff .bishop{width:100%!important;max-width:100%;min-width:0;height:100%;display:block}
/* 360 × 640 : sans le titre « Une partie à ton niveau », la scène garde sa hauteur malgré la 2e ligne de tuiles */
@media (max-height:700px){#accueil .ac-hero .htx{display:none}}
/* 0.69.0 (Théo, 04/11) : la tuile Fifou Expert a toujours la teinte cuivre de la version abonné */
#accueil .ac-q .ac-xpc{background:linear-gradient(135deg,#4a3420,var(--sheet))}
/* 0.80.0 : 2 règles au lieu de 4 (une seule rangée) ; la place libérée va aux tuiles, et la page va jusqu'à la barre du bas dans les deux cas */
#classe:not([hidden]){display:flex;flex-direction:column;justify-content:space-between;min-height:calc(100dvh - 32px - var(--navh))}
#classe:not(.cl-fixe) .pp-3 button{height:clamp(56px,14dvh - 34px,110px);min-height:56px}
#classe:not(.cl-fixe) .cl-regles li{min-height:clamp(40px,10dvh - 24px,72px)}
#classe.cl-fixe .pp-coul button{min-height:clamp(64px,13dvh - 10px,100px)}
#classe.cl-fixe .pp-3 button{height:clamp(96px,26dvh - 40px,176px)}
#classe.cl-fixe .cl-regles li{min-height:clamp(56px,14dvh - 24px,96px)}
/* 0.77.0 : confirmation d'abandon en petite fenêtre (demande de Théo) */
.ft-ab-ff{display:block;width:64px;height:76px;margin:0 auto 8px}.ft-ab-ff svg{width:100%;height:100%}
.ft-ab-b{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.ft-ab-b>button{min-height:48px;margin:0;font:700 16px/1.1 var(--f-ui)}
.ft-ab-b .ft-oui{border-radius:var(--r-l);background:rgba(var(--red-rgb),.14);color:var(--red);border:1px solid rgba(var(--red-rgb),.45);box-shadow:none}
/* 0.77.0 : bouton du milieu toujours centré dans sa tuile, écarts égaux à gauche et à droite (petits écrans : flèches plus étroites) */
.rv-nav{grid-template-columns:56px minmax(0,1fr) 56px}
.rv-nav>.bouton{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (max-width:380px){.rv-nav{grid-template-columns:48px minmax(0,1fr) 48px}.rv-nav>.bouton{font-size:15px;padding:0 8px}}
/* 0.74.0 (Théo) : « Thème caché » se touche pour révéler le thème, invite cuivre à côté ; réussi ou déjà fait, bouton cuivre plein « Retour au menu principal » à la place de la barre */
button.df-theme,.df-voir{min-height:0;min-width:0;margin:0}button.df-theme{cursor:pointer;font-family:var(--f-ui)}button.df-theme:disabled{cursor:default;opacity:1}
.df-theme:focus-visible,.df-voir:focus-visible{outline:2px solid var(--sel);outline-offset:2px}
.df-voir{position:relative;display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 2px;border:0;background:none;color:var(--sel);font:700 13px/1 var(--f-ui);white-space:nowrap;cursor:pointer}
.df-voir::after{content:"";order:-1;width:15px;height:15px;background:currentColor;-webkit-mask:var(--oeil) center/contain no-repeat;mask:var(--oeil) center/contain no-repeat;
  --oeil: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='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
.df-voir::before{content:"";position:absolute;inset:-10px -4px}.df-voir[hidden]{display:none}
#defi .df-menu{width:var(--dbw);height:44px;min-height:44px;margin-bottom:8px;padding:0 16px;font-size:17px}
@media (min-height:740px){.df-voir{font-size:14px;height:28px}}
/* pastilles de fin (essais, indices) sur la ligne de l'étiquette, dans la bulle : le bouton seul prend la place de la barre, rien ne bouge */
#defi .df-ligne{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin-bottom:4px}#defi .df-ligne:not(:has(:not([hidden]))){display:none}
#defi .df-ligne .df-tag{margin:0}#defi .df-fin{min-height:0}#defi .df-fin[hidden]{display:none}
#defi .df-fin .df-puce{height:18px;padding:0 7px;font:600 12px/1 var(--f-ui)}#defi .df-ligne{margin-bottom:3px}
button.df-theme{position:relative}button.df-theme:not(:disabled)::after{content:"";position:absolute;inset:-10px -3px}
/* 0.74.0 (Théo) : Position personnalisée sans FEN et sans défilement ; l'échiquier prend la hauteur qui reste (--edb), le reste se resserre */
#editeur{--edb:min(100%,440px,100dvh - var(--navh) - 334px - max(10px,env(safe-area-inset-top)));padding-bottom:0}
#editeur .ed-tete{margin:0 0 6px}#editeur .ed-tete .ffd{width:36px;height:44px}#editeur .ed-tete .ffd svg{width:36px!important;height:44px!important}
#editeur .bi-bov{width:var(--edb);margin:0 auto 6px}
#editeur .ed-pal{margin:0 0 6px}#editeur .ed-pal button{height:44px;min-height:44px}#editeur .ed-pal img{width:34px;height:34px}
#editeur .ed-outils{margin:0 0 6px}
#editeur .ed-trait{margin:0}#editeur .ed-trait button{min-height:48px;flex-direction:row;gap:8px}#editeur .ed-trait img{width:26px;height:26px}
#editeur .ed-bas{margin-top:6px;padding-top:0;background:var(--bg)}
@media (min-height:740px){#editeur{--edb:min(100%,440px,100dvh - var(--navh) - 358px - max(10px,env(safe-area-inset-top)))}
  #editeur .ed-tete .ffd{width:48px;height:56px}#editeur .ed-tete .ffd svg{width:48px!important;height:56px!important}
  #editeur .ed-pal button{height:46px;min-height:46px}#editeur .ed-pal img{width:36px;height:36px}#editeur .ed-trait button{min-height:56px}#editeur .ed-trait img{width:30px;height:30px}}