/* * Links - habillage. * * Tout passe par des variables : une seule definition claire pour le theme sombre, redefinie * pour le theme clair. Les animations sont regroupees en fin de fichier et neutralisees d'un * bloc, soit par le systeme (prefers-reduced-motion), soit par le reglage du joueur * (attribut data-motion sur ). */ :root { color-scheme: dark light; --bg: #0b0d12; --bg-glow: #131824; --surface: #151a23; --surface-2: #1c222d; --surface-3: #232a37; --line: #262e3c; --line-soft: #1e2532; --text: #eef1f7; --text-dim: #97a1b4; --text-faint: #6b7488; --accent: #38bdf8; --accent-2: #a855f7; --board-bg: #10141c; --board-line: #1f2733; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow: 0 2px 6px rgba(0, 0, 0, .35), 0 18px 40px rgba(0, 0, 0, .38); --radius: 16px; --radius-sm: 12px; --ease: cubic-bezier(.22, .61, .36, 1); } @media (prefers-color-scheme: light) { :root { --bg: #f2f4f8; --bg-glow: #e7ecf5; --surface: #ffffff; --surface-2: #eef1f6; --surface-3: #e4e9f1; --line: #dde2ec; --line-soft: #e8ecf3; --text: #131722; --text-dim: #5d6678; --text-faint: #8b93a5; --accent: #2563eb; --accent-2: #7c3aed; --board-bg: #ffffff; --board-line: #e6eaf2; --shadow-sm: 0 1px 2px rgba(16, 20, 30, .06); --shadow: 0 1px 2px rgba(16, 20, 30, .06), 0 16px 40px rgba(16, 20, 30, .10); } } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); background-image: radial-gradient(1100px 520px at 50% -12%, var(--bg-glow), transparent 70%); background-attachment: fixed; color: var(--text); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; font-variant-numeric: tabular-nums; } .app { max-width: 540px; margin: 0 auto; padding: 18px 16px calc(26px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; min-height: 100vh; } /* ----------------------------------------------------------- Barre du haut */ .topbar { display: flex; align-items: center; justify-content: space-between; } .brand { display: flex; align-items: center; gap: 10px; } .brand h1 { font-size: 21px; font-weight: 800; letter-spacing: -0.03em; margin: 0; } .brand-mark { width: 28px; height: 28px; border-radius: 9px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 4px 14px -4px var(--accent); } .topbar-actions { display: flex; gap: 6px; } .icon-button { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; border: 1px solid var(--line); background: var(--surface); color: var(--text-dim); cursor: pointer; transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease), transform .12s var(--ease); } .icon-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .icon-button:hover { color: var(--text); border-color: var(--text-faint); background: var(--surface-2); } .icon-button:active { transform: scale(.94); } /* --------------------------------------------------------- Bandeau du defi */ .challenge { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .challenge-id { display: flex; flex-direction: column; min-width: 0; } .day-number { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; } .day-date { font-size: 12.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .badge { flex: none; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--line); } .badge[data-difficulty="EASY"] { color: #34d399; border-color: #34d39955; background: #34d3991a; } .badge[data-difficulty="MEDIUM"] { color: #38bdf8; border-color: #38bdf855; background: #38bdf81a; } .badge[data-difficulty="HARD"] { color: #fbbf24; border-color: #fbbf2455; background: #fbbf241a; } .badge[data-difficulty="EXPERT"] { color: #fb7185; border-color: #fb718555; background: #fb71851a; } /* ------------------------------------------------------------ Indicateurs */ .hud { position: relative; display: flex; align-items: center; gap: 4px; padding: 12px 6px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; } .hud-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; } .hud-sep { width: 1px; height: 26px; background: var(--line); flex: none; } .hud-value { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; } .hud-label { font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .08em; } .hud-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--line-soft); } .hud-progress span { display: block; height: 100%; width: 0; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .35s var(--ease); } /* ---------------------------------------------------------------- Plateau */ .board-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; } .board { position: relative; width: min(100%, 64vh); aspect-ratio: 1 / 1; background: var(--board-bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; touch-action: none; cursor: pointer; user-select: none; outline: none; transition: border-color .3s var(--ease), box-shadow .3s var(--ease); } .board::after { /* Legere profondeur : le plateau se detache du fond sans lourdeur. */ content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), inset 0 -18px 40px rgba(0, 0, 0, .12); } .board:focus-visible { border-color: var(--accent); box-shadow: var(--shadow), 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); } .board-grid { position: absolute; inset: 0; display: grid; } .board-cell { border-right: 1px solid var(--board-line); border-bottom: 1px solid var(--board-line); } .board-cell.edge-right { border-right: none; } .board-cell.edge-bottom { border-bottom: none; } .board-svg { position: absolute; inset: 0; width: 100%; height: 100%; } /* Pendant le trace, les autres chemins s'effacent legerement. */ .board-svg .path-group { transition: opacity .18s var(--ease); } .board-svg.drawing .path-group:not(.active) { opacity: .38; } .board-svg .glow { opacity: .22; } /* * Le trait de lumiere qui parcourt un chemin lorsque sa paire vient d'etre reliee. * Invisible au repos : il n'apparait que le temps de l animation, pilotee depuis app.js * parce que sa longueur depend du trace. */ .board-svg .spark { opacity: 0; pointer-events: none; } .endpoint-ring { opacity: 0; transform-box: fill-box; transform-origin: center; } .endpoint.done .endpoint-ring { opacity: 1; } .endpoint-label { font-family: "Inter", sans-serif; font-weight: 800; fill: #0b0d12; paint-order: stroke; pointer-events: none; user-select: none; } .board.solved { border-color: var(--accent); box-shadow: var(--shadow), 0 0 0 1px var(--accent), 0 0 34px -8px var(--accent); } .board-hint { margin: 0; font-size: 13px; color: var(--text-dim); text-align: center; min-height: 2.6em; max-width: 40ch; } .board-hint.warn { color: #fbbf24; } /* Curseur clavier */ .key-cursor { fill: none; stroke: var(--accent); stroke-width: .07; opacity: 0; rx: .12; } .board.keyboard .key-cursor { opacity: .9; } /* ----------------------------------------------------------------- Boutons */ .controls { display: flex; gap: 10px; justify-content: center; } .button { flex: 1; max-width: 210px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; transition: border-color .18s var(--ease), background .18s var(--ease), transform .1s var(--ease), opacity .18s var(--ease); } .button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .button:hover:not(:disabled) { border-color: var(--text-faint); background: var(--surface-2); } .button:active:not(:disabled) { transform: scale(.97); } .button:disabled { opacity: .4; cursor: default; } .button-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; color: #fff; } .button-primary:hover:not(:disabled) { background: linear-gradient(135deg, var(--accent), var(--accent-2)); filter: brightness(1.08); } /* ------------------------------------------------------- Compte a rebours */ .next-grid { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .next-grid-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); } .next-grid-value { font-size: 27px; font-weight: 800; letter-spacing: -0.02em; background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .next-grid-note { font-size: 12px; color: var(--text-faint); } .footer { margin-top: auto; text-align: center; font-size: 11.5px; color: var(--text-faint); } /* --------------------------------------------------------------- Panneaux */ .overlay { position: fixed; inset: 0; background: rgba(6, 8, 12, .6); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 20; backdrop-filter: blur(4px); animation: overlay-in .2s var(--ease); } .overlay[hidden] { display: none; } .sheet { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); padding: 24px; width: 100%; max-width: 400px; max-height: 88vh; overflow-y: auto; animation: sheet-in .28s var(--ease); } .sheet h2 { margin: 0 0 4px; font-size: 21px; font-weight: 800; letter-spacing: -0.02em; } .sheet h3 { margin: 20px 0 8px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); } .sheet-sub { margin: 0 0 18px; font-size: 14px; color: var(--text-dim); } .sheet-foot { margin: 14px 0 0; font-size: 11.5px; color: var(--text-faint); text-align: center; } .sheet-win { text-align: center; } .win-mark { width: 66px; height: 66px; margin: 2px auto 12px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); } .win-mark svg { width: 40px; height: 40px; } .win-check { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: check-draw .5s .12s var(--ease) forwards; } .result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 18px; } .result-grid-4 { grid-template-columns: repeat(4, 1fr); } .result-item { background: var(--surface-2); border-radius: var(--radius-sm); padding: 13px 6px; text-align: center; display: flex; flex-direction: column; gap: 2px; } .result-value { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; } .result-label { font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; } .sheet-actions { display: flex; flex-direction: column; gap: 8px; } .sheet-actions .button { max-width: none; } .share-note { margin: 10px 0 0; font-size: 13px; color: var(--accent); text-align: center; } .best-times { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .best-times li { display: flex; justify-content: space-between; font-size: 14px; padding: 9px 13px; background: var(--surface-2); border-radius: 10px; } .best-times .best-label { color: var(--text-dim); } .best-times .best-value { font-weight: 700; } .rules-list { margin: 0 0 16px; padding-left: 20px; font-size: 14px; display: flex; flex-direction: column; gap: 9px; color: var(--text-dim); } .rules-list strong { color: var(--text); } /* --------------------------------------------------------------- Reglages */ .setting { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); cursor: pointer; } .setting:last-of-type { border-bottom: none; } .setting-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .setting-name { font-size: 14px; font-weight: 600; } .setting-help { font-size: 12px; color: var(--text-faint); } .switch { appearance: none; -webkit-appearance: none; flex: none; width: 42px; height: 25px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--line); position: relative; cursor: pointer; transition: background .2s var(--ease), border-color .2s var(--ease); } .switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: var(--text-dim); transition: transform .2s var(--ease), background .2s var(--ease); } .switch:checked { background: var(--accent); border-color: var(--accent); } .switch:checked::after { transform: translateX(17px); background: #fff; } /* --------------------------------------------------------- Premiere visite */ .tour-art { height: 108px; margin: 6px 0 14px; border-radius: var(--radius-sm); background: var(--surface-2); display: grid; place-items: center; } .tour-art svg { width: 132px; height: 92px; } .tour-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 16px; } .tour-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: background .2s var(--ease), width .2s var(--ease); } .tour-dots span.on { width: 18px; border-radius: 3px; background: var(--accent); } /* ------------------------------------------------------------- Animations */ @keyframes overlay-in { from { opacity: 0; } } @keyframes sheet-in { from { opacity: 0; transform: translateY(14px) scale(.97); } } @keyframes check-draw { to { stroke-dashoffset: 0; } } @keyframes pair-pop { 50% { transform: scale(1.32); } } @keyframes cell-in { from { opacity: 0; transform: scale(.86); } } .endpoint.pop .endpoint-disc { transform-box: fill-box; transform-origin: center; animation: pair-pop .34s var(--ease); } .board-cell { animation: cell-in .3s var(--ease) backwards; } /* Victoire : les chemins s'illuminent l'un apres l'autre. */ @keyframes path-flash { 50% { opacity: .85; } } .board-svg.won .glow { animation: path-flash .5s var(--ease); } /* * Un seul endroit pour tout couper : le reglage du joueur ou la preference systeme. * Les transitions de confort restent, seuls les mouvements marques disparaissent. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } @media (max-width: 380px) { .hud { padding: 10px 2px 12px; } .hud-value { font-size: 17px; } .app { padding: 14px 12px calc(22px + env(safe-area-inset-bottom)); } } /* ------------------------------------------------------------- Communaute */ .ranks { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 5px; } .ranks li { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px; padding: 9px 12px; background: var(--surface-2); border-radius: 10px; font-size: 14px; } .ranks .rank-position { font-weight: 800; color: var(--text-faint); text-align: right; } .ranks li:nth-child(1) .rank-position { color: #fbbf24; } .ranks li:nth-child(2) .rank-position { color: #cbd5e1; } .ranks li:nth-child(3) .rank-position { color: #d9a066; } .ranks .rank-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; background: none; border: none; color: inherit; font-family: inherit; font-size: inherit; padding: 0; cursor: pointer; } .ranks .rank-name:hover { color: var(--accent); } .ranks .rank-time { font-weight: 700; font-variant-numeric: tabular-nums; } .archive, .history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; } .archive li, .history li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface-2); border-radius: 10px; font-size: 13px; } .archive .archive-date, .history .history-date { color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .archive .archive-rate, .history .history-time { font-variant-numeric: tabular-nums; font-weight: 600; } .tag { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: var(--surface-3); color: var(--text-faint); } .tag[data-difficulty="EASY"] { color: #34d399; } .tag[data-difficulty="MEDIUM"] { color: #38bdf8; } .tag[data-difficulty="HARD"] { color: #fbbf24; } .tag[data-difficulty="EXPERT"] { color: #fb7185; } .history .solved-yes { color: #34d399; } .history .solved-no { color: var(--text-faint); } /* ------------------------------------------------------------- Pseudonyme */ .setting-column { flex-direction: column; align-items: stretch; gap: 6px; } .name-row { display: flex; gap: 8px; margin-top: 4px; } .name-row input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-family: inherit; font-size: 14px; } .name-row input:focus { outline: none; border-color: var(--accent); } .name-row .button { flex: none; max-width: none; } .name-feedback { font-size: 12px; min-height: 1.2em; color: var(--text-faint); } .name-feedback.ok { color: #34d399; } .name-feedback.error { color: #fb7185; } /* --------------------------------------------------- Grille d'un jour passe */ .replay { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent-2) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent-2) 35%, transparent); font-size: 12.5px; } .replay[hidden] { display: none; } .replay-text { color: var(--text-dim); } .replay-text span { color: var(--text); font-weight: 600; } .replay .button { flex: none; max-width: none; padding: 7px 12px; font-size: 12.5px; } /* Une ligne d'archive est un bouton : on peut rejouer la grille. */ .archive li { cursor: pointer; transition: background .15s var(--ease); } .archive li:hover { background: var(--surface-3); } .archive .archive-open { color: var(--text-faint); font-size: 11px; } .rank-late { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); margin-left: 6px; } @media (max-width: 420px) { .replay { flex-direction: column; align-items: stretch; } } /* --------------------------------------------------------------- Indices */ .controls { flex-wrap: wrap; } .controls .button { max-width: 170px; } #btn-hint.used { border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); } .win-standing { margin: 0 0 16px; font-size: 14px; font-weight: 600; color: var(--accent); min-height: 1.3em; } .win-standing.plain { font-weight: 400; color: var(--text-dim); } .history-hints { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); margin-left: 6px; } /* ------------------------------------------------- Texte lisible sans JavaScript */ /* Ce bloc est ecrit par le serveur. Il rend le site comprehensible pour un moteur de recherche, et les defis passes atteignables sans script : ce sont de vrais liens. */ .about { margin: 28px auto 0; max-width: 640px; padding: 22px 4px 8px; border-top: 1px solid var(--line); color: var(--text-dim); font-size: 13px; line-height: 1.6; } .about h2 { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--text); } .about h3 { margin: 20px 0 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); } .about p { margin: 0 0 10px; } .about a { color: var(--accent); text-decoration: none; } .about a:hover { text-decoration: underline; } .about-nav { margin: 14px 0 0; font-size: 12px; } .about-days { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; } .about-total { margin-top: 12px; font-size: 12px; color: var(--text-faint); }