/*
* ══════════════════════════════════════════════════════════════
* NEVO Design System v2
* nevo.kwet.eu — Last War: Survival · Alliance NEVO
* ══════════════════════════════════════════════════════════════
*
* SETUP — ajouter dans le de votre base Jinja2 :
*
*
*
*
*
*
* ══════════════════════════════════════════════════════════════ */
/* ─── TOKENS ─────────────────────────────────────────────────── */
:root {
/* Backgrounds — 4 niveaux d'élévation */
--bg: #07080f;
--bg-surface: #0d0f1e;
--bg-raised: #131728;
--bg-overlay: #191d30;
--bg-hover: rgba(255,255,255,0.028);
/* Bordures */
--border: rgba(255,255,255,0.068);
--border-strong: rgba(255,255,255,0.12);
/* Accent (teal-vert) */
--accent: #00dcab;
--accent-soft: rgba(0,220,171,0.11);
--accent-glow: 0 0 30px rgba(0,220,171,0.18);
/* Danger (rouge) */
--danger: #e84444;
--danger-soft: rgba(232,68,68,0.09);
--danger-glow: 0 0 30px rgba(232,68,68,0.22);
/* Warning (ambre) */
--warning: #f0a020;
--warning-soft: rgba(240,160,32,0.09);
/* Texte — 3 niveaux */
--text-1: #d8dcf2; /* principal */
--text-2: #5e6784; /* secondaire · labels */
--text-3: #343b58; /* discret · rangs */
/* Typographie */
--font-ui: 'Space Grotesk', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
/* Espacement — grille 4px */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
/* Rayon */
--r-sm: 4px; --r: 6px; --r-lg: 10px;
}
/* ─── BASE ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
background: var(--bg);
color: var(--text-1);
font-family: var(--font-ui);
font-size: 14px;
line-height: 1.55;
margin: 0;
-webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { opacity: 0.82; }
h1, h2, h3, h4 {
font-family: var(--font-ui);
font-weight: 700;
color: var(--text-1);
margin: 0;
line-height: 1.25;
letter-spacing: normal;
text-transform: none;
text-shadow: none;
}
/* ─── LAYOUT ─────────────────────────────────────────────────── */
.nevo-layout {
display: flex;
min-height: calc(100vh - 52px);
}
.nevo-sidebar {
width: 210px;
flex-shrink: 0;
position: sticky;
top: 52px;
height: calc(100vh - 52px);
overflow-y: auto;
border-right: 1px solid var(--border);
background: var(--bg-surface);
padding: var(--sp-4) 0;
}
.nevo-main {
flex: 1;
min-width: 0;
padding: var(--sp-6) var(--sp-8);
}
@media (max-width: 768px) {
.nevo-sidebar { display: none; }
.nevo-main { padding: var(--sp-4); }
}
/* ─── TOP NAVIGATION ─────────────────────────────────────────── */
.nav-top {
display: flex;
align-items: center;
gap: var(--sp-2);
height: 52px;
padding: 0 var(--sp-6);
background: var(--bg-surface);
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
z-index: 100;
}
.nav-top__brand {
font-size: 14px;
font-weight: 700;
color: var(--accent);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-right: var(--sp-4);
white-space: nowrap;
display: flex;
align-items: center;
gap: 8px;
}
.nav-top__season {
font-size: 10px;
font-weight: 600;
color: var(--text-3);
letter-spacing: 0.06em;
background: var(--bg-raised);
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: 2px 7px;
}
.nav-top__links {
display: flex;
gap: 2px;
flex: 1;
}
.nav-top__link {
padding: 5px var(--sp-3);
border-radius: var(--r-sm);
color: var(--text-2);
font-size: 13px;
font-weight: 500;
transition: color .12s, background .12s;
white-space: nowrap;
}
.nav-top__link:hover { color: var(--text-1); background: var(--bg-hover); opacity: 1; }
.nav-top__link--active { color: var(--text-1); background: var(--bg-overlay); }
.nav-top__right {
margin-left: auto;
display: flex;
align-items: center;
gap: var(--sp-3);
}
.nav-top__member-count {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-3);
}
/* ── Nav mobile — placé APRÈS les règles de base pour gagner la cascade ── */
@media (max-width: 768px) {
.nav-top {
height: auto; /* écrase height:52px */
flex-wrap: wrap;
padding: 0 var(--sp-3);
gap: 0;
align-items: stretch;
}
/* Ligne 1 : brand à gauche, icônes à droite */
.nav-top__brand {
flex: 1;
margin-right: 0;
height: 48px;
align-items: center;
display: flex;
}
.nav-top__right {
height: 48px;
margin-left: 0;
gap: var(--sp-2);
}
/* Ligne 2 : tous les liens sur toute la largeur */
.nav-top__links {
flex-basis: 100%;
order: 10; /* passe après brand (0) et right (0) */
gap: 2px;
padding: 4px 0 6px;
border-top: 1px solid var(--border);
flex-wrap: wrap;
}
.nav-top__link { font-size: 12px; padding: 4px 8px; }
/* Masquer les drapeaux (langue persiste via cookie) et chip joueur */
.language-flags { display: none; }
.tracked-player-chip { display: none !important; }
/* thead non-sticky → rien à ajuster ici */
}
/* ─── SIDEBAR NAVIGATION ─────────────────────────────────────── */
.nav-sidebar__section {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-3);
padding: var(--sp-3) var(--sp-4) var(--sp-1);
margin-top: var(--sp-2);
}
.nav-sidebar__link {
display: block;
padding: 7px var(--sp-4);
font-size: 13px;
font-weight: 500;
color: var(--text-2);
border-left: 2px solid transparent;
transition: color .12s, border-color .12s, background .12s;
}
.nav-sidebar__link:hover { color: var(--text-1); background: var(--bg-hover); opacity: 1; }
.nav-sidebar__link--active { color: var(--text-1); border-left-color: var(--accent); background: var(--accent-soft); }
/* ─── EYEBROW ────────────────────────────────────────────────── */
.eyebrow {
display: block;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-2);
margin-bottom: var(--sp-1);
/* neutralise l'ancien styles.css : rotate(-1.5deg) + text-shadow + font-tag */
transform: none;
text-shadow: none;
font-family: var(--font-ui);
}
.eyebrow::before,
.eyebrow::after { display: none; content: none; }
.eyebrow--accent { color: var(--accent); }
.eyebrow--danger { color: var(--danger); }
/* ─── PANEL ──────────────────────────────────────────────────── */
.panel {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
overflow: visible; /* visible pour que les tooltips ne soient pas coupés */
padding: 0;
margin-bottom: 0;
}
.panel + .panel { margin-top: var(--sp-5); }
/* The event focus grids space their cards with `gap`; the generic panel rhythm
above would stack on top of it — pushing every row a different distance
apart, and dropping the second card of a side-by-side pair 20px lower than
the first. */
.members-event-focus > .panel + .panel,
.members-event-duo-grid > .panel + .panel { margin-top: 0; }
.panel--danger {
border-color: rgba(232,68,68,0.28);
box-shadow: var(--danger-glow);
}
.panel--accent {
border-color: rgba(0,220,171,0.2);
box-shadow: var(--accent-glow);
}
.panel__header {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-4) var(--sp-5);
border-bottom: 1px solid var(--border);
border-radius: var(--r-lg) var(--r-lg) 0 0; /* correspond aux coins du .panel sans overflow:hidden */
}
.panel--danger .panel__header {
background: rgba(232,68,68,0.05);
border-bottom-color: rgba(232,68,68,0.14);
}
.panel__title-group { flex: 1; min-width: 0; }
.panel__title { font-size: 14px; font-weight: 600; color: var(--text-1); }
.panel--danger .panel__title { color: var(--danger); }
.panel--accent .panel__title { color: var(--accent); }
.panel__subtitle { font-size: 12px; color: var(--text-2); margin-top: 1px; }
.panel__pill {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-2);
background: var(--bg-raised);
border: 1px solid var(--border);
border-radius: 20px;
padding: 2px 10px;
white-space: nowrap;
}
.panel--danger .panel__pill {
color: var(--danger);
background: var(--danger-soft);
border-color: rgba(232,68,68,0.2);
}
.panel__footer {
padding: var(--sp-3) var(--sp-5);
border-top: 1px solid var(--border);
font-size: 12px;
color: var(--text-2);
}
/* ─── SELLETTE (CHOPPING BLOCK) ──────────────────────────────── */
.sellette__cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-3);
padding: var(--sp-4);
}
@media (max-width: 700px) {
.sellette__cards { grid-template-columns: 1fr; }
}
.sellette__card {
background: rgba(232,68,68,0.05);
border: 1px solid rgba(232,68,68,0.16);
border-radius: var(--r);
padding: var(--sp-4);
transition: background .15s;
}
.sellette__card:hover { background: rgba(232,68,68,0.09); }
.sellette__card__rank {
font-size: 10px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: rgba(232,68,68,0.4);
margin-bottom: var(--sp-1);
}
.sellette__card__name {
font-size: 15px;
font-weight: 700;
color: var(--text-1);
margin-bottom: var(--sp-3);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sellette__card__score {
font-family: var(--font-mono);
font-size: 40px;
font-weight: 700;
color: var(--danger);
line-height: 1;
}
.sellette__card__score-label {
font-size: 10px;
color: var(--text-3);
margin-top: 2px;
margin-bottom: var(--sp-3);
}
.sellette__card__flags { display: flex; flex-wrap: wrap; gap: 5px; }
/* ─── BADGES & FLAGS ─────────────────────────────────────────── */
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 600;
padding: 2px 7px;
border-radius: var(--r-sm);
line-height: 1.4;
white-space: nowrap;
}
.badge--alert { background: var(--danger-soft); color: var(--danger); border: 1px solid rgba(232,68,68,0.2); }
.badge--warning { background: var(--warning-soft); color: var(--warning); border: 1px solid rgba(240,160,32,0.2); }
.badge--ok { background: var(--accent-soft); color: var(--accent); border: 1px solid rgba(0,220,171,0.2); }
.badge--neutral { background: rgba(255,255,255,0.04); color: var(--text-2); border: 1px solid var(--border); }
/* Flags inline dans les cellules de tableau */
.player-flag {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 10px;
font-weight: 600;
padding: 1px 5px;
border-radius: 3px;
vertical-align: middle;
margin-left: 5px;
}
.player-flag--vs { background: var(--danger-soft); color: var(--danger); }
.player-flag--kills { background: var(--warning-soft); color: var(--warning); }
/* ─── DATA TABLE ─────────────────────────────────────────────── */
.data-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.data-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
font-variant-numeric: tabular-nums;
background: transparent; /* neutralise gradient rose de styles.css */
}
.data-table thead { background: none; } /* neutralise gradient thead de styles.css */
.data-table tbody tr:nth-child(even) { background: transparent; } /* neutralise striping alternée */
.data-table--fixed { table-layout: fixed; }
.data-table thead th {
padding: 10px 12px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--text-2) !important; /* neutralise color:#9ff7ff !important de styles.css */
font-family: var(--font-ui); /* neutralise font-family:var(--font-display) */
text-shadow: none; /* neutralise le glow cyan */
border-bottom: 1px solid var(--border-strong);
text-align: right;
white-space: nowrap;
background: var(--bg-raised);
user-select: none;
position: static !important; /* désactive le sticky de styles.css — couvrait la 1ère ligne */
top: auto;
z-index: auto;
}
.data-table thead th:first-child { text-align: left; border-top-left-radius: calc(var(--r-lg) - 1px); }
.data-table thead th:last-child { border-top-right-radius: calc(var(--r-lg) - 1px); }
.data-table tbody tr {
border-bottom: 1px solid rgba(255,255,255,0.035);
transition: background .1s;
}
.data-table tbody tr:last-child { border-bottom: none; }
.data-table tbody tr:hover td { background: var(--bg-raised); }
.data-table tbody tr.is-alert td { background: rgba(232,68,68,0.03); }
.data-table tbody tr.is-alert:hover td { background: rgba(232,68,68,0.07); }
.data-table td {
padding: 9px 12px;
text-align: right;
vertical-align: middle;
}
.data-table td:first-child { text-align: left; }
/* Liens de tri */
.data-table__sort {
display: inline-flex;
align-items: center;
gap: 3px;
color: inherit;
cursor: pointer;
}
.data-table__sort:hover { color: var(--text-1); opacity: 1; }
.data-table__sort--asc::after { content: '↑'; color: var(--accent); font-size: 10px; }
.data-table__sort--desc::after { content: '↓'; color: var(--accent); font-size: 10px; }
/* Cellule joueur */
.data-table__player {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
color: var(--text-1);
}
.data-table__player a { color: inherit; }
.data-table__player a:hover { color: var(--accent); opacity: 1; }
.data-table__rank {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-3);
width: 18px;
text-align: right;
flex-shrink: 0;
}
/* ─── POINTS CELLS ───────────────────────────────────────────── */
.pts { font-family: var(--font-mono); font-size: 13px; font-weight: 500; }
.pts--pos { color: var(--accent); }
.pts--neg { color: var(--danger); }
.pts--warn { color: var(--warning); }
.pts--zero { color: var(--text-3); font-style: italic; }
/* ─── SCORE CHIP + BARRE ─────────────────────────────────────── */
.score-chip {
display: inline-flex;
align-items: baseline;
gap: 2px;
font-family: var(--font-mono);
font-weight: 700;
}
.score-chip__num { font-size: 15px; }
.score-chip__denom { font-size: 10px; color: var(--text-3); }
.score-chip--hi .score-chip__num { color: var(--accent); }
.score-chip--mid .score-chip__num { color: var(--warning); }
.score-chip--lo .score-chip__num { color: var(--danger); }
.score-bar { height: 3px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; margin-top: 3px; }
.score-bar__fill { height: 100%; border-radius: 2px; }
.score-bar__fill--hi { background: var(--accent); }
.score-bar__fill--mid { background: var(--warning); }
.score-bar__fill--lo { background: var(--danger); }
/* ─── METRIC CARDS ───────────────────────────────────────────── */
.metrics-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
gap: var(--sp-3);
padding: var(--sp-4) var(--sp-5);
}
.metric-card {
background: var(--bg-raised);
border: 1px solid var(--border);
border-radius: var(--r);
padding: var(--sp-4);
}
/* neutralise les nth-child rose/teal/or de styles.css (spécificité 0,2,0 — même niveau, nevo gagne car chargé après) */
.metric-card:nth-child(n) {
background: var(--bg-raised);
border-color: var(--border);
box-shadow: none;
transform: none;
}
/* neutralise hover scale + glow rose de styles.css */
@media (hover: hover) {
.metric-card:hover { transform: none; box-shadow: none; }
}
.metric-card--accent { border-color: rgba(0,220,171,0.18); background: rgba(0,220,171,0.04); }
.metric-card--danger { border-color: rgba(232,68,68,0.18); background: rgba(232,68,68,0.04); }
.metric-card__value {
font-family: var(--font-mono);
font-size: 26px;
font-weight: 700;
color: var(--text-1);
line-height: 1;
margin-bottom: 4px;
}
.metric-card--accent .metric-card__value { color: var(--accent); }
.metric-card--danger .metric-card__value { color: var(--danger); }
.metric-card__label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--text-2); }
.metric-card__sub { font-size: 11px; color: var(--text-3); margin-top: 5px; }
/* ─── PLAYER PROFILE ─────────────────────────────────────────── */
.player-header {
display: grid;
grid-template-columns: 1fr auto;
align-items: start;
gap: var(--sp-6);
padding: var(--sp-6) var(--sp-6) var(--sp-5);
border-bottom: 1px solid var(--border);
}
.player-header__name { font-size: 22px; font-weight: 700; color: var(--text-1); margin-bottom: 5px; }
.player-header__meta { font-size: 12px; color: var(--text-2); display: flex; gap: var(--sp-4); }
.player-score-big__num { font-family: var(--font-mono); font-size: 52px; font-weight: 700; line-height: 1; }
.player-score-big__label { font-size: 11px; color: var(--text-2); text-align: right; margin-top: 2px; }
.player-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--border);
}
.player-stat { background: var(--bg-surface); padding: var(--sp-4) var(--sp-5); text-align: center; }
.player-stat__val { font-family: var(--font-mono); font-size: 20px; font-weight: 700; color: var(--text-1); margin-bottom: 2px; }
.player-stat__label { font-size: 11px; color: var(--text-2); font-weight: 500; }
/* ─── BOUTONS ────────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 16px;
border-radius: var(--r);
font-family: var(--font-ui);
font-size: 13px;
font-weight: 600;
cursor: pointer;
border: 1px solid transparent;
transition: opacity .15s, background .15s, color .15s, border-color .15s;
white-space: nowrap;
text-decoration: none;
text-transform: none; /* neutralise button { text-transform: uppercase } de styles.css */
min-width: 0; /* neutralise button { min-width: 170px } */
width: auto; /* neutralise input/button { width: 100% } */
min-height: 0; /* neutralise button { min-height: 40px } */
letter-spacing: normal;
/* Defaut neutre : neutralise le degrade rose de button {} dans styles.css
pour tout .btn sans variante. Les variantes ci-dessous l'ecrasent. */
background: var(--bg-raised);
color: var(--text-1);
border-color: var(--border-strong);
box-shadow: none;
}
.btn:hover { transform: none; filter: none; background: var(--bg-hover); } /* neutralise button:hover { transform: translateY(-1px) } */
.btn--primary { background: var(--accent); color: #07080f; border-color: var(--accent); }
.btn--primary:hover { background: #00f0c0; border-color: #00f0c0; opacity: 1; }
.btn--ghost { background: transparent; color: var(--text-2); border-color: var(--border-strong); }
.btn--ghost:hover { color: var(--text-1); background: var(--bg-hover); opacity: 1; }
.btn--danger { background: var(--danger-soft); color: var(--danger); border-color: rgba(232,68,68,0.22); }
.btn--danger:hover { background: rgba(232,68,68,0.18); opacity: 1; }
.btn--sm { padding: 4px 10px; font-size: 12px; }
/* ─── VS day selector ────────────────────────────────────────────── */
.vsday-switch {
display: flex;
align-items: center;
gap: var(--sp-2);
flex-wrap: wrap;
margin-top: var(--sp-4);
}
.vsday-chip {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 1px;
min-width: 58px;
padding: 5px 10px;
border-radius: var(--r);
border: 1px solid var(--border);
background: var(--bg-raised);
text-decoration: none;
transition: border-color .15s, background .15s;
}
.vsday-chip:hover { border-color: var(--border-strong); opacity: 1; }
.vsday-chip__label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-2);
}
.vsday-chip__value {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-1);
}
.vsday-chip.is-active {
border-color: var(--accent);
background: var(--accent-soft);
}
.vsday-chip.is-active .vsday-chip__label { color: var(--accent); }
.vsday-chip.is-empty { opacity: 0.4; }
.vsday-chip.is-empty .vsday-chip__value { color: var(--text-3); }
.vsday-switch__week {
font-size: 11px;
color: var(--text-3);
margin-left: var(--sp-2);
}
/* ─── Player weekday strip ───────────────────────────────────────── */
.player-weekdays {
margin: var(--sp-4) 0 0;
padding: var(--sp-4) 0 0;
border-top: 1px solid var(--border);
}
.player-weekdays__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--sp-3);
margin-bottom: var(--sp-3);
}
.player-weekdays__week { font-size: 11px; color: var(--text-3); }
.player-weekdays__strip {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: var(--sp-2);
}
.player-weekdays__cell {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 8px 4px;
border-radius: var(--r-sm);
border: 1px solid var(--border);
background: var(--bg-raised);
}
.player-weekdays__day {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-3);
}
.player-weekdays__value {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-1);
}
/* Scored, explicit zero and never measured must stay tellable apart. */
.player-weekdays__cell.is-scored {
border-color: rgba(0, 220, 171, 0.22);
background: var(--accent-soft);
}
.player-weekdays__cell.is-scored .player-weekdays__value { color: var(--accent); }
.player-weekdays__cell.is-zero {
border-color: rgba(232, 68, 68, 0.22);
background: var(--danger-soft);
}
.player-weekdays__cell.is-zero .player-weekdays__value { color: var(--danger); }
.player-weekdays__cell.is-unmeasured {
border-style: dashed;
background: transparent;
}
.player-weekdays__cell.is-unmeasured .player-weekdays__value { color: var(--text-3); }
.player-weekdays__stats {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
align-items: center;
margin-top: var(--sp-3);
font-size: 12px;
color: var(--text-2);
}
.player-weekdays__regularity.is-steady { color: var(--accent); }
.player-weekdays__regularity.is-mixed { color: var(--warning); }
.player-weekdays__regularity.is-spiky { color: var(--danger); }
.player-weekdays__regularity.is-unknown { color: var(--text-3); }
@media (max-width: 640px) {
.player-weekdays__strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* ─── Season phase meta (opponent + result per day) ──────────────── */
.season-meta-row th {
font-weight: 500;
padding-top: 4px;
padding-bottom: 6px;
border-bottom: 1px solid var(--border);
}
.season-meta-cell {
display: table-cell;
text-align: center;
line-height: 1.25;
}
.season-meta-opponent {
display: block;
font-size: 10px;
color: var(--text-2);
max-width: 84px;
margin: 0 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.season-meta-outcome {
display: block;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-3);
}
.season-meta-cell.is-win .season-meta-outcome { color: var(--accent); }
.season-meta-cell.is-loss .season-meta-outcome { color: var(--danger); }
.season-meta-editor {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: var(--sp-2);
margin-top: var(--sp-3);
}
.season-meta-form {
display: flex;
align-items: center;
gap: var(--sp-2);
background: var(--bg-raised);
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: 5px 8px;
}
.season-meta-form__label {
font-size: 11px;
font-weight: 700;
color: var(--text-2);
flex: 0 0 34px;
}
.season-meta-form input[type="text"],
.season-meta-form select {
font-size: 11px;
padding: 3px 6px;
background: var(--bg-surface);
color: var(--text-1);
border: 1px solid var(--border);
border-radius: var(--r-sm);
min-width: 0;
min-height: 0;
width: auto;
margin: 0;
}
.season-meta-form input[type="text"] { flex: 1 1 auto; }
.season-meta-form select { flex: 0 0 84px; }
.season-meta-form .btn { flex: 0 0 auto; }
.btn--xs { padding: 1px 6px; font-size: 10px; line-height: 1.5; }
.btn--warning { background: rgba(255,196,60,0.10); color: var(--warning, #f0a020); border-color: rgba(255,196,60,0.22); }
.btn--warning:hover { background: rgba(255,196,60,0.18); opacity: 1; }
/* ─── FORMULAIRES ────────────────────────────────────────────── */
.form-group { margin-bottom: var(--sp-5); }
.form-label {
display: block;
font-size: 11px;
font-weight: 600;
color: var(--text-2);
margin-bottom: var(--sp-2);
text-transform: uppercase;
letter-spacing: .06em;
}
.form-input, .form-select, .form-textarea {
width: 100%;
background: var(--bg-raised);
border: 1px solid var(--border-strong);
border-radius: var(--r);
color: var(--text-1);
font-family: var(--font-ui);
font-size: 14px;
padding: 8px 12px;
outline: none;
transition: border-color .15s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--accent); }
.form-textarea { resize: vertical; font-family: var(--font-mono); font-size: 12px; }
/* ─── TRAINS ─────────────────────────────────────────────────── */
.train-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
gap: var(--sp-3);
padding: var(--sp-4) var(--sp-5);
}
.train-slot { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r); padding: var(--sp-3) var(--sp-4); }
.train-slot--assigned { border-color: rgba(0,220,171,0.2); }
.train-slot__title { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); margin-bottom: var(--sp-2); }
.train-slot__player { font-size: 14px; font-weight: 600; color: var(--accent); }
.train-slot__player--empty { color: var(--text-3); font-style: italic; font-weight: 400; }
/* ─── BRIDGE — classes héritées de l'ancien styles.css ──────── */
/* Secondary-nav sans .panel : donne un fond et une bordure basse */
.secondary-nav {
background: var(--bg-surface);
border-bottom: 1px solid var(--border);
padding-left: var(--sp-6) !important;
padding-right: var(--sp-6) !important;
}
/* Footer */
.site-credit {
margin-top: var(--sp-10);
padding: var(--sp-6) 0;
border-top: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 3px;
font-size: 11px;
color: var(--text-3);
}
.site-credit-tools {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--sp-3);
margin-bottom: var(--sp-2);
}
.site-credit-tools-label {
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-3);
}
.site-credit-tool-link {
color: var(--text-2);
text-decoration: none;
border-bottom: 1px solid var(--border);
}
.site-credit-tool-link:hover,
.site-credit-tool-link:focus-visible {
color: var(--accent);
border-bottom-color: var(--accent);
}
/* Tooltips via data-tooltip */
[data-tooltip] { position: relative; cursor: help; }
[data-tooltip]::before {
content: attr(data-tooltip);
position: absolute; bottom: calc(100% + 8px); left: 50%;
transform: translateX(-50%);
background: var(--bg-overlay);
color: var(--text-1);
font-size: 11px; padding: 7px 11px; border-radius: var(--r);
border: 1px solid var(--border-strong);
white-space: normal; width: max-content; max-width: 230px;
pointer-events: none; z-index: 200; opacity: 0;
transition: opacity 0.15s ease;
}
[data-tooltip]::after {
content: ''; position: absolute; bottom: calc(100% + 2px); left: 50%;
transform: translateX(-50%);
border: 5px solid transparent; border-top: 6px solid var(--bg-overlay);
pointer-events: none; z-index: 200; opacity: 0;
transition: opacity 0.15s ease;
}
[data-tooltip]:hover::before,
[data-tooltip]:hover::after { opacity: 1; }
/* ─── UTILITAIRES ────────────────────────────────────────────── */
.text-accent { color: var(--accent) !important; }
.text-danger { color: var(--danger) !important; }
.text-warning { color: var(--warning) !important; }
.text-muted { color: var(--text-2) !important; }
.text-dim { color: var(--text-3) !important; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.font-mono { font-family: var(--font-mono); }
/* ─── RECORDS ────────────────────────────────────────────────── */
/*
* La page /records. Une carte = un record, et sa bordure dit depuis combien de
* temps il tient : plus il est vieux, plus il a l'air inatteignable. C'est
* toute la gamification de la page, le reste n'est que mise en page.
*/
.records-header { margin-bottom: var(--sp-5); }
.records-title { font-size: 1.6rem; font-weight: 700; margin: 4px 0 2px; }
.records-copy { font-size: 13px; color: var(--text-2); margin: 0; }
.records-counter {
font-family: var(--font-mono); font-size: 12px;
color: var(--text-3); margin-left: var(--sp-2);
}
/* Bandeau « vient de tomber » */
.records-fresh {
border: 1px solid rgba(240,160,32,0.25);
background: linear-gradient(180deg, rgba(240,160,32,0.07), transparent 70%);
border-radius: var(--r-lg);
padding: var(--sp-4) var(--sp-5);
margin-bottom: var(--sp-6);
}
.records-fresh--calm {
border-color: var(--border);
background: var(--bg-surface);
}
.records-fresh__head { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.records-fresh__title { font-weight: 700; font-size: 13px; letter-spacing: 0.02em; }
.records-fresh__copy { font-size: 12px; color: var(--text-2); }
.records-fresh__list { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.records-fresh__item {
display: flex; align-items: center; gap: var(--sp-3);
flex-wrap: wrap; font-size: 13px;
}
.records-fresh__icon { font-size: 15px; }
.records-fresh__label { color: var(--text-1); font-weight: 600; }
.records-fresh__name { color: var(--accent); font-weight: 600; }
.records-fresh__value { font-family: var(--font-mono); color: var(--text-1); }
.records-fresh__previous { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
/* Familles */
.records-family { margin-bottom: var(--sp-8); }
.records-family__head { margin-bottom: var(--sp-3); }
.records-family__title { font-size: 1.05rem; font-weight: 700; }
.records-family__copy { font-size: 12px; color: var(--text-2); margin: 2px 0 0; }
.records-grid {
display: grid; gap: var(--sp-3);
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
/* Carte */
.record-card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: var(--sp-4);
display: flex; flex-direction: column; gap: var(--sp-3);
}
.record-card--empty { opacity: 0.5; }
.record-card__head { display: flex; align-items: flex-start; gap: var(--sp-3); }
.record-card__icon { font-size: 20px; line-height: 1.2; }
.record-card__titles { flex: 1; min-width: 0; }
.record-card__title { font-size: 14px; font-weight: 700; }
.record-card__help { font-size: 11px; color: var(--text-2); margin: 3px 0 0; line-height: 1.4; }
.record-card__holder { display: flex; flex-direction: column; gap: 2px; }
.record-card__value {
font-family: var(--font-mono); font-size: 1.5rem;
font-weight: 700; color: var(--text-1); line-height: 1.1;
}
.record-card__who { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.record-card__name { font-weight: 600; font-size: 13px; }
.record-card__name--alliance { color: var(--accent); }
.record-card__context { font-size: 11px; color: var(--text-2); font-family: var(--font-mono); }
.record-card__badges { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-1); }
.record-card__empty { font-size: 12px; color: var(--text-3); margin: 0; }
.record-card__foot {
border-top: 1px solid var(--border);
padding-top: var(--sp-2);
display: flex; flex-direction: column; gap: 3px;
font-size: 11px;
}
.record-card__foot:empty { display: none; }
.record-badge {
font-size: 10px; padding: 2px 7px; border-radius: 999px;
background: var(--bg-raised); color: var(--text-2);
border: 1px solid var(--border);
}
.record-badge--new {
background: var(--warning-soft); color: var(--warning);
border-color: rgba(240,160,32,0.3); font-weight: 700;
}
.record-badge--live {
background: var(--accent-soft); color: var(--accent);
border-color: rgba(0,220,171,0.3); font-weight: 700;
}
.record-runner, .record-previous {
display: flex; align-items: baseline; gap: var(--sp-2);
}
.record-runner__label, .record-previous__label {
color: var(--text-3); text-transform: uppercase;
font-size: 9px; letter-spacing: 0.06em; min-width: 62px;
}
.record-runner__name { flex: 1; color: var(--text-2); }
.record-runner__value { font-family: var(--font-mono); color: var(--text-2); }
.record-previous__name { flex: 1; color: var(--text-3); }
.record-previous__value { font-family: var(--font-mono); color: var(--text-3); }
/* Rareté : l'ancienneté du record, lisible d'un coup d'oeil */
.record-rarity {
font-size: 9px; text-transform: uppercase; letter-spacing: 0.07em;
padding: 3px 7px; border-radius: var(--r-sm); font-weight: 700;
white-space: nowrap;
}
.record-card--bronze { border-color: rgba(176,122,74,0.32); }
.record-rarity--bronze { background: rgba(176,122,74,0.14); color: #c08d5c; }
.record-card--silver { border-color: rgba(154,164,191,0.32); }
.record-rarity--silver { background: rgba(154,164,191,0.13); color: #9aa4bf; }
.record-card--gold { border-color: rgba(240,160,32,0.36); }
.record-rarity--gold { background: var(--warning-soft); color: var(--warning); }
.record-card--legendary {
border-color: rgba(0,220,171,0.42);
box-shadow: var(--accent-glow);
background: linear-gradient(180deg, rgba(0,220,171,0.06), var(--bg-surface) 60%);
}
.record-rarity--legendary { background: var(--accent-soft); color: var(--accent); }
.record-rarity--undated { background: var(--bg-raised); color: var(--text-3); }
/* Jauge « record en danger » */
.record-gauge {
background: var(--bg-raised);
border: 1px solid var(--border);
border-radius: var(--r);
padding: var(--sp-2) var(--sp-3);
}
.record-gauge--hot {
border-color: rgba(232,68,68,0.34);
background: var(--danger-soft);
}
.record-gauge__head, .record-gauge__foot {
display: flex; justify-content: space-between; align-items: baseline;
gap: var(--sp-2); font-size: 10px;
}
.record-gauge__label {
text-transform: uppercase; letter-spacing: 0.06em;
color: var(--text-2); font-weight: 700;
}
.record-gauge--hot .record-gauge__label { color: var(--danger); }
.record-gauge__missing { font-family: var(--font-mono); color: var(--text-3); }
.record-gauge__track {
height: 5px; border-radius: 3px; background: rgba(255,255,255,0.05);
margin: 5px 0; overflow: hidden;
}
.record-gauge__fill { height: 100%; background: var(--accent); border-radius: 3px; }
.record-gauge--hot .record-gauge__fill { background: var(--danger); }
.record-gauge__foot { font-size: 11px; color: var(--text-2); }
.record-gauge__value { font-family: var(--font-mono); color: var(--text-1); }
/* Étagère à trophées, sur la fiche joueur */
.trophy-shelf { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.trophy-chip {
display: inline-flex; align-items: center; gap: 6px;
background: var(--bg-raised); border: 1px solid var(--border);
border-radius: 999px; padding: 4px 11px 4px 8px;
font-size: 12px; color: var(--text-1); text-decoration: none;
}
.trophy-chip:hover { border-color: var(--border-strong); opacity: 1; }
.trophy-chip--legendary { border-color: rgba(0,220,171,0.4); }
.trophy-chip--gold { border-color: rgba(240,160,32,0.36); }
.trophy-chip__value { font-family: var(--font-mono); color: var(--text-2); font-size: 11px; }
.record-crown { font-size: 11px; margin-left: 4px; cursor: help; }
/* Badge accent — ne sert plus qu au tableau des rewards. */
.badge--role {
background: var(--accent-soft);
color: var(--accent);
border: 1px solid rgba(0,220,171,0.22);
margin-left: var(--sp-2);
}
/* Portée des records : avec ou sans les baleines */
.records-scope {
display: flex; align-items: center; gap: var(--sp-3);
flex-wrap: wrap; margin-top: var(--sp-3);
}
.records-scope__switch {
display: inline-flex; gap: 2px; padding: 2px;
background: var(--bg-surface); border: 1px solid var(--border);
border-radius: 999px;
}
.records-scope__option {
font-size: 11px; font-weight: 600; padding: 4px 12px;
border-radius: 999px; color: var(--text-2); text-decoration: none;
white-space: nowrap;
}
.records-scope__option:hover { color: var(--text-1); opacity: 1; }
.records-scope__option.is-active {
background: var(--accent-soft); color: var(--accent);
}
.records-scope__note { font-size: 11px; color: var(--text-3); }
.trophy-chip__scope { font-size: 10px; }
/* Une ligne, en bas, et c est tout : l archive se trouve, elle ne s affiche pas. */
.records-archives { font-size: 11px; color: var(--text-3); margin: var(--sp-5) 0 0; text-align: right; }
.records-archives__link { color: var(--text-2); text-decoration: none; border-bottom: 1px dotted var(--border-strong); }
.records-archives__link:hover { color: var(--text-1); }
/* ── Composition du score composite (/members/ranking) ─────────────────────
Une bande, pas un panneau : les parts tiennent en pastilles sur une ligne,
l'aide vit dans les infobulles. En God Mode, `` ouvre le formulaire
sous la bande — sans JS, et replié par defaut, parce qu'on consulte ce
classement cent fois pour un reglage. */
.score-comp { margin-bottom: var(--sp-4); }
.score-comp__box {
background: var(--bg-raised);
border: 1px solid var(--border);
border-radius: 8px;
}
.score-comp__bar {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
padding: 7px 12px;
list-style: none;
}
.score-comp__bar::-webkit-details-marker { display: none; }
details.score-comp__box > .score-comp__bar { cursor: pointer; }
details.score-comp__box[open] > .score-comp__bar { border-bottom: 1px solid var(--border); }
.score-comp__label {
font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
color: var(--text-3); white-space: nowrap;
}
.score-comp__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; flex: 1; }
.score-comp__chip {
display: inline-flex; align-items: baseline; gap: 4px;
padding: 2px 7px; border-radius: 4px;
background: var(--bg-hover);
font-size: 11px; color: var(--text-2); white-space: nowrap;
}
.score-comp__chip b { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.score-comp__chip.is-off { opacity: .45; }
.score-comp__chip.is-off b { color: var(--text-3); }
.score-comp__chip--custom { background: var(--accent-soft); color: var(--accent); }
.score-comp__more {
margin-left: auto; padding: 2px 8px; border-radius: 4px;
border: 1px solid var(--border-strong);
font-size: 11px; color: var(--text-2); white-space: nowrap;
}
details.score-comp__box[open] .score-comp__more { color: var(--accent); border-color: var(--accent); }
.score-comp__form { padding: 10px 12px 11px; }
.score-comp__fields {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 14px;
}
/* flex-direction et min-height sont repris explicitement : la regle globale
"label {}" de styles.css empile ses enfants en colonne, et tout "input" y
porte un min-height de 40px qui triplerait la hauteur d une ligne. */
.score-comp__field {
display: flex; flex-direction: row; align-items: center; gap: 6px;
font-size: 12px; color: var(--text-1); cursor: pointer; min-width: 0;
}
.score-comp__field.is-off { opacity: .5; }
.score-comp__field input[type="checkbox"] {
width: 14px; height: 14px; min-height: 0; margin: 0;
flex: 0 0 auto; accent-color: var(--accent);
}
.score-comp__field-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.score-comp__field-weight {
width: 46px; height: 24px; min-height: 0;
flex: 0 0 auto; padding: 2px 5px; text-align: right;
background: var(--bg-base, var(--bg-raised));
border: 1px solid var(--border-strong); border-radius: 4px;
color: var(--text-1); font-size: 12px; font-variant-numeric: tabular-nums;
}
.score-comp__unit { color: var(--text-3); font-size: 11px; }
.score-comp__actions {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border);
}
.score-comp__total { flex: 1; min-width: 0; font-size: 11px; color: var(--text-3); }
@media (max-width: 900px) {
.score-comp__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.score-comp__more { margin-left: 0; }
}
/* ─── 🐸 EASTER EGG ──────────────────────────────────────────────
Une grenouille cachée sur /records. Au repos elle ne se trahit par
rien : hors écran, transparente, et sans zone cliquable. Elle sort
du bas de l'écran quand on s'attarde une seconde et demie sur le
compteur de records — le « 12 / 40 » de l'en-tête. Un seul geste,
deux façons de le faire : survoler à la souris, rester appuyé au
doigt. Puis elle repart d'elle-même. Au premier clic elle se
présente, aux suivants elle s'agace, et au quatrième elle s'en va :
les répliques vivent dans le script de `records.html`, l'escalade se
voit ici à la classe `is-angry`.
Tout est en aria-hidden et hors du parcours clavier : c'est un jeu,
pas un contenu.
Position fixe, donc elle ne peut bousculer aucune mise en page.
Deux règles globales de styles.css mordent ici et sont donc reprises
explicitement : « button {} » impose un min-width de 170px (mesuré :
sans ça la bestiole se décale de 140 px et traîne une zone cliquable
invisible), un min-height de 40px, un fond dégradé et un padding ;
« button:hover {} » ajoute un translateY qui entrerait en conflit
avec le saut. */
/* Le nid n'est qu'une ancre d'événements — sauf pour l'appui long, que le
navigateur mobile confondrait sinon avec « sélectionner ce texte ». */
.frog-nest {
-webkit-user-select: none; user-select: none;
-webkit-touch-callout: none; touch-action: manipulation;
}
.frog-egg {
position: fixed; right: 22px; bottom: -44px; z-index: 40;
width: 34px; height: 34px; min-width: 0; min-height: 0; padding: 0;
border: 0; background: none; box-shadow: none;
line-height: 0; cursor: pointer;
color: var(--accent); opacity: 0; pointer-events: none;
/* Le ressort du cubic-bezier fait le bond d'arrivée : elle dépasse sa
position d'un cheveu avant de se poser. */
transition: bottom .44s cubic-bezier(.22, 1.28, .38, 1), opacity .22s ease;
}
.frog-nest.is-awake .frog-egg {
bottom: 18px; opacity: 1; pointer-events: auto;
}
.frog-egg:hover { transform: none; border: 0; background: none; }
.frog-egg__svg { display: block; width: 34px; height: 34px; }
/* Le saut : détente franche, retombée molle, et l'écrasement d'avant et
d'après le décollage. L'animation l'emporte sur le transform du survol,
qui reste donc sans effet pendant le saut. */
.frog-egg.is-hopping { animation: frog-hop .66s ease-out; }
@keyframes frog-hop {
0% { transform: translateY(0) scale(1.12, .86); }
20% { transform: translateY(-30px) scale(.92, 1.12); }
55% { transform: translateY(-35px) scale(1, 1); }
85% { transform: translateY(-2px) scale(1.1, .9); }
100% { transform: translateY(0) scale(1, 1); }
}
/* Énervée, elle ne saute plus : elle trépigne. Bond court, sec, et la
retombée part en tremblement latéral. */
.frog-egg.is-angry.is-hopping { animation: frog-stomp .52s ease-out; }
@keyframes frog-stomp {
0% { transform: translate(0, 0) scale(1.14, .84); }
16% { transform: translate(0, -16px) scale(.9, 1.14); }
34% { transform: translate(-3px, 0) scale(1.16, .88); }
50% { transform: translate(3px, -1px) scale(1, 1); }
66% { transform: translate(-3px, 0) scale(1, 1); }
82% { transform: translate(2px, 0) scale(1, 1); }
100% { transform: translate(0, 0) scale(1, 1); }
}
.frog-egg__bubble {
position: absolute; right: calc(100% + 8px); top: -2px;
padding: 3px 8px; border-radius: 10px;
background: var(--accent); color: #04150f;
font-family: var(--font-ui); font-size: 11px; font-weight: 600;
white-space: nowrap; line-height: 1.4; pointer-events: none;
/* Troisième héritage de « button {} » à neutraliser, après le gabarit et
le survol : les capitales et leur interlettrage. On les rend à la
grenouille quand elle crie, jamais quand elle se présente. */
text-transform: none; letter-spacing: 0;
opacity: 0; transform: translateY(4px) scale(.9);
transition: opacity .16s ease, transform .16s ease;
}
.frog-egg.is-croaking .frog-egg__bubble { opacity: 1; transform: none; }
/* Le ton monte : rouge et capitales dès la première mise en garde. */
.frog-egg.is-angry .frog-egg__bubble {
background: var(--danger); color: #fff3f3;
text-transform: uppercase; letter-spacing: .04em;
}
/* Au doigt, 34 px se ratent : on lui donne la cible tactile de 44 px, et on
la remonte au-dessus de la barre de gestes du telephone. */
@media (pointer: coarse) {
.frog-egg { width: 44px; height: 44px; right: 16px; }
.frog-nest.is-awake .frog-egg { bottom: 26px; }
.frog-egg__svg { width: 44px; height: 44px; }
.frog-egg__bubble { font-size: 12px; top: 2px; }
}
@media (prefers-reduced-motion: reduce) {
.frog-egg { transition: opacity .22s ease; }
.frog-egg.is-hopping,
.frog-egg.is-angry.is-hopping { animation: none; }
}
/* ─── Rewards de fin de saison ────────────────────────────────────────────
*
* Bloc isole (voir app/services/rewards.py). Trois choses a savoir avant d'y
* toucher, toutes heritees de regles globales de styles.css :
*
* - `label {}` empile ses enfants en colonne : .rw-field le reprend
* explicitement au lieu de se battre avec.
* - tout `input` porte un `min-height: 40px` : les champs des cartes et de la
* barre d'outils le remettent a leur taille.
* - `button {}` pose un degrade rose : tout bouton d'ici definit son fond,
* .rw-me__reset et .rw-list__copy compris (ils n'ont pas de classe .btn).
*
* Les six paniers sont des **etageres** empilees, pas des colonnes facon
* kanban : cinquante cartes dans une colonne de cinquante de haut ne se
* parcourent pas, la meme cinquantaine sur trois rangees, oui.
*/
.rw-intro { color: var(--text-1); font-size: 14px; line-height: 1.6; max-width: 72ch; }
.rw-help { color: var(--text-2); font-size: 12px; line-height: 1.6; max-width: 78ch; margin: var(--sp-2) 0 var(--sp-4); }
.rw-empty { color: var(--text-2); font-size: 13px; font-style: italic; }
.rw-notice {
margin-top: var(--sp-3);
padding: var(--sp-2) var(--sp-3);
border-left: 2px solid var(--warning);
background: var(--warning-soft);
color: var(--text-1);
font-size: 12px;
line-height: 1.6;
}
.rw-notice--closed { border-left-color: var(--accent); background: var(--accent-soft); }
.rw-stats { display: flex; flex-wrap: wrap; gap: var(--sp-6); margin-top: var(--sp-4); }
.rw-stat { display: flex; flex-direction: column; gap: 2px; }
.rw-stat__value { font-size: 20px; font-weight: 600; color: var(--accent); line-height: 1.1; }
.rw-stat__label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); }
.rw-season-picker {
display: flex;
align-items: center;
gap: var(--sp-2);
margin-top: var(--sp-4);
flex-wrap: wrap;
}
.rw-season-picker__label { font-size: 11px; color: var(--text-2); }
.rw-season-picker select { min-height: 32px; font-size: 12px; }
.rw-admin {
display: flex;
flex-direction: column;
gap: var(--sp-3);
margin-top: var(--sp-5);
padding-top: var(--sp-4);
border-top: 1px dashed var(--border);
}
.rw-admin__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); }
.rw-admin__help { font-size: 11px; color: var(--text-2); max-width: 46ch; line-height: 1.5; }
.rw-admin__new summary { font-size: 12px; color: var(--text-2); cursor: pointer; }
.rw-admin__new summary:hover { color: var(--text-1); }
.rw-admin__new .rw-admin__form { margin-top: var(--sp-3); }
/* `label {}` empile deja en colonne : on ne fait que fixer l'ecart et la
* taille du libelle, sans redeclarer le flex. */
.rw-field { gap: var(--sp-1); }
.rw-field > span { font-size: 11px; color: var(--text-2); }
.rw-field input,
.rw-field select { min-height: 34px; font-size: 13px; }
.rw-field--search input { min-width: 180px; }
/* ─── Qui vote ─────────────────────────────────────────────────────────── */
.rw-me__identity { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.rw-me__name { font-size: 18px; font-weight: 600; color: var(--accent); }
.rw-me__reset-form { display: inline; }
.rw-me__reset {
background: transparent;
border: 1px solid var(--border-strong);
color: var(--text-2);
font-size: 11px;
padding: 3px 10px;
border-radius: var(--r-sm);
min-height: 0;
}
.rw-me__reset:hover { color: var(--text-1); background: var(--bg-hover); transform: none; filter: none; }
.rw-me__picker { display: flex; align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap; }
/* ─── Le bulletin ──────────────────────────────────────────────────────── */
.rw-toolbar {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--sp-3);
padding: var(--sp-3) 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
margin-bottom: var(--sp-4);
}
.rw-toolbar__group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.rw-toolbar__hint { font-size: 10px; color: var(--text-3); max-width: 30ch; line-height: 1.4; }
.rw-ballot__state { font-size: 10px; }
.rw-shelves { display: flex; flex-direction: column; gap: var(--sp-4); }
.rw-shelf {
border: 1px solid var(--border);
border-radius: var(--r);
background: var(--bg-surface);
padding: var(--sp-3);
transition: border-color 120ms ease, background 120ms ease;
}
.rw-shelf.is-exact { border-color: rgba(0,220,171,0.30); }
.rw-shelf.is-over { border-color: rgba(240,160,32,0.40); }
.rw-shelf__head {
display: flex;
align-items: baseline;
gap: var(--sp-3);
margin-bottom: var(--sp-3);
}
.rw-shelf__name { font-size: 13px; font-weight: 600; color: var(--text-1); }
.rw-shelf__count { font-size: 12px; color: var(--text-2); }
.rw-shelf.is-exact .rw-shelf__count { color: var(--accent); }
.rw-shelf.is-over .rw-shelf__count { color: var(--warning); }
.rw-shelf__pts { margin-left: auto; font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; }
.rw-shelf__list {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
list-style: none;
margin: 0;
padding: 0;
min-height: 44px;
}
.rw-shelf__empty { display: none; font-size: 11px; color: var(--text-3); font-style: italic; margin: 0; }
.rw-shelf.is-empty .rw-shelf__empty { display: block; }
.rw-card {
position: relative;
width: 186px;
padding: var(--sp-2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--bg-raised);
display: flex;
flex-direction: column;
gap: 3px;
}
.rw-card.is-hidden { display: none; }
.rw-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-1); }
.rw-card__name {
font-size: 12px;
font-weight: 600;
color: var(--text-1);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rw-card__score .score-chip__num { font-size: 12px; }
/* Quatre chiffres en 2x2 : sur une seule ligne ils seraient illisibles a
* 10px, et sur quatre lignes la carte doublerait de haut. */
.rw-card__stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px var(--sp-2);
font-size: 10px;
color: var(--text-3);
}
.rw-card__stats b { color: var(--text-1); font-weight: 600; }
.rw-card__rank { color: var(--text-3); font-size: 10px; }
.rw-card__flags { display: flex; align-items: center; gap: 3px; }
.rw-card__select { min-height: 30px; font-size: 11px; width: 100%; }
/* ─── Grades : une couleur par palier, reprise partout ─────────────────── */
.rw-tier-chip {
display: inline-block;
padding: 1px 7px;
border-radius: 999px;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
background: rgba(255,255,255,0.04);
color: var(--text-2);
}
.rw-tier-chip--chief { background: rgba(255,196,60,0.14); color: #ffc43c; }
.rw-tier-chip--tactician { background: var(--accent-soft); color: var(--accent); }
.rw-tier-chip--key { background: rgba(90,180,255,0.12); color: #5ab4ff; }
.rw-tier-chip--elite { background: rgba(160,140,255,0.12); color: #a08cff; }
.rw-tier-chip--valued { background: rgba(255,255,255,0.05); color: var(--text-2); }
.rw-tier-chip--none { background: transparent; color: var(--text-3); }
.rw-split { display: flex; gap: 1px; width: 92px; height: 8px; border-radius: 2px; overflow: hidden; }
.rw-split__seg { display: block; min-width: 2px; }
.rw-split__seg--chief { background: #ffc43c; }
.rw-split__seg--tactician { background: var(--accent); }
.rw-split__seg--key { background: #5ab4ff; }
.rw-split__seg--elite { background: #a08cff; }
.rw-split__seg--valued { background: var(--text-2); }
.rw-split__seg--none { background: var(--text-3); }
/* ─── Listes finales ───────────────────────────────────────────────────── */
.rw-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-4); }
.rw-list { border: 1px solid var(--border); border-radius: var(--r); background: var(--bg-surface); padding: var(--sp-3); }
.rw-list__head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.rw-list__name { font-size: 12px; font-weight: 600; color: var(--text-1); }
.rw-list__count { font-size: 11px; color: var(--text-3); }
.rw-list__copy {
margin-left: auto;
background: transparent;
border: 1px solid var(--border-strong);
color: var(--text-2);
font-size: 10px;
padding: 2px 8px;
border-radius: var(--r-sm);
min-height: 0;
}
.rw-list__copy:hover { color: var(--accent); border-color: var(--accent); background: transparent; transform: none; filter: none; }
.rw-list__members { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 2px; }
.rw-list__members li { font-size: 12px; color: var(--text-2); }
.rw-list__members a { color: var(--text-1); }
.rw-tag { font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--warning); }
/* ─── Zones de coupure ─────────────────────────────────────────────────── */
.rw-cuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); }
.rw-cut { border: 1px solid var(--border); border-radius: var(--r); background: var(--bg-surface); padding: var(--sp-3); }
.rw-cut__head { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.rw-cut__name { font-size: 12px; font-weight: 600; color: var(--text-1); }
.rw-cut__gap { margin-left: auto; font-size: 10px; color: var(--text-3); }
.rw-cut__side { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.rw-cut__side li { font-size: 12px; color: var(--text-2); display: flex; align-items: baseline; gap: var(--sp-2); }
.rw-cut__side a { color: var(--text-1); }
.rw-cut__label { font-size: 9px !important; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); }
.rw-cut__side--out { margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px dashed var(--border-strong); }
.rw-cut__score { margin-left: auto; color: var(--text-3); font-size: 11px; }
/* ─── A debattre ───────────────────────────────────────────────────────── */
.rw-contested { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.rw-contested__item {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-2);
border-radius: var(--r-sm);
background: var(--bg-surface);
flex-wrap: wrap;
}
.rw-contested__rank { font-size: 11px; color: var(--text-3); min-width: 2ch; }
.rw-contested__name { font-size: 13px; color: var(--text-1); font-weight: 600; }
.rw-contested__tier { font-size: 11px; color: var(--text-2); }
.rw-contested__item .rw-split { margin-left: auto; }
/* ─── Bulletins et journal ─────────────────────────────────────────────── */
.rw-voters { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.rw-voter {
display: flex;
align-items: baseline;
gap: var(--sp-2);
padding: 4px 10px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--bg-surface);
}
.rw-voter.is-in { border-color: rgba(0,220,171,0.28); }
.rw-voter.is-draft { border-color: rgba(240,160,32,0.28); }
.rw-voter__name { font-size: 12px; color: var(--text-1); }
.rw-voter__state { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; }
.rw-voter.is-in .rw-voter__state { color: var(--accent); }
.rw-voter.is-draft .rw-voter__state { color: var(--warning); }
.rw-voter__count { font-size: 10px; color: var(--text-3); }
.rw-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.rw-log__item { display: flex; align-items: baseline; gap: var(--sp-2); font-size: 12px; flex-wrap: wrap; }
.rw-log__when { font-size: 10px; color: var(--text-3); }
.rw-log__who { color: var(--text-1); font-weight: 600; }
.rw-log__what { color: var(--text-2); }
.rw-log__detail { font-size: 10px; color: var(--text-3); }
@media (max-width: 720px) {
.rw-toolbar { flex-direction: column; }
.rw-toolbar__group { width: 100%; }
.rw-card { width: calc(50% - var(--sp-1)); }
.rw-stats { gap: var(--sp-4); }
.rw-contested__item .rw-split { margin-left: 0; }
}
/* ─── Rewards : la saison semaine par semaine ─────────────────────────────
*
* Une moyenne cache exactement ce qu'on cherche au moment de distribuer des
* grades : qui etait la a chaque fois. D'ou une bande de huit cases par
* joueur, une par semaine, et quatre etats seulement.
*
* `none` (gris) n'est **pas** une faute : c'est une semaine que personne n'a
* mesuree. Lui donner la couleur de l'echec accuserait le joueur d'un trou de
* capture, ce que le reste du projet interdit sous le nom « absence != zero ».
*/
.rw-notice--private { border-left-color: var(--accent); background: var(--accent-soft); }
.rw-legend {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-3);
margin-bottom: var(--sp-4);
font-size: 10px;
color: var(--text-2);
}
.rw-legend__title { text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); }
.rw-legend__item { display: inline-flex; align-items: center; gap: var(--sp-1); }
.rw-bar { display: flex; align-items: center; gap: var(--sp-1); }
.rw-bar__key {
font-size: 9px;
font-weight: 600;
color: var(--text-3);
min-width: 14px;
text-transform: uppercase;
}
.rw-bar__cells { display: flex; gap: 2px; flex: 1; }
.rw-cell {
display: block;
flex: 1;
height: 7px;
min-width: 7px;
border-radius: 1px;
background: var(--text-3);
}
.rw-cell--ok { background: var(--accent); }
.rw-cell--low { background: var(--warning); }
.rw-cell--zero { background: var(--danger); }
.rw-cell--none { background: rgba(255,255,255,0.07); }
.rw-card__bars { display: flex; flex-direction: column; gap: 3px; margin: 2px 0; }
/* Dans un tableau la bande ne doit pas s'etirer sur toute la colonne : elle se
* lit d'un coup d'oeil ou pas du tout. */
.rw-bar--table { display: flex; width: 92px; }
.rw-bar--table + .rw-bar--table { margin-top: 2px; }
.rw-bar--table .rw-cell { height: 6px; min-width: 5px; }
/* ─── Presence ─────────────────────────────────────────────────────────── */
.rw-pres { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); }
.rw-pres__item {
font-size: 9px;
padding: 1px 5px;
border-radius: 999px;
background: rgba(255,255,255,0.04);
color: var(--text-2);
white-space: nowrap;
}
.rw-pres__item.is-good { background: var(--accent-soft); color: var(--accent); }
.rw-pres__item.is-bad { background: var(--danger-soft); color: var(--danger); }
.rw-perfect {
font-size: 9px;
font-weight: 600;
padding: 1px 6px;
border-radius: 999px;
background: rgba(255,196,60,0.14);
color: #ffc43c;
text-transform: uppercase;
letter-spacing: 0.04em;
white-space: nowrap;
}
.rw-perfect-list {
list-style: none;
margin: 0 0 var(--sp-4);
padding: 0;
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
}
.rw-perfect-item {
display: flex;
align-items: baseline;
gap: var(--sp-2);
padding: 4px 10px;
border: 1px solid rgba(255,196,60,0.24);
border-radius: 999px;
background: rgba(255,196,60,0.06);
font-size: 12px;
}
.rw-perfect-item a { color: var(--text-1); }
.rw-perfect-item__score { font-size: 10px; color: var(--text-3); }
.rw-presence-all summary { font-size: 12px; color: var(--text-2); cursor: pointer; }
.rw-presence-all summary:hover { color: var(--text-1); }
.rw-presence-all .data-table-wrap { margin-top: var(--sp-3); }
.data-table tr.is-perfect-row td:first-child { box-shadow: inset 2px 0 0 #ffc43c; }
/* Case a cocher de la barre d'outils. Deux regles globales mordent ici :
* `label {}` empile ses enfants en colonne, et tout `input` prend
* `width: 100%` avec `min-height: 40px`. Sans ces trois lignes, la case fait
* la largeur de la barre et pousse son libelle en dessous. */
.rw-check {
flex-direction: row;
align-items: center;
gap: var(--sp-2);
font-size: 11px;
color: var(--text-2);
cursor: pointer;
white-space: nowrap;
}
.rw-check input {
width: 16px;
min-height: 16px;
height: 16px;
padding: 0;
margin: 0;
accent-color: var(--accent);
}
@media (max-width: 720px) {
.rw-card { width: 100%; }
.rw-legend { gap: var(--sp-2); }
}
/* ─── Bandeau collant : quotas, puis actions de groupe ─────────────────── */
.rw-quotabar {
position: sticky;
top: 0;
z-index: 20;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
margin-bottom: var(--sp-3);
padding: var(--sp-2) var(--sp-3);
border: 1px solid var(--border);
border-radius: var(--r);
background: var(--bg-overlay);
}
.rw-quotabar__counts { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.rw-quotabar__item {
display: flex;
align-items: baseline;
gap: var(--sp-1);
font-size: 10px;
color: var(--text-3);
}
.rw-quotabar__name { text-transform: uppercase; letter-spacing: 0.04em; }
.rw-quotabar__num { font-size: 12px; color: var(--text-1); }
.rw-quotabar__item.is-exact .rw-quotabar__num { color: var(--accent); }
.rw-quotabar__item.is-over .rw-quotabar__num { color: var(--warning); }
/* ─── Rewards : moins d'information, et un mobile utilisable ──────────────
*
* La carte portait dix elements. Pour trancher un grade il en faut quatre :
* le pseudo, le score, la presence de saison, et les six chiffres. Le reste
* — bandes, squad, evenement, pastilles de semaine, drapeaux — attend
* l'interrupteur « Details », replie par defaut.
*
* Sur telephone la carte devient une ligne pleine largeur avec des cibles de
* 38 px : les vignettes de 186 px y donnaient une colonne interminable, et
* les chiffres de 22 px de haut n'etaient pas cliquables au pouce.
*/
.rw-card__line {
display: flex;
align-items: center;
gap: var(--sp-2);
font-size: 10px;
color: var(--text-2);
}
.rw-card__figure { color: var(--text-1); }
/* Replie par defaut. La legende ne sert qu'aux bandes : elle suit le meme
* interrupteur, sinon elle expliquerait des couleurs qu'on ne voit pas. */
.rw-card__more,
.rw-ballot .rw-legend { display: none; }
.rw-ballot.is-detailed .rw-card__more { display: block; }
.rw-ballot.is-detailed .rw-legend { display: flex; }
.rw-card__more > * + * { margin-top: 3px; }
/* ─── Barre d'outils : deux actions, le reste replie ──────────────────── */
.rw-toolbar { flex-direction: column; align-items: stretch; }
.rw-toolbar__main { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.rw-toolbar__view {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-3);
}
.rw-toolbar__more summary {
font-size: 11px;
color: var(--text-2);
cursor: pointer;
list-style: revert;
}
.rw-toolbar__more summary:hover { color: var(--text-1); }
.rw-toolbar__more .rw-toolbar__group { margin-top: var(--sp-2); }
/* ─── Panneaux replies ─────────────────────────────────────────────────── */
.rw-fold > summary {
font-size: 12px;
color: var(--text-2);
cursor: pointer;
padding: var(--sp-1) 0;
}
.rw-fold > summary:hover { color: var(--accent); }
.rw-fold[open] > summary { margin-bottom: var(--sp-2); }
/* ─── Mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
/* Le bandeau des quotas reste colle : c'est la seule chose qui dise ou on
* en est, et sur telephone on ne remonte pas pour la lire. Les libelles
* sautent, les chiffres suffisent. */
.rw-quotabar {
position: sticky;
top: 0;
padding: var(--sp-1) var(--sp-2);
gap: var(--sp-2);
}
.rw-quotabar__counts { gap: var(--sp-2); flex: 1; }
.rw-quotabar__name { display: none; }
.rw-quotabar__item::before {
content: attr(data-short);
font-size: 9px;
color: var(--text-3);
}
/* Une ligne pleine largeur, pas une vignette : la colonne de 186 px
* demandait dix ecrans de defilement pour cent joueurs. */
.rw-card {
width: 100%;
display: flex;
flex-direction: column;
gap: var(--sp-1);
padding: var(--sp-2);
}
.rw-shelf { padding: var(--sp-2); }
.rw-shelf__list { gap: var(--sp-1); }
.rw-card__name { font-size: 13px; }
.rw-card__line { font-size: 11px; }
/* La barre d'outils passe en pleine largeur, boutons compris : deux cibles
* larges valent mieux que six serrees. */
/* Les deux boutons partagent une ligne depuis que le libelle est court. */
.rw-toolbar__main { flex-wrap: nowrap; }
.rw-toolbar__main .btn { flex: 1 1 0; min-height: 42px; white-space: nowrap; }
.rw-field--search input { width: 100%; min-width: 0; }
.rw-toolbar__view { gap: var(--sp-2); }
/* Les tableaux d'analyse restent replies : c'est leur raison d'etre ici. */
.rw-lists { grid-template-columns: 1fr; }
.rw-cuts { grid-template-columns: 1fr; }
}
/* Ligne du votant : remplace un panneau entier une fois le nom choisi. */
.rw-mebar {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--sp-2);
margin-bottom: var(--sp-3);
padding: var(--sp-2) var(--sp-3);
border: 1px solid var(--border);
border-left: 2px solid var(--accent);
border-radius: var(--r);
background: var(--bg-surface);
}
.rw-mebar__label {
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-3);
}
.rw-mebar .rw-me__name { font-size: 14px; }
.rw-mebar__state { font-size: 10px; color: var(--warning); }
.rw-mebar__state.is-in { color: var(--accent); }
.rw-mebar .rw-me__reset-form { margin-left: auto; }
/* Les deux replis du hero se lisent comme des titres discrets, pas comme des
* paragraphes : leur contenu ne sert qu une fois. */
.rw-hero-help > summary,
.rw-admin > summary { font-size: 11px; }
.rw-admin { border-top: 1px dashed var(--border); padding-top: var(--sp-3); }
/* ─── Rewards : derniers pixels gagnes avant le bulletin ──────────────────
*
* Mesure sur telephone : la premiere carte etait a 1447 px, soit deux ecrans
* de defilement avant de pouvoir voter. Replier ce qui ne sert qu'une fois
* (l'explication, les reglages de saison) et remplacer le panneau du votant
* par une ligne a ramene le bulletin a portee. Ce bloc finit le travail.
*/
@media (max-width: 720px) {
/* Le bandeau garde ses libelles : c'est lui qui apprend que « 1 » veut dire
* chef d'alliance. Il tient sur deux lignes, ca vaut mieux que six chiffres
* dont on ignore le sens. */
.rw-quotabar__name { display: inline; font-size: 9px; }
.rw-quotabar__item { gap: 3px; }
/* L'explication longue vit dans « Comment ca marche », en haut de page. La
* repeter ici coutait quatre lignes juste avant les cartes. */
.rw-ballot > .rw-help { display: none; }
/* Les vignettes n'ont plus de titre d'etagere a porter : le grade se lit
* sur le bouton allume. */
.rw-shelf__pts { display: none; }
}
/* En-tete des listes finales : nom + compte + bouton Copier depassaient la
* carte de quelques pixels, seul debordement non contenu de la page. Le nom
* cede en premier, il est deja lisible tronque. */
.rw-list__head { flex-wrap: wrap; }
.rw-list__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rw-list__copy { flex: 0 0 auto; }
/* ─── Rewards : la liste deroulante est le geste ──────────────────────────
*
* Les chiffres cliquables et le glisser-deposer ont ete retires : ils
* demandaient au pouce une precision que le telephone ne donne pas. Reste le
*