* { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg-deep: #14181f; --bg-card: #1c2230; --bg-elevated: #232a3b; --bg-input: #0e1219; --border: #2d3548; --border-soft: #232a3b; --text: #e6e8ec; --text-dim: #9aa3b6; --text-faint: #6c7689; --accent: #c9a55a; --accent-soft: #8a7340; --light-sq: #ead8b0; --dark-sq: #9d7a4f; /* Phase 8.2 (A) — Teinte de l'échiquier en mode drill (rosée). Définie en variables dédiées pour que le point D puisse rendre la palette sélectionnable PAR TYPE d'affichage (normal / exploration / drill). Le point D introduira de même --explore-light-sq / --explore-dark-sq ; ici on ne pose que le drill, seul état nouveau de cette phase. */ --drill-light-sq: #f0d2d8; --drill-dark-sq: #c98b97; /* Phase 8.4 (D) — Teinte exploration en variables (était en dur dans .board.exploring). Permet au sélecteur de thèmes de la rendre configurable par type d'affichage, comme le drill. */ --explore-light-sq: #d8d4ea; --explore-dark-sq: #7a78a8; --excellent: #6bbe6b; --good: #95d195; --book: #a4a4a4; --inaccuracy: #f5c542; --mistake: #ed8a3d; --blunder: #d65656; --brilliant: #44c7d6; --board-size: 480px; --piece-size: 52px; } @media (max-width: 1180px) { :root { --board-size: 420px; --piece-size: 44px; } } @media (max-width: 760px) { :root { --board-size: min(92vw, 420px); --piece-size: calc(min(92vw, 420px) * 0.108); } } /* Phase 8.4 (D) — MODE CLAIR. Palette "Papier" validée via Claude Design (chaude et lisible). Activé par data-theme="light" sur (posé par ui/theme.js : choix "Clair", ou "Auto" si le système est en clair). Le mode sombre reste le défaut (variables de :root ci-dessus, appliquées aussi sous data-theme="dark"). On ne surcharge ICI que les variables de COULEUR ; les dimensions (--board-size, --piece-size) restent communes. Les couleurs de cases (--light-sq, etc.) sont gérées dynamiquement par theme.js selon le thème d'échiquier choisi, donc NON redéfinies ici. */ :root[data-theme="light"] { --bg-deep: #ede7d8; --bg-card: #fbf8f0; --bg-elevated: #f3ecda; --bg-input: #fffdf6; --border: #9b9580; --border-soft: #e7dfc8; --text: #000000; --text-dim: #333333; --text-faint: #8c836d; --accent: #b08a3a; --accent-soft: #b08a3aaa; --excellent: #4fa64f; --good: #7eb87e; --book: #948977; --inaccuracy: #d9a31a; --mistake: #d77a2e; --blunder: #c14848; --brilliant: #16a3b6; } body { font-family: ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif; background: var(--bg-deep); background-image: radial-gradient(at 20% 0%, rgba(201, 165, 90, 0.04) 0%, transparent 50%), radial-gradient(at 80% 100%, rgba(68, 199, 214, 0.03) 0%, transparent 50%); color: var(--text); min-height: 100vh; padding: 18px; font-size: 14px; line-height: 1.5; } .container { max-width: 1380px; margin: 0 auto; } header { display: flex; justify-content: space-between; align-items: center; padding: 14px 22px 18px; margin-bottom: 18px; border-bottom: 1px solid var(--border); } /* Phase 6.3 (A6) — Header rétractable pour libérer la verticale en mode exploration. La classe .collapsed réduit le padding, masque le titre h1 et tous les boutons d'action sauf le toggle lui-même. État persisté en localStorage. */ header.collapsed { padding: 4px 22px; margin-bottom: 8px; justify-content: flex-end; } header.collapsed h1 { display: none; } header.collapsed .actions > button:not(.header-toggle) { display: none; } header.collapsed .actions { gap: 0; } .header-toggle { padding: 6px 10px !important; font-size: 14px; line-height: 1; min-width: 36px; } .header-toggle:hover { color: var(--accent); } h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 24px; letter-spacing: -0.01em; color: var(--text); } h1 .accent { color: var(--accent); font-style: italic; } h1 .king { font-size: 22px; vertical-align: -1px; margin-inline-end: 6px; } .actions { display: flex; gap: 8px; } button { background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border); padding: 8px 14px; border-radius: 4px; cursor: pointer; font-size: 13px; font-family: inherit; font-weight: 500; transition: background 0.15s, border-color 0.15s, transform 0.05s; } button:hover { background: #2c344a; border-color: var(--accent-soft); } button:active { transform: translateY(1px); } button:disabled { opacity: 0.4; cursor: not-allowed; } button.primary { background: var(--accent); color: #1a1a1a; border-color: var(--accent); font-weight: 600; } button.primary:hover { background: #d6b369; } .main-grid { display: grid; grid-template-columns: minmax(420px, 540px) 1fr; gap: 20px; align-items: start; } /* Phase 8.2.1 (point 2b) — En mode drill sur PC, la colonne gauche accueille l'échiquier ET le panneau à sa droite : on lui laisse plus de largeur. Au-dessous de 1180px la grille passe déjà en une seule colonne (règle plus bas), donc cette extension ne concerne que le PC. */ body.drill-active .main-grid { grid-template-columns: minmax(640px, 1fr) minmax(0, 360px); } @media (max-width: 1180px) { .main-grid { grid-template-columns: 1fr; } /* Phase 8.2.1 (fix mobile) — POURQUOI cette surcharge explicite : la règle body.drill-active .main-grid (spécificité 0,2,0) bat le .main-grid du media query (0,1,0), donc SANS ceci la grille restait à 2 colonnes en mode drill sur mobile/tablette → l'échiquier et la sidebar se côtoyaient, le layout cassait et la bannière "Mode drill" se retrouvait visuellement décalée sous le bandeau joueur. On force la colonne unique avec une spécificité au moins égale. La scène (.drill-stage) repasse déjà en colonne via sa propre media query, donc panneau sous l'échiquier comme voulu. */ body.drill-active .main-grid { grid-template-columns: 1fr; } } @media (max-width: 760px) { body { padding: 10px; font-size: 13px; } header { padding: 10px 12px 14px; margin-bottom: 12px; flex-wrap: wrap; gap: 10px; } h1 { font-size: 20px; } .card { padding: 12px; } .nav-primary { gap: 4px; } .nav-btn-big { padding: 12px 4px; font-size: 16px; min-height: 44px; } .nav-play { font-size: 12px !important; } .move-san { font-size: 22px; } .stats-acc { font-size: 26px; } .moves-list { max-height: 220px; font-size: 12px; } .modal { padding: 14px; } } .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 16px; } .player-bar { /* Phase 6.5 (C3) — La player-bar passe en flex column pour pouvoir contenir deux rangs : rang 1 (nom + Elo + sélecteur Top ⑂ + clock + acc) et rang 2 (pièces capturées + avantage matériel). La grid 3 colonnes d'origine est descendue d'un niveau dans .player-bar-row1. */ display: flex; flex-direction: column; padding: 8px 12px; background: var(--bg-elevated); border-radius: 4px; margin-bottom: 10px; } .player-bar-row1 { /* Phase 4.4 — Grid 3 colonnes : nom à gauche, sélecteur MultiPV centré absolu (indépendant des largeurs gauche/droite), méta à droite. grid-template-columns: 1fr auto 1fr garantit que la zone centrale est PARFAITEMENT centrée par rapport à la barre, peu importe la longueur du nom du joueur ou la présence du clock. */ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; } .player-bar-left { justify-self: start; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .player-bar-center { justify-self: center; } .player-bar.white { background: linear-gradient(to right, #ead8b0 0%, #d4c198 100%); color: #1a1a1a; } .player-bar.black { background: linear-gradient(to right, #2a2a2a 0%, #1a1a1a 100%); color: #ead8b0; } .player-name { font-weight: 600; font-size: 14px; } .player-elo { font-size: 12px; opacity: 0.7; margin-inline-start: 8px; } .player-acc { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; } .player-meta { display: flex; align-items: center; gap: 14px; justify-self: end; /* Phase 6.5.2 — Garde-fou ultime sur les très petits écrans : si vraiment pas la place, on autorise les éléments de la meta (clock + perf-elo) à descendre sur une 2e ligne plutôt que forcer un reflow de toute la grid. */ flex-wrap: wrap; justify-content: flex-end; } .player-clock { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 13px; font-weight: 700; color: var(--text); background: var(--bg-input); border: 1px solid var(--border); padding: 3px 8px; border-radius: 3px; min-width: 56px; text-align: center; } .player-clock.low { color: var(--inaccuracy); border-color: var(--inaccuracy); } .player-clock.crit { color: var(--blunder); border-color: var(--blunder); } .acc-perf-elo { font-family: ui-monospace, "SF Mono", monospace; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 10px; background: rgba(0, 0, 0, 0.18); cursor: help; } .player-bar.white .acc-perf-elo { background: rgba(0, 0, 0, 0.12); color: #2a2618; } .player-bar.black .acc-perf-elo { background: rgba(255, 255, 255, 0.10); color: #ead8b0; } /* ============================================================ Phase 6.5 (C3) — Rang 2 : pièces capturées + avantage matériel ============================================================ Style Lichess : pièces capturées étalées par type, suivies du badge d'avantage matériel (uniquement pour le joueur ayant l'avantage net). Hauteur réservée constante pour ne pas faire sauter le layout entre coups (sans capture en début de partie → hauteur min via .empty). Les pions sont volontairement un peu plus serrés pour densifier le bloc visuel comme sur Lichess. */ .player-captured { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin-top: 4px; padding-inline-start: 2px; min-height: 18px; line-height: 1; font-size: 16px; } /* Phase 8.9 (#3) — Quand aucune pièce n'a encore été capturée, on garde la zone dans le flow pour réserver l'espace d'UNE ligne (évite le saut de layout au premier coup avec capture), mais on la rend invisible. IMPORTANT : il existe une règle globale `.empty { padding: 40px 20px }` (utilisée pour les états vides de listes/panneaux) qui s'applique sinon à cette zone et la rend énorme. On neutralise donc explicitement le padding et on verrouille la hauteur à une seule ligne (un simple min-height peut en plus être étiré par le calcul flex du parent). */ .player-captured.empty { visibility: hidden; height: 18px; min-height: 18px; max-height: 18px; padding: 0 0 0 2px; overflow: hidden; flex: 0 0 auto; } .cap-piece { display: inline-block; line-height: 1; /* La couleur s'hérite de .player-bar.white / .player-bar.black, ce qui donne automatiquement un contraste correct sur chaque fond. */ } /* Phase 6.5.1 (C3) — Les pions sont compactés en "♟ ×N" via cap-pawn-group. Un seul glyphe + multiplicateur, plus lisible et compact que N pions successifs. Pour N=1 on garde juste le glyphe seul (pas de "×1"). */ .cap-pawn-group { display: inline-flex; align-items: baseline; gap: 0; margin-inline-end: 4px; } .cap-mult { font-family: ui-monospace, "SF Mono", monospace; font-size: 11px; font-weight: 700; margin-inline-start: 1px; opacity: 0.9; } /* Petit espace entre groupes de types différents (cavaliers, fous, tours…) */ .cap-piece-n + :not(.cap-piece-n), .cap-piece-b + :not(.cap-piece-b), .cap-piece-r + :not(.cap-piece-r) { margin-inline-start: 4px; } .cap-advantage { font-family: ui-monospace, "SF Mono", monospace; font-size: 11.5px; font-weight: 700; margin-inline-start: 8px; padding: 1px 7px; border-radius: 10px; background: rgba(0, 0, 0, 0.18); line-height: 1.4; } .player-bar.white .cap-advantage { background: rgba(0, 0, 0, 0.12); color: #2a2618; } .player-bar.black .cap-advantage { background: rgba(255, 255, 255, 0.10); color: #ead8b0; } /* Phase 6.5.1 — En mode exploration, le clock n'a plus de sens (on joue une variante hors-temps) ET on libère ainsi de la place pour le sélecteur Top ⑂ sur la même ligne. */ body.exploration-active .player-clock { display: none !important; } .acc-pct { font-size: 13px; font-weight: 600; } /* Phase 4.4 — Sélecteur MultiPV dans chaque barre joueur */ /* Phase 6.4 (A3) — Affichage conditionnel : le sélecteur "Top ⑂" n'a de sens qu'en mode exploration (il pilote le multipv que le moteur calcule pour la position courante d'exploration). Hors de ce mode il occupait inutilement la player-bar. Masqué par défaut, réaffiché uniquement quand body porte la classe .exploration-active (posée par renderExplorationUI dans modes/exploration.js). */ .player-multipv { display: none; align-items: center; gap: 6px; font-size: 11px; } /* Phase 6.4 (A3) — Réaffichage du sélecteur Top ⑂ uniquement en mode exploration (classe body.exploration-active posée par renderExplorationUI). Sélecteur cascade plus spécifique que le `.player-multipv { display:none }` ci-dessus pour gagner sans !important. */ body.exploration-active .player-multipv { display: flex; } .pmpv-label { opacity: 0.75; white-space: nowrap; } /* Phase 6.1.1 / 6.2 (A5) — Le glyphe ⑂ (U+2442 BRANCH OR FORK) est rendu bien plus grand que le texte courant car la plupart des polices système le rendent assez fin. line-height: 0 + vertical-align: middle évite que le caractère agrandi ne décale verticalement la ligne. */ .pmpv-fork { font-size: 18px; font-weight: 800; line-height: 0; vertical-align: middle; opacity: 1; } .player-multipv-seg { display: inline-flex; border-radius: 4px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(0, 0, 0, 0.18); } .player-bar.white .player-multipv-seg { border-color: rgba(0, 0, 0, 0.22); background: rgba(0, 0, 0, 0.08); } .pmpv-btn { background: transparent; border: none; color: inherit; opacity: 0.65; padding: 2px 9px; font-size: 11.5px; font-weight: 600; cursor: pointer; font-family: inherit; border-inline-end: 1px solid rgba(255, 255, 255, 0.12); min-width: 24px; transition: background 0.12s, opacity 0.12s; } .player-bar.white .pmpv-btn { border-inline-end-color: rgba(0, 0, 0, 0.15); } .pmpv-btn:last-child { border-inline-end: none; } .pmpv-btn:hover:not(.active) { opacity: 1; background: rgba(255, 255, 255, 0.08); } .player-bar.white .pmpv-btn:hover:not(.active) { background: rgba(0, 0, 0, 0.08); } .pmpv-btn.active { background: rgba(91, 107, 181, 0.85); color: white; opacity: 1; } /* Phase 6.1.1 (A5) — Le label "Top ⑂ :" reste visible en smartphone (auparavant masqué pour gagner de la place avec l'ancien libellé "Propositions :"). Le glyphe ⑂ est suffisamment court pour tenir. */ @media (max-width: 760px) { .pmpv-label { font-size: 10.5px; } .pmpv-fork { font-size: 16px; } .player-multipv { gap: 4px; } /* Phase 6.5.1 (C3, responsive) — Pièces capturées en mobile : font-size un peu plus petit pour que la ligne reste compacte. */ .player-captured { font-size: 14px; min-height: 16px; } .player-captured.empty { height: 16px; min-height: 16px; max-height: 16px; padding: 0 0 0 2px; } } /* Phase 6.5.1 (C3, A5 suite) — Pas de breakpoint mobile forcé pour le rang 1. Le grid `1fr auto 1fr` se contracte naturellement quand le contenu rentre, et la player-meta tolère un flex-wrap si vraiment serré. Cela donne au mobile vertical (≥ ~360 px) une player-bar sur 1 ligne dans la majorité des cas, ce qui est ce que veut l'utilisateur. */ .board-wrap { display: flex; gap: 10px; margin: 12px 0; } .eval-bar { width: 32px; height: var(--board-size); background: #1a1a1a; border-radius: 3px; overflow: hidden; position: relative; border: 1px solid #000; } .eval-fill { position: absolute; bottom: 0; left: 0; right: 0; background: #ead8b0; transition: height 0.3s ease; height: 50%; } .eval-label { position: absolute; left: 50%; transform: translateX(-50%); font-size: 11px; font-family: ui-monospace, "SF Mono", Consolas, monospace; font-weight: 700; pointer-events: none; white-space: nowrap; } .eval-label.top { top: 4px; color: #ead8b0; } .eval-label.bottom { bottom: 4px; color: #1a1a1a; } .board-container { position: relative; } .board-arrows { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; } .board { width: var(--board-size); height: var(--board-size); display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); border: 2px solid #1a1a1a; border-radius: 3px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.4); } .square { display: flex; align-items: center; justify-content: center; font-size: var(--piece-size); line-height: 1; position: relative; user-select: none; } .square.light { background: var(--light-sq); } .square.dark { background: var(--dark-sq); } .square.from { background: rgba(201, 165, 90, 0.55) !important; } .square.to { background: rgba(201, 165, 90, 0.75) !important; } .square.check { background: radial-gradient(circle, rgba(214,86,86,0.9) 0%, rgba(214,86,86,0) 70%) !important; } .square.best-from { box-shadow: inset 0 0 0 3px rgba(68, 199, 214, 0.55); } .square.best-to { box-shadow: inset 0 0 0 3px rgba(68, 199, 214, 0.85); } /* Exploration mode highlights */ .square.exp-selected { box-shadow: inset 0 0 0 4px rgba(91, 107, 181, 0.85); background: rgba(91, 107, 181, 0.35) !important; } .square.exp-legal { position: relative; } .legal-mark { position: absolute; pointer-events: none; } .legal-mark.move { width: 18px; height: 18px; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(91, 107, 181, 0.65); border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18); } .legal-mark.capture { width: 56px; height: 56px; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 4px solid rgba(91, 107, 181, 0.85); border-radius: 50%; box-sizing: border-box; } /* Exploration tint on the board */ .board.exploring { box-shadow: 0 0 0 3px #5b6bb5, 0 0 24px rgba(91, 107, 181, 0.5), 0 4px 24px rgba(0,0,0,0.4); } .board.exploring .square.light { background: var(--explore-light-sq); } .board.exploring .square.dark { background: var(--explore-dark-sq); } .board.exploring .square.from { background: rgba(91, 107, 181, 0.55) !important; } .board.exploring .square.to { background: rgba(91, 107, 181, 0.75) !important; } /* Phase 8.2 (A) — Teinte "drill" (rosée) de l'échiquier principal, calquée sur .board.exploring. Halo rose pour signaler le mode. Les cases utilisent les variables --drill-*-sq (prêtes pour le sélecteur de thèmes du point D). Les surbrillances spécifiques au drill (sélection, coups légaux, dernier coup adverse, mauvais coup) sont reprises de l'ancien .drill-board-wrap et re-portées ici sous .board.drilling. */ .board.drilling { box-shadow: 0 0 0 3px #c98b97, 0 0 24px rgba(201, 139, 151, 0.5), 0 4px 24px rgba(0,0,0,0.4); } .board.drilling .square.light { background: var(--drill-light-sq); } .board.drilling .square.dark { background: var(--drill-dark-sq); } .board.drilling .square.drill-selected { box-shadow: inset 0 0 0 3px #b5476a; } .board.drilling .square.opp-move-from { box-shadow: inset 0 0 0 3px rgba(91, 107, 181, 0.55); } .board.drilling .square.opp-move-to { box-shadow: inset 0 0 0 3px rgba(91, 107, 181, 0.85); } .board.drilling .square.opp-move-from.drill-selected, .board.drilling .square.opp-move-to.drill-selected { box-shadow: inset 0 0 0 3px #b5476a; } .board.drilling .square.wrong-move-from { box-shadow: inset 0 0 0 3px rgba(220, 80, 80, 0.55); animation: drillWrongPulse 0.8s ease-out; } .board.drilling .square.wrong-move-to { box-shadow: inset 0 0 0 3px rgba(220, 80, 80, 0.85); animation: drillWrongPulse 0.8s ease-out; } /* Phase 8.6.4 — Puce de coup légal en mode drill : COULEUR UNIQUE (gris foncé + fin halo blanc semi-transparent), identique sur toutes les cases. Le halo garantit le contraste sur les cases foncées, le centre gris sur les cases claires → lisible sur toutes les palettes (rose, forêt, encre, indigo, bois…) sans changer de teinte entre puces (remplace le mix-blend-mode de 8.6.3 qui inversait la couleur selon le fond). */ .board.drilling .square.legal-move::after { content: ''; position: absolute; top: 50%; left: 50%; width: 30%; height: 30%; background: #383838; border: 2px solid rgba(255, 255, 255, 0.65); box-sizing: border-box; border-radius: 50%; transform: translate(-50%, -50%); opacity: 0.9; pointer-events: none; z-index: 1; } /* Capture (case de destination occupée) : anneau plutôt que point plein. */ .board.drilling .square.legal-move:has(.piece)::after { width: 84%; height: 84%; background: transparent; border: 4px solid #383838; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55), inset 0 0 0 2px rgba(255, 255, 255, 0.55); opacity: 0.85; } /* Bannière "Mode drill" au-dessus de l'échiquier (calquée sur la bannière d'exploration). */ .drill-banner { background: linear-gradient(135deg, rgba(181, 71, 106, 0.18), rgba(201, 139, 151, 0.10)); border: 1px solid rgba(181, 71, 106, 0.5); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; } .drill-banner-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .drill-banner-tag { font-weight: 700; color: #e6a4b4; font-size: 13px; letter-spacing: 0.02em; } .drill-banner-progress { font-size: 13px; color: var(--text); } .drill-banner .drill-score { font-size: 11.5px; color: var(--text-dim); margin-inline-start: auto; } .drill-banner-quit { background: rgba(181, 71, 106, 0.2); border: 1px solid rgba(181, 71, 106, 0.5); color: #e6a4b4; border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer; } .drill-banner-quit:hover { background: rgba(181, 71, 106, 0.35); } .drill-banner-question { margin-top: 8px; font-size: 13px; color: var(--text); font-weight: 600; } /* Phase 8.10.3 — Encadré indice/réponse intégré à la bannière, sous le décompte. Teinte bleue (indice) ou ocre (réponse). */ .drill-banner-hint { margin-top: 8px; padding: 7px 10px; border-radius: 6px; font-size: 12.5px; line-height: 1.45; color: var(--text); background: rgba(0, 0, 0, 0.18); border-inline-start: 3px solid var(--border); } .drill-banner-hint.hint { border-inline-start-color: #5b6bb5; background: rgba(91, 107, 181, 0.16); } .drill-banner-hint.answer { border-inline-start-color: var(--accent); background: rgba(201, 165, 90, 0.16); } .drill-banner-hint .dbh-title { font-weight: 700; margin-inline-end: 4px; } .drill-banner-hint .dbh-note { color: var(--text-dim); } /* Panneau drill : objectifs/contexte/feedback/boutons. */ .drill-panel { display: flex; flex-direction: column; gap: 10px; } /* Phase 8.2.1 (point 2b, option L1) — "Scène" du drill : échiquier à gauche, panneau à droite sur PC. Le bloc échiquier garde une largeur bornée (pour ne pas s'étirer démesurément) et le panneau occupe le reste. */ .drill-stage { display: flex; flex-direction: row; gap: 16px; align-items: flex-start; } .drill-stage-board { flex: 0 1 auto; min-width: 0; /* Largeur de l'échiquier identique à la normale (la board-wrap interne conserve ses propres dimensions). */ } .drill-stage .drill-panel { flex: 1 1 240px; min-width: 220px; /* Le panneau s'aligne en haut, à côté de l'échiquier. */ padding: 4px 0; } /* Sous 1180px (tablette/mobile) : on repasse en COLONNE — panneau SOUS l'échiquier, comme demandé (organisation smartphone conservée). */ @media (max-width: 1180px) { .drill-stage { flex-direction: column; gap: 12px; } .drill-stage .drill-panel { flex: 1 1 auto; width: 100%; } } /* Phase 8.2 (A) — Masquage des éléments de partie pendant le drill : barre d'éval et contenu normal de la carte move-info n'ont pas de sens en plein exercice. Le panneau drill (#drill-panel) reste visible (inséré en tête de .move-info, exclu du masquage). La bannière est dans la carte de l'échiquier, au-dessus du board, donc non affectée. On laisse volontairement la liste de coups et le graphe visibles dans la colonne d'analyse : ils donnent le contexte de la partie sans gêner le jeu (et évitent un layout qui saute). */ body.drill-active .eval-bar { visibility: hidden; } body.drill-active .card.move-info > .head, body.drill-active .card.move-info > .description, body.drill-active .card.move-info > #best-line, body.drill-active .card.move-info > .ai-section, body.drill-active .card.move-info > .notes-section { display: none !important; } /* Phase 8.2 (A) — Pendant le drill, la navigation de partie (⏮◀▶⏭, lecture) n'a pas de sens : on la masque. Le bouton "⇅ Retourner l'échiquier" reste utilisable (réglage par défaut validé). Les options de lecture sont masquées aussi. */ body.drill-active .nav-primary, body.drill-active #nav-config-btn { display: none !important; } /* Exploration banner */ /* Phase 6.3 (A6) — Banner restructuré : direction colonne pour permettre d'embarquer la zone suggestions moteur sous la ligne d'info/bouton, et ainsi ramener la suggestion au-dessus de l'échiquier (à la place de la sidebar). */ .exploration-banner { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; margin-bottom: 12px; background: linear-gradient(135deg, rgba(91, 107, 181, 0.25), rgba(91, 107, 181, 0.1)); border: 1px solid #5b6bb5; border-radius: 6px; font-size: 12.5px; } .exp-banner-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .exp-banner-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .exp-banner-right { display: flex; gap: 6px; flex-wrap: wrap; } .exp-tag { background: #5b6bb5; color: white; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .exp-info { color: var(--text-dim); } .exp-info strong { color: var(--text); font-family: ui-monospace, monospace; } /* Phase 6.3.1 / 6.4 (A7) — Légende du coup réellement joué en partie. Visible tant que l'utilisateur n'a pas joué son 1er coup d'exploration. Le trait pointillé bleu marine mime visuellement la flèche A7 affichée sur l'échiquier (dashedStyle: 'sparse' = tirets courts très espacés). */ .exp-played-legend { display: flex; align-items: center; gap: 8px; padding: 4px 0 2px 0; font-size: 11.5px; color: var(--text-dim); font-style: italic; } .exp-played-legend strong { color: var(--text); font-family: ui-monospace, "SF Mono", monospace; font-style: normal; font-weight: 700; } .exp-played-line { display: inline-block; /* Mime visuel du dasharray "4 7" SVG. 4 segments de 4 px séparés par 7 px de transparent, repère graphique pour relier la flèche à sa légende. */ width: 39px; height: 2px; background-image: linear-gradient(to right, #5b6bb5 0 4px, transparent 4px 11px, #5b6bb5 11px 15px, transparent 15px 22px, #5b6bb5 22px 26px, transparent 26px 33px, #5b6bb5 33px 37px, transparent 37px 39px); opacity: 0.9; flex-shrink: 0; } .exp-btn { padding: 6px 12px; font-size: 12px; background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border); border-radius: 4px; cursor: pointer; } .exp-btn:hover { background: #2c344a; } .exp-btn:disabled { opacity: 0.4; cursor: not-allowed; } .exp-btn.primary { background: #5b6bb5; border-color: #5b6bb5; color: white; } .exp-btn.primary:hover { background: #6b7bc5; } .exp-btn.warn { color: #e89090; border-color: rgba(232, 144, 144, 0.4); } .exp-btn.warn:hover { background: rgba(214, 86, 86, 0.15); } /* Phase 6.3 (A2 + A6) — Liste des suggestions moteur dans le banner. Chaque item est cliquable : un clic joue le coup correspondant en exploration. Coloration de la cellule selon que la position résultante est gagnante (bord vert) / perdante (bord rouge) / neutre. */ .exp-suggestions { display: flex; flex-direction: column; } .exp-sugg-loading { padding: 6px 8px; color: var(--text-faint); font-size: 12px; font-style: italic; } .exp-sugg-list { display: flex; flex-direction: column; gap: 4px; } .exp-sugg-item { display: flex; align-items: center; gap: 8px; padding: 5px 9px; background: rgba(0, 0, 0, 0.18); border: 1px solid rgba(91, 107, 181, 0.30); border-inline-start-width: 3px; border-radius: 4px; cursor: pointer; font-size: 12px; transition: background 0.12s, border-color 0.12s; } .exp-sugg-item:hover { background: rgba(91, 107, 181, 0.20); border-color: rgba(91, 107, 181, 0.65); } .exp-sugg-item.exp-sugg-eval-win { border-inline-start-color: #4cb86b; } .exp-sugg-item.exp-sugg-eval-loss { border-inline-start-color: #d65656; } .exp-sugg-item.exp-sugg-eval-neutral { border-inline-start-color: #9aa3b8; } .exp-sugg-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.35); } .exp-sugg-rank { color: var(--text-dim); font-weight: 600; min-width: 60px; flex-shrink: 0; } .exp-sugg-san { color: var(--text); font-family: ui-monospace, "SF Mono", monospace; font-weight: 600; min-width: 50px; flex-shrink: 0; } .exp-sugg-cls { color: #1a1a1a; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 10px; letter-spacing: 0.02em; flex-shrink: 0; } .exp-sugg-delta { color: var(--text-faint); font-family: ui-monospace, monospace; font-size: 11px; margin-inline-start: auto; font-variant-numeric: tabular-nums; } .exp-sugg-ppeval, .exp-sugg-mate { color: var(--text-dim); font-family: ui-monospace, monospace; font-size: 11px; font-variant-numeric: tabular-nums; min-width: 44px; text-align: end; } .exp-sugg-eval-win .exp-sugg-ppeval, .exp-sugg-eval-win .exp-sugg-mate { color: #88e0a3; } .exp-sugg-eval-loss .exp-sugg-ppeval, .exp-sugg-eval-loss .exp-sugg-mate { color: #ee9999; } /* Phase 8.3.1 — Le bouton .explore-btn (qui vivait dans #best-line) a été retiré : remplacé par #board-action-explore dans la barre #board-actions sous l'échiquier. La règle CSS associée est donc supprimée. */ .piece { text-shadow: 0 1px 2px rgba(0,0,0,0.25); pointer-events: none; } .piece.white { color: #fff; -webkit-text-stroke: 1.2px #1a1a1a; text-stroke: 1.2px #1a1a1a; } .piece.black { color: #1a1a1a; -webkit-text-stroke: 1px #000; text-stroke: 1px #000; } /* Phase 8.4 (D) — Pièce rendue en IMAGE (thème de pièces de type 'image'). L'image occupe la case ; on neutralise les effets propres au glyphe (ombre, contour de texte). La taille suit --piece-size comme le glyphe. */ .piece.piece-img { display: block; width: var(--piece-size); height: var(--piece-size); background-size: contain; background-repeat: no-repeat; background-position: center; text-shadow: none; -webkit-text-stroke: 0; text-stroke: 0; } /* Phase 8.7.3 — Le mode "masque" (recoloration par mask-image) a été abandonné au profit d'une recoloration directe du SVG (fill=couleur, stroke=noir), plus robuste (contour fixe, pas d'invisibilité). La règle .piece-mask a donc été retirée. */ /* Phase 8.6 — Réduction de 30 % des PIONS pour les styles dont le pion paraît trop grand par rapport aux autres pièces. Ciblé via data-piece-style (html) + data-piece-type (pièce). scale 0.7 = -30 %. */ html[data-piece-style="basique"] .piece[data-piece-type="p"], html[data-piece-style="staunton"] .piece[data-piece-type="p"], html[data-piece-style="gothique"] .piece[data-piece-type="p"], html[data-piece-style="neolithique"] .piece[data-piece-type="p"] { transform: scale(0.7); } /* Phase 8.7 — Contour noir LÉGER sur les pièces de certains styles, pour augmenter le contraste avec les cases. Technique : empilement de 4 drop-shadow fins (haut/bas/gauche/droite, rayon 0) → liseré net tout autour d'une forme à canal alpha. Fonctionne aussi bien en mode image (background) qu'en mode masque (mask-image), car le filtre s'applique au rendu final de l'élément. Ciblé par data-piece-style. */ html[data-piece-style="neo"] .piece.piece-img, html[data-piece-style="basique"] .piece.piece-img, html[data-piece-style="staunton"] .piece.piece-img, html[data-piece-style="gothique"] .piece.piece-img, html[data-piece-style="neolithique"] .piece.piece-img { filter: drop-shadow(0.6px 0 0 rgba(0,0,0,0.55)) drop-shadow(-0.6px 0 0 rgba(0,0,0,0.55)) drop-shadow(0 0.6px 0 rgba(0,0,0,0.55)) drop-shadow(0 -0.6px 0 rgba(0,0,0,0.55)); } /* Phase 8.7 — Réduction de 20 % des CAVALIERS, TOURS et FOUS de néolithique, gothique, classique (staunton) et basique (en plus de la réduction des pions ci-dessus). scale 0.8 = -20 %. */ html[data-piece-style="basique"] .piece[data-piece-type="n"], html[data-piece-style="basique"] .piece[data-piece-type="r"], html[data-piece-style="basique"] .piece[data-piece-type="b"], html[data-piece-style="staunton"] .piece[data-piece-type="n"], html[data-piece-style="staunton"] .piece[data-piece-type="r"], html[data-piece-style="staunton"] .piece[data-piece-type="b"], html[data-piece-style="gothique"] .piece[data-piece-type="n"], html[data-piece-style="gothique"] .piece[data-piece-type="r"], html[data-piece-style="gothique"] .piece[data-piece-type="b"], html[data-piece-style="neolithique"] .piece[data-piece-type="n"], html[data-piece-style="neolithique"] .piece[data-piece-type="r"], html[data-piece-style="neolithique"] .piece[data-piece-type="b"] { transform: scale(0.8); } /* Phase 8.7 — Réduction de 15 % des PIONS de dessin et artistique. scale 0.85 = -15 %. */ html[data-piece-style="dessin"] .piece[data-piece-type="p"], html[data-piece-style="artistique"] .piece[data-piece-type="p"] { transform: scale(0.85); } .square-coord { position: absolute; font-size: 9px; font-weight: 700; font-family: ui-monospace, monospace; opacity: 0.7; } .square-coord.file { right: 3px; bottom: 1px; } .square-coord.rank { left: 3px; top: 1px; } .square.light .square-coord { color: #9d7a4f; } .square.dark .square-coord { color: #ead8b0; } .move-marker { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); z-index: 2; } .nav-primary { display: grid; grid-template-columns: 1fr 1.4fr 1.6fr 1.4fr 1fr; gap: 8px; margin-top: 14px; } .nav-btn-big { padding: 14px 8px; font-size: 18px; font-family: ui-monospace, monospace; line-height: 1; min-height: 48px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 6px; color: var(--text); cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.05s; } .nav-btn-big:hover { background: #2c344a; border-color: var(--accent-soft); } .nav-btn-big:active { transform: translateY(1px); } .nav-btn-big:disabled { opacity: 0.3; cursor: not-allowed; } .nav-play { background: var(--accent) !important; color: #1a1a1a !important; border-color: var(--accent) !important; font-weight: 700; font-family: inherit; font-size: 14px !important; display: flex; align-items: center; justify-content: center; gap: 6px; } .nav-play:hover { background: #d6b369 !important; } .nav-play.playing { background: #c75151 !important; border-color: #c75151 !important; color: #fff !important; } .nav-play.playing:hover { background: #d66464 !important; } .nav-secondary { display: flex; gap: 8px; margin-top: 8px; justify-content: space-between; align-items: center; } .nav-btn-small { padding: 7px 12px; font-size: 12px; background: transparent; border: 1px solid var(--border); border-radius: 4px; color: var(--text-dim); cursor: pointer; transition: all 0.15s; } .nav-btn-small:hover { color: var(--text); border-color: var(--accent-soft); } .nav-btn-small.active { color: var(--accent); border-color: var(--accent); } /* Phase 8.3 (C) — Barre d'actions sous l'échiquier (Rejouer les erreurs / Explorer). Réutilise le style .nav-btn-small. Les boutons s'étirent pour remplir la largeur (accès facile au pouce sur mobile). Masquée en mode drill (la nav de partie n'a pas de sens pendant un exercice). */ .board-actions { display: flex; gap: 8px; margin-top: 8px; } .board-actions .board-action-btn { flex: 1 1 auto; text-align: center; } body.drill-active .board-actions { display: none !important; } .playback-popover { display: none; position: absolute; right: 0; bottom: calc(100% + 6px); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 6px; padding: 14px; width: 260px; z-index: 30; box-shadow: 0 8px 24px rgba(0,0,0,0.5); } .playback-popover.show { display: block; } .playback-popover .pp-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: 8px; font-weight: 700; } .pp-checkbox { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; color: var(--text); cursor: pointer; user-select: none; } .pp-checkbox input { cursor: pointer; } .pp-checkbox .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .pp-speed { display: flex; gap: 4px; margin-top: 4px; } .pp-speed button { flex: 1; padding: 6px 4px; font-size: 11px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 3px; color: var(--text-dim); cursor: pointer; } .pp-speed button.active { background: var(--accent); color: #1a1a1a; border-color: var(--accent); font-weight: 600; } .secondary-right { position: relative; } /* RIGHT COLUMN */ .analysis-col { display: flex; flex-direction: column; gap: 14px; } /* LEFT COLUMN - board + commentary */ .board-col { display: flex; flex-direction: column; gap: 14px; } .move-info { min-height: 130px; display: flex; flex-direction: column; gap: 8px; } .move-info .head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .move-san { font-size: 26px; font-weight: 700; font-family: ui-monospace, "SF Mono", Consolas, monospace; letter-spacing: -0.01em; } .cls-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; color: #1a1a1a; text-transform: uppercase; letter-spacing: 0.04em; } .cls-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(0,0,0,0.4); } .description { color: var(--text); font-size: 14px; line-height: 1.6; } .best-line { margin-top: 6px; padding: 8px 12px; background: var(--bg-input); border-inline-start: 3px solid var(--brilliant); border-radius: 3px; font-size: 13px; color: var(--text-dim); font-family: ui-monospace, monospace; } .best-line strong { color: var(--brilliant); } /* Phase 8.1 (B) — Variante "positive" de la best-line : le coup joué EST le meilleur coup, ou bien position de départ. Bordure verte plutôt que cyan (le cyan signale "voici une meilleure alternative", hors sujet ici). */ .best-line--ok { border-inline-start-color: var(--good); } .best-played-ok { color: var(--good); font-weight: 600; display: block; margin-bottom: 4px; } .pv-line { margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(68, 199, 214, 0.25); color: var(--text); font-size: 12.5px; line-height: 1.5; } .pv-line .pv-label { color: var(--text-faint); font-family: inherit; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; margin-inline-end: 8px; } .ai-section { margin-top: 8px; } .notes-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft); } .notes-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); font-weight: 600; margin-bottom: 6px; } .notes-textarea { width: 100%; min-height: 56px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 4px; padding: 8px 10px; color: var(--text); font-family: inherit; font-size: 13px; resize: vertical; } .notes-textarea:focus { outline: none; border-color: var(--accent-soft); } .ai-btn { background: linear-gradient(135deg, #5b6bb5, #4a5a9e); color: white; border: none; font-size: 12px; padding: 6px 12px; } .ai-btn:hover { background: linear-gradient(135deg, #6b7bc5, #5a6aae); } .ai-response { margin-top: 10px; padding: 12px 14px; background: var(--bg-input); border-inline-start: 3px solid #5b6bb5; border-radius: 3px; font-size: 13px; line-height: 1.6; white-space: pre-wrap; } .ai-loading { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); font-size: 12px; margin-top: 8px; } .ai-loading::before { content: ""; width: 10px; height: 10px; border: 2px solid var(--text-faint); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Loading & analysis overlays */ .loading-overlay, .analysis-overlay { position: fixed; inset: 0; background: rgba(10, 14, 22, 0.88); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 200; color: white; } .loading-card { text-align: center; padding: 32px 40px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); min-width: 260px; } .loading-piece-anim { font-size: 36px; height: 50px; display: flex; justify-content: center; align-items: center; gap: 4px; margin-bottom: 16px; color: var(--accent); text-shadow: 0 0 12px rgba(201, 165, 90, 0.4); } .lpa-piece { display: inline-block; animation: lpa-bounce 1.2s ease-in-out infinite; } .lpa-1 { animation-delay: 0s; } .lpa-2 { animation-delay: 0.15s; } .lpa-3 { animation-delay: 0.30s; } .lpa-4 { animation-delay: 0.45s; } @keyframes lpa-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: 0.5; } 40% { transform: translateY(-12px); opacity: 1; } } .loading-msg { font-size: 14px; color: var(--text); line-height: 1.5; } /* Analysis preview overlay with mini-board */ .analysis-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 22px 26px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); text-align: center; min-width: 320px; } .analysis-card-title { font-family: Georgia, serif; font-size: 18px; font-weight: 400; color: var(--accent); margin-bottom: 4px; } .analysis-card-subtitle { font-size: 12px; color: var(--text-faint); margin-bottom: 16px; } .analysis-mini-board { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); width: 280px; height: 280px; margin: 0 auto 8px; border: 1px solid #1a1a1a; border-radius: 3px; overflow: hidden; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); } .mini-square { display: flex; align-items: center; justify-content: center; font-size: 24px; line-height: 1; } .mini-light { background: var(--light-sq); } .mini-dark { background: var(--dark-sq); } .mini-piece { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); } .mini-white { color: #fff; -webkit-text-stroke: 0.8px #1a1a1a; } .mini-black { color: #1a1a1a; -webkit-text-stroke: 0.6px #000; } .analysis-mini-eval { font-family: ui-monospace, monospace; font-size: 18px; font-weight: 700; color: var(--accent); margin: 4px 0 14px; min-height: 22px; } .analysis-progress-wrap { margin-top: 4px; } .analysis-progress-bar { width: 280px; height: 6px; background: var(--bg-input); border-radius: 3px; overflow: hidden; margin: 0 auto 6px; } .analysis-progress-bar .fill { height: 100%; background: linear-gradient(to right, var(--accent), #e0c080); width: 0%; transition: width 0.2s ease-out; } .analysis-progress-text { font-size: 11px; color: var(--text-faint); font-family: ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.06em; } .analysis-actions { margin-top: 14px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; } /* Phase 8.11 (PAN 2) — bouton « Voir le début » (vue partielle). */ .analysis-partial-btn { background: rgba(201, 165, 90, 0.14); border: 1px solid var(--accent-soft, rgba(201,165,90,0.5)); color: var(--accent, #c9a55a); padding: 6px 14px; border-radius: 4px; font-size: 12px; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .analysis-partial-btn:hover { background: rgba(201, 165, 90, 0.24); } .analysis-cancel-btn { background: transparent; border: 1px solid var(--border); color: var(--text-dim); padding: 6px 14px; border-radius: 4px; font-size: 12px; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .analysis-cancel-btn:hover:not(:disabled) { background: rgba(220, 80, 80, 0.12); border-color: rgba(220, 80, 80, 0.55); color: #e89090; } .analysis-cancel-btn:disabled { opacity: 0.55; cursor: not-allowed; } /* Phase 8.11 (PAN 2) — Bandeau « analyse en cours » affiché au-dessus de l'échiquier pendant la vue partielle. */ .partial-analysis-banner { display: flex; align-items: center; gap: 10px; background: linear-gradient(135deg, rgba(201, 165, 90, 0.16), rgba(201, 165, 90, 0.06)); border: 1px solid rgba(201, 165, 90, 0.45); border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; font-size: 12.5px; color: var(--text); } .partial-analysis-banner.cancelled { background: rgba(120, 120, 120, 0.12); border-color: var(--border); color: var(--text-dim); } .partial-analysis-banner .pab-text { flex: 1 1 auto; } .partial-analysis-banner .pab-spinner { width: 14px; height: 14px; border: 2px solid rgba(201, 165, 90, 0.35); border-top-color: var(--accent, #c9a55a); border-radius: 50%; animation: pab-spin 0.8s linear infinite; flex: 0 0 auto; } @keyframes pab-spin { to { transform: rotate(360deg); } } .partial-analysis-banner .pab-cancel { background: transparent; border: 1px solid var(--border); color: var(--text-dim); padding: 4px 10px; border-radius: 4px; font-size: 11.5px; cursor: pointer; flex: 0 0 auto; } .partial-analysis-banner .pab-cancel:hover { background: rgba(220, 80, 80, 0.12); border-color: rgba(220, 80, 80, 0.55); color: #e89090; } /* Cellule de coup « en attente d'analyse » (vue partielle). */ .move-cell.move-pending { opacity: 0.4; cursor: default; text-align: center; color: var(--text-faint); } .move-cell.move-pending .move-pending-dot { font-size: 11px; filter: grayscale(0.4); } /* Eval graph */ .eval-graph-container { background: var(--bg-input); border-radius: 4px; padding: 8px; height: 90px; position: relative; } .eval-graph-svg { width: 100%; height: 100%; cursor: pointer; } .graph-title { position: absolute; top: 4px; left: 8px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); font-weight: 600; } /* Stats */ .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .stats-block .stats-title { font-family: Georgia, serif; font-size: 14px; color: var(--text); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border-soft); } .color-dot { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 16px; line-height: 1; flex-shrink: 0; } .color-dot.white-dot { background: #ead8b0; color: #1a1a1a; box-shadow: 0 0 0 1px #c9a55a; } .color-dot.black-dot { background: #2a2a2a; color: #ead8b0; box-shadow: 0 0 0 1px #444; } .player-name-line { font-size: 13px; color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .stats-acc { font-family: Georgia, serif; font-size: 32px; font-weight: 400; margin-bottom: 4px; color: var(--accent); } .stats-perf { margin-bottom: 10px; font-size: 12px; line-height: 1.4; } .perf-elo { font-family: ui-monospace, monospace; font-size: 14px; font-weight: 700; color: var(--text); } .perf-label { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; margin-inline-start: 2px; } .perf-acpl { font-size: 11px; color: var(--text-faint); margin-top: 2px; } .perf-na { font-size: 11px; color: var(--text-faint); font-style: italic; } /* Legacy stat-row (kept for legend etc) */ .stat-row { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; font-size: 12.5px; color: var(--text-dim); } .stat-row .label { display: flex; align-items: center; gap: 8px; } .stat-row .count { font-weight: 600; color: var(--text); font-family: ui-monospace, monospace; } .stat-icon { width: 14px; height: 14px; border-radius: 50%; display: inline-block; } /* New stat row layout with progress bar */ .stat-row-v2 { display: grid; grid-template-columns: 100px 1fr 28px; gap: 10px; align-items: center; padding: 4px 0; font-size: 12px; color: var(--text-dim); } .stat-row-v2.dim { opacity: 0.4; } .cls-cell { display: flex; align-items: center; gap: 6px; min-width: 0; } .cls-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stat-icon-sm { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 4px; font-size: 10px; font-weight: 700; color: rgba(0, 0, 0, 0.65); flex-shrink: 0; font-family: Georgia, serif; line-height: 1; } .cls-bar { height: 6px; background: var(--bg-input); border-radius: 3px; overflow: hidden; position: relative; } .cls-bar-fill { height: 100%; border-radius: 3px; transition: width 0.3s ease-out; } .cls-count { text-align: end; font-weight: 700; color: var(--text); font-family: ui-monospace, monospace; font-size: 13px; } /* Extra metrics section */ .stats-extras { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 4px; } .stat-extra-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 11.5px; line-height: 1.4; color: var(--text-faint); } .se-label { flex-shrink: 0; } .se-value { color: var(--text); font-weight: 600; text-align: end; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-family: ui-monospace, monospace; } /* Move list */ .moves-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; } .moves-card .moves-title { font-family: Georgia, serif; font-size: 13px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; } .moves-tools { display: flex; gap: 6px; flex-wrap: wrap; } .moves-tool-btn { padding: 4px 10px; font-size: 11px; background: transparent; color: var(--text-dim); border: 1px solid var(--border); border-radius: 4px; cursor: pointer; transition: all 0.15s; } .moves-tool-btn:hover { color: var(--text); border-color: var(--accent-soft); } .moves-tool-btn.active { color: var(--accent); border-color: var(--accent); background: rgba(201, 165, 90, 0.1); } .moves-list { max-height: 280px; overflow-y: auto; display: grid; grid-template-columns: 36px 1fr 1fr; column-gap: 6px; row-gap: 2px; font-family: ui-monospace, "SF Mono", monospace; font-size: 13px; padding-inline-end: 6px; } .moves-list::-webkit-scrollbar { width: 6px; } .moves-list::-webkit-scrollbar-track { background: var(--bg-input); } .moves-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } .move-num { color: var(--text-faint); text-align: end; padding: 4px 4px 4px 0; font-size: 12px; } .move-cell { padding: 4px 8px; border-radius: 3px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 6px; transition: background 0.1s; } .move-cell:hover { background: var(--bg-elevated); } .move-cell.active { background: var(--accent-soft); color: #fff; } .move-cell .marker { width: 14px; height: 14px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; color: #1a1a1a; flex-shrink: 0; } /* Phase 6.2 (C1) — En-tête de la liste des coups : noms des joueurs avec leur couleur. Sticky pour rester visible pendant le scroll. Les 3 cellules occupent les 3 colonnes de la grid parente (36px / 1fr / 1fr). `position: sticky` fonctionne car .moves-list est le conteneur scrollable. */ .moves-header-cell { position: sticky; top: 0; z-index: 2; background: var(--bg-elevated); padding: 6px 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 6px; overflow: hidden; min-width: 0; } .moves-header-spacer { padding: 6px 4px 6px 0; } .moves-header-piece { font-size: 14px; line-height: 1; flex-shrink: 0; } .moves-header-white .moves-header-piece { color: #f0e4c8; } .moves-header-black .moves-header-piece { color: #1a1a1a; text-shadow: 0 0 1px #f0e4c8; } .moves-header-name { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .moves-header-white { color: var(--text); } .moves-header-black { color: var(--text); } /* Phase 6.2 (C2) — Suffixe -Ncp en gris discret à droite du SAN, juste avant le marker de classification. Reste discret sur la cellule active (un poil moins gris pour rester lisible sur fond accent). */ .move-right { display: flex; align-items: center; gap: 5px; flex-shrink: 0; } .move-loss { font-size: 10.5px; color: var(--text-faint); font-family: ui-monospace, "SF Mono", monospace; font-variant-numeric: tabular-nums; opacity: 0.85; } .move-cell.active .move-loss { color: rgba(255, 255, 255, 0.75); opacity: 1; } .move-san { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* Color helpers */ .bg-brilliant { background: #26c4d9; } .bg-great { background: #26b369; } .bg-best { background: #3acf3a; } .bg-excellent { background: var(--excellent); } .bg-good { background: var(--good); } .bg-book { background: var(--book); } .bg-inaccuracy { background: var(--inaccuracy); } .bg-miss { background: #e06b6b; } .bg-mistake { background: var(--mistake); } .bg-blunder { background: var(--blunder); } .text-brilliant { color: #26c4d9; } .text-great { color: #26b369; } .text-best { color: #3acf3a; } .text-excellent { color: var(--excellent); } .text-good { color: var(--good); } .text-book { color: var(--book); } .text-inaccuracy { color: var(--inaccuracy); } .text-miss { color: #e06b6b; } .text-mistake { color: var(--mistake); } .text-blunder { color: var(--blunder); } /* Modal */ .modal-bg { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 100; align-items: center; justify-content: center; padding: 20px; } .modal-bg.show { display: flex; } .modal { background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 20px; width: 100%; max-width: 640px; max-height: 90vh; overflow-y: auto; position: relative; /* Phase 7.5 — ancrage de la croix de fermeture */ } /* Phase 7.5 / 7.5.1 — Croix "✕" de fermeture en haut à droite (norme Windows). 7.5.1 : on abandonne sticky+float (rendu incohérent selon les modales — se calait à gauche au-dessus du titre dans la bibliothèque). position:absolute ancrée sur .modal (relative) → coin haut-droit fiable et identique partout. */ .modal-close-x { position: absolute; top: 12px; right: 12px; z-index: 5; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: var(--bg-elevated); color: var(--text-dim); border: 1px solid var(--border); border-radius: 6px; font-size: 15px; line-height: 1; cursor: pointer; transition: color 0.12s, background 0.12s; } .modal-close-x:hover { color: var(--text); background: var(--blunder); border-color: var(--blunder); } .modal h2 { font-family: Georgia, serif; font-weight: 400; margin-bottom: 6px; font-size: 20px; } .modal p { color: var(--text-dim); font-size: 13px; margin-bottom: 12px; } textarea { width: 100%; min-height: 220px; background: var(--bg-input); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 12px; font-family: ui-monospace, monospace; font-size: 12px; resize: vertical; margin-bottom: 12px; } textarea:focus { outline: none; border-color: var(--accent); } /* Phase 6.9 (B5) — Textarea en mode "lot importé" : grisé, non éditable, contient un message d'info plutôt qu'un PGN. Le style indique clairement que la saisie est désactivée le temps du lot. */ textarea.batch-locked { background: rgba(91, 107, 181, 0.08); border-color: rgba(91, 107, 181, 0.4); border-style: dashed; color: var(--text-dim); font-family: inherit; font-size: 13px; line-height: 1.6; cursor: default; opacity: 0.95; } .modal-actions { display: flex; gap: 8px; justify-content: flex-end; } /* Phase 8.4 (D) — Modale Paramètres d'affichage. */ .settings-modal { max-width: 520px; } .settings-section { margin-top: 18px; } .settings-section h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin: 0 0 8px; } .settings-hint { font-size: 12px; color: var(--text-faint); margin: 0 0 8px; } /* Phase 8.11.1 — Section Moteurs en tête : pas de marge top, bouton compact et description sur une seule ligne à côté du bouton. */ .settings-section-engine { margin-top: 4px; } .settings-engine-row { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; } .settings-engine-btn { flex: 0 0 auto; background: var(--bg-input); border: 1px solid var(--border); color: var(--text); padding: 5px 12px; border-radius: 5px; font-size: 12.5px; cursor: pointer; white-space: nowrap; transition: background 0.15s, border-color 0.15s; } .settings-engine-btn:hover { background: var(--bg-hover, rgba(255,255,255,0.06)); border-color: var(--accent, #c9a55a); } .settings-engine-hint { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .settings-row { display: flex; flex-wrap: wrap; gap: 8px; } /* Contrôle segmenté (groupe de boutons exclusifs). */ .seg-control { display: inline-flex; flex-wrap: wrap; gap: 4px; } .seg-btn { padding: 6px 12px; font-size: 12px; font-family: inherit; background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; color: var(--text-dim); cursor: pointer; transition: all 0.15s; } .seg-btn:hover { color: var(--text); border-color: var(--accent-soft); } .seg-btn.active { color: var(--accent); border-color: var(--accent); background: var(--bg-elevated); font-weight: 600; } /* Phase 9.16 — Sélecteur de langue :