| 1 |
1 |
/* ----------------------------------------------------------------------------- |
| 2 |
2 |
Author: Simon-Pierre Boucher <contact@spboucher.ai> |
| 3 |
3 |
File: styles.css |
| 4 |
|
− Desc: Identité visuelle Resto·Ka — système de design « éditorial sharp » |
| 5 |
|
− du GROUPE KA. Le socle (palette fixe, typo, grain, boutons, cartes…) |
| 6 |
|
− vient de ka-ui (src/ka/tokens.css, importé AVANT ce fichier) ; ici on |
| 7 |
|
− ne définit que l'ACCENT SAFRAN de Resto-Ka + les classes métier. |
|
4 |
+ Desc: Identité visuelle Resto·Ka v2 — « éditorial premium » du GROUPE KA. |
|
5 |
+ Le socle (palette fixe, typo, grain, boutons, cartes…) vient de ka-ui |
|
6 |
+ (src/ka/tokens.css, importé AVANT ce fichier) ; ici on définit |
|
7 |
+ l'ACCENT SAFRAN de Resto-Ka + les classes métier. |
|
8 |
+ · v2 (2026-08-25) : moins de boîtes/ombres, plus de typographie et de |
|
9 |
+ filets d'encre — bande « signes vitaux » pleine largeur sur fond encre, |
|
10 |
+ chiffres géants tabulaires, nav soulignée, rangs de plats en lignes |
|
11 |
+ éditoriales (pointillés conduits), fiches allégées. Aucune logique changée. |
| 8 |
12 |
· Accent Resto-Ka : safran #f08c00 (soft #fdeed7 · deep #b96a00) |
| 9 |
13 |
· Baseline : « Chaque resto, chaque plat, chaque prix. » |
| 10 |
14 |
· 100 % adaptatif mobile (safe-areas iOS) |
| 29 |
33 |
.container { max-width: 1240px; margin: 0 auto; padding: 0 24px; } |
| 30 |
34 |
@media (max-width: 640px) { .container { padding: 0 16px; } } |
| 31 |
35 |
|
|
36 |
+/* ================= Primitives éditoriales v2 ================= */ |
|
37 |
+/* pleine largeur depuis n'importe quel parent centré (tokens.css pose |
|
38 |
+ overflow-x: clip sur html ET body — requis) */ |
|
39 |
+.bleed { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } |
|
40 |
+.band-ink { background: var(--ink); color: var(--paper); } |
|
41 |
+.rule-ink { border-top: 2px solid var(--ink); } |
|
42 |
+.rule-hair { border-top: 1px solid var(--line); } |
|
43 |
+.tnum { font-variant-numeric: tabular-nums; } |
|
44 |
+ |
| 32 |
45 |
/* ================= Header ================= */ |
| 33 |
46 |
.header { |
| 34 |
47 |
position: sticky; top: 0; z-index: var(--z-header, 500); |
| 43 |
56 |
color: var(--ink); |
| 44 |
57 |
} |
| 45 |
58 |
.brand .logo-ico { margin-right: 11px; flex: none; } |
| 46 |
|
−/* « Ka » en pastille lime inclinée — même geste que la carte membre Groupe KA */ |
|
59 |
+/* « Ka » en pastille safran inclinée — même geste que la carte membre Groupe KA */ |
| 47 |
60 |
.brand .ka { |
| 48 |
61 |
background: var(--accent); color: var(--ink); |
| 49 |
62 |
padding: 1px 6px 3px; border-radius: 5px; margin-left: 3px; |
| 50 |
63 |
display: inline-block; transform: rotate(-2deg); |
|
64 |
+ transition: transform 0.15s ease; |
| 51 |
65 |
} |
|
66 |
+.brand:hover .ka { transform: rotate(0); } |
| 52 |
67 |
.brand-tag { |
| 53 |
68 |
font-family: var(--font-mono); font-size: 10px; font-weight: 500; |
| 54 |
69 |
text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); |
| 55 |
70 |
margin-left: 14px; |
| 56 |
71 |
} |
| 57 |
72 |
@media (max-width: 900px) { .brand-tag { display: none; } } |
| 58 |
|
−.nav { margin-left: auto; display: flex; gap: 6px; } |
|
73 |
+/* nav v2 : liens texte soulignés (trait qui se déploie), plus de pilules */ |
|
74 |
+.nav { margin-left: auto; display: flex; gap: 26px; } |
| 59 |
75 |
.nav a { |
| 60 |
|
− padding: 8px 16px; border: 1.5px solid transparent; border-radius: var(--r-ctl); |
| 61 |
|
− font-family: var(--font-display); font-weight: 700; font-size: 14px; |
| 62 |
|
− color: var(--ink); transition: all 0.13s ease; min-height: 38px; |
|
76 |
+ position: relative; padding: 8px 2px; min-height: 38px; |
| 63 |
77 |
display: inline-flex; align-items: center; |
|
78 |
+ font-family: var(--font-display); font-weight: 700; font-size: 14px; |
|
79 |
+ color: var(--ink-2); transition: color 0.13s ease; |
|
80 |
+} |
|
81 |
+.nav a::after { |
|
82 |
+ content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2.5px; |
|
83 |
+ background: var(--ink); transform: scaleX(0); transform-origin: left; |
|
84 |
+ transition: transform 0.18s ease; |
| 64 |
85 |
} |
| 65 |
|
−.nav a:hover { background: var(--accent); border-color: var(--ink); } |
| 66 |
|
−.nav a.active { background: var(--ink); color: var(--accent); border-color: var(--ink); } |
|
86 |
+.nav a:hover { color: var(--ink); } |
|
87 |
+.nav a:hover::after { transform: scaleX(1); } |
|
88 |
+.nav a.active { color: var(--ink); } |
|
89 |
+.nav a.active::after { transform: scaleX(1); background: var(--accent); height: 3px; } |
| 67 |
90 |
|
| 68 |
91 |
/* ================= Ticker ================= */ |
| 69 |
92 |
.ticker { |
| 82 |
105 |
} |
| 83 |
106 |
|
| 84 |
107 |
/* ================= Hero ================= */ |
| 85 |
|
−.hero { padding: 58px 0 22px; } |
| 86 |
|
−@media (max-width: 640px) { .hero { padding: 34px 0 14px; } } |
|
108 |
+.hero { padding: 64px 0 0; } |
|
109 |
+@media (max-width: 640px) { .hero { padding: 38px 0 0; } } |
| 87 |
110 |
.hero h1 { |
| 88 |
|
− font-size: clamp(36px, 5.4vw, 58px); font-weight: 700; line-height: 1.04; |
| 89 |
|
− letter-spacing: -0.04em; max-width: 920px; margin-top: 16px; color: var(--ink); |
|
111 |
+ font-size: clamp(40px, 7.4vw, 92px); font-weight: 700; line-height: 0.99; |
|
112 |
+ letter-spacing: -0.045em; max-width: 1080px; margin-top: 18px; color: var(--ink); |
| 90 |
113 |
} |
| 91 |
|
−.hero p.lede { color: var(--ink-2); font-size: 17px; max-width: 640px; margin: 18px 0 0; } |
| 92 |
|
−.stat-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; } |
| 93 |
|
−.stat-chip { |
| 94 |
|
− background: var(--surface); border: 1.5px solid var(--ink); border-radius: var(--r-ctl); |
| 95 |
|
− padding: 7px 14px; font-size: 12.5px; font-weight: 500; |
| 96 |
|
− color: var(--ink-2); display: flex; gap: 8px; align-items: center; |
| 97 |
|
− box-shadow: 3px 3px 0 rgba(20, 24, 20, 0.12); |
|
114 |
+.hero p.lede { color: var(--ink-2); font-size: 17.5px; max-width: 660px; margin: 22px 0 0; line-height: 1.6; } |
|
115 |
+ |
|
116 |
+/* --- signes vitaux : bande encre pleine largeur, chiffres géants ------------ */ |
|
117 |
+.vitals { margin-top: 40px; padding: 30px 0 36px; } |
|
118 |
+.vitals-in { |
|
119 |
+ max-width: 1240px; margin: 0 auto; padding: 0 24px; |
|
120 |
+ display: grid; grid-template-columns: repeat(4, 1fr); |
|
121 |
+ gap: 22px 32px; align-items: end; |
|
122 |
+} |
|
123 |
+.vitals-live { |
|
124 |
+ grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; |
|
125 |
+ font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; |
|
126 |
+ text-transform: uppercase; letter-spacing: 0.14em; color: rgba(245, 243, 238, 0.6); |
| 98 |
127 |
} |
| 99 |
|
−.stat-chip b { color: var(--ink); font-weight: 700; font-family: var(--font-display); } |
| 100 |
|
−.stat-chip .pulse { |
| 101 |
|
− width: 8px; height: 8px; border-radius: 50%; background: var(--green); |
| 102 |
|
− box-shadow: 0 0 0 4px var(--accent-soft); animation: pulse 2.4s ease infinite; |
|
128 |
+.vital { border-top: 1px solid rgba(245, 243, 238, 0.22); padding-top: 14px; min-width: 0; } |
|
129 |
+.vital-i { |
|
130 |
+ display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 700; |
|
131 |
+ letter-spacing: 0.12em; color: var(--accent); margin-bottom: 8px; |
| 103 |
132 |
} |
| 104 |
|
−@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(28, 92, 65, 0.18); } } |
|
133 |
+.vital-v { |
|
134 |
+ display: block; font-family: var(--font-display); font-weight: 700; |
|
135 |
+ font-size: clamp(30px, 4.4vw, 60px); line-height: 1; letter-spacing: -0.04em; |
|
136 |
+ color: var(--paper); font-variant-numeric: tabular-nums; white-space: nowrap; |
|
137 |
+} |
|
138 |
+.vital-k { |
|
139 |
+ display: block; margin-top: 8px; |
|
140 |
+ font-family: var(--font-mono); font-size: 10px; font-weight: 600; |
|
141 |
+ text-transform: uppercase; letter-spacing: 0.1em; color: rgba(245, 243, 238, 0.55); |
|
142 |
+} |
|
143 |
+@media (max-width: 760px) { |
|
144 |
+ .vitals { margin-top: 30px; padding: 24px 0 28px; } |
|
145 |
+ .vitals-in { grid-template-columns: 1fr 1fr; gap: 18px 20px; padding: 0 16px; } |
|
146 |
+} |
|
147 |
+.pulse { |
|
148 |
+ width: 8px; height: 8px; border-radius: 50%; background: var(--accent); |
|
149 |
+ box-shadow: 0 0 0 4px rgba(240, 140, 0, 0.25); animation: pulse 2.4s ease infinite; |
|
150 |
+ flex: none; display: inline-block; |
|
151 |
+} |
|
152 |
+@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(240, 140, 0, 0.08); } } |
| 105 |
153 |
|
| 106 |
|
−/* ================= Rangée d'avantages ================= */ |
|
154 |
+/* ================= Rangée d'avantages (strip éditorial, sans boîtes) ======= */ |
| 107 |
155 |
.benefits { |
| 108 |
|
− display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); |
| 109 |
|
− gap: 14px; margin-top: 30px; |
|
156 |
+ display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); |
|
157 |
+ gap: 0 34px; margin-top: 26px; |
|
158 |
+} |
|
159 |
+.benefit { |
|
160 |
+ display: flex; align-items: center; gap: 11px; |
|
161 |
+ border-top: 1px solid var(--line); padding: 13px 0; |
| 110 |
162 |
} |
| 111 |
|
−.benefit { display: flex; align-items: center; gap: 12px; } |
| 112 |
163 |
.benefit-ico { |
| 113 |
|
− width: 42px; height: 42px; border: 1.5px solid var(--ink); border-radius: var(--r-ctl); |
|
164 |
+ width: auto; height: auto; border: none; background: none; box-shadow: none; |
| 114 |
165 |
flex: none; display: flex; align-items: center; justify-content: center; |
| 115 |
|
− background: var(--accent); color: var(--ink); box-shadow: 3px 3px 0 rgba(20, 24, 20, 0.15); |
|
166 |
+ color: var(--accent-deep); |
| 116 |
167 |
} |
| 117 |
|
−.benefit-ico.blue { background: var(--surface); color: var(--green); } |
|
168 |
+.benefit-ico.blue { background: none; color: var(--green); } |
| 118 |
169 |
.benefit-label { |
| 119 |
170 |
font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; |
| 120 |
171 |
text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); |
| 121 |
172 |
} |
| 122 |
|
−@media (max-width: 640px) { .benefits { grid-template-columns: 1fr 1fr; gap: 12px; } } |
|
173 |
+@media (max-width: 640px) { .benefits { grid-template-columns: 1fr 1fr; gap: 0 18px; margin-top: 18px; } } |
| 123 |
174 |
|
| 124 |
|
−/* ================= Filter bar ================= */ |
|
175 |
+/* ================= Filter bar (bande à filets, sans carte) ================= */ |
| 125 |
176 |
.filterbar { |
| 126 |
|
− background: var(--surface); border: 1.5px solid var(--ink); border-radius: var(--r-card); |
| 127 |
|
− box-shadow: var(--shadow-off-soft); padding: 14px; margin: 20px 0 6px; |
|
177 |
+ background: transparent; border: none; border-radius: 0; box-shadow: none; |
|
178 |
+ border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); |
|
179 |
+ padding: 18px 0 20px; margin: 26px 0 6px; |
| 128 |
180 |
display: flex; flex-direction: column; gap: 0; min-width: 0; |
| 129 |
181 |
} |
| 130 |
|
−.f-primary { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; min-width: 0; } |
|
182 |
+.f-primary { display: flex; gap: 14px 22px; align-items: stretch; flex-wrap: wrap; min-width: 0; } |
| 131 |
183 |
.f-search { |
| 132 |
|
− flex: 1 1 220px; min-width: 0; max-width: 440px; align-self: center; |
| 133 |
|
− display: flex; align-items: center; gap: 8px; |
| 134 |
|
− border: 1.5px solid var(--ink); border-radius: var(--r-ctl); background: var(--surface-2); |
| 135 |
|
− padding: 0 13px; min-height: 46px; color: var(--ink-2); |
| 136 |
|
− box-shadow: 3px 3px 0 rgba(20, 24, 20, 0.08); |
| 137 |
|
− transition: box-shadow 0.15s ease, background 0.15s ease; |
|
184 |
+ flex: 1 1 240px; min-width: 0; max-width: 480px; align-self: center; |
|
185 |
+ display: flex; align-items: center; gap: 9px; |
|
186 |
+ border: none; border-bottom: 1.5px solid var(--ink); border-radius: 0; |
|
187 |
+ background: transparent; padding: 0 2px; min-height: 46px; color: var(--ink-2); |
|
188 |
+ box-shadow: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; |
| 138 |
189 |
} |
| 139 |
190 |
.f-search:focus-within { |
| 140 |
|
− background: var(--white, #fff); outline: 2px solid var(--green); outline-offset: 1px; |
| 141 |
|
− box-shadow: 3px 3px 0 rgba(28, 92, 65, 0.25); |
|
191 |
+ outline: none; border-color: var(--accent-deep); |
|
192 |
+ box-shadow: 0 1.5px 0 var(--accent-deep); background: transparent; |
| 142 |
193 |
} |
| 143 |
194 |
.f-search input { |
| 144 |
195 |
border: none; background: none; outline: none; flex: 1; min-width: 0; |
| 145 |
|
− font-size: 14px; color: var(--ink); font-family: inherit; |
|
196 |
+ font-size: 15px; color: var(--ink); font-family: inherit; |
| 146 |
197 |
} |
| 147 |
198 |
.f-clear { |
| 148 |
|
− border: 1px solid var(--line); background: var(--paper); color: var(--ink-2); |
|
199 |
+ border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); |
| 149 |
200 |
border-radius: 50%; width: 20px; height: 20px; font-size: 10px; cursor: pointer; |
| 150 |
201 |
flex: none; display: grid; place-items: center; |
| 151 |
202 |
} |
| 152 |
203 |
.f-ctl { |
| 153 |
204 |
flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; |
| 154 |
|
− gap: 2px; border: 1.5px solid var(--ink); border-radius: var(--r-ctl); background: var(--surface); |
| 155 |
|
− padding: 7px 14px 6px; min-height: 52px; cursor: pointer; |
| 156 |
|
− box-shadow: 3px 3px 0 rgba(20, 24, 20, 0.08); |
| 157 |
|
− transition: box-shadow 0.15s ease; |
|
205 |
+ gap: 3px; border: none; border-bottom: 1px solid var(--line-strong); border-radius: 0; |
|
206 |
+ background: transparent; padding: 4px 2px 7px; min-height: 52px; cursor: pointer; |
|
207 |
+ box-shadow: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; |
| 158 |
208 |
} |
| 159 |
|
−.f-ctl:focus-within { outline: 2px solid var(--green); outline-offset: 1px; box-shadow: 3px 3px 0 rgba(28, 92, 65, 0.25); } |
|
209 |
+.f-ctl:focus-within { outline: none; border-color: var(--accent-deep); box-shadow: 0 1px 0 var(--accent-deep); } |
| 160 |
210 |
.f-ctl > span { |
| 161 |
211 |
font-family: var(--font-mono); font-size: 9px; font-weight: 700; |
| 162 |
212 |
text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); |
| 171 |
221 |
} |
| 172 |
222 |
|
| 173 |
223 |
/* pastilles de filtres actifs */ |
| 174 |
|
−.pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 2px; } |
|
224 |
+.pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 2px; } |
| 175 |
225 |
.pill { |
| 176 |
226 |
display: inline-flex; align-items: center; gap: 7px; |
| 177 |
|
− border: 1.5px solid var(--ink); background: var(--accent); color: var(--ink); |
| 178 |
|
− border-radius: var(--r-ctl); padding: 5px 12px; font-size: 12.5px; font-weight: 700; |
|
227 |
+ border: 1px solid var(--ink); background: var(--accent); color: var(--ink); |
|
228 |
+ border-radius: 999px; padding: 5px 13px; font-size: 12.5px; font-weight: 700; |
| 179 |
229 |
font-family: var(--font-display); cursor: pointer; |
| 180 |
|
− box-shadow: 2px 2px 0 rgba(20, 24, 20, 0.2); transition: all 0.12s ease; |
|
230 |
+ box-shadow: none; transition: all 0.12s ease; |
| 181 |
231 |
} |
| 182 |
232 |
.pill:hover { background: var(--ink); color: var(--accent); } |
| 183 |
233 |
.pill-x { font-size: 10px; opacity: 0.65; } |
| 184 |
|
−.pill-clear { background: var(--surface); border-color: var(--danger); color: var(--danger); } |
|
234 |
+.pill-clear { background: transparent; border-color: var(--danger); color: var(--danger); } |
| 185 |
235 |
.pill-clear:hover { background: var(--danger); color: #fff; } |
| 186 |
236 |
.link-btn { |
| 187 |
237 |
background: none; border: none; padding: 0; color: var(--green); font: inherit; |
| 201 |
251 |
.btn-ghost:hover { background: var(--accent); } |
| 202 |
252 |
.btn:disabled { opacity: 0.4; cursor: default; } |
| 203 |
253 |
|
| 204 |
|
−/* ================= Chips ================= */ |
| 205 |
|
−.chips { display: flex; gap: 8px; margin: 18px 0 4px; overflow-x: auto; padding: 4px 4px 8px 0; scrollbar-width: none; } |
|
254 |
+/* ================= Chips (cuisines) — pilules à filet, sans ombre ========= */ |
|
255 |
+.chips { display: flex; gap: 8px; margin: 20px 0 4px; overflow-x: auto; padding: 4px 4px 8px 0; scrollbar-width: none; } |
| 206 |
256 |
.chips::-webkit-scrollbar { display: none; } |
| 207 |
257 |
.chip { |
| 208 |
|
− border: 1.5px solid var(--ink); background: var(--surface); color: var(--ink); |
| 209 |
|
− border-radius: var(--r-ctl); padding: 8px 16px; font-size: 13px; font-weight: 700; |
|
258 |
+ border: 1px solid var(--line-strong); background: transparent; color: var(--ink); |
|
259 |
+ border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 700; |
| 210 |
260 |
cursor: pointer; font-family: var(--font-display); white-space: nowrap; min-height: 40px; |
| 211 |
|
− box-shadow: 3px 3px 0 rgba(20, 24, 20, 0.1); transition: all 0.13s ease; |
|
261 |
+ box-shadow: none; transition: all 0.13s ease; |
| 212 |
262 |
} |
| 213 |
|
−.chip:hover { background: var(--accent-soft); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 rgba(20, 24, 20, 0.15); } |
| 214 |
|
−.chip.on { background: var(--ink); color: var(--accent); box-shadow: 4px 4px 0 rgba(20, 24, 20, 0.3); } |
|
263 |
+.chip:hover { background: var(--accent-soft); border-color: var(--ink); transform: none; box-shadow: none; } |
|
264 |
+.chip.on { background: var(--ink); color: var(--accent); border-color: var(--ink); box-shadow: none; } |
| 215 |
265 |
|
| 216 |
266 |
/* ================= Results ================= */ |
| 217 |
|
−.results-head { display: flex; align-items: baseline; gap: 14px; margin: 28px 0 18px; } |
| 218 |
|
−.results-head h2 { font-size: 23px; letter-spacing: -0.03em; color: var(--ink); } |
| 219 |
|
−.results-head span { font-family: var(--font-mono); color: var(--ink-3); font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; } |
|
267 |
+.results-head { |
|
268 |
+ display: flex; align-items: baseline; gap: 14px; margin: 44px 0 22px; |
|
269 |
+ border-top: 2px solid var(--ink); padding-top: 16px; |
|
270 |
+} |
|
271 |
+.results-head h2 { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.035em; color: var(--ink); } |
|
272 |
+.results-head span { |
|
273 |
+ margin-left: auto; text-align: right; |
|
274 |
+ font-family: var(--font-mono); color: var(--ink-3); font-size: 11.5px; |
|
275 |
+ font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; |
|
276 |
+ font-variant-numeric: tabular-nums; |
|
277 |
+} |
| 220 |
278 |
.grid { |
| 221 |
279 |
display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); |
| 222 |
|
− gap: 22px; padding-bottom: 30px; |
|
280 |
+ gap: 26px; padding-bottom: 30px; |
| 223 |
281 |
} |
| 224 |
|
−@media (max-width: 640px) { .grid { grid-template-columns: 1fr; gap: 16px; padding-bottom: 24px; } } |
|
282 |
+@media (max-width: 640px) { .grid { grid-template-columns: 1fr; gap: 18px; padding-bottom: 24px; } } |
| 225 |
283 |
|
| 226 |
284 |
/* récemment consultés — bande horizontale de cartes, défilement latéral */ |
| 227 |
285 |
.recent-row { |
| 228 |
286 |
display: grid; grid-auto-flow: column; grid-auto-columns: 290px; |
| 229 |
|
− gap: 18px; overflow-x: auto; padding-bottom: 12px; |
|
287 |
+ gap: 20px; overflow-x: auto; padding-bottom: 12px; |
| 230 |
288 |
scroll-snap-type: x proximity; |
| 231 |
289 |
} |
| 232 |
290 |
.recent-row > .card { scroll-snap-align: start; } |
| 234 |
292 |
.recent-row { grid-auto-columns: 82%; margin-right: -16px; padding-right: 16px; } |
| 235 |
293 |
} |
| 236 |
294 |
|
|
295 |
+/* cartes v2 : filet fin, pas d'ombre au repos — au survol, levée + ombre |
|
296 |
+ safran dure (signature Resto-Ka) */ |
| 237 |
297 |
.card { |
| 238 |
|
− background: var(--surface); border: 1.5px solid var(--ink); border-radius: var(--r-card); |
| 239 |
|
− overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-off-soft); |
| 240 |
|
− transition: transform 0.18s ease, box-shadow 0.18s ease; |
|
298 |
+ background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-card); |
|
299 |
+ overflow: hidden; display: flex; flex-direction: column; box-shadow: none; |
|
300 |
+ transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; |
| 241 |
301 |
} |
| 242 |
|
−.card:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-off); } |
|
302 |
+.card:hover { transform: translate(-3px, -3px); border-color: var(--ink); box-shadow: 6px 6px 0 var(--accent); } |
| 243 |
303 |
.card:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } |
| 244 |
|
−.card-img { position: relative; aspect-ratio: 16/9; background: var(--surface-2); overflow: hidden; border-bottom: 1.5px solid var(--ink); } |
|
304 |
+.card-img { position: relative; aspect-ratio: 16/9; background: var(--surface-2); overflow: hidden; border-bottom: 1px solid var(--line-strong); } |
| 245 |
305 |
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } |
| 246 |
306 |
.card:hover .card-img img { transform: scale(1.04); } |
| 247 |
307 |
.card-img .noimg { |
| 255 |
315 |
.card-logo { max-width: 46%; max-height: 68%; object-fit: contain; } |
| 256 |
316 |
.card:hover .card-logo { transform: none; } |
| 257 |
317 |
.badge { |
| 258 |
|
− position: absolute; top: 10px; left: 10px; border: 1.5px solid var(--ink); |
|
318 |
+ position: absolute; top: 10px; left: 10px; border: 1px solid var(--ink); |
| 259 |
319 |
border-radius: var(--r-ctl); padding: 3px 10px; |
| 260 |
320 |
font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.05em; |
| 261 |
321 |
background: rgba(255, 255, 255, 0.95); color: var(--ink); |
| 262 |
|
− box-shadow: 2px 2px 0 rgba(20, 24, 20, 0.25); |
|
322 |
+ box-shadow: none; |
| 263 |
323 |
} |
| 264 |
324 |
.badge.type { background: var(--ink); color: var(--accent); } |
| 265 |
325 |
.badge.right { left: auto; right: 10px; } |
| 267 |
327 |
.badge.ctx-takeout, .ctx-pill.ctx-takeout { background: var(--accent); color: var(--ink); } |
| 268 |
328 |
.badge.ctx-dine-in, .ctx-pill.ctx-dine-in { background: var(--green); color: #fff; } |
| 269 |
329 |
.badge.ctx-delivery, .ctx-pill.ctx-delivery { background: var(--amber); color: var(--ink); } |
| 270 |
|
−.card-body { padding: 15px 17px; display: flex; flex-direction: column; gap: 6px; flex: 1; } |
| 271 |
|
−.card-price { font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: -0.03em; color: var(--ink); } |
|
330 |
+.card-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; } |
|
331 |
+.card-price { |
|
332 |
+ font-family: var(--font-display); font-weight: 700; font-size: 24px; |
|
333 |
+ letter-spacing: -0.035em; color: var(--ink); font-variant-numeric: tabular-nums; |
|
334 |
+} |
| 272 |
335 |
.card-price small { font-family: var(--font-mono); font-weight: 500; color: var(--ink-3); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; } |
| 273 |
336 |
.card-price .no-menu { font-size: 14px; font-weight: 600; color: var(--ink-3); } |
| 274 |
337 |
.card-title { font-weight: 600; font-size: 14.5px; color: var(--ink); } |
| 275 |
338 |
.card-meta { color: var(--ink-3); font-size: 12.5px; display: flex; gap: 7px; flex-wrap: wrap; align-items: center; } |
| 276 |
|
−.card-meta .sep { width: 4px; height: 4px; background: var(--green); border-radius: 50%; display: inline-block; } |
|
339 |
+.card-meta .sep { width: 4px; height: 4px; background: var(--accent); border-radius: 50%; display: inline-block; } |
| 277 |
340 |
.card-foot { margin-top: auto; padding-top: 11px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 8px; } |
| 278 |
341 |
.source-tag { |
| 279 |
342 |
font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; |
| 280 |
|
− text-transform: uppercase; letter-spacing: 0.06em; color: var(--green); |
| 281 |
|
− background: var(--accent-soft); border: 1px solid rgba(28, 92, 65, 0.35); |
| 282 |
|
− border-radius: var(--r-ctl); padding: 3px 9px; |
|
343 |
+ text-transform: uppercase; letter-spacing: 0.07em; color: var(--accent-deep); |
|
344 |
+ background: none; border: none; border-radius: 0; padding: 0; |
| 283 |
345 |
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; |
| 284 |
346 |
} |
| 285 |
|
−.avail { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-2); font-weight: 500; text-align: right; } |
|
347 |
+.avail { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-2); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; } |
| 286 |
348 |
|
| 287 |
349 |
/* ================= Bascule Restos / Plats ================= */ |
| 288 |
350 |
.mode-toggle { |
| 289 |
351 |
display: inline-flex; align-self: center; border: 1.5px solid var(--ink); |
| 290 |
352 |
border-radius: var(--r-ctl); overflow: hidden; background: var(--surface); |
| 291 |
|
− box-shadow: 3px 3px 0 rgba(20, 24, 20, 0.12); flex: none; |
|
353 |
+ box-shadow: none; flex: none; |
| 292 |
354 |
} |
| 293 |
355 |
.mode-toggle button { |
| 294 |
356 |
border: 0; background: transparent; padding: 12px 20px; cursor: pointer; |
| 298 |
360 |
.mode-toggle button + button { border-left: 1.5px solid var(--ink); } |
| 299 |
361 |
.mode-toggle button.on { background: var(--ink); color: var(--accent); } |
| 300 |
362 |
|
| 301 |
|
−/* ================= Résultats par plat ================= */ |
|
363 |
+/* ================= Résultats par plat — lignes éditoriales ================= */ |
| 302 |
364 |
.dish-list { |
| 303 |
|
− display: flex; flex-direction: column; gap: 12px; padding-bottom: 10px; |
|
365 |
+ display: flex; flex-direction: column; gap: 0; |
|
366 |
+ border-top: 2px solid var(--ink); padding-bottom: 10px; |
| 304 |
367 |
} |
| 305 |
368 |
.dish-row { |
| 306 |
|
− display: flex; gap: 14px; align-items: flex-start; |
| 307 |
|
− background: var(--surface); border: 1.5px solid var(--ink); |
| 308 |
|
− border-radius: var(--r-card); padding: 14px 16px; |
| 309 |
|
− box-shadow: 4px 4px 0 rgba(20, 24, 20, 0.08); |
| 310 |
|
− transition: transform 0.15s ease, box-shadow 0.15s ease; |
|
369 |
+ display: flex; gap: 16px; align-items: flex-start; |
|
370 |
+ background: transparent; border: none; border-bottom: 1px solid var(--line); |
|
371 |
+ border-radius: 0; padding: 16px 2px; box-shadow: none; |
|
372 |
+ transition: background 0.15s ease; |
|
373 |
+} |
|
374 |
+.dish-row:hover { transform: none; box-shadow: none; background: var(--surface); } |
|
375 |
+.dish-row:hover .dish-name { |
|
376 |
+ text-decoration: underline; text-decoration-color: var(--accent); |
|
377 |
+ text-decoration-thickness: 2.5px; text-underline-offset: 4px; |
| 311 |
378 |
} |
| 312 |
|
−.dish-row:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-off); } |
| 313 |
379 |
.dish-img { |
| 314 |
380 |
width: 62px; height: 62px; flex: none; object-fit: cover; |
| 315 |
|
− border-radius: var(--r-ctl); border: 1.5px solid var(--ink); background: var(--surface-2); |
|
381 |
+ border-radius: var(--r-ctl); border: 1px solid var(--line-strong); background: var(--surface-2); |
| 316 |
382 |
} |
| 317 |
383 |
.dish-noimg { display: flex; align-items: center; justify-content: center; color: var(--ink-3); } |
| 318 |
384 |
.dish-main { flex: 1; min-width: 0; } |
| 319 |
385 |
.dish-line { display: flex; align-items: baseline; gap: 10px; } |
| 320 |
|
−.dish-name { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; color: var(--ink); } |
| 321 |
|
−.dish-price { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; color: var(--ink); white-space: nowrap; } |
|
386 |
+.dish-name { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink); } |
|
387 |
+.dish-price { |
|
388 |
+ font-family: var(--font-display); font-weight: 700; font-size: 17.5px; color: var(--ink); |
|
389 |
+ white-space: nowrap; font-variant-numeric: tabular-nums; |
|
390 |
+} |
| 322 |
391 |
.dish-desc { |
| 323 |
392 |
margin: 3px 0 0; color: var(--ink-3); font-size: 12.5px; max-width: 620px; |
| 324 |
393 |
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; |
| 328 |
397 |
margin-top: 7px; font-size: 12px; color: var(--ink-2); |
| 329 |
398 |
} |
| 330 |
399 |
.dish-meta b { color: var(--ink); } |
| 331 |
|
−.dish-meta .sep { width: 4px; height: 4px; background: var(--green); border-radius: 50%; display: inline-block; } |
|
400 |
+.dish-meta .sep { width: 4px; height: 4px; background: var(--accent); border-radius: 50%; display: inline-block; } |
| 332 |
401 |
.dish-meta .ctx-pill { |
| 333 |
402 |
border: 1px solid var(--ink); border-radius: 4px; padding: 2px 8px; |
| 334 |
403 |
font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; |
| 342 |
411 |
} |
| 343 |
412 |
.pg-btn { |
| 344 |
413 |
min-width: 40px; min-height: 40px; padding: 0 12px; |
| 345 |
|
− border: 1.5px solid var(--ink); border-radius: var(--r-ctl); |
| 346 |
|
− background: var(--surface); color: var(--ink); cursor: pointer; |
|
414 |
+ border: 1px solid var(--line-strong); border-radius: var(--r-ctl); |
|
415 |
+ background: transparent; color: var(--ink); cursor: pointer; |
| 347 |
416 |
font-family: var(--font-display); font-weight: 700; font-size: 13.5px; |
| 348 |
|
− box-shadow: 3px 3px 0 rgba(20, 24, 20, 0.1); |
|
417 |
+ box-shadow: none; font-variant-numeric: tabular-nums; |
| 349 |
418 |
transition: all 0.12s ease; |
| 350 |
419 |
} |
| 351 |
|
−.pg-btn:hover:not(:disabled) { background: var(--accent-soft); } |
| 352 |
|
−.pg-btn.on { background: var(--ink); color: var(--accent); } |
|
420 |
+.pg-btn:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--ink); } |
|
421 |
+.pg-btn.on { background: var(--ink); color: var(--accent); border-color: var(--ink); } |
| 353 |
422 |
.pg-btn:disabled { opacity: 0.35; cursor: default; box-shadow: none; } |
| 354 |
|
−.pg-btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; } |
|
423 |
+.pg-btn:active:not(:disabled) { transform: translate(1px, 1px); } |
| 355 |
424 |
.pg-ellipsis { color: var(--ink-3); font-family: var(--font-mono); padding: 0 4px; } |
| 356 |
425 |
|
| 357 |
426 |
/* ================= Skeletons ================= */ |
| 358 |
427 |
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } |
| 359 |
|
−.skel { border-radius: var(--r-card); border: 1.5px solid var(--line-strong); overflow: hidden; background: var(--surface); } |
|
428 |
+.skel { border-radius: var(--r-card); border: 1px solid var(--line-strong); overflow: hidden; background: var(--surface); } |
| 360 |
429 |
.skel .sk-img, .skel .sk-line { |
| 361 |
430 |
background: linear-gradient(90deg, #eceae4 25%, #f6f4ef 50%, #eceae4 75%); |
| 362 |
431 |
background-size: 800px 100%; animation: shimmer 1.4s infinite linear; |
| 367 |
436 |
|
| 368 |
437 |
/* ================= Empty / error ================= */ |
| 369 |
438 |
.notice { text-align: center; padding: 72px 24px; color: var(--ink-2); } |
| 370 |
|
−.notice .big { font-size: 44px; margin-bottom: 10px; color: var(--green); } |
|
439 |
+.notice .big { font-size: 44px; margin-bottom: 10px; color: var(--accent-deep); } |
| 371 |
440 |
.notice h2 { color: var(--ink); } |
| 372 |
441 |
|
| 373 |
442 |
/* ================= Fiche resto ================= */ |
| 378 |
447 |
color: var(--ink-3); margin-bottom: 20px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; |
| 379 |
448 |
} |
| 380 |
449 |
.crumbs a { border-bottom: 1.5px solid transparent; } |
| 381 |
|
−.crumbs a:hover { color: var(--green); border-color: var(--green); } |
|
450 |
+.crumbs a:hover { color: var(--accent-deep); border-color: var(--accent-deep); } |
| 382 |
451 |
/* Ordre DOM = ordre visuel (standard Groupe Ka « Ordre des sections — pages |
| 383 |
452 |
détail ») : le panneau héro (nom/prix/adresse) est 1er dans le DOM ; sur |
| 384 |
453 |
desktop il est placé en colonne 2 via grid-column — pas de `order` ni de |
| 385 |
454 |
`column-reverse` pour réordonner entre breakpoints. */ |
| 386 |
|
−.detail-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 30px; align-items: start; } |
|
455 |
+.detail-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 36px; align-items: start; } |
| 387 |
456 |
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } } |
| 388 |
457 |
.detail-grid > * { min-width: 0; } |
| 389 |
458 |
@media (min-width: 901px) { |
| 393 |
462 |
|
| 394 |
463 |
.panel { |
| 395 |
464 |
background: var(--surface); border: 1.5px solid var(--ink); border-radius: var(--r-card); |
| 396 |
|
− box-shadow: var(--shadow-off-soft); padding: 26px; position: sticky; top: 120px; |
|
465 |
+ box-shadow: none; padding: 26px; position: sticky; top: 110px; |
| 397 |
466 |
} |
| 398 |
467 |
@media (max-width: 900px) { .panel { position: static; } } |
| 399 |
468 |
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } |
| 400 |
469 |
.panel-logo { max-width: 110px; max-height: 54px; object-fit: contain; border-radius: var(--r-ctl); } |
| 401 |
470 |
.panel .price { |
| 402 |
|
− font-family: var(--font-display); font-size: 30px; font-weight: 700; |
|
471 |
+ font-family: var(--font-display); font-size: 32px; font-weight: 700; |
| 403 |
472 |
letter-spacing: -0.03em; color: var(--ink); |
| 404 |
473 |
background: var(--accent); border-radius: 8px; padding: 0 10px 2px; |
| 405 |
474 |
display: inline-block; transform: rotate(-1deg); |
| 406 |
475 |
} |
| 407 |
|
−.panel h1 { font-size: 23px; margin: 10px 0 2px; } |
|
476 |
+.panel h1 { font-size: clamp(23px, 2.4vw, 28px); margin: 12px 0 2px; letter-spacing: -0.03em; } |
| 408 |
477 |
.panel .loc { color: var(--ink-2); font-size: 14px; } |
| 409 |
|
−.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0; } |
|
478 |
+/* fiche d'identité : lignes à filets, plus de cellules boîtes */ |
|
479 |
+.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; margin: 20px 0; border-top: 1px solid var(--line); } |
| 410 |
480 |
@media (max-width: 380px) { .kv { grid-template-columns: 1fr; } } |
| 411 |
|
−.kv .cell { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 10px 14px; } |
|
481 |
+.kv .cell { background: none; border: none; border-bottom: 1px solid var(--line); border-radius: 0; padding: 10px 0; } |
| 412 |
482 |
.kv .cell .k { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); font-weight: 700; } |
| 413 |
483 |
.kv .cell .v { font-weight: 700; font-size: 14.5px; margin-top: 2px; font-family: var(--font-display); color: var(--ink); } |
| 414 |
484 |
.klabel { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); font-weight: 700; margin-bottom: 8px; } |
| 415 |
485 |
.amenity-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 20px; } |
| 416 |
486 |
.amenity { |
| 417 |
|
− background: var(--accent-soft); color: var(--green); font-size: 12px; font-weight: 600; |
| 418 |
|
− border: 1px solid rgba(28, 92, 65, 0.35); border-radius: var(--r-ctl); padding: 4px 11px; |
|
487 |
+ background: transparent; color: var(--ink-2); font-size: 11px; font-weight: 700; |
|
488 |
+ font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; |
|
489 |
+ border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px 11px; |
| 419 |
490 |
} |
| 420 |
491 |
.cta { |
| 421 |
492 |
display: block; text-align: center; background: var(--ink); color: var(--accent); |
| 427 |
498 |
.cta:active { transform: translate(2px, 2px); box-shadow: none; } |
| 428 |
499 |
.panel .fine { font-size: 11.5px; color: var(--ink-3); margin-top: 14px; text-align: center; } |
| 429 |
500 |
|
| 430 |
|
−/* --- menu (sections, items, options) --------------------------------------- */ |
|
501 |
+/* --- menu (sections, items, options) — sections à filets d'encre ----------- */ |
| 431 |
502 |
.view-toggle { |
| 432 |
503 |
display: inline-flex; border: 1.5px solid var(--ink); |
| 433 |
504 |
border-radius: var(--r-ctl); overflow: hidden; background: var(--surface); |
| 434 |
|
− box-shadow: 3px 3px 0 rgba(20, 24, 20, 0.12); |
|
505 |
+ box-shadow: none; |
| 435 |
506 |
} |
| 436 |
507 |
.view-toggle button { |
| 437 |
508 |
border: 0; background: transparent; padding: 8px 16px; cursor: pointer; |
| 441 |
512 |
.view-toggle button.on { background: var(--ink); color: var(--accent); } |
| 442 |
513 |
.ctx-toggle { margin-bottom: 14px; } |
| 443 |
514 |
|
| 444 |
|
−.menu-block { display: flex; flex-direction: column; gap: 16px; } |
|
515 |
+.menu-block { display: flex; flex-direction: column; gap: 0; } |
|
516 |
+/* bannière de contexte de prix — TOUJOURS lisible, filet coloré à gauche */ |
| 445 |
517 |
.ctx-banner { |
| 446 |
|
− border: 1.5px solid var(--ink); border-radius: var(--r-card); padding: 12px 18px; |
|
518 |
+ border: none; border-left: 5px solid var(--ink); border-radius: 0; |
|
519 |
+ padding: 12px 16px; margin-bottom: 18px; |
| 447 |
520 |
display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; |
| 448 |
|
− font-size: 12.5px; box-shadow: 4px 4px 0 rgba(20, 24, 20, 0.1); |
|
521 |
+ font-size: 12.5px; box-shadow: none; |
| 449 |
522 |
} |
| 450 |
523 |
.ctx-banner b { font-family: var(--font-display); font-size: 14px; } |
| 451 |
524 |
.ctx-banner span { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); } |
| 452 |
|
−.ctx-banner.ctx-takeout { background: var(--accent-soft); } |
| 453 |
|
−.ctx-banner.ctx-takeout b { color: var(--green); } |
| 454 |
|
−.ctx-banner.ctx-dine-in { background: var(--surface); } |
|
525 |
+.ctx-banner.ctx-takeout { background: var(--accent-soft); border-left-color: var(--accent); } |
|
526 |
+.ctx-banner.ctx-takeout b { color: var(--accent-deep); } |
|
527 |
+.ctx-banner.ctx-dine-in { background: var(--surface); border-left-color: var(--green); } |
| 455 |
528 |
.ctx-banner.ctx-dine-in b { color: var(--green-deep); } |
| 456 |
|
−.ctx-banner.ctx-delivery { background: var(--amber-soft); } |
|
529 |
+.ctx-banner.ctx-delivery { background: var(--amber-soft); border-left-color: var(--amber); } |
| 457 |
530 |
.ctx-banner.ctx-delivery b { color: #9a6414; } |
| 458 |
531 |
|
| 459 |
532 |
.menu-section { |
| 460 |
|
− background: var(--surface); border: 1.5px solid var(--ink); |
| 461 |
|
− border-radius: var(--r-card); box-shadow: var(--shadow-off-soft); overflow: hidden; |
|
533 |
+ background: transparent; border: none; border-top: 2px solid var(--ink); |
|
534 |
+ border-radius: 0; box-shadow: none; overflow: visible; |
| 462 |
535 |
} |
| 463 |
536 |
.menu-section-head { |
| 464 |
537 |
width: 100%; display: flex; align-items: center; gap: 12px; |
| 465 |
538 |
border: none; background: none; cursor: pointer; |
| 466 |
|
− padding: 14px 18px; text-align: left; |
|
539 |
+ padding: 15px 2px; text-align: left; |
| 467 |
540 |
} |
| 468 |
|
−.menu-section-head h3 { font-size: 17px; color: var(--ink); letter-spacing: -0.02em; flex: 1; } |
|
541 |
+.menu-section-head h3 { font-size: 19px; color: var(--ink); letter-spacing: -0.025em; flex: 1; } |
| 469 |
542 |
.menu-section-head:hover { background: var(--accent-soft); } |
| 470 |
543 |
.ms-img { |
| 471 |
544 |
width: 36px; height: 36px; object-fit: cover; border-radius: var(--r-ctl); |
| 472 |
|
− border: 1.5px solid var(--ink); flex: none; |
|
545 |
+ border: 1px solid var(--line-strong); flex: none; |
| 473 |
546 |
} |
| 474 |
|
−.ms-meta { font-family: var(--font-mono); color: var(--ink-3); font-size: 11.5px; font-weight: 600; white-space: nowrap; } |
| 475 |
|
−.menu-items { list-style: none; margin: 0; padding: 0 18px 14px; } |
|
547 |
+.ms-meta { font-family: var(--font-mono); color: var(--ink-3); font-size: 11.5px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; } |
|
548 |
+.menu-items { list-style: none; margin: 0; padding: 0 2px 18px; } |
| 476 |
549 |
.menu-item { padding: 12px 0; border-top: 1px solid var(--line); } |
| 477 |
550 |
.mi-row { display: flex; gap: 14px; align-items: flex-start; } |
| 478 |
551 |
.mi-main { flex: 1; min-width: 0; } |
| 479 |
552 |
.mi-line { display: flex; align-items: baseline; gap: 10px; } |
| 480 |
553 |
.mi-name { font-weight: 600; font-size: 14.5px; color: var(--ink); } |
| 481 |
554 |
.mi-dots { flex: 1; border-bottom: 2px dotted var(--line-strong); opacity: 0.35; transform: translateY(-3px); min-width: 20px; } |
| 482 |
|
−.mi-price { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; color: var(--ink); white-space: nowrap; } |
|
555 |
+.mi-price { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; } |
| 483 |
556 |
.mi-desc { margin: 3px 0 0; color: var(--ink-3); font-size: 12.5px; max-width: 560px; } |
| 484 |
557 |
.mi-thumb { |
| 485 |
558 |
width: 68px; height: 68px; flex: none; object-fit: cover; |
| 486 |
|
− border-radius: var(--r-ctl); border: 1.5px solid var(--ink); background: var(--surface-2); |
| 487 |
|
− box-shadow: 3px 3px 0 rgba(20, 24, 20, 0.12); |
|
559 |
+ border-radius: var(--r-ctl); border: 1px solid var(--line-strong); background: var(--surface-2); |
|
560 |
+ box-shadow: none; |
| 488 |
561 |
} |
| 489 |
562 |
.mi-tag { |
| 490 |
563 |
font-style: normal; font-family: var(--font-mono); font-size: 9px; font-weight: 700; |
| 496 |
569 |
.mi-tag-epice { background: var(--amber-soft); color: #9a6414; border-color: rgba(232, 163, 61, 0.5); } |
| 497 |
570 |
.mi-tag-rupture { background: var(--surface-2); color: var(--ink-3); border-color: var(--line); } |
| 498 |
571 |
|
| 499 |
|
−/* groupes d'options : blocs structurés, choix en pastilles avec ± prix */ |
|
572 |
+/* groupes d'options : bloc en retrait à filet, choix en pastilles avec ± prix */ |
| 500 |
573 |
.mi-optgroups { |
| 501 |
574 |
margin-top: 10px; display: flex; flex-direction: column; gap: 8px; |
| 502 |
|
− background: var(--surface-2); border: 1px solid var(--line); |
| 503 |
|
− border-radius: var(--r-ctl); padding: 10px 12px; |
|
575 |
+ background: transparent; border: none; border-left: 2px solid var(--line-strong); |
|
576 |
+ border-radius: 0; padding: 8px 0 8px 14px; |
| 504 |
577 |
} |
| 505 |
578 |
.og-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; } |
| 506 |
579 |
.og-name { |
| 524 |
597 |
.og-choice b.plus { color: #9a6414; } |
| 525 |
598 |
.og-choice b.moins { color: var(--green); } |
| 526 |
599 |
|
| 527 |
|
−/* ================= Sources page ================= */ |
|
600 |
+/* ================= Sources page — table à filets ================= */ |
| 528 |
601 |
.sources { padding: 44px 0 90px; } |
| 529 |
|
−.sources h1 { font-size: clamp(28px, 4vw, 42px); margin: 12px 0 6px; color: var(--ink); } |
|
602 |
+.sources h1 { font-size: clamp(32px, 4.6vw, 52px); margin: 12px 0 6px; color: var(--ink); letter-spacing: -0.04em; } |
| 530 |
603 |
.sources .sub { color: var(--ink-2); margin-bottom: 30px; max-width: 700px; } |
| 531 |
|
−.src-wrap { overflow-x: auto; border: 1.5px solid var(--ink); border-radius: var(--r-card); box-shadow: var(--shadow-off-soft); background: var(--surface); } |
|
604 |
+.src-wrap { overflow-x: auto; border: none; border-top: 2px solid var(--ink); border-radius: 0; box-shadow: none; background: transparent; } |
| 532 |
605 |
.src-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 720px; } |
| 533 |
606 |
.src-table th { |
| 534 |
607 |
text-align: left; font-family: var(--font-mono); font-size: 10px; |
| 535 |
608 |
text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-2); |
| 536 |
|
− padding: 13px 18px; border-bottom: 1.5px solid var(--ink); background: var(--surface-2); |
|
609 |
+ padding: 13px 18px 13px 2px; border-bottom: 1.5px solid var(--ink); background: transparent; |
| 537 |
610 |
} |
| 538 |
|
−.src-table td { padding: 13px 18px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: top; } |
|
611 |
+.src-table td { padding: 14px 18px 14px 2px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: top; } |
| 539 |
612 |
.src-table tr:last-child td { border-bottom: none; } |
| 540 |
613 |
.src-table tr:hover td { background: var(--accent-soft); } |
| 541 |
|
−.src-table a { color: var(--green); font-weight: 600; border-bottom: 1.5px solid rgba(28, 92, 65, 0.4); } |
|
614 |
+.src-table a { color: var(--ink); font-weight: 700; border-bottom: 2px solid var(--accent); } |
|
615 |
+.src-table a:hover { color: var(--accent-deep); } |
| 542 |
616 |
.src-integrations { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; max-width: 380px; } |
| 543 |
617 |
.src-table .pill, .pill.ok, .pill.todo { |
| 544 |
618 |
display: inline-block; border-radius: 4px; padding: 3px 9px; |
| 548 |
622 |
} |
| 549 |
623 |
.pill.ok { background: var(--accent); color: var(--ink); } |
| 550 |
624 |
.pill.todo { background: var(--amber-soft); color: #9a6414; border-color: rgba(232, 163, 61, 0.6); } |
| 551 |
|
−.count-pill { font-weight: 700; font-family: var(--font-display); font-size: 16px; color: var(--ink); } |
|
625 |
+.count-pill { font-weight: 700; font-family: var(--font-display); font-size: 16px; color: var(--ink); font-variant-numeric: tabular-nums; } |
| 552 |
626 |
|
| 553 |
627 |
/* ================= Page Statistiques ================= */ |
| 554 |
628 |
.stats-page { padding: 44px 0 90px; } |
| 555 |
|
−.stats-title { font-size: clamp(30px, 4.6vw, 48px); margin: 12px 0 6px; color: var(--ink); } |
|
629 |
+.stats-title { font-size: clamp(32px, 4.8vw, 54px); margin: 12px 0 6px; color: var(--ink); letter-spacing: -0.04em; } |
| 556 |
630 |
.stats-page .sub { color: var(--ink-2); max-width: 640px; margin-bottom: 30px; } |
| 557 |
|
−.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 30px; } |
|
631 |
+.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px 28px; margin-bottom: 30px; } |
| 558 |
632 |
.tile { |
| 559 |
|
− background: var(--surface); border: 1.5px solid var(--ink); border-radius: var(--r-card); |
| 560 |
|
− padding: 18px 20px; box-shadow: 4px 4px 0 rgba(20, 24, 20, 0.1); |
|
633 |
+ background: transparent; border: none; border-top: 2px solid var(--ink); border-radius: 0; |
|
634 |
+ padding: 14px 0 4px; box-shadow: none; |
| 561 |
635 |
} |
| 562 |
|
−.tile-v { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.03em; line-height: 1.05; color: var(--ink); } |
|
636 |
+.tile-v { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -0.04em; line-height: 1.02; color: var(--ink); font-variant-numeric: tabular-nums; } |
| 563 |
637 |
.tile-k { font-family: var(--font-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); margin-top: 6px; } |
| 564 |
|
−.hero-tile { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: 6px 6px 0 rgba(20, 24, 20, 0.25); } |
|
638 |
+.hero-tile { background: var(--ink); color: var(--paper); border: none; border-radius: 10px; padding: 16px 18px 12px; box-shadow: none; } |
| 565 |
639 |
.hero-tile .tile-v { color: var(--accent); } |
| 566 |
640 |
.hero-tile .tile-k { color: rgba(245, 243, 238, 0.6); } |
| 567 |
641 |
|
| 568 |
642 |
.viz-card { |
| 569 |
|
− background: var(--surface); border: 1.5px solid var(--ink); border-radius: var(--r-card); |
| 570 |
|
− box-shadow: var(--shadow-off-soft); padding: 26px 28px 20px; margin-bottom: 22px; |
|
643 |
+ background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-card); |
|
644 |
+ box-shadow: none; padding: 26px 28px 20px; margin-bottom: 22px; |
| 571 |
645 |
} |
| 572 |
646 |
.viz-card h2 { font-size: 20px; letter-spacing: -0.02em; color: var(--ink); } |
| 573 |
647 |
.viz-sub { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin: 4px 0 20px; } |
| 588 |
662 |
min-width: 2px; transition: background 0.12s ease; |
| 589 |
663 |
} |
| 590 |
664 |
.hbar-row:hover .hbar-fill { background: var(--accent); } |
| 591 |
|
−.hbar-value { font-family: var(--font-mono); font-size: 11px; font-weight: 700; white-space: nowrap; color: var(--ink); } |
|
665 |
+.hbar-value { font-family: var(--font-mono); font-size: 11px; font-weight: 700; white-space: nowrap; color: var(--ink); font-variant-numeric: tabular-nums; } |
| 592 |
666 |
@media (max-width: 640px) { |
| 593 |
667 |
.hbar-row { grid-template-columns: minmax(80px, 120px) 1fr auto; gap: 8px; } |
| 594 |
668 |
.viz-card { padding: 20px 16px 14px; } |
| 604 |
678 |
@media (max-width: 640px) { |
| 605 |
679 |
:root { --header-h: 56px; } |
| 606 |
680 |
.brand { font-size: 20px; } |
| 607 |
|
− .nav a { padding: 8px 13px; font-size: 13.5px; } |
| 608 |
681 |
.ticker { font-size: 10px; padding: 6px 0; } |
| 609 |
|
− .hero h1 { font-size: clamp(30px, 8.6vw, 42px); } |
|
682 |
+ .hero h1 { font-size: clamp(34px, 10.4vw, 52px); } |
| 610 |
683 |
.hero p.lede { font-size: 15px; } |
| 611 |
|
− .stat-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; margin-right: -16px; padding-right: 16px; } |
| 612 |
|
− .stat-row::-webkit-scrollbar { display: none; } |
| 613 |
|
− .stat-chip { flex: 0 0 auto; white-space: nowrap; } |
| 614 |
684 |
|
| 615 |
685 |
/* la barre de filtres devient une feuille coulissante (bottom sheet) */ |
| 616 |
686 |
.filterbar { display: none; } |
| 622 |
692 |
display: flex; flex-direction: column; gap: 12px; |
| 623 |
693 |
position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-modal, 900); |
| 624 |
694 |
margin: 0; border-radius: 16px 16px 0 0; border: none; border-top: 2px solid var(--ink); |
|
695 |
+ background: var(--surface); |
| 625 |
696 |
max-height: 82dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; |
| 626 |
697 |
padding: 16px 18px calc(18px + env(safe-area-inset-bottom)); |
| 627 |
698 |
box-shadow: 0 -16px 48px rgba(20, 24, 20, 0.28); |
| 658 |
729 |
.detail { padding-top: 20px; } |
| 659 |
730 |
.panel { padding: 20px; } |
| 660 |
731 |
.panel .price { font-size: 26px; } |
| 661 |
|
− .results-head { margin-top: 20px; } |
|
732 |
+ .results-head { margin-top: 28px; } |
| 662 |
733 |
.chips { margin-right: -16px; padding-right: 16px; } |
| 663 |
734 |
.notice { padding: 48px 16px; } |
| 664 |
|
− .menu-items { padding: 0 14px 12px; } |
| 665 |
|
− .menu-section-head { padding: 13px 14px; } |
|
735 |
+ .menu-items { padding: 0 2px 14px; } |
|
736 |
+ .menu-section-head { padding: 13px 2px; } |
| 666 |
737 |
.mi-thumb { width: 56px; height: 56px; } |
| 667 |
738 |
} |
| 668 |
739 |
|
| 684 |
755 |
font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--ink-3); |
| 685 |
756 |
border-radius: var(--r-ctl); transition: color 0.12s ease; |
| 686 |
757 |
} |
| 687 |
|
− .tabbar a.active { color: var(--green); } |
|
758 |
+ .tabbar a.active { color: var(--accent-deep); } |
| 688 |
759 |
.tabbar a svg { display: block; } |
| 689 |
760 |
body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); } |
| 690 |
761 |
.ka-footer { padding-bottom: calc(72px + env(safe-area-inset-bottom)); } |
| 719 |
790 |
margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; |
| 720 |
791 |
letter-spacing: 0.03em; color: var(--ink-3); |
| 721 |
792 |
} |
| 722 |
|
−.prefoot-osm a { color: var(--green); border-bottom: 1px solid rgba(28, 92, 65, 0.4); } |
|
793 |
+.prefoot-osm a { color: var(--accent-deep); border-bottom: 1px solid rgba(185, 106, 0, 0.4); } |
| 723 |
794 |
@media (max-width: 640px) { .prefoot-osm { margin-left: 0; } } |
| 724 |
795 |
|
| 725 |
796 |
/* --- Compte membre (« Se connecter avec KA ») ------------------------------- */ |
| 729 |
800 |
background: var(--surface); color: var(--ink); |
| 730 |
801 |
padding: 8px 14px; font-family: var(--font-display); |
| 731 |
802 |
font-weight: 700; font-size: 13.5px; min-height: 38px; |
| 732 |
|
− box-shadow: 3px 3px 0 rgba(20, 24, 20, 0.12); |
| 733 |
|
− transition: background 0.13s ease, transform 0.1s ease, box-shadow 0.1s ease; |
|
803 |
+ box-shadow: none; |
|
804 |
+ transition: background 0.13s ease, transform 0.1s ease; |
| 734 |
805 |
} |
| 735 |
806 |
.login-btn:hover { background: var(--accent-soft); } |
| 736 |
|
−.login-btn:active { transform: translate(2px, 2px); box-shadow: none; } |
|
807 |
+.login-btn:active { transform: translate(1px, 1px); } |
| 737 |
808 |
.ka-badge { |
| 738 |
809 |
display: inline-flex; align-items: center; justify-content: center; |
| 739 |
810 |
background: var(--accent); color: var(--ink); border: 1px solid var(--ink); |
| 746 |
817 |
width: 40px; height: 40px; border-radius: 50%; overflow: hidden; |
| 747 |
818 |
border: 1.5px solid var(--ink); background: var(--accent); |
| 748 |
819 |
cursor: pointer; padding: 0; |
| 749 |
|
− box-shadow: 3px 3px 0 rgba(20, 24, 20, 0.15); |
|
820 |
+ box-shadow: none; |
| 750 |
821 |
} |
| 751 |
822 |
.account-btn img { width: 100%; height: 100%; object-fit: cover; } |
| 752 |
823 |
.account-initial { |
| 786 |
857 |
.fav-btn { |
| 787 |
858 |
position: absolute; bottom: 10px; right: 10px; |
| 788 |
859 |
width: 34px; height: 34px; border-radius: 50%; |
| 789 |
|
− border: 1.5px solid var(--ink); background: rgba(255, 255, 255, 0.95); |
|
860 |
+ border: 1px solid var(--ink); background: rgba(255, 255, 255, 0.95); |
| 790 |
861 |
color: var(--ink-2); font-size: 16px; line-height: 1; cursor: pointer; |
| 791 |
|
− box-shadow: 2px 2px 0 rgba(20, 24, 20, 0.2); |
|
862 |
+ box-shadow: none; |
| 792 |
863 |
transition: transform 0.12s ease, background 0.12s ease; |
| 793 |
864 |
} |
| 794 |
865 |
.fav-btn:hover { transform: scale(1.08); } |
| 806 |
877 |
border: 1.5px solid var(--ink); border-radius: var(--r-ctl); |
| 807 |
878 |
background: var(--surface); cursor: pointer; padding: 0; |
| 808 |
879 |
flex-direction: column; align-items: center; justify-content: center; gap: 5px; |
| 809 |
|
− box-shadow: 3px 3px 0 rgba(20, 24, 20, 0.15); |
| 810 |
|
− transition: box-shadow 0.15s ease, transform 0.15s ease; |
|
880 |
+ box-shadow: none; |
|
881 |
+ transition: transform 0.15s ease; |
| 811 |
882 |
} |
| 812 |
|
−.menu-btn:active { transform: translate(2px, 2px); box-shadow: none; } |
|
883 |
+.menu-btn:active { transform: translate(1px, 1px); } |
| 813 |
884 |
.menu-btn span { |
| 814 |
885 |
display: block; width: 18px; height: 2px; background: var(--ink); |
| 815 |
886 |
border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease; |
| 853 |
924 |
transition: opacity 0.25s ease, transform 0.25s ease; |
| 854 |
925 |
} |
| 855 |
926 |
.mobile-menu.open .mm-link { opacity: 1; transform: translateY(0); } |
| 856 |
|
−.mm-link.active { color: var(--green); } |
| 857 |
|
−.mm-link.active .mm-arrow { opacity: 1; color: var(--green); } |
|
927 |
+.mm-link.active { color: var(--accent-deep); } |
|
928 |
+.mm-link.active .mm-arrow { opacity: 1; color: var(--accent-deep); } |
| 858 |
929 |
.mm-ico { width: 26px; text-align: center; font-size: 17px; } |
| 859 |
|
−.mm-arrow { margin-left: auto; opacity: 0.25; color: var(--green); transition: opacity 0.15s ease; } |
|
930 |
+.mm-arrow { margin-left: auto; opacity: 0.25; color: var(--accent-deep); transition: opacity 0.15s ease; } |
| 860 |
931 |
.mm-link:active { background: var(--accent-soft); border-radius: var(--r-ctl); } |
| 861 |
932 |
.mm-foot { |
| 862 |
933 |
padding: 12px 10px 4px; |
| 878 |
949 |
|
| 879 |
950 |
/* ================= Page Contact ================= */ |
| 880 |
951 |
.contact-page { padding: 44px 0 90px; } |
| 881 |
|
−.contact-page h1 { font-size: clamp(30px, 4.6vw, 48px); margin: 12px 0 6px; color: var(--ink); } |
|
952 |
+.contact-page h1 { font-size: clamp(32px, 4.8vw, 54px); margin: 12px 0 6px; color: var(--ink); letter-spacing: -0.04em; } |
| 882 |
953 |
.contact-page .sub { color: var(--ink-2); max-width: 640px; margin: 0 0 30px; } |
| 883 |
|
−.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-bottom: 26px; } |
|
954 |
+.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 34px; margin-bottom: 26px; } |
| 884 |
955 |
.contact-card { |
| 885 |
|
− background: var(--surface); border: 1.5px solid var(--ink); border-radius: var(--r-card); |
| 886 |
|
− box-shadow: var(--shadow-off-soft); padding: 20px; |
|
956 |
+ background: transparent; border: none; border-top: 2px solid var(--ink); border-radius: 0; |
|
957 |
+ box-shadow: none; padding: 16px 0 20px; |
| 887 |
958 |
display: flex; flex-direction: column; gap: 6px; |
| 888 |
959 |
} |
| 889 |
960 |
.contact-card .role { |
| 897 |
968 |
} |
| 898 |
969 |
.contact-card a.mail:hover { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 4px; } |
| 899 |
970 |
.contact-note { |
| 900 |
|
− border: 1.5px solid var(--ink); border-left: 6px solid var(--accent); |
| 901 |
|
− border-radius: var(--r-card); background: var(--accent-soft); |
|
971 |
+ border: none; border-left: 5px solid var(--accent); |
|
972 |
+ border-radius: 0; background: var(--accent-soft); |
| 902 |
973 |
padding: 16px 18px; max-width: 760px; margin-bottom: 26px; font-size: 14px; |
| 903 |
|
− box-shadow: 4px 4px 0 rgba(20, 24, 20, 0.1); |
|
974 |
+ box-shadow: none; |
| 904 |
975 |
} |
| 905 |
976 |
.contact-hub { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 38px; } |
| 906 |
977 |
.contact-hub .hint { font-size: 12.5px; color: var(--ink-2); max-width: 460px; } |
| 907 |
978 |
.contact-sites { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } |
| 908 |
979 |
.contact-sites a { |
| 909 |
980 |
display: inline-flex; align-items: center; gap: 7px; min-height: var(--touch); |
| 910 |
|
− border: 1.5px solid var(--ink); border-radius: var(--r-ctl); background: var(--surface); |
|
981 |
+ border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; |
| 911 |
982 |
padding: 8px 14px; font-family: var(--font-display); font-weight: 700; font-size: 13.5px; |
| 912 |
|
− color: var(--ink); box-shadow: 3px 3px 0 rgba(20, 24, 20, 0.1); |
|
983 |
+ color: var(--ink); box-shadow: none; |
| 913 |
984 |
transition: all 0.13s ease; |
| 914 |
985 |
} |
| 915 |
|
−.contact-sites a:hover { background: var(--accent); color: var(--on-accent); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 rgba(20, 24, 20, 0.2); } |
|
986 |
+.contact-sites a:hover { background: var(--accent); color: var(--on-accent); border-color: var(--ink); } |
| 916 |
987 |
.contact-sites .dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(20, 24, 20, 0.35); flex: none; } |
| 917 |
988 |
|
| 918 |
989 |
/* ================= Stats — tableau de bord Groupe KA (SPEC ka-ui/stats) ==== */ |
| 919 |
990 |
|