SPB Git
spboucher.ai

spb/resto-ka

Public

Resto·Ka — tous les restaurants du Québec, menus complets et prix réels (famille ·Ka)

Front-end v2 « éditorial premium » : bande signes vitaux pleine largeur (chiffres géants tabulaires sur fond encre), nav soulignée, héros typographique agrandi, cartes/plats/menus/filtres allégés (filets d'encre au lieu de boîtes/ombres), ombre safran signature au survol des cartes — aucune logique changée

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Simon-Pierre Boucher committed (Aug 25, 2026) parent 6828867 Browse files

2 changed files +270 −193

2 changed files
Unified Split
modified frontend/src/pages/Home.tsx +13 −7
@@ -278,14 +278,20 @@ export default function Home() {
278 et leurs prix réels — cherchez un resto <em>ou un plat</em>, comparez, 278 et leurs prix réels — cherchez un resto <em>ou un plat</em>, comparez,
279 le contexte du prix (salle, emporter, livraison) est toujours affiché. 279 le contexte du prix (salle, emporter, livraison) est toujours affiché.
280 </p> 280 </p>
281− <div className="stat-row"> 281+ {statChips.length > 0 && (
282− <div className="stat-chip"><span className="pulse" />En direct</div> 282+ <div className="vitals bleed band-ink" aria-label="Signes vitaux">
283− {statChips.map((s) => ( 283+ <div className="vitals-in">
284− <div className="stat-chip" key={s.label}> 284+ <div className="vitals-live"><span className="pulse" />En direct — signes vitaux</div>
285− <b>{s.value.toLocaleString("fr-CA")}</b> {s.label} 285+ {statChips.map((s, i) => (
286+ <div className="vital" key={s.label}>
287+ <span className="vital-i">{String(i + 1).padStart(2, "0")}</span>
288+ <b className="vital-v">{s.value.toLocaleString("fr-CA")}</b>
289+ <span className="vital-k">{s.label}</span>
290+ </div>
291+ ))}
286 </div> 292 </div>
287− ))} 293+ </div>
288− </div> 294+ )}
289 <div className="benefits"> 295 <div className="benefits">
290 <div className="benefit"> 296 <div className="benefit">
291 <span className="benefit-ico"><IcoTag size={19} /></span> 297 <span className="benefit-ico"><IcoTag size={19} /></span>
modified frontend/src/styles.css +257 −186
@@ -1,10 +1,14 @@
1 /* ----------------------------------------------------------------------------- 1 /* -----------------------------------------------------------------------------
2 Author: Simon-Pierre Boucher <contact@spboucher.ai> 2 Author: Simon-Pierre Boucher <contact@spboucher.ai>
3 File: styles.css 3 File: styles.css
4− Desc: Identité visuelle Resto·Ka — système de design « éditorial sharp » 4+ Desc: Identité visuelle Resto·Ka v2 — « éditorial premium » du GROUPE KA.
5− du GROUPE KA. Le socle (palette fixe, typo, grain, boutons, cartes…) 5+ Le socle (palette fixe, typo, grain, boutons, cartes…) vient de ka-ui
6− vient de ka-ui (src/ka/tokens.css, importé AVANT ce fichier) ; ici on 6+ (src/ka/tokens.css, importé AVANT ce fichier) ; ici on définit
7− ne définit que l'ACCENT SAFRAN de Resto-Ka + les classes métier. 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 · Accent Resto-Ka : safran #f08c00 (soft #fdeed7 · deep #b96a00) 12 · Accent Resto-Ka : safran #f08c00 (soft #fdeed7 · deep #b96a00)
9 · Baseline : « Chaque resto, chaque plat, chaque prix. » 13 · Baseline : « Chaque resto, chaque plat, chaque prix. »
10 · 100 % adaptatif mobile (safe-areas iOS) 14 · 100 % adaptatif mobile (safe-areas iOS)
@@ -29,6 +33,15 @@ img { display: block; }
29 .container { max-width: 1240px; margin: 0 auto; padding: 0 24px; } 33 .container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
30 @media (max-width: 640px) { .container { padding: 0 16px; } } 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 /* ================= Header ================= */ 45 /* ================= Header ================= */
33 .header { 46 .header {
34 position: sticky; top: 0; z-index: var(--z-header, 500); 47 position: sticky; top: 0; z-index: var(--z-header, 500);
@@ -43,27 +56,37 @@ img { display: block; }
43 color: var(--ink); 56 color: var(--ink);
44 } 57 }
45 .brand .logo-ico { margin-right: 11px; flex: none; } 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 .brand .ka { 60 .brand .ka {
48 background: var(--accent); color: var(--ink); 61 background: var(--accent); color: var(--ink);
49 padding: 1px 6px 3px; border-radius: 5px; margin-left: 3px; 62 padding: 1px 6px 3px; border-radius: 5px; margin-left: 3px;
50 display: inline-block; transform: rotate(-2deg); 63 display: inline-block; transform: rotate(-2deg);
64+ transition: transform 0.15s ease;
51 } 65 }
66+.brand:hover .ka { transform: rotate(0); }
52 .brand-tag { 67 .brand-tag {
53 font-family: var(--font-mono); font-size: 10px; font-weight: 500; 68 font-family: var(--font-mono); font-size: 10px; font-weight: 500;
54 text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); 69 text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3);
55 margin-left: 14px; 70 margin-left: 14px;
56 } 71 }
57 @media (max-width: 900px) { .brand-tag { display: none; } } 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 .nav a { 75 .nav a {
60− padding: 8px 16px; border: 1.5px solid transparent; border-radius: var(--r-ctl); 76+ position: relative; padding: 8px 2px; min-height: 38px;
61− font-family: var(--font-display); font-weight: 700; font-size: 14px;
62− color: var(--ink); transition: all 0.13s ease; min-height: 38px;
63 display: inline-flex; align-items: center; 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); } 86+.nav a:hover { color: var(--ink); }
66−.nav a.active { background: var(--ink); color: var(--accent); border-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 /* ================= Ticker ================= */ 91 /* ================= Ticker ================= */
69 .ticker { 92 .ticker {
@@ -82,81 +105,108 @@ img { display: block; }
82 } 105 }
83 106
84 /* ================= Hero ================= */ 107 /* ================= Hero ================= */
85−.hero { padding: 58px 0 22px; } 108+.hero { padding: 64px 0 0; }
86−@media (max-width: 640px) { .hero { padding: 34px 0 14px; } } 109+@media (max-width: 640px) { .hero { padding: 38px 0 0; } }
87 .hero h1 { 110 .hero h1 {
88− font-size: clamp(36px, 5.4vw, 58px); font-weight: 700; line-height: 1.04; 111+ font-size: clamp(40px, 7.4vw, 92px); font-weight: 700; line-height: 0.99;
89− letter-spacing: -0.04em; max-width: 920px; margin-top: 16px; color: var(--ink); 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; } 114+.hero p.lede { color: var(--ink-2); font-size: 17.5px; max-width: 660px; margin: 22px 0 0; line-height: 1.6; }
92−.stat-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; } 115+
93−.stat-chip { 116+/* --- signes vitaux : bande encre pleine largeur, chiffres géants ------------ */
94− background: var(--surface); border: 1.5px solid var(--ink); border-radius: var(--r-ctl); 117+.vitals { margin-top: 40px; padding: 30px 0 36px; }
95− padding: 7px 14px; font-size: 12.5px; font-weight: 500; 118+.vitals-in {
96− color: var(--ink-2); display: flex; gap: 8px; align-items: center; 119+ max-width: 1240px; margin: 0 auto; padding: 0 24px;
97− box-shadow: 3px 3px 0 rgba(20, 24, 20, 0.12); 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); } 128+.vital { border-top: 1px solid rgba(245, 243, 238, 0.22); padding-top: 14px; min-width: 0; }
100−.stat-chip .pulse { 129+.vital-i {
101− width: 8px; height: 8px; border-radius: 50%; background: var(--green); 130+ display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 700;
102− box-shadow: 0 0 0 4px var(--accent-soft); animation: pulse 2.4s ease infinite; 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 .benefits { 155 .benefits {
108− display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); 156+ display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
109− gap: 14px; margin-top: 30px; 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 .benefit-ico { 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 flex: none; display: flex; align-items: center; justify-content: center; 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 .benefit-label { 169 .benefit-label {
119 font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; 170 font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
120 text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); 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 .filterbar { 176 .filterbar {
126− background: var(--surface); border: 1.5px solid var(--ink); border-radius: var(--r-card); 177+ background: transparent; border: none; border-radius: 0; box-shadow: none;
127− box-shadow: var(--shadow-off-soft); padding: 14px; margin: 20px 0 6px; 178+ border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line);
179+ padding: 18px 0 20px; margin: 26px 0 6px;
128 display: flex; flex-direction: column; gap: 0; min-width: 0; 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 .f-search { 183 .f-search {
132− flex: 1 1 220px; min-width: 0; max-width: 440px; align-self: center; 184+ flex: 1 1 240px; min-width: 0; max-width: 480px; align-self: center;
133− display: flex; align-items: center; gap: 8px; 185+ display: flex; align-items: center; gap: 9px;
134− border: 1.5px solid var(--ink); border-radius: var(--r-ctl); background: var(--surface-2); 186+ border: none; border-bottom: 1.5px solid var(--ink); border-radius: 0;
135− padding: 0 13px; min-height: 46px; color: var(--ink-2); 187+ background: transparent; padding: 0 2px; min-height: 46px; color: var(--ink-2);
136− box-shadow: 3px 3px 0 rgba(20, 24, 20, 0.08); 188+ box-shadow: none; transition: border-color 0.15s ease, box-shadow 0.15s ease;
137− transition: box-shadow 0.15s ease, background 0.15s ease;
138 } 189 }
139 .f-search:focus-within { 190 .f-search:focus-within {
140− background: var(--white, #fff); outline: 2px solid var(--green); outline-offset: 1px; 191+ outline: none; border-color: var(--accent-deep);
141− box-shadow: 3px 3px 0 rgba(28, 92, 65, 0.25); 192+ box-shadow: 0 1.5px 0 var(--accent-deep); background: transparent;
142 } 193 }
143 .f-search input { 194 .f-search input {
144 border: none; background: none; outline: none; flex: 1; min-width: 0; 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 .f-clear { 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 border-radius: 50%; width: 20px; height: 20px; font-size: 10px; cursor: pointer; 200 border-radius: 50%; width: 20px; height: 20px; font-size: 10px; cursor: pointer;
150 flex: none; display: grid; place-items: center; 201 flex: none; display: grid; place-items: center;
151 } 202 }
152 .f-ctl { 203 .f-ctl {
153 flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; 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); 205+ gap: 3px; border: none; border-bottom: 1px solid var(--line-strong); border-radius: 0;
155− padding: 7px 14px 6px; min-height: 52px; cursor: pointer; 206+ background: transparent; padding: 4px 2px 7px; min-height: 52px; cursor: pointer;
156− box-shadow: 3px 3px 0 rgba(20, 24, 20, 0.08); 207+ box-shadow: none; transition: border-color 0.15s ease, box-shadow 0.15s ease;
157− transition: 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 .f-ctl > span { 210 .f-ctl > span {
161 font-family: var(--font-mono); font-size: 9px; font-weight: 700; 211 font-family: var(--font-mono); font-size: 9px; font-weight: 700;
162 text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); 212 text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3);
@@ -171,17 +221,17 @@ img { display: block; }
171 } 221 }
172 222
173 /* pastilles de filtres actifs */ 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 .pill { 225 .pill {
176 display: inline-flex; align-items: center; gap: 7px; 226 display: inline-flex; align-items: center; gap: 7px;
177− border: 1.5px solid var(--ink); background: var(--accent); color: var(--ink); 227+ border: 1px 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; 228+ border-radius: 999px; padding: 5px 13px; font-size: 12.5px; font-weight: 700;
179 font-family: var(--font-display); cursor: pointer; 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 .pill:hover { background: var(--ink); color: var(--accent); } 232 .pill:hover { background: var(--ink); color: var(--accent); }
183 .pill-x { font-size: 10px; opacity: 0.65; } 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 .pill-clear:hover { background: var(--danger); color: #fff; } 235 .pill-clear:hover { background: var(--danger); color: #fff; }
186 .link-btn { 236 .link-btn {
187 background: none; border: none; padding: 0; color: var(--green); font: inherit; 237 background: none; border: none; padding: 0; color: var(--green); font: inherit;
@@ -201,32 +251,40 @@ img { display: block; }
201 .btn-ghost:hover { background: var(--accent); } 251 .btn-ghost:hover { background: var(--accent); }
202 .btn:disabled { opacity: 0.4; cursor: default; } 252 .btn:disabled { opacity: 0.4; cursor: default; }
203 253
204−/* ================= Chips ================= */ 254+/* ================= Chips (cuisines) — pilules à filet, sans ombre ========= */
205−.chips { display: flex; gap: 8px; margin: 18px 0 4px; overflow-x: auto; padding: 4px 4px 8px 0; scrollbar-width: none; } 255+.chips { display: flex; gap: 8px; margin: 20px 0 4px; overflow-x: auto; padding: 4px 4px 8px 0; scrollbar-width: none; }
206 .chips::-webkit-scrollbar { display: none; } 256 .chips::-webkit-scrollbar { display: none; }
207 .chip { 257 .chip {
208− border: 1.5px solid var(--ink); background: var(--surface); color: var(--ink); 258+ border: 1px solid var(--line-strong); background: transparent; color: var(--ink);
209− border-radius: var(--r-ctl); padding: 8px 16px; font-size: 13px; font-weight: 700; 259+ border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 700;
210 cursor: pointer; font-family: var(--font-display); white-space: nowrap; min-height: 40px; 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); } 263+.chip:hover { background: var(--accent-soft); border-color: var(--ink); transform: none; box-shadow: none; }
214−.chip.on { background: var(--ink); color: var(--accent); box-shadow: 4px 4px 0 rgba(20, 24, 20, 0.3); } 264+.chip.on { background: var(--ink); color: var(--accent); border-color: var(--ink); box-shadow: none; }
215 265
216 /* ================= Results ================= */ 266 /* ================= Results ================= */
217−.results-head { display: flex; align-items: baseline; gap: 14px; margin: 28px 0 18px; } 267+.results-head {
218−.results-head h2 { font-size: 23px; letter-spacing: -0.03em; color: var(--ink); } 268+ display: flex; align-items: baseline; gap: 14px; margin: 44px 0 22px;
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; } 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 .grid { 278 .grid {
221 display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); 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 /* récemment consultés — bande horizontale de cartes, défilement latéral */ 284 /* récemment consultés — bande horizontale de cartes, défilement latéral */
227 .recent-row { 285 .recent-row {
228 display: grid; grid-auto-flow: column; grid-auto-columns: 290px; 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 scroll-snap-type: x proximity; 288 scroll-snap-type: x proximity;
231 } 289 }
232 .recent-row > .card { scroll-snap-align: start; } 290 .recent-row > .card { scroll-snap-align: start; }
@@ -234,14 +292,16 @@ img { display: block; }
234 .recent-row { grid-auto-columns: 82%; margin-right: -16px; padding-right: 16px; } 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 .card { 297 .card {
238− background: var(--surface); border: 1.5px solid var(--ink); border-radius: var(--r-card); 298+ background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-card);
239− overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-off-soft); 299+ overflow: hidden; display: flex; flex-direction: column; box-shadow: none;
240− transition: transform 0.18s ease, box-shadow 0.18s ease; 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 .card:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } 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 .card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } 305 .card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
246 .card:hover .card-img img { transform: scale(1.04); } 306 .card:hover .card-img img { transform: scale(1.04); }
247 .card-img .noimg { 307 .card-img .noimg {
@@ -255,11 +315,11 @@ img { display: block; }
255 .card-logo { max-width: 46%; max-height: 68%; object-fit: contain; } 315 .card-logo { max-width: 46%; max-height: 68%; object-fit: contain; }
256 .card:hover .card-logo { transform: none; } 316 .card:hover .card-logo { transform: none; }
257 .badge { 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 border-radius: var(--r-ctl); padding: 3px 10px; 319 border-radius: var(--r-ctl); padding: 3px 10px;
260 font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.05em; 320 font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
261 background: rgba(255, 255, 255, 0.95); color: var(--ink); 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 .badge.type { background: var(--ink); color: var(--accent); } 324 .badge.type { background: var(--ink); color: var(--accent); }
265 .badge.right { left: auto; right: 10px; } 325 .badge.right { left: auto; right: 10px; }
@@ -267,28 +327,30 @@ img { display: block; }
267 .badge.ctx-takeout, .ctx-pill.ctx-takeout { background: var(--accent); color: var(--ink); } 327 .badge.ctx-takeout, .ctx-pill.ctx-takeout { background: var(--accent); color: var(--ink); }
268 .badge.ctx-dine-in, .ctx-pill.ctx-dine-in { background: var(--green); color: #fff; } 328 .badge.ctx-dine-in, .ctx-pill.ctx-dine-in { background: var(--green); color: #fff; }
269 .badge.ctx-delivery, .ctx-pill.ctx-delivery { background: var(--amber); color: var(--ink); } 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; } 330+.card-body { padding: 16px 18px; 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); } 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 .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; } 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 .card-price .no-menu { font-size: 14px; font-weight: 600; color: var(--ink-3); } 336 .card-price .no-menu { font-size: 14px; font-weight: 600; color: var(--ink-3); }
274 .card-title { font-weight: 600; font-size: 14.5px; color: var(--ink); } 337 .card-title { font-weight: 600; font-size: 14.5px; color: var(--ink); }
275 .card-meta { color: var(--ink-3); font-size: 12.5px; display: flex; gap: 7px; flex-wrap: wrap; align-items: center; } 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 .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; } 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 .source-tag { 341 .source-tag {
279 font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; 342 font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
280− text-transform: uppercase; letter-spacing: 0.06em; color: var(--green); 343+ text-transform: uppercase; letter-spacing: 0.07em; color: var(--accent-deep);
281− background: var(--accent-soft); border: 1px solid rgba(28, 92, 65, 0.35); 344+ background: none; border: none; border-radius: 0; padding: 0;
282− border-radius: var(--r-ctl); padding: 3px 9px;
283 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; 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 /* ================= Bascule Restos / Plats ================= */ 349 /* ================= Bascule Restos / Plats ================= */
288 .mode-toggle { 350 .mode-toggle {
289 display: inline-flex; align-self: center; border: 1.5px solid var(--ink); 351 display: inline-flex; align-self: center; border: 1.5px solid var(--ink);
290 border-radius: var(--r-ctl); overflow: hidden; background: var(--surface); 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 .mode-toggle button { 355 .mode-toggle button {
294 border: 0; background: transparent; padding: 12px 20px; cursor: pointer; 356 border: 0; background: transparent; padding: 12px 20px; cursor: pointer;
@@ -298,27 +360,34 @@ img { display: block; }
298 .mode-toggle button + button { border-left: 1.5px solid var(--ink); } 360 .mode-toggle button + button { border-left: 1.5px solid var(--ink); }
299 .mode-toggle button.on { background: var(--ink); color: var(--accent); } 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 .dish-list { 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 .dish-row { 368 .dish-row {
306− display: flex; gap: 14px; align-items: flex-start; 369+ display: flex; gap: 16px; align-items: flex-start;
307− background: var(--surface); border: 1.5px solid var(--ink); 370+ background: transparent; border: none; border-bottom: 1px solid var(--line);
308− border-radius: var(--r-card); padding: 14px 16px; 371+ border-radius: 0; padding: 16px 2px; box-shadow: none;
309− box-shadow: 4px 4px 0 rgba(20, 24, 20, 0.08); 372+ transition: background 0.15s ease;
310− transition: transform 0.15s ease, box-shadow 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 .dish-img { 379 .dish-img {
314 width: 62px; height: 62px; flex: none; object-fit: cover; 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 .dish-noimg { display: flex; align-items: center; justify-content: center; color: var(--ink-3); } 383 .dish-noimg { display: flex; align-items: center; justify-content: center; color: var(--ink-3); }
318 .dish-main { flex: 1; min-width: 0; } 384 .dish-main { flex: 1; min-width: 0; }
319 .dish-line { display: flex; align-items: baseline; gap: 10px; } 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); } 386+.dish-name { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink); }
321−.dish-price { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; color: var(--ink); white-space: nowrap; } 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 .dish-desc { 391 .dish-desc {
323 margin: 3px 0 0; color: var(--ink-3); font-size: 12.5px; max-width: 620px; 392 margin: 3px 0 0; color: var(--ink-3); font-size: 12.5px; max-width: 620px;
324 display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; 393 display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
@@ -328,7 +397,7 @@ img { display: block; }
328 margin-top: 7px; font-size: 12px; color: var(--ink-2); 397 margin-top: 7px; font-size: 12px; color: var(--ink-2);
329 } 398 }
330 .dish-meta b { color: var(--ink); } 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 .dish-meta .ctx-pill { 401 .dish-meta .ctx-pill {
333 border: 1px solid var(--ink); border-radius: 4px; padding: 2px 8px; 402 border: 1px solid var(--ink); border-radius: 4px; padding: 2px 8px;
334 font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; 403 font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
@@ -342,21 +411,21 @@ img { display: block; }
342 } 411 }
343 .pg-btn { 412 .pg-btn {
344 min-width: 40px; min-height: 40px; padding: 0 12px; 413 min-width: 40px; min-height: 40px; padding: 0 12px;
345− border: 1.5px solid var(--ink); border-radius: var(--r-ctl); 414+ border: 1px solid var(--line-strong); border-radius: var(--r-ctl);
346− background: var(--surface); color: var(--ink); cursor: pointer; 415+ background: transparent; color: var(--ink); cursor: pointer;
347 font-family: var(--font-display); font-weight: 700; font-size: 13.5px; 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 transition: all 0.12s ease; 418 transition: all 0.12s ease;
350 } 419 }
351−.pg-btn:hover:not(:disabled) { background: var(--accent-soft); } 420+.pg-btn:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--ink); }
352−.pg-btn.on { background: var(--ink); color: var(--accent); } 421+.pg-btn.on { background: var(--ink); color: var(--accent); border-color: var(--ink); }
353 .pg-btn:disabled { opacity: 0.35; cursor: default; box-shadow: none; } 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 .pg-ellipsis { color: var(--ink-3); font-family: var(--font-mono); padding: 0 4px; } 424 .pg-ellipsis { color: var(--ink-3); font-family: var(--font-mono); padding: 0 4px; }
356 425
357 /* ================= Skeletons ================= */ 426 /* ================= Skeletons ================= */
358 @keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } 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 .skel .sk-img, .skel .sk-line { 429 .skel .sk-img, .skel .sk-line {
361 background: linear-gradient(90deg, #eceae4 25%, #f6f4ef 50%, #eceae4 75%); 430 background: linear-gradient(90deg, #eceae4 25%, #f6f4ef 50%, #eceae4 75%);
362 background-size: 800px 100%; animation: shimmer 1.4s infinite linear; 431 background-size: 800px 100%; animation: shimmer 1.4s infinite linear;
@@ -367,7 +436,7 @@ img { display: block; }
367 436
368 /* ================= Empty / error ================= */ 437 /* ================= Empty / error ================= */
369 .notice { text-align: center; padding: 72px 24px; color: var(--ink-2); } 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 .notice h2 { color: var(--ink); } 440 .notice h2 { color: var(--ink); }
372 441
373 /* ================= Fiche resto ================= */ 442 /* ================= Fiche resto ================= */
@@ -378,12 +447,12 @@ img { display: block; }
378 color: var(--ink-3); margin-bottom: 20px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; 447 color: var(--ink-3); margin-bottom: 20px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
379 } 448 }
380 .crumbs a { border-bottom: 1.5px solid transparent; } 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 /* Ordre DOM = ordre visuel (standard Groupe Ka « Ordre des sections — pages 451 /* Ordre DOM = ordre visuel (standard Groupe Ka « Ordre des sections — pages
383 détail ») : le panneau héro (nom/prix/adresse) est 1er dans le DOM ; sur 452 détail ») : le panneau héro (nom/prix/adresse) est 1er dans le DOM ; sur
384 desktop il est placé en colonne 2 via grid-column — pas de `order` ni de 453 desktop il est placé en colonne 2 via grid-column — pas de `order` ni de
385 `column-reverse` pour réordonner entre breakpoints. */ 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 @media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } } 456 @media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } }
388 .detail-grid > * { min-width: 0; } 457 .detail-grid > * { min-width: 0; }
389 @media (min-width: 901px) { 458 @media (min-width: 901px) {
@@ -393,29 +462,31 @@ img { display: block; }
393 462
394 .panel { 463 .panel {
395 background: var(--surface); border: 1.5px solid var(--ink); border-radius: var(--r-card); 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 @media (max-width: 900px) { .panel { position: static; } } 467 @media (max-width: 900px) { .panel { position: static; } }
399 .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } 468 .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
400 .panel-logo { max-width: 110px; max-height: 54px; object-fit: contain; border-radius: var(--r-ctl); } 469 .panel-logo { max-width: 110px; max-height: 54px; object-fit: contain; border-radius: var(--r-ctl); }
401 .panel .price { 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 letter-spacing: -0.03em; color: var(--ink); 472 letter-spacing: -0.03em; color: var(--ink);
404 background: var(--accent); border-radius: 8px; padding: 0 10px 2px; 473 background: var(--accent); border-radius: 8px; padding: 0 10px 2px;
405 display: inline-block; transform: rotate(-1deg); 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 .panel .loc { color: var(--ink-2); font-size: 14px; } 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 @media (max-width: 380px) { .kv { grid-template-columns: 1fr; } } 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 .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; } 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 .kv .cell .v { font-weight: 700; font-size: 14.5px; margin-top: 2px; font-family: var(--font-display); color: var(--ink); } 483 .kv .cell .v { font-weight: 700; font-size: 14.5px; margin-top: 2px; font-family: var(--font-display); color: var(--ink); }
414 .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; } 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 .amenity-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 20px; } 485 .amenity-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 20px; }
416 .amenity { 486 .amenity {
417− background: var(--accent-soft); color: var(--green); font-size: 12px; font-weight: 600; 487+ background: transparent; color: var(--ink-2); font-size: 11px; font-weight: 700;
418− border: 1px solid rgba(28, 92, 65, 0.35); border-radius: var(--r-ctl); padding: 4px 11px; 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 .cta { 491 .cta {
421 display: block; text-align: center; background: var(--ink); color: var(--accent); 492 display: block; text-align: center; background: var(--ink); color: var(--accent);
@@ -427,11 +498,11 @@ img { display: block; }
427 .cta:active { transform: translate(2px, 2px); box-shadow: none; } 498 .cta:active { transform: translate(2px, 2px); box-shadow: none; }
428 .panel .fine { font-size: 11.5px; color: var(--ink-3); margin-top: 14px; text-align: center; } 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 .view-toggle { 502 .view-toggle {
432 display: inline-flex; border: 1.5px solid var(--ink); 503 display: inline-flex; border: 1.5px solid var(--ink);
433 border-radius: var(--r-ctl); overflow: hidden; background: var(--surface); 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 .view-toggle button { 507 .view-toggle button {
437 border: 0; background: transparent; padding: 8px 16px; cursor: pointer; 508 border: 0; background: transparent; padding: 8px 16px; cursor: pointer;
@@ -441,50 +512,52 @@ img { display: block; }
441 .view-toggle button.on { background: var(--ink); color: var(--accent); } 512 .view-toggle button.on { background: var(--ink); color: var(--accent); }
442 .ctx-toggle { margin-bottom: 14px; } 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 .ctx-banner { 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 display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; 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 .ctx-banner b { font-family: var(--font-display); font-size: 14px; } 523 .ctx-banner b { font-family: var(--font-display); font-size: 14px; }
451 .ctx-banner span { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); } 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); } 525+.ctx-banner.ctx-takeout { background: var(--accent-soft); border-left-color: var(--accent); }
453−.ctx-banner.ctx-takeout b { color: var(--green); } 526+.ctx-banner.ctx-takeout b { color: var(--accent-deep); }
454−.ctx-banner.ctx-dine-in { background: var(--surface); } 527+.ctx-banner.ctx-dine-in { background: var(--surface); border-left-color: var(--green); }
455 .ctx-banner.ctx-dine-in b { color: var(--green-deep); } 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 .ctx-banner.ctx-delivery b { color: #9a6414; } 530 .ctx-banner.ctx-delivery b { color: #9a6414; }
458 531
459 .menu-section { 532 .menu-section {
460− background: var(--surface); border: 1.5px solid var(--ink); 533+ background: transparent; border: none; border-top: 2px solid var(--ink);
461− border-radius: var(--r-card); box-shadow: var(--shadow-off-soft); overflow: hidden; 534+ border-radius: 0; box-shadow: none; overflow: visible;
462 } 535 }
463 .menu-section-head { 536 .menu-section-head {
464 width: 100%; display: flex; align-items: center; gap: 12px; 537 width: 100%; display: flex; align-items: center; gap: 12px;
465 border: none; background: none; cursor: pointer; 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 .menu-section-head:hover { background: var(--accent-soft); } 542 .menu-section-head:hover { background: var(--accent-soft); }
470 .ms-img { 543 .ms-img {
471 width: 36px; height: 36px; object-fit: cover; border-radius: var(--r-ctl); 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; } 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; }
475−.menu-items { list-style: none; margin: 0; padding: 0 18px 14px; } 548+.menu-items { list-style: none; margin: 0; padding: 0 2px 18px; }
476 .menu-item { padding: 12px 0; border-top: 1px solid var(--line); } 549 .menu-item { padding: 12px 0; border-top: 1px solid var(--line); }
477 .mi-row { display: flex; gap: 14px; align-items: flex-start; } 550 .mi-row { display: flex; gap: 14px; align-items: flex-start; }
478 .mi-main { flex: 1; min-width: 0; } 551 .mi-main { flex: 1; min-width: 0; }
479 .mi-line { display: flex; align-items: baseline; gap: 10px; } 552 .mi-line { display: flex; align-items: baseline; gap: 10px; }
480 .mi-name { font-weight: 600; font-size: 14.5px; color: var(--ink); } 553 .mi-name { font-weight: 600; font-size: 14.5px; color: var(--ink); }
481 .mi-dots { flex: 1; border-bottom: 2px dotted var(--line-strong); opacity: 0.35; transform: translateY(-3px); min-width: 20px; } 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 .mi-desc { margin: 3px 0 0; color: var(--ink-3); font-size: 12.5px; max-width: 560px; } 556 .mi-desc { margin: 3px 0 0; color: var(--ink-3); font-size: 12.5px; max-width: 560px; }
484 .mi-thumb { 557 .mi-thumb {
485 width: 68px; height: 68px; flex: none; object-fit: cover; 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); 559+ border-radius: var(--r-ctl); border: 1px solid var(--line-strong); background: var(--surface-2);
487− box-shadow: 3px 3px 0 rgba(20, 24, 20, 0.12); 560+ box-shadow: none;
488 } 561 }
489 .mi-tag { 562 .mi-tag {
490 font-style: normal; font-family: var(--font-mono); font-size: 9px; font-weight: 700; 563 font-style: normal; font-family: var(--font-mono); font-size: 9px; font-weight: 700;
@@ -496,11 +569,11 @@ img { display: block; }
496 .mi-tag-epice { background: var(--amber-soft); color: #9a6414; border-color: rgba(232, 163, 61, 0.5); } 569 .mi-tag-epice { background: var(--amber-soft); color: #9a6414; border-color: rgba(232, 163, 61, 0.5); }
497 .mi-tag-rupture { background: var(--surface-2); color: var(--ink-3); border-color: var(--line); } 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 .mi-optgroups { 573 .mi-optgroups {
501 margin-top: 10px; display: flex; flex-direction: column; gap: 8px; 574 margin-top: 10px; display: flex; flex-direction: column; gap: 8px;
502− background: var(--surface-2); border: 1px solid var(--line); 575+ background: transparent; border: none; border-left: 2px solid var(--line-strong);
503− border-radius: var(--r-ctl); padding: 10px 12px; 576+ border-radius: 0; padding: 8px 0 8px 14px;
504 } 577 }
505 .og-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; } 578 .og-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
506 .og-name { 579 .og-name {
@@ -524,21 +597,22 @@ img { display: block; }
524 .og-choice b.plus { color: #9a6414; } 597 .og-choice b.plus { color: #9a6414; }
525 .og-choice b.moins { color: var(--green); } 598 .og-choice b.moins { color: var(--green); }
526 599
527−/* ================= Sources page ================= */ 600+/* ================= Sources page — table à filets ================= */
528 .sources { padding: 44px 0 90px; } 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 .sources .sub { color: var(--ink-2); margin-bottom: 30px; max-width: 700px; } 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 .src-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 720px; } 605 .src-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 720px; }
533 .src-table th { 606 .src-table th {
534 text-align: left; font-family: var(--font-mono); font-size: 10px; 607 text-align: left; font-family: var(--font-mono); font-size: 10px;
535 text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-2); 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 .src-table tr:last-child td { border-bottom: none; } 612 .src-table tr:last-child td { border-bottom: none; }
540 .src-table tr:hover td { background: var(--accent-soft); } 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 .src-integrations { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; max-width: 380px; } 616 .src-integrations { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; max-width: 380px; }
543 .src-table .pill, .pill.ok, .pill.todo { 617 .src-table .pill, .pill.ok, .pill.todo {
544 display: inline-block; border-radius: 4px; padding: 3px 9px; 618 display: inline-block; border-radius: 4px; padding: 3px 9px;
@@ -548,26 +622,26 @@ img { display: block; }
548 } 622 }
549 .pill.ok { background: var(--accent); color: var(--ink); } 623 .pill.ok { background: var(--accent); color: var(--ink); }
550 .pill.todo { background: var(--amber-soft); color: #9a6414; border-color: rgba(232, 163, 61, 0.6); } 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 /* ================= Page Statistiques ================= */ 627 /* ================= Page Statistiques ================= */
554 .stats-page { padding: 44px 0 90px; } 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 .stats-page .sub { color: var(--ink-2); max-width: 640px; margin-bottom: 30px; } 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 .tile { 632 .tile {
559− background: var(--surface); border: 1.5px solid var(--ink); border-radius: var(--r-card); 633+ background: transparent; border: none; border-top: 2px solid var(--ink); border-radius: 0;
560− padding: 18px 20px; box-shadow: 4px 4px 0 rgba(20, 24, 20, 0.1); 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 .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; } 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 .hero-tile .tile-v { color: var(--accent); } 639 .hero-tile .tile-v { color: var(--accent); }
566 .hero-tile .tile-k { color: rgba(245, 243, 238, 0.6); } 640 .hero-tile .tile-k { color: rgba(245, 243, 238, 0.6); }
567 641
568 .viz-card { 642 .viz-card {
569− background: var(--surface); border: 1.5px solid var(--ink); border-radius: var(--r-card); 643+ background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-card);
570− box-shadow: var(--shadow-off-soft); padding: 26px 28px 20px; margin-bottom: 22px; 644+ box-shadow: none; padding: 26px 28px 20px; margin-bottom: 22px;
571 } 645 }
572 .viz-card h2 { font-size: 20px; letter-spacing: -0.02em; color: var(--ink); } 646 .viz-card h2 { font-size: 20px; letter-spacing: -0.02em; color: var(--ink); }
573 .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; } 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,7 +662,7 @@ img { display: block; }
588 min-width: 2px; transition: background 0.12s ease; 662 min-width: 2px; transition: background 0.12s ease;
589 } 663 }
590 .hbar-row:hover .hbar-fill { background: var(--accent); } 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 @media (max-width: 640px) { 666 @media (max-width: 640px) {
593 .hbar-row { grid-template-columns: minmax(80px, 120px) 1fr auto; gap: 8px; } 667 .hbar-row { grid-template-columns: minmax(80px, 120px) 1fr auto; gap: 8px; }
594 .viz-card { padding: 20px 16px 14px; } 668 .viz-card { padding: 20px 16px 14px; }
@@ -604,13 +678,9 @@ img { display: block; }
604 @media (max-width: 640px) { 678 @media (max-width: 640px) {
605 :root { --header-h: 56px; } 679 :root { --header-h: 56px; }
606 .brand { font-size: 20px; } 680 .brand { font-size: 20px; }
607− .nav a { padding: 8px 13px; font-size: 13.5px; }
608 .ticker { font-size: 10px; padding: 6px 0; } 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 .hero p.lede { font-size: 15px; } 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 /* la barre de filtres devient une feuille coulissante (bottom sheet) */ 685 /* la barre de filtres devient une feuille coulissante (bottom sheet) */
616 .filterbar { display: none; } 686 .filterbar { display: none; }
@@ -622,6 +692,7 @@ img { display: block; }
622 display: flex; flex-direction: column; gap: 12px; 692 display: flex; flex-direction: column; gap: 12px;
623 position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-modal, 900); 693 position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-modal, 900);
624 margin: 0; border-radius: 16px 16px 0 0; border: none; border-top: 2px solid var(--ink); 694 margin: 0; border-radius: 16px 16px 0 0; border: none; border-top: 2px solid var(--ink);
695+ background: var(--surface);
625 max-height: 82dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; 696 max-height: 82dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
626 padding: 16px 18px calc(18px + env(safe-area-inset-bottom)); 697 padding: 16px 18px calc(18px + env(safe-area-inset-bottom));
627 box-shadow: 0 -16px 48px rgba(20, 24, 20, 0.28); 698 box-shadow: 0 -16px 48px rgba(20, 24, 20, 0.28);
@@ -658,11 +729,11 @@ img { display: block; }
658 .detail { padding-top: 20px; } 729 .detail { padding-top: 20px; }
659 .panel { padding: 20px; } 730 .panel { padding: 20px; }
660 .panel .price { font-size: 26px; } 731 .panel .price { font-size: 26px; }
661− .results-head { margin-top: 20px; } 732+ .results-head { margin-top: 28px; }
662 .chips { margin-right: -16px; padding-right: 16px; } 733 .chips { margin-right: -16px; padding-right: 16px; }
663 .notice { padding: 48px 16px; } 734 .notice { padding: 48px 16px; }
664− .menu-items { padding: 0 14px 12px; } 735+ .menu-items { padding: 0 2px 14px; }
665− .menu-section-head { padding: 13px 14px; } 736+ .menu-section-head { padding: 13px 2px; }
666 .mi-thumb { width: 56px; height: 56px; } 737 .mi-thumb { width: 56px; height: 56px; }
667 } 738 }
668 739
@@ -684,7 +755,7 @@ img { display: block; }
684 font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--ink-3); 755 font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--ink-3);
685 border-radius: var(--r-ctl); transition: color 0.12s ease; 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 .tabbar a svg { display: block; } 759 .tabbar a svg { display: block; }
689 body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); } 760 body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
690 .ka-footer { padding-bottom: calc(72px + env(safe-area-inset-bottom)); } 761 .ka-footer { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
@@ -719,7 +790,7 @@ img { display: block; }
719 margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; 790 margin-left: auto; font-family: var(--font-mono); font-size: 10.5px;
720 letter-spacing: 0.03em; color: var(--ink-3); 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 @media (max-width: 640px) { .prefoot-osm { margin-left: 0; } } 794 @media (max-width: 640px) { .prefoot-osm { margin-left: 0; } }
724 795
725 /* --- Compte membre (« Se connecter avec KA ») ------------------------------- */ 796 /* --- Compte membre (« Se connecter avec KA ») ------------------------------- */
@@ -729,11 +800,11 @@ img { display: block; }
729 background: var(--surface); color: var(--ink); 800 background: var(--surface); color: var(--ink);
730 padding: 8px 14px; font-family: var(--font-display); 801 padding: 8px 14px; font-family: var(--font-display);
731 font-weight: 700; font-size: 13.5px; min-height: 38px; 802 font-weight: 700; font-size: 13.5px; min-height: 38px;
732− box-shadow: 3px 3px 0 rgba(20, 24, 20, 0.12); 803+ box-shadow: none;
733− transition: background 0.13s ease, transform 0.1s ease, box-shadow 0.1s ease; 804+ transition: background 0.13s ease, transform 0.1s ease;
734 } 805 }
735 .login-btn:hover { background: var(--accent-soft); } 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 .ka-badge { 808 .ka-badge {
738 display: inline-flex; align-items: center; justify-content: center; 809 display: inline-flex; align-items: center; justify-content: center;
739 background: var(--accent); color: var(--ink); border: 1px solid var(--ink); 810 background: var(--accent); color: var(--ink); border: 1px solid var(--ink);
@@ -746,7 +817,7 @@ img { display: block; }
746 width: 40px; height: 40px; border-radius: 50%; overflow: hidden; 817 width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
747 border: 1.5px solid var(--ink); background: var(--accent); 818 border: 1.5px solid var(--ink); background: var(--accent);
748 cursor: pointer; padding: 0; 819 cursor: pointer; padding: 0;
749− box-shadow: 3px 3px 0 rgba(20, 24, 20, 0.15); 820+ box-shadow: none;
750 } 821 }
751 .account-btn img { width: 100%; height: 100%; object-fit: cover; } 822 .account-btn img { width: 100%; height: 100%; object-fit: cover; }
752 .account-initial { 823 .account-initial {
@@ -786,9 +857,9 @@ img { display: block; }
786 .fav-btn { 857 .fav-btn {
787 position: absolute; bottom: 10px; right: 10px; 858 position: absolute; bottom: 10px; right: 10px;
788 width: 34px; height: 34px; border-radius: 50%; 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 color: var(--ink-2); font-size: 16px; line-height: 1; cursor: pointer; 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 transition: transform 0.12s ease, background 0.12s ease; 863 transition: transform 0.12s ease, background 0.12s ease;
793 } 864 }
794 .fav-btn:hover { transform: scale(1.08); } 865 .fav-btn:hover { transform: scale(1.08); }
@@ -806,10 +877,10 @@ img { display: block; }
806 border: 1.5px solid var(--ink); border-radius: var(--r-ctl); 877 border: 1.5px solid var(--ink); border-radius: var(--r-ctl);
807 background: var(--surface); cursor: pointer; padding: 0; 878 background: var(--surface); cursor: pointer; padding: 0;
808 flex-direction: column; align-items: center; justify-content: center; gap: 5px; 879 flex-direction: column; align-items: center; justify-content: center; gap: 5px;
809− box-shadow: 3px 3px 0 rgba(20, 24, 20, 0.15); 880+ box-shadow: none;
810− transition: box-shadow 0.15s ease, transform 0.15s ease; 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 .menu-btn span { 884 .menu-btn span {
814 display: block; width: 18px; height: 2px; background: var(--ink); 885 display: block; width: 18px; height: 2px; background: var(--ink);
815 border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease; 886 border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease;
@@ -853,10 +924,10 @@ html:has(.mobile-menu.open) { overflow: hidden; }
853 transition: opacity 0.25s ease, transform 0.25s ease; 924 transition: opacity 0.25s ease, transform 0.25s ease;
854 } 925 }
855 .mobile-menu.open .mm-link { opacity: 1; transform: translateY(0); } 926 .mobile-menu.open .mm-link { opacity: 1; transform: translateY(0); }
856−.mm-link.active { color: var(--green); } 927+.mm-link.active { color: var(--accent-deep); }
857−.mm-link.active .mm-arrow { opacity: 1; color: var(--green); } 928+.mm-link.active .mm-arrow { opacity: 1; color: var(--accent-deep); }
858 .mm-ico { width: 26px; text-align: center; font-size: 17px; } 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 .mm-link:active { background: var(--accent-soft); border-radius: var(--r-ctl); } 931 .mm-link:active { background: var(--accent-soft); border-radius: var(--r-ctl); }
861 .mm-foot { 932 .mm-foot {
862 padding: 12px 10px 4px; 933 padding: 12px 10px 4px;
@@ -878,12 +949,12 @@ html:has(.mobile-menu.open) { overflow: hidden; }
878 949
879 /* ================= Page Contact ================= */ 950 /* ================= Page Contact ================= */
880 .contact-page { padding: 44px 0 90px; } 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 .contact-page .sub { color: var(--ink-2); max-width: 640px; margin: 0 0 30px; } 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 .contact-card { 955 .contact-card {
885− background: var(--surface); border: 1.5px solid var(--ink); border-radius: var(--r-card); 956+ background: transparent; border: none; border-top: 2px solid var(--ink); border-radius: 0;
886− box-shadow: var(--shadow-off-soft); padding: 20px; 957+ box-shadow: none; padding: 16px 0 20px;
887 display: flex; flex-direction: column; gap: 6px; 958 display: flex; flex-direction: column; gap: 6px;
888 } 959 }
889 .contact-card .role { 960 .contact-card .role {
@@ -897,22 +968,22 @@ html:has(.mobile-menu.open) { overflow: hidden; }
897 } 968 }
898 .contact-card a.mail:hover { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 4px; } 969 .contact-card a.mail:hover { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 4px; }
899 .contact-note { 970 .contact-note {
900− border: 1.5px solid var(--ink); border-left: 6px solid var(--accent); 971+ border: none; border-left: 5px solid var(--accent);
901− border-radius: var(--r-card); background: var(--accent-soft); 972+ border-radius: 0; background: var(--accent-soft);
902 padding: 16px 18px; max-width: 760px; margin-bottom: 26px; font-size: 14px; 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 .contact-hub { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 38px; } 976 .contact-hub { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 38px; }
906 .contact-hub .hint { font-size: 12.5px; color: var(--ink-2); max-width: 460px; } 977 .contact-hub .hint { font-size: 12.5px; color: var(--ink-2); max-width: 460px; }
907 .contact-sites { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } 978 .contact-sites { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
908 .contact-sites a { 979 .contact-sites a {
909 display: inline-flex; align-items: center; gap: 7px; min-height: var(--touch); 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 padding: 8px 14px; font-family: var(--font-display); font-weight: 700; font-size: 13.5px; 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 transition: all 0.13s ease; 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 .contact-sites .dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(20, 24, 20, 0.35); flex: none; } 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 /* ================= Stats — tableau de bord Groupe KA (SPEC ka-ui/stats) ==== */ 989 /* ================= Stats — tableau de bord Groupe KA (SPEC ka-ui/stats) ==== */
919 990
Menu

Theme
↑↓ navigate ↵ open esc close / or ⌘K anywhere