/* ========================================================= * Bataille navale - feuille de style commune * Reprend le theme de la Plateforme ETS : clair par defaut, * sombre pilote par la classe .dark posee sur . * Vert sapin en couleur signature, ambre en accent chaud, * bordures nettes et ombres a peine perceptibles. * ========================================================= */ :root { color-scheme: light; --bg-page: #f3f4f6; --bg-surface: #ffffff; --bg-subtle: #f9fafb; --text-main: #1f2937; --text-muted: #55606e; --border-color: #e5e7eb; --iris: #116a53; --iris-dark: #0f5f4a; --iris-soft: rgba(17, 106, 83, .08); --iris-line: rgba(17, 106, 83, .22); --amber: #8a4f11; --amber-vivid: #e0913c; --amber-soft: rgba(224, 145, 60, .12); --red: #b23a48; --red-soft: rgba(178, 58, 72, .1); --green: #15803d; /* couleurs de jeu */ --sea: #eef2f7; --ship: rgba(17, 106, 83, .2); --ship-line: rgba(17, 106, 83, .35); --miss: #cbd5e1; --miss-ink: #64748b; --hit: var(--amber-vivid); --sunk: var(--red); --radius-card: .75rem; --radius-sm: .5rem; --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, .04); --shadow-card-hover: 0 2px 6px 0 rgba(0, 0, 0, .06); --shadow-lift: 0 10px 30px -12px rgba(15, 23, 42, .25); --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace; --font-serif: Newsreader, Georgia, "Times New Roman", serif; } .dark { color-scheme: dark; /* Presque noir, legerement chaud: pas de bleu, qui tire le theme vers l ecran de terminal. Les accents restent ceux du mode clair, eclaircis pour rester lisibles: vert sapin et ambre, deux complementaires. */ --bg-page: #100f0d; --bg-surface: #1a1815; --bg-subtle: #151310; --text-main: #f1ede5; --text-muted: #a8a196; --border-color: #2c2924; --iris: #56b98c; --iris-dark: #46a077; --iris-soft: rgba(86, 185, 140, .1); --iris-line: rgba(86, 185, 140, .3); --amber: #e0a057; --amber-vivid: #e0913c; --amber-soft: rgba(224, 145, 60, .15); --red: #e08472; --red-soft: rgba(224, 132, 114, .14); --green: #56b98c; --sea: #1e1b17; --ship: rgba(86, 185, 140, .2); --ship-line: rgba(86, 185, 140, .38); --miss: #3b3730; --miss-ink: #b8b1a5; --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, .5), 0 2px 4px -2px rgba(0, 0, 0, .4); --shadow-card-hover: 0 10px 15px -3px rgba(0, 0, 0, .55), 0 4px 6px -4px rgba(0, 0, 0, .4); --shadow-lift: 0 16px 40px -12px rgba(0, 0, 0, .7); } * { box-sizing: border-box; } html, body { min-height: 100%; } body { margin: 0; background: var(--bg-page); color: var(--text-main); font-family: var(--font-sans); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--iris); text-decoration: none; transition: color .2s; } a:hover { color: var(--iris-dark); text-decoration: underline; } h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.01em; } ::selection { background: var(--iris-soft); color: var(--iris); } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* ----------------------------------------------------------- entete */ .topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 16px; padding: 12px 22px; background: var(--bg-surface); border-bottom: 1px solid var(--border-color); } .brand { display: flex; align-items: center; gap: 12px; } .brand .logo-box { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-page); font-family: var(--font-mono); font-weight: 700; font-size: 14px; color: var(--iris); transition: background .25s, border-color .25s, color .25s; } .brand:hover .logo-box { background: var(--iris); border-color: var(--iris); color: #fff; } .brand h1 { font-size: 16px; } .brand small { display: block; color: var(--text-muted); font-family: var(--font-serif); font-style: italic; font-size: 12.5px; letter-spacing: 0; text-transform: none; } .topnav { display: flex; gap: 4px; margin-left: 10px; } .topnav a { padding: 6px 12px; border-radius: var(--radius-sm); color: var(--text-muted); font-size: 14px; font-weight: 500; } .topnav a:hover { color: var(--iris); background: var(--bg-page); text-decoration: none; } .topnav a.active { color: var(--iris); background: var(--iris-soft); } .topbar .spacer { flex: 1; } .conn { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-muted); padding: 5px 11px; border: 1px solid var(--border-color); border-radius: 999px; background: var(--bg-surface); white-space: nowrap; } .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--miss); flex: none; } .conn.online { color: var(--iris); border-color: var(--iris-line); background: var(--iris-soft); } .conn.online .dot { background: var(--iris); } .conn.offline { color: var(--red); border-color: var(--red); background: var(--red-soft); } .conn.offline .dot { background: var(--red); } .server-url { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-muted); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 5px 10px; cursor: pointer; background: var(--bg-surface); transition: border-color .2s, color .2s; } .server-url:hover { color: var(--iris); border-color: var(--iris-line); } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--text-muted); cursor: pointer; transition: color .2s, border-color .2s; } .theme-toggle:hover { color: var(--iris); border-color: var(--iris-line); } .theme-toggle svg { width: 17px; height: 17px; } .theme-toggle .moon { display: none; } .dark .theme-toggle .moon { display: block; } .dark .theme-toggle .sun { display: none; } /* -------------------------------------------------------- structure */ .wrap { max-width: 1280px; margin: 0 auto; padding: 26px 22px 8px; } .page-head { margin-bottom: 22px; } .page-head h2 { font-size: 24px; letter-spacing: -.02em; } .page-head p { margin: 6px 0 0; color: var(--text-muted); font-size: 14.5px; max-width: 62ch; } .section-label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); } .section-label::before { content: ""; width: 3px; height: 14px; border-radius: 999px; background: var(--iris); } .section-label.amber::before { background: var(--amber-vivid); } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 24px; } .stat { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 14px 16px; transition: border-color .25s, box-shadow .25s; } .stat:hover { border-color: var(--iris-line); box-shadow: var(--shadow-card-hover); } .stat .value { font-size: 27px; font-weight: 680; font-variant-numeric: tabular-nums; line-height: 1.15; } .stat .label { color: var(--text-muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; margin-top: 3px; } .stat.accent .value { color: var(--iris); } .stat.gold .value { color: var(--amber); } .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border-color); margin-bottom: 22px; flex-wrap: wrap; } .tab { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--text-muted); font: inherit; font-weight: 500; padding: 10px 14px; cursor: pointer; margin-bottom: -1px; transition: color .2s; } .tab:hover { color: var(--text-main); } .tab.active { color: var(--iris); border-bottom-color: var(--iris); font-weight: 600; } .tab .count { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--bg-page); border: 1px solid var(--border-color); font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; } .tab.active .count { background: var(--iris-soft); border-color: var(--iris-line); color: var(--iris); } .panel { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; margin-bottom: 18px; } .panel > header { display: flex; align-items: center; gap: 12px; padding: 13px 17px; border-bottom: 1px solid var(--border-color); background: var(--bg-subtle); } .panel > header h2 { font-size: 14px; font-weight: 600; } .panel > header .spacer { flex: 1; } .panel > header .hint { color: var(--text-muted); font-size: 12.5px; font-weight: 400; } .panel .body { padding: 17px; } .panel .body.flush { padding: 0; } .cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: start; } @media (max-width: 980px) { .cols { grid-template-columns: 1fr; } } /* ---------------------------------------------------------- tableau */ table { width: 100%; border-collapse: collapse; font-size: 14px; } thead th { text-align: left; padding: 9px 14px; color: var(--text-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; border-bottom: 1px solid var(--border-color); white-space: nowrap; background: var(--bg-subtle); position: sticky; top: 0; } tbody td { padding: 10px 14px; border-bottom: 1px solid var(--border-color); vertical-align: middle; } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover { background: var(--bg-subtle); } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } .scroll-x { overflow-x: auto; } .rank { font-family: var(--font-mono); color: var(--text-muted); font-size: 13px; } .rank.r1 { color: var(--amber); font-weight: 700; } .rank.r2, .rank.r3 { color: var(--text-main); font-weight: 600; } .team { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .team .name { font-weight: 550; } .team .dot.on { background: var(--green); } .team .dot.off { background: var(--miss); } .elo { font-family: var(--font-mono); font-weight: 600; color: var(--iris); } .bar { height: 5px; border-radius: 999px; background: var(--bg-page); overflow: hidden; min-width: 54px; border: 1px solid var(--border-color); } .bar > i { display: block; height: 100%; background: var(--iris); } /* --------------------------------------------------- pastilles etc. */ .pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 6px; font-size: 11.5px; font-weight: 550; border: 1px solid var(--border-color); background: var(--bg-page); color: var(--text-muted); white-space: nowrap; } .pill.ok { color: var(--iris); border-color: var(--iris-line); background: var(--iris-soft); } .pill.warn { color: var(--amber); border-color: rgba(224, 145, 60, .35); background: var(--amber-soft); } .pill.live { color: var(--amber); border-color: rgba(224, 145, 60, .35); background: var(--amber-soft); } .pill.bad { color: var(--red); border-color: var(--red); background: var(--red-soft); } .pill.gold { color: var(--amber); border-color: rgba(224, 145, 60, .35); background: var(--amber-soft); } .pill.ghost { background: none; } .pill.live .dot { background: var(--amber-vivid); animation: blink 1.6s ease-in-out infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } } .badges { display: inline-flex; gap: 5px; flex-wrap: wrap; } .badge { font-size: 11px; padding: 1px 8px; border-radius: 6px; border: 1px solid var(--border-color); color: var(--text-muted); text-transform: capitalize; background: var(--bg-page); } .badge.facile { color: var(--text-muted); } .badge.moyen { color: var(--iris); border-color: var(--iris-line); background: var(--iris-soft); } .badge.difficile { color: var(--amber); border-color: rgba(224, 145, 60, .35); background: var(--amber-soft); } .badge.rohan { color: var(--red); border-color: var(--red); background: var(--red-soft); font-weight: 600; } .tag { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); } /* ------------------------------------------------------ cartes live */ .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; } .card { border: 1px solid var(--border-color); border-radius: var(--radius-card); background: var(--bg-surface); box-shadow: var(--shadow-card); padding: 14px 16px; transition: border-color .25s, box-shadow .25s; } .card.clickable { cursor: pointer; } .card.clickable:hover { border-color: var(--iris-line); box-shadow: var(--shadow-card-hover); } .card .card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .card .card-head .label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; } .card .card-head .spacer { flex: 1; } .versus { display: flex; align-items: center; gap: 10px; font-weight: 550; } .versus .vs { color: var(--text-muted); font-size: 12px; font-family: var(--font-mono); font-weight: 400; } .versus .side { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .versus .side.right { text-align: right; } .versus .side.win { color: var(--iris); } .card .meta { display: flex; gap: 14px; margin-top: 11px; color: var(--text-muted); font-size: 12.5px; flex-wrap: wrap; } .card .meta b { color: var(--text-main); font-weight: 550; font-variant-numeric: tabular-nums; } .empty { color: var(--text-muted); text-align: center; padding: 30px 18px; font-size: 14px; line-height: 1.6; } .empty .lead { margin: 0; color: var(--text-main); font-weight: 550; } .empty .hint { margin: 5px auto 0; max-width: 46ch; font-size: 13px; } /* ----------------------------------------------------------- tournoi */ .bracket { display: flex; gap: 16px; overflow-x: auto; padding: 2px; align-items: stretch; } .phase { min-width: 250px; flex: 1; } .phase > h3 { margin-bottom: 10px; } .tie { border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-surface); padding: 10px 13px; margin-bottom: 9px; } .tie.running { border-color: rgba(224, 145, 60, .45); background: var(--amber-soft); } .tie.done { background: var(--bg-subtle); } .tie .tie-head { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-muted); margin-bottom: 7px; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; } .tie .tie-head .spacer { flex: 1; } .tie .row { display: flex; align-items: center; gap: 10px; padding: 3px 0; } .tie .row .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tie .row .sc { font-family: var(--font-mono); font-weight: 600; color: var(--text-muted); } .tie .row.winner .who { color: var(--iris); font-weight: 600; } .tie .row.winner .sc { color: var(--iris); } .champion { display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-radius: var(--radius-card); border: 1px solid rgba(224, 145, 60, .35); background: var(--amber-soft); margin-bottom: 18px; } .champion .cup { font-size: 28px; line-height: 1; } .champion .who { font-family: var(--font-serif); font-size: 24px; font-weight: 600; color: var(--text-main); } .champion .sub { color: var(--text-muted); font-size: 13px; } /* -------------------------------------------------------- formulaire */ label.field { display: block; margin-bottom: 14px; } label.field > span { display: block; font-size: 12.5px; color: var(--text-muted); margin-bottom: 6px; } input[type="text"], input[type="password"], input[type="number"], input[type="search"], select { width: 100%; padding: 9px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: var(--bg-surface); color: var(--text-main); font: inherit; font-size: 14px; transition: border-color .2s, box-shadow .2s; } input:focus, select:focus { outline: none; border-color: var(--iris); box-shadow: 0 0 0 3px var(--iris-soft); } input[type="search"] { max-width: 250px; } input[type="range"] { width: 100%; accent-color: var(--iris); padding: 0; border: 0; background: none; } .check { display: flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; padding: 7px 2px; } .check input { width: 16px; height: 16px; accent-color: var(--iris); flex: none; margin: 0; cursor: pointer; } .btn { appearance: none; border: 1px solid var(--border-color); background: var(--bg-surface); color: var(--text-main); font: inherit; font-size: 13.5px; font-weight: 550; padding: 8px 14px; border-radius: var(--radius-sm); cursor: pointer; transition: border-color .2s, background .2s, color .2s; white-space: nowrap; } .btn:hover:not(:disabled) { border-color: var(--iris-line); color: var(--iris); } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn.primary { background: var(--iris); border-color: var(--iris); color: #fff; } .btn.primary:hover:not(:disabled) { background: var(--iris-dark); border-color: var(--iris-dark); color: #fff; } .dark .btn.primary { color: #0c1f17; } .btn.danger { color: var(--red); border-color: var(--border-color); } .btn.danger:hover:not(:disabled) { background: var(--red-soft); border-color: var(--red); color: var(--red); } .btn.small { padding: 4px 10px; font-size: 12.5px; } .btn.icon { padding: 6px 10px; font-family: var(--font-mono); min-width: 36px; } .actions { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; } .picker { max-height: 264px; overflow-y: auto; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-subtle); padding: 2px 12px; } .picker .check { border-bottom: 1px solid var(--border-color); } .picker .check:last-child { border-bottom: 0; } .picker .check .spacer { flex: 1; } .note { border: 1px solid var(--iris-line); background: var(--iris-soft); padding: 11px 14px; border-radius: var(--radius-sm); color: var(--text-muted); font-size: 13.5px; line-height: 1.6; } .note.warn { border-color: rgba(224, 145, 60, .35); background: var(--amber-soft); } kbd, code { font-family: var(--font-mono); font-size: 12.5px; background: var(--bg-page); border: 1px solid var(--border-color); border-radius: 4px; padding: 1px 6px; color: var(--text-main); } /* ------------------------------------------------------------ modale */ .modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(15, 23, 42, .45); } .dark .modal { background: rgba(0, 0, 0, .68); } .modal[hidden] { display: none; } .modal .sheet { width: min(1120px, 100%); max-height: 92vh; display: flex; flex-direction: column; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-card); box-shadow: var(--shadow-lift); overflow: hidden; } .modal .sheet > header { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border-color); background: var(--bg-subtle); } .modal .sheet > header h2 { font-size: 15px; } .modal .sheet > header .spacer { flex: 1; } .modal .sheet > .content { padding: 18px; overflow: auto; } /* ---------------------------------------------------------- grilles */ .boards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 860px) { .boards { grid-template-columns: 1fr; } } .board-title { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; } .board-title .who { font-weight: 600; } .grid-wrap { display: block; max-width: 100%; } .grid { display: grid; gap: 2px; background: var(--border-color); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 2px; } .grid .cell { aspect-ratio: 1 / 1; background: var(--sea); border-radius: 2px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-family: var(--font-mono); color: var(--text-muted); min-width: 0; } .grid .cell.head { background: var(--bg-surface); color: var(--text-muted); font-size: 10.5px; } .grid .cell.ship { background: var(--ship); box-shadow: inset 0 0 0 1px var(--ship-line); } .grid .cell.miss { background: var(--miss); color: var(--miss-ink); } .grid .cell.miss::after { content: "\2022"; } .grid .cell.hit { background: var(--hit); color: #4a2c07; box-shadow: none; } .grid .cell.hit::after { content: "\2715"; } .grid .cell.sunk { background: var(--sunk); color: #fff; box-shadow: none; } .grid .cell.sunk::after { content: "\2715"; } .grid .cell.last { outline: 2px solid var(--text-main); outline-offset: -2px; z-index: 1; } .legend-swatch { width: 14px; height: 14px; border-radius: 3px; display: inline-block; border: 1px solid var(--border-color); background: var(--sea); } .legend-swatch.ship { background: var(--ship); box-shadow: inset 0 0 0 1px var(--ship-line); } .legend-swatch.hit { background: var(--hit); } .legend-swatch.sunk { background: var(--sunk); } .legend-swatch.miss { background: var(--miss); } .fleet-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; } .fleet-chip { font-size: 11.5px; padding: 2px 9px; border-radius: 6px; border: 1px solid var(--border-color); color: var(--text-muted); background: var(--bg-page); } .fleet-chip.sunk { color: var(--red); border-color: var(--red); background: var(--red-soft); } .fleet-chip.hurt { color: var(--amber); border-color: rgba(224, 145, 60, .35); background: var(--amber-soft); } .player-controls { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; flex-wrap: wrap; } .player-controls .slider { flex: 1; min-width: 180px; } .step-label { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); white-space: nowrap; } .shotlog { max-height: 200px; overflow-y: auto; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-subtle); font-size: 13px; } .shotlog .line { display: flex; gap: 10px; padding: 4px 13px; color: var(--text-muted); border-bottom: 1px solid var(--border-color); } .shotlog .line:last-child { border-bottom: 0; } .shotlog .line .n { color: var(--text-muted); min-width: 30px; text-align: right; font-family: var(--font-mono); } .shotlog .line .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-main); } .shotlog .line.HIT .res { color: var(--amber); font-weight: 550; } .shotlog .line.SUNK .res { color: var(--red); font-weight: 600; } .shotlog .line.MISS .res { color: var(--text-muted); } .shotlog .line.current { background: var(--iris-soft); } /* ----------------------------------------------------------- toasts */ .toasts { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: flex; flex-direction: column; gap: 9px; align-items: flex-end; } .toast { background: var(--bg-surface); border: 1px solid var(--border-color); border-left: 3px solid var(--iris); border-radius: var(--radius-sm); padding: 11px 15px; box-shadow: var(--shadow-lift); font-size: 13.5px; max-width: 380px; animation: fade-in .25s ease-out; } .toast.error { border-left-color: var(--red); } .toast.ok { border-left-color: var(--green); } @keyframes fade-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } .skeleton { color: var(--text-muted); padding: 28px; text-align: center; font-size: 14px; } footer.page { max-width: 1280px; margin: 0 auto; padding: 22px; border-top: 1px solid var(--border-color); color: var(--text-muted); font-size: 13px; } footer.page .sign { font-family: var(--font-serif); font-style: italic; } /* ---------------------------------------------------- page du projet */ .intro { margin-bottom: 26px; } .intro h2 { font-size: 24px; margin-bottom: 16px; } .intro p { margin: 0 0 10px; color: var(--text-muted); font-size: 14.5px; line-height: 1.7; } .intro p:last-child { margin-bottom: 0; } .cards.three { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); } .card-title { font-size: 15.5px; font-weight: 600; margin: 0 0 8px; } .card-text { margin: 0; color: var(--text-muted); font-size: 14px; line-height: 1.7; } .card-text b { color: var(--text-main); font-weight: 600; } .split { display: grid; grid-template-columns: 1.25fr .75fr; gap: 26px; align-items: start; } @media (max-width: 860px) { .split { grid-template-columns: 1fr; } } .mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; max-width: 260px; } .mini-grid .cell { aspect-ratio: 1 / 1; background: var(--sea); border-radius: 2px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); } .mini-grid .cell.head { background: none; } .mini-grid .cell.ship { background: var(--ship); box-shadow: inset 0 0 0 1px var(--ship-line); } .mini-caption { margin: 12px 0 0; font-size: 12.5px; color: var(--text-muted); line-height: 1.6; max-width: 260px; } /* blocs de code */ pre.code { position: relative; margin: 0 0 12px; padding: 28px 16px 15px; background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 12.5px; line-height: 1.65; color: var(--text-main); overflow-x: auto; tab-size: 2; } pre.code .code-label { position: absolute; top: 7px; right: 12px; font-family: var(--font-sans); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); } .code-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; } @media (max-width: 860px) { .code-pair { grid-template-columns: 1fr; } } /* replis */ details { border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-surface); margin-bottom: 8px; overflow: hidden; } details[open] { border-color: var(--iris-line); } details > summary { cursor: pointer; padding: 11px 15px; font-weight: 550; font-size: 14px; list-style: none; display: flex; align-items: center; gap: 10px; color: var(--text-main); } details > summary::-webkit-details-marker { display: none; } details > summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--iris); border-bottom: 1.5px solid var(--iris); transform: rotate(-45deg); transition: transform .18s; flex: none; margin-left: 2px; } details[open] > summary::before { transform: rotate(45deg); } details > summary:hover { background: var(--bg-subtle); } details > *:not(summary) { margin-left: 15px; margin-right: 15px; } details > *:last-child { margin-bottom: 15px; } details[open] > summary { border-bottom: 1px solid var(--border-color); margin-bottom: 14px; } /* progression et conseils */ .steps { list-style: none; counter-reset: step; padding: 0; margin: 16px 0 0; } .steps > li { counter-increment: step; position: relative; padding: 0 0 22px 44px; margin-left: 15px; border-left: 1px solid var(--border-color); } .steps > li:last-child { border-left-color: transparent; padding-bottom: 0; } .steps > li::before { content: counter(step); position: absolute; left: -15px; top: -2px; width: 30px; height: 30px; border-radius: 50%; background: var(--bg-surface); border: 1px solid var(--iris-line); color: var(--iris); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; } .steps h4 { margin: 3px 0 7px; font-size: 15.5px; font-weight: 600; } .steps p { margin: 0 0 9px; color: var(--text-muted); font-size: 14px; line-height: 1.7; } .steps p:last-child { margin-bottom: 0; } .steps b { color: var(--text-main); font-weight: 600; } .steps .ask { border-left: 2px solid var(--amber-vivid); padding-left: 12px; color: var(--text-main); font-size: 13.5px; } .tips { list-style: none; padding: 0; margin: 14px 0 0; } .tips li { position: relative; padding-left: 20px; margin-bottom: 12px; color: var(--text-muted); font-size: 14px; line-height: 1.7; } .tips li:last-child { margin-bottom: 0; } .tips li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--iris); } .tips b { color: var(--text-main); font-weight: 600; } /* sommaire de la page du projet */ .toc { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--border-color); } .toc a { color: var(--text-muted); font-size: 13.5px; padding: 2px 0; } .toc a:hover { color: var(--iris); } /* jalons */ .milestones { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; } @media (max-width: 900px) { .milestones { grid-template-columns: 1fr; } } .milestone { border: 1px solid var(--border-color); border-radius: var(--radius-card); background: var(--bg-subtle); padding: 18px 20px; } .milestone-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } .milestone-head h3 { font-size: 17px; } .milestone-num { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 4px; border: 1px solid var(--border-color); background: var(--bg-page); color: var(--text-muted); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; } .milestone .section-label { margin-top: 18px; } .milestone .tips, .milestone .checklist { margin-top: 10px; } /* listes de controle */ .checklist { list-style: none; padding: 0; margin: 14px 0 0; } .checklist li { position: relative; padding-left: 26px; margin-bottom: 10px; color: var(--text-muted); font-size: 14px; line-height: 1.65; } .checklist li:last-child { margin-bottom: 0; } .checklist li::before { content: ""; position: absolute; left: 3px; top: 6px; width: 12px; height: 12px; border: 1px solid var(--iris); border-radius: 3px; } .checklist li::after { content: ""; position: absolute; left: 6px; top: 9px; width: 6px; height: 3px; border-left: 1.5px solid var(--iris); border-bottom: 1.5px solid var(--iris); transform: rotate(-45deg); } /* planning de la semaine */ .week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } @media (max-width: 1040px) { .week { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .week { grid-template-columns: 1fr; } } .day { border: 1px solid var(--border-color); border-radius: var(--radius-card); background: var(--bg-subtle); padding: 13px 14px; display: flex; flex-direction: column; gap: 10px; } .day > h3 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); padding-bottom: 9px; border-bottom: 1px solid var(--border-color); } .slot { border-left: 2px solid var(--border-color); padding-left: 11px; display: flex; flex-direction: column; gap: 3px; } .slot.key { border-left-color: var(--iris); } .slot .when { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); } .slot .what { font-size: 14px; font-weight: 600; line-height: 1.3; } .slot.key .what { color: var(--iris); } .slot .detail { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; } /* bandeau d'introduction du sujet */ .intro-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); gap: 40px; align-items: start; } @media (max-width: 960px) { .intro-grid { grid-template-columns: 1fr; gap: 24px; } } .intro .lead { font-size: 17px; font-weight: 600; color: var(--text-main); line-height: 1.5; margin-bottom: 14px; } .intro-grid p { max-width: 64ch; } .intro-side { border: 1px solid var(--border-color); border-radius: var(--radius-card); background: var(--bg-surface); box-shadow: var(--shadow-card); overflow: hidden; } .side-block { padding: 15px 18px; } .side-block + .side-block { border-top: 1px solid var(--border-color); background: var(--bg-subtle); } .mini-list { list-style: none; margin: 11px 0 0; padding: 0; } .mini-list li { position: relative; padding-left: 16px; margin-bottom: 8px; font-size: 13.5px; color: var(--text-muted); line-height: 1.55; } .mini-list li:last-child { margin-bottom: 0; } .mini-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--border-color); } .side-block + .side-block .mini-list li { color: var(--text-main); } .side-block + .side-block .mini-list li::before { background: var(--iris); } .section-label.muted::before { background: var(--border-color); } .side-note { margin: 0; padding: 13px 18px; border-top: 1px solid var(--border-color); font-size: 12.5px; color: var(--text-muted); line-height: 1.6; } /* la marque: une grille, un navire, une touche */ .brand .logo-box svg { width: 22px; height: 22px; display: block; } .brand .logo-box .mark-cell { fill: var(--text-muted); opacity: .5; } .brand .logo-box .mark-hull { fill: var(--iris); } .brand .logo-box .mark-hit { fill: var(--amber-vivid); } .brand:hover .logo-box .mark-hull { fill: #fff; } .brand:hover .logo-box .mark-cell { fill: #fff; opacity: .55; } .dark .brand:hover .logo-box .mark-hull { fill: #0c1f17; } .dark .brand:hover .logo-box .mark-cell { fill: #0c1f17; opacity: .5; } /* ============================================ demonstration enseignant */ .demo-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; } .demo-step { display: flex; gap: 13px; padding: 14px 15px; border: 1px solid var(--border-color); border-radius: var(--radius-card); background: var(--bg-subtle); opacity: .55; transition: opacity .2s, border-color .2s, background .2s; } .demo-step.active { opacity: 1; border-color: var(--iris-line); background: var(--iris-soft); } .demo-step.done { opacity: 1; background: var(--bg-surface); } .step-num { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border-color); background: var(--bg-surface); color: var(--text-muted); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .demo-step.active .step-num { border-color: var(--iris); color: var(--iris); } .demo-step.done .step-num { background: var(--iris); border-color: var(--iris); color: #fff; } .dark .demo-step.done .step-num { color: #0c1f17; } .step-body h3 { font-size: 14.5px; margin-bottom: 4px; } .step-body p { margin: 0 0 11px; font-size: 13px; color: var(--text-muted); line-height: 1.5; } .demo-cols { grid-template-columns: 1.45fr 1fr; } .wire { height: 460px; overflow-y: auto; font-family: var(--font-mono); font-size: 12.5px; background: var(--bg-subtle); } .wire-line { display: flex; gap: 10px; padding: 6px 14px; border-bottom: 1px solid var(--border-color); align-items: baseline; } .wire-line .arrow { flex: none; width: 46px; font-family: var(--font-sans); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); } .wire-line .body { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .wire-line .titre { color: var(--text-main); font-weight: 600; } .wire-line .detail { color: var(--text-muted); word-break: break-word; } .wire-line.sent { background: var(--bg-surface); } .wire-line.sent .titre { color: var(--iris); } .wire-line.recv .titre { color: var(--amber); } /* ================================================== vue videoprojetee */ body.mur-page { overflow-x: hidden; } .mur { max-width: 1800px; margin: 0 auto; padding: 26px 34px 34px; } .mur-head { display: flex; align-items: center; gap: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color); margin-bottom: 26px; } .mur-brand { display: flex; align-items: center; gap: 16px; flex: 1; } .mur-brand .logo-box { width: 56px; height: 56px; border-radius: 12px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-color); background: var(--bg-surface); } .mur-brand .logo-box svg { width: 34px; height: 34px; } .mur-brand .mark-cell { fill: var(--text-muted); opacity: .5; } .mur-brand .mark-hull { fill: var(--iris); } .mur-brand .mark-hit { fill: var(--amber-vivid); } .mur-brand h1 { font-size: 32px; letter-spacing: -.02em; } .mur-brand p { margin: 2px 0 0; font-size: 17px; color: var(--text-muted); } .mur-meta { display: flex; align-items: center; gap: 16px; } .mur-url { font-family: var(--font-mono); font-size: 17px; color: var(--text-muted); } .mur-meta .conn { font-size: 15px; padding: 7px 15px; } .mur-champion[hidden] { display: none; } .mur-champion { display: flex; align-items: baseline; gap: 20px; padding: 20px 26px; margin-bottom: 24px; border: 1px solid rgba(224, 145, 60, .4); background: var(--amber-soft); border-radius: var(--radius-card); } .mur-champion-label { font-size: 14px; text-transform: uppercase; letter-spacing: .1em; color: var(--amber); font-weight: 600; } .mur-champion-name { font-size: 40px; font-weight: 700; letter-spacing: -.02em; } .mur-body { display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px; align-items: start; } @media (max-width: 1100px) { .mur-body { grid-template-columns: 1fr; } } .mur-section { font-size: 14px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); margin-bottom: 16px; font-weight: 600; } .mur-matches { display: flex; flex-direction: column; gap: 14px; } .mur-match { border: 1px solid var(--border-color); border-left: 4px solid var(--border-color); border-radius: var(--radius-card); background: var(--bg-surface); padding: 16px 20px; } .mur-match.live { border-left-color: var(--iris); } .mur-match-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; font-size: 14px; color: var(--text-muted); } .mur-kind { text-transform: uppercase; letter-spacing: .08em; font-weight: 600; font-size: 12.5px; } .mur-label { font-family: var(--font-mono); font-size: 13px; } .mur-turn b { color: var(--text-main); font-weight: 600; } .mur-versus { display: flex; align-items: center; gap: 20px; font-size: 26px; font-weight: 600; } .mur-versus .cote { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mur-versus .cote.droite { text-align: right; } .mur-versus .tirs { font-family: var(--font-mono); font-size: 18px; font-weight: 500; color: var(--text-muted); padding: 3px 14px; border: 1px solid var(--border-color); border-radius: 999px; } .mur-vide, .mur-reste { color: var(--text-muted); font-size: 17px; margin: 6px 0 0; } .mur-rank-list { border: 1px solid var(--border-color); border-radius: var(--radius-card); background: var(--bg-surface); overflow: hidden; } .mur-rank-row { display: flex; align-items: center; gap: 16px; padding: 12px 18px; border-bottom: 1px solid var(--border-color); font-size: 19px; } .mur-rank-row:last-child { border-bottom: 0; } .mur-rank-row .rang { width: 26px; font-family: var(--font-mono); font-size: 16px; color: var(--text-muted); } .mur-rank-head + .mur-rank-row .rang { color: var(--amber); font-weight: 700; } .mur-rank-row .nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 10px; } .mur-rank-row .chiffre { font-family: var(--font-mono); font-weight: 600; color: var(--iris); } .mur-rank-row .chiffre.secondaire { color: var(--text-muted); font-weight: 400; font-size: 16px; min-width: 74px; text-align: right; } .mur-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 20px; } .mur-stat { border: 1px solid var(--border-color); border-radius: var(--radius-card); background: var(--bg-surface); padding: 14px 16px; text-align: center; } .mur-stat .valeur { display: block; font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; } .mur-stat .libelle { display: block; font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-top: 3px; } .mur-rank-head { padding-top: 8px; padding-bottom: 8px; background: var(--bg-subtle); } .mur-rank-head .nom, .mur-rank-head .chiffre, .mur-rank-head .chiffre.secondaire { font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); } /* classement facon ligue, espace enseignant */ table.league td.pts { font-weight: 700; color: var(--text-main); } table.league td.diff.pos { color: var(--iris); } table.league td.diff.neg { color: var(--red); } table.league tr.idle td { color: var(--text-muted); } table.league tr.idle td .name { color: var(--text-muted); font-weight: 500; } .form { display: inline-flex; gap: 3px; } .form i { font-style: normal; width: 19px; height: 19px; border-radius: 4px; font-size: 11px; font-weight: 650; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-color); color: var(--text-muted); background: var(--bg-page); } .form i.G { color: var(--iris); border-color: var(--iris-line); background: var(--iris-soft); } .form i.P { color: var(--red); border-color: var(--red); background: var(--red-soft); }