| 4 |
4 |
styles.css : classes MÉTIER par-dessus le socle Groupe KA (ka/tokens.css). |
| 5 |
5 |
· Le socle (palette papier/encre, typo, ombres décalées, breakpoints, |
| 6 |
6 |
composants partagés) vient de ka/tokens.css, importé AVANT ce fichier. |
| 7 |
|
− · Ici : SEUL l'accent du site est surchargé + les classes propres à |
| 8 |
|
− Auto-Ka (fiches véhicules, filtres, stats, compte KA ID). |
|
7 |
+ · Direction artistique v3 (2026-08-25) : « magazine automobile / data |
|
8 |
+ marketplace ». Masthead encre, héro typographique, filets éditoriaux |
|
9 |
+ (règles 1–2 px) plutôt que boîtes, données en gros chiffres tabulaires, |
|
10 |
+ cartes véhicules sans cadre (photo + typo + filets). |
| 9 |
11 |
· Accent Auto-Ka : orange brûlé #ff5a2a sur encre. |
| 10 |
12 |
----------------------------------------------------------------------------- */ |
| 11 |
13 |
:root { |
| 20 |
22 |
/* variables métier locales (absentes des tokens) */ |
| 21 |
23 |
--good: #1c7a4d; |
| 22 |
24 |
--good-soft: #e2f4e9; |
|
25 |
+ /* encre du masthead (légèrement plus noire que --ink pour le contraste) */ |
|
26 |
+ --mast: #101310; |
|
27 |
+ --mast-fg: #f5f3ee; |
|
28 |
+ --mast-dim: rgba(245, 243, 238, 0.62); |
|
29 |
+ --mast-line: rgba(245, 243, 238, 0.16); |
| 23 |
30 |
} |
| 24 |
31 |
|
| 25 |
|
−/* — surcharges locales du socle (layout historique d'Auto-Ka) — */ |
|
32 |
+/* — surcharges locales du socle — */ |
| 26 |
33 |
h1, h2, h3, h4 { margin: 0; } |
| 27 |
34 |
a { text-decoration: none; } |
| 28 |
35 |
button { font-family: inherit; } |
| 34 |
41 |
.container { max-width: 1280px; padding: 0 24px; } |
| 35 |
42 |
@media (max-width: 640px) { .container { padding: 0 16px; } .header-inner { height: 56px; } } |
| 36 |
43 |
|
| 37 |
|
−/* ================= Header ================= */ |
|
44 |
+/* Chiffres : toujours tabulaires (données alignées, esprit instrumentation) */ |
|
45 |
+.hstat b, .vcard .price, .vd-price .p, .stat-tile b, .result-bar .count, |
|
46 |
+.spec-table td:last-child, .price-history, .offer .price, .src-card .n { |
|
47 |
+ font-variant-numeric: tabular-nums; |
|
48 |
+} |
|
49 |
+ |
|
50 |
+/* ================= Masthead (header encre, façon une de magazine) ========= */ |
| 38 |
51 |
.header { |
| 39 |
52 |
position: sticky; top: 0; z-index: var(--z-header, 500); |
| 40 |
|
− background: var(--paper); |
| 41 |
|
− border-bottom: 2px solid var(--ink); |
|
53 |
+ background: var(--mast); color: var(--mast-fg); |
|
54 |
+ border-bottom: 3px solid var(--accent); |
| 42 |
55 |
} |
| 43 |
|
−.header-inner { display: flex; align-items: center; gap: 20px; height: 64px; } |
|
56 |
+.header-inner { display: flex; align-items: center; gap: 20px; height: 62px; } |
| 44 |
57 |
.brand { |
| 45 |
|
− position: relative; |
| 46 |
|
− font-family: var(--font-display); font-weight: 700; font-size: 26px; |
|
58 |
+ position: relative; color: var(--mast-fg); |
|
59 |
+ font-family: var(--font-display); font-weight: 700; font-size: 25px; |
| 47 |
60 |
letter-spacing: -0.04em; display: flex; align-items: center; line-height: 1; |
| 48 |
61 |
} |
| 49 |
|
−/* Cible tactile ≥44 px pour le logo (102×32 au naturel) */ |
| 50 |
62 |
.brand::after { content: ""; position: absolute; inset: -8px; } |
| 51 |
63 |
.brand .ka { |
| 52 |
|
− background: var(--ink); color: var(--accent); padding: 2px 7px 4px; |
|
64 |
+ background: var(--accent); color: #101310; padding: 2px 7px 4px; |
| 53 |
65 |
border-radius: 6px; margin-left: 3px; transform: rotate(-2deg); |
| 54 |
66 |
transition: transform 0.2s ease; |
| 55 |
67 |
} |
| 56 |
68 |
.brand:hover .ka { transform: rotate(0deg); } |
| 57 |
69 |
.brand-tag { |
| 58 |
|
− font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); |
| 59 |
|
− letter-spacing: 0.08em; text-transform: uppercase; margin-left: 12px; |
|
70 |
+ font-family: var(--font-mono); font-size: 10px; color: var(--mast-dim); |
|
71 |
+ letter-spacing: 0.1em; text-transform: uppercase; margin-left: 14px; |
|
72 |
+ border-left: 1px solid var(--mast-line); padding-left: 14px; |
| 60 |
73 |
} |
| 61 |
|
−@media (max-width: 860px) { .brand-tag { display: none; } } |
|
74 |
+@media (max-width: 980px) { .brand-tag { display: none; } } |
|
75 |
+ |
| 62 |
76 |
.nav { |
| 63 |
|
− margin-left: auto; display: flex; gap: 4px; |
|
77 |
+ margin-left: auto; display: flex; gap: 2px; |
| 64 |
78 |
overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; |
| 65 |
79 |
} |
| 66 |
80 |
.nav::-webkit-scrollbar { display: none; } |
| 67 |
|
−.nav a { flex: none; } |
| 68 |
81 |
.nav a { |
| 69 |
|
− padding: 9px 16px; border-radius: 999px; font-weight: 600; font-size: 14px; |
| 70 |
|
− color: var(--ink-2); border: 1.5px solid transparent; |
| 71 |
|
− transition: all 0.15s ease; min-height: 44px; display: inline-flex; align-items: center; |
| 72 |
|
−} |
| 73 |
|
−.nav a:hover { border-color: var(--ink); color: var(--ink); } |
| 74 |
|
−.nav a.active { background: var(--ink); color: var(--accent); } |
| 75 |
|
−@media (max-width: 640px) { |
| 76 |
|
− .nav a { padding: 8px 11px; font-size: 13px; } |
| 77 |
|
−} |
| 78 |
|
− |
| 79 |
|
−/* — badge « Un service Groupe KA » (composant ka/GroupeKaBadge) — */ |
| 80 |
|
−.header .gk-badge { flex: none; margin-left: 2px; } |
|
82 |
+ flex: none; position: relative; |
|
83 |
+ padding: 9px 13px; min-height: 44px; display: inline-flex; align-items: center; |
|
84 |
+ font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; |
|
85 |
+ text-transform: uppercase; letter-spacing: 0.09em; |
|
86 |
+ color: var(--mast-dim); transition: color 0.15s ease; |
|
87 |
+} |
|
88 |
+.nav a::after { |
|
89 |
+ content: ""; position: absolute; left: 13px; right: 13px; bottom: 6px; |
|
90 |
+ height: 2px; background: var(--accent); |
|
91 |
+ transform: scaleX(0); transform-origin: left; transition: transform 0.18s ease; |
|
92 |
+} |
|
93 |
+.nav a:hover { color: var(--mast-fg); } |
|
94 |
+.nav a:hover::after, .nav a.active::after { transform: scaleX(1); } |
|
95 |
+.nav a.active { color: var(--mast-fg); } |
|
96 |
+ |
|
97 |
+/* — badge Groupe KA : variante encre dans le masthead — */ |
|
98 |
+.header .gk-badge { |
|
99 |
+ flex: none; margin-left: 2px; |
|
100 |
+ background: transparent; border-color: var(--mast-line); color: var(--mast-dim); |
|
101 |
+} |
|
102 |
+.header .gk-badge b { color: var(--mast-fg); } |
| 81 |
103 |
@media (max-width: 1023px) { .header .gk-badge { display: none; } } |
| 82 |
|
−/* variante mobile : petite barre sous le ticker, tactile ≥ 44 px */ |
| 83 |
104 |
.gk-mobile { |
| 84 |
105 |
display: none; align-items: center; justify-content: center; |
| 85 |
106 |
min-height: 44px; padding: 5px 16px; |
| 86 |
|
− background: var(--surface-2); border-bottom: 1.5px solid var(--line); |
|
107 |
+ background: var(--surface-2); border-bottom: 1px solid var(--line); |
| 87 |
108 |
} |
| 88 |
109 |
@media (max-width: 1023px) { .gk-mobile { display: flex; } } |
| 89 |
110 |
|
| 90 |
|
−/* ================= Ticker ================= */ |
|
111 |
+/* connexion / compte dans le masthead */ |
|
112 |
+.header .login-btn { |
|
113 |
+ border-color: var(--mast-line); background: transparent; color: var(--mast-fg); |
|
114 |
+} |
|
115 |
+.header .login-btn:hover { box-shadow: 4px 4px 0 var(--accent); border-color: var(--mast-fg); } |
|
116 |
+.header .account-btn { border-color: var(--mast-line); background: var(--mast); } |
|
117 |
+.header .account-btn:hover { box-shadow: 3px 3px 0 var(--accent); } |
|
118 |
+ |
|
119 |
+/* ================= Ticker (bandeau data sous le masthead) ================= */ |
| 91 |
120 |
.ticker { |
| 92 |
|
− background: var(--ink); color: var(--accent); overflow: hidden; |
| 93 |
|
− font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; |
| 94 |
|
− text-transform: uppercase; padding: 7px 0; white-space: nowrap; |
| 95 |
|
− border-bottom: 1px solid rgba(255, 90, 42, 0.25); |
|
121 |
+ background: var(--mast); color: var(--accent); overflow: hidden; |
|
122 |
+ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; |
|
123 |
+ text-transform: uppercase; padding: 7px 0 8px; white-space: nowrap; |
|
124 |
+ border-bottom: 1.5px solid var(--ink); |
| 96 |
125 |
} |
| 97 |
126 |
.ticker-track { display: inline-flex; gap: 0; animation: ticker 40s linear infinite; will-change: transform; } |
| 98 |
127 |
.ticker span { padding: 0 26px; position: relative; } |
| 103 |
132 |
* { transition-duration: 0.01ms !important; } |
| 104 |
133 |
} |
| 105 |
134 |
|
| 106 |
|
−/* ================= Hero ================= */ |
| 107 |
|
−.hero { padding: 46px 0 8px; } |
|
135 |
+/* ================= Héro éditorial ================= */ |
|
136 |
+.hero { padding: 52px 0 10px; } |
| 108 |
137 |
.hero h1 { |
| 109 |
|
− font-size: clamp(30px, 5vw, 52px); font-weight: 700; line-height: 1.04; |
| 110 |
|
− max-width: 820px; |
|
138 |
+ font-size: clamp(34px, 5.6vw, 64px); font-weight: 700; line-height: 1.0; |
|
139 |
+ letter-spacing: -0.045em; max-width: 900px; text-wrap: balance; |
|
140 |
+} |
|
141 |
+.hero h1 em { |
|
142 |
+ font-style: normal; color: var(--accent-deep); |
|
143 |
+ box-shadow: inset 0 -0.16em 0 var(--accent-soft); |
| 111 |
144 |
} |
| 112 |
|
−.hero h1 em { font-style: normal; color: var(--accent-deep); position: relative; } |
| 113 |
145 |
.hero p.sub { |
| 114 |
|
− margin: 14px 0 0; color: var(--ink-2); font-size: 16.5px; max-width: 640px; |
|
146 |
+ margin: 18px 0 0; color: var(--ink-2); font-size: 16.5px; max-width: 620px; |
|
147 |
+} |
|
148 |
+/* — bandeau de chiffres : règle forte + gros chiffres tabulaires — */ |
|
149 |
+.hero-stats { |
|
150 |
+ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); |
|
151 |
+ gap: 0; margin-top: 30px; max-width: 720px; |
|
152 |
+ border-top: 2px solid var(--ink); |
|
153 |
+} |
|
154 |
+.hstat { |
|
155 |
+ font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; |
|
156 |
+ text-transform: uppercase; color: var(--ink-3); |
|
157 |
+ padding: 12px 18px 2px 0; min-width: 0; overflow-wrap: anywhere; |
|
158 |
+} |
|
159 |
+.hstat + .hstat { border-left: 1px solid var(--line); padding-left: 18px; } |
|
160 |
+.hstat b { |
|
161 |
+ display: block; font-family: var(--font-display); font-weight: 700; |
|
162 |
+ font-size: clamp(26px, 3vw, 38px); color: var(--ink); |
|
163 |
+ letter-spacing: -0.03em; margin-bottom: 4px; |
| 115 |
164 |
} |
| 116 |
|
−.hero-stats { display: flex; gap: 28px; margin-top: 22px; flex-wrap: wrap; } |
| 117 |
|
−.hstat { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); } |
| 118 |
|
−.hstat b { display: block; font-family: var(--font-display); font-size: 26px; color: var(--ink); letter-spacing: -0.02em; } |
| 119 |
165 |
|
| 120 |
|
−/* ================= Filtres ================= */ |
|
166 |
+/* ================= Pupitre de recherche (filtres sans boîte) =============== */ |
| 121 |
167 |
.filters { |
| 122 |
|
− background: var(--surface); border: 2px solid var(--ink); |
| 123 |
|
− border-radius: var(--r-card); box-shadow: var(--shadow-off); |
| 124 |
|
− padding: 16px; margin: 26px 0 8px; |
| 125 |
|
− display: grid; gap: 10px; |
| 126 |
|
− grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); |
|
168 |
+ background: transparent; border: 0; box-shadow: none; border-radius: 0; |
|
169 |
+ padding: 0; margin: 36px 0 0; |
|
170 |
+ display: grid; gap: 0; |
|
171 |
+ grid-template-columns: repeat(5, minmax(0, 1fr)); |
|
172 |
+ border-top: 2.5px solid var(--ink); |
| 127 |
173 |
} |
| 128 |
174 |
.filters .full { grid-column: 1 / -1; } |
| 129 |
|
−.f-field { display: flex; flex-direction: column; gap: 4px; } |
|
175 |
+.f-field { |
|
176 |
+ display: flex; flex-direction: column; gap: 2px; |
|
177 |
+ padding: 10px 16px 10px 0; margin-right: 16px; |
|
178 |
+ border-bottom: 1px solid var(--line); |
|
179 |
+ position: relative; |
|
180 |
+} |
|
181 |
+/* hairline verticale entre les cellules d'une même rangée */ |
|
182 |
+.f-field:not(.full)::before { |
|
183 |
+ content: ""; position: absolute; right: 0; top: 12px; bottom: 12px; |
|
184 |
+ width: 1px; background: var(--line); |
|
185 |
+} |
|
186 |
+.f-field:nth-child(5n + 1):not(.full) { /* fin de rangée (5 col.) : pas de hairline */ } |
| 130 |
187 |
.f-field label { |
| 131 |
188 |
font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; |
| 132 |
189 |
letter-spacing: 0.12em; color: var(--ink-3); font-weight: 600; |
| 133 |
190 |
} |
| 134 |
191 |
.f-field select, .f-field input { |
| 135 |
|
− border: 1.5px solid var(--line-strong); border-radius: var(--r-ctl); |
| 136 |
|
− background: var(--surface); font: inherit; font-size: 14px; |
| 137 |
|
− padding: 9px 10px; min-height: 44px; color: var(--ink); |
| 138 |
|
−} |
| 139 |
|
−.f-field select:focus, .f-field input:focus { |
| 140 |
|
− outline: 2px solid var(--accent); outline-offset: 1px; |
|
192 |
+ border: 0; border-radius: 0; background: transparent; |
|
193 |
+ font: inherit; font-size: 14.5px; font-weight: 600; |
|
194 |
+ padding: 4px 0; min-height: 36px; color: var(--ink); |
|
195 |
+ width: 100%; appearance: none; -webkit-appearance: none; |
|
196 |
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23141814' stroke-width='1.6'/%3E%3C/svg%3E"); |
|
197 |
+ background-repeat: no-repeat; background-position: right 2px center; |
|
198 |
+} |
|
199 |
+.f-field input { background-image: none; } |
|
200 |
+.f-field select:focus, .f-field input:focus { outline: none; } |
|
201 |
+.f-field:focus-within { box-shadow: inset 0 -2.5px 0 var(--accent); } |
|
202 |
+.f-field:focus-within label { color: var(--accent-deep); } |
|
203 |
+/* champ de recherche : grand, typographique */ |
|
204 |
+.filters .full { margin-right: 0; } |
|
205 |
+.filters .full::before { display: none; } |
|
206 |
+.filters .full input { |
|
207 |
+ font-family: var(--font-display); font-weight: 600; |
|
208 |
+ font-size: clamp(18px, 2.4vw, 26px); letter-spacing: -0.02em; |
|
209 |
+ min-height: 52px; padding: 6px 0; |
|
210 |
+} |
|
211 |
+.filters .full input::placeholder { color: var(--ink-3); font-weight: 500; } |
|
212 |
+.f-actions { |
|
213 |
+ display: flex; align-items: center; justify-content: flex-end; |
|
214 |
+ border-bottom: 1px solid var(--line); padding: 10px 0; |
| 141 |
215 |
} |
| 142 |
|
−.f-actions { display: flex; align-items: flex-end; gap: 8px; } |
| 143 |
216 |
.btn { |
| 144 |
217 |
font-family: var(--font-display); font-weight: 600; font-size: 14.5px; |
| 145 |
218 |
border: 2px solid var(--ink); border-radius: var(--r-ctl); |
| 150 |
223 |
.btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--accent); } |
| 151 |
224 |
.btn.ghost { background: transparent; color: var(--ink); } |
| 152 |
225 |
.btn.ghost:hover { box-shadow: 4px 4px 0 var(--ink); } |
|
226 |
+/* « Réinitialiser » : lien texte, pas un bouton-boîte */ |
|
227 |
+.f-actions .btn.ghost { |
|
228 |
+ border: 0; min-height: 44px; padding: 4px 2px; |
|
229 |
+ font-family: var(--font-mono); font-size: 11px; font-weight: 600; |
|
230 |
+ text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-2); |
|
231 |
+ text-decoration: underline; text-underline-offset: 4px; |
|
232 |
+ text-decoration-color: var(--line-strong); |
|
233 |
+} |
|
234 |
+.f-actions .btn.ghost:hover { |
|
235 |
+ transform: none; box-shadow: none; color: var(--accent-deep); |
|
236 |
+ text-decoration-color: var(--accent); |
|
237 |
+} |
| 153 |
238 |
|
|
239 |
+/* ================= Barre de résultats (compteur display) ================== */ |
| 154 |
240 |
.result-bar { |
| 155 |
|
− display: flex; align-items: center; gap: 14px; margin: 22px 0 14px; flex-wrap: wrap; |
|
241 |
+ display: flex; align-items: baseline; gap: 14px; margin: 30px 0 22px; flex-wrap: wrap; |
|
242 |
+} |
|
243 |
+.result-bar h2 { |
|
244 |
+ font-family: var(--font-mono); font-size: 11px; font-weight: 600; |
|
245 |
+ text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-2); |
|
246 |
+ display: flex; align-items: baseline; gap: 12px; |
|
247 |
+} |
|
248 |
+.result-bar .count { |
|
249 |
+ font-family: var(--font-display); font-weight: 700; |
|
250 |
+ font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -0.03em; |
|
251 |
+ color: var(--ink); text-transform: none; |
| 156 |
252 |
} |
| 157 |
|
−.result-bar h2 { font-size: 20px; } |
| 158 |
|
−.result-bar .count { color: var(--accent-deep); } |
|
253 |
+.result-bar .count::after { |
|
254 |
+ content: ""; display: inline-block; width: 9px; height: 9px; margin-left: 8px; |
|
255 |
+ border-radius: 999px; background: var(--accent); |
|
256 |
+ animation: livepulse 2.2s ease-in-out infinite; |
|
257 |
+} |
|
258 |
+@keyframes livepulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } |
| 159 |
259 |
.sort-box { margin-left: auto; display: flex; align-items: center; gap: 8px; } |
| 160 |
260 |
.sort-box label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; color: var(--ink-3); } |
| 161 |
261 |
.sort-box select { |
| 162 |
|
− border: 1.5px solid var(--line-strong); border-radius: var(--r-ctl); |
| 163 |
|
− background: var(--surface); font: inherit; font-size: 13.5px; padding: 7px 9px; |
|
262 |
+ border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; |
|
263 |
+ background: transparent; font: inherit; font-size: 13.5px; font-weight: 600; |
|
264 |
+ padding: 7px 2px; appearance: auto; color: var(--ink); cursor: pointer; |
| 164 |
265 |
} |
|
266 |
+.sort-box select:focus { outline: none; border-bottom-color: var(--accent); } |
| 165 |
267 |
|
| 166 |
|
−/* ================= Grille véhicules ================= */ |
|
268 |
+/* ================= Grille véhicules — cartes sans cadre ==================== */ |
| 167 |
269 |
.vgrid { |
| 168 |
|
− display: grid; gap: 22px; |
|
270 |
+ display: grid; gap: 36px 26px; |
| 169 |
271 |
grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); |
| 170 |
|
− padding-bottom: 30px; |
|
272 |
+ padding-bottom: 34px; |
| 171 |
273 |
} |
| 172 |
274 |
.vcard { |
| 173 |
|
− background: var(--surface); border: 2px solid var(--ink); |
| 174 |
|
− border-radius: var(--r-card); overflow: hidden; position: relative; |
|
275 |
+ background: transparent; border: 0; border-radius: 0; box-shadow: none; |
|
276 |
+ overflow: visible; position: relative; |
| 175 |
277 |
display: flex; flex-direction: column; |
| 176 |
|
− transition: transform 0.15s ease, box-shadow 0.15s ease; |
| 177 |
|
− box-shadow: var(--shadow-flat); |
| 178 |
278 |
} |
| 179 |
|
−.vcard:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-off); } |
| 180 |
279 |
.vcard .photo { |
| 181 |
|
− aspect-ratio: 4 / 3; background: var(--surface-2); position: relative; overflow: hidden; |
|
280 |
+ aspect-ratio: 4 / 3; background: var(--surface-2); position: relative; |
|
281 |
+ overflow: hidden; border-radius: 10px; |
|
282 |
+} |
|
283 |
+.vcard .photo::after { |
|
284 |
+ /* liseré intérieur discret pour tenir les photos claires sur le papier */ |
|
285 |
+ content: ""; position: absolute; inset: 0; border-radius: 10px; |
|
286 |
+ box-shadow: inset 0 0 0 1px rgba(20, 24, 20, 0.12); pointer-events: none; |
| 182 |
287 |
} |
| 183 |
|
−.vcard .photo img { width: 100%; height: 100%; object-fit: cover; } |
|
288 |
+.vcard .photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s cubic-bezier(0.2, 0.6, 0.2, 1); } |
|
289 |
+.vcard:hover .photo img { transform: scale(1.045); } |
| 184 |
290 |
.vcard .photo .nopic { |
| 185 |
291 |
position: absolute; inset: 0; display: grid; place-items: center; |
| 186 |
292 |
color: var(--ink-3); font-size: 40px; |
| 187 |
293 |
} |
| 188 |
294 |
.vcard .year-chip { |
| 189 |
295 |
position: absolute; top: 10px; left: 10px; |
| 190 |
|
− background: var(--ink); color: var(--paper); font-family: var(--font-mono); |
| 191 |
|
− font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; |
|
296 |
+ background: var(--mast); color: var(--paper); font-family: var(--font-mono); |
|
297 |
+ font-size: 11px; font-weight: 600; letter-spacing: 0.06em; |
|
298 |
+ padding: 3px 9px; border-radius: 999px; |
| 192 |
299 |
} |
| 193 |
300 |
.vcard .drop-chip { |
| 194 |
301 |
position: absolute; top: 10px; right: 10px; |
| 195 |
302 |
background: var(--good); color: var(--paper); font-family: var(--font-mono); |
| 196 |
303 |
font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; |
| 197 |
304 |
} |
| 198 |
|
− |
| 199 |
|
−/* ===== Favoris — cœur rond « Mon univers Ka » en coin de photo ===== */ |
| 200 |
|
−.fav-btn { |
| 201 |
|
− position: absolute; right: 10px; bottom: 10px; z-index: 2; |
| 202 |
|
− width: 44px; height: 44px; padding: 0; |
| 203 |
|
− display: flex; align-items: center; justify-content: center; |
| 204 |
|
− background: rgba(255, 255, 255, 0.94); border: 2px solid var(--ink); |
| 205 |
|
− border-radius: 999px; cursor: pointer; color: var(--ink); |
| 206 |
|
− transition: transform 0.12s ease, background 0.12s ease; |
| 207 |
|
−} |
| 208 |
|
−.fav-btn:hover { transform: scale(1.12); } |
| 209 |
|
−.fav-btn.on { background: var(--accent-soft); color: var(--accent-deep); } |
| 210 |
|
−.fav-btn.on svg { filter: drop-shadow(0 0 3px rgba(204, 63, 22, 0.35)); } |
| 211 |
|
−.gallery .main { position: relative; } |
| 212 |
|
−.gallery .main .fav-btn { right: 14px; bottom: 14px; width: 44px; height: 44px; } |
| 213 |
|
−.gallery .main .fav-btn svg { width: 20px; height: 20px; } |
| 214 |
|
−.vcard .body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; } |
| 215 |
|
−.vcard h3 { font-size: 16.5px; line-height: 1.25; } |
|
305 |
+.vcard .body { padding: 13px 2px 0; display: flex; flex-direction: column; gap: 6px; flex: 1; } |
|
306 |
+.vcard h3 { |
|
307 |
+ font-size: 17px; line-height: 1.22; letter-spacing: -0.02em; |
|
308 |
+ text-decoration: underline transparent; text-decoration-thickness: 2px; |
|
309 |
+ text-underline-offset: 3px; transition: text-decoration-color 0.18s ease; |
|
310 |
+} |
|
311 |
+.vcard:hover h3 { text-decoration-color: var(--accent); } |
| 216 |
312 |
.vcard .price { |
| 217 |
|
− font-family: var(--font-display); font-weight: 700; font-size: 21px; |
| 218 |
|
− color: var(--accent-deep); letter-spacing: -0.02em; |
|
313 |
+ font-family: var(--font-display); font-weight: 700; font-size: 23px; |
|
314 |
+ color: var(--ink); letter-spacing: -0.02em; line-height: 1; |
|
315 |
+} |
|
316 |
+.vcard .price small { font-size: 12px; color: var(--ink-3); font-weight: 500; letter-spacing: 0; } |
|
317 |
+/* ligne de specs façon fiche technique (remplace les chips) */ |
|
318 |
+.spec-line { |
|
319 |
+ font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); |
|
320 |
+ letter-spacing: 0.02em; line-height: 1.6; |
|
321 |
+} |
|
322 |
+.spec-line em { font-style: normal; color: var(--ink-3); padding: 0 5px; } |
|
323 |
+.vcard .foot { |
|
324 |
+ margin-top: auto; padding-top: 9px; border-top: 1px solid var(--line); |
|
325 |
+ font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); |
|
326 |
+ text-transform: uppercase; letter-spacing: 0.05em; |
|
327 |
+ display: flex; justify-content: space-between; gap: 8px; |
| 219 |
328 |
} |
| 220 |
|
−.vcard .price small { font-size: 12px; color: var(--ink-3); font-weight: 500; } |
| 221 |
|
−.vcard .specs { |
| 222 |
|
− display: flex; flex-wrap: wrap; gap: 6px; |
|
329 |
+.vcard .foot span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } |
|
330 |
+/* — première carte en vedette (une du magazine) sur grand écran — */ |
|
331 |
+@media (min-width: 1024px) { |
|
332 |
+ .vgrid .vcard:first-child { grid-column: span 2; } |
|
333 |
+ .vgrid .vcard:first-child .photo { aspect-ratio: 16 / 9; } |
|
334 |
+ .vgrid .vcard:first-child h3 { font-size: 22px; } |
|
335 |
+ .vgrid .vcard:first-child .price { font-size: 28px; } |
| 223 |
336 |
} |
|
337 |
+ |
|
338 |
+/* chips génériques conservées (équipements, liens SEO, sites) */ |
| 224 |
339 |
.spec-chip { |
| 225 |
340 |
font-family: var(--font-mono); font-size: 10.5px; |
| 226 |
341 |
background: var(--surface-2); border: 1px solid var(--line); |
| 227 |
342 |
padding: 3px 8px; border-radius: 999px; color: var(--ink-2); |
| 228 |
343 |
} |
| 229 |
|
−.vcard .foot { |
| 230 |
|
− margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line); |
| 231 |
|
− font-size: 12px; color: var(--ink-3); |
| 232 |
|
− display: flex; justify-content: space-between; gap: 8px; |
| 233 |
|
−} |
| 234 |
344 |
|
| 235 |
345 |
/* ================= Pagination ================= */ |
| 236 |
346 |
.pager { display: flex; justify-content: center; gap: 10px; padding: 8px 0 46px; align-items: center; } |
| 237 |
347 |
.pager .mono { font-size: 12px; color: var(--ink-2); } |
|
348 |
+.pager .btn.ghost { border-width: 1.5px; } |
| 238 |
349 |
|
| 239 |
|
−/* ================= Fiche véhicule ================= */ |
| 240 |
|
−.vdetail { padding: 34px 0 60px; } |
| 241 |
|
−.vd-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; } |
| 242 |
|
−.vd-head h1 { font-size: clamp(24px, 3.6vw, 38px); line-height: 1.1; max-width: 760px; } |
| 243 |
|
−.vd-price { |
| 244 |
|
− margin-left: auto; text-align: right; |
|
350 |
+/* ================= Fiche véhicule — mise en page éditoriale ================ */ |
|
351 |
+.vdetail { padding: 30px 0 60px; } |
|
352 |
+.vd-head { |
|
353 |
+ display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; |
|
354 |
+ margin-bottom: 24px; padding-bottom: 20px; border-bottom: 2.5px solid var(--ink); |
|
355 |
+} |
|
356 |
+.vd-head h1 { |
|
357 |
+ font-size: clamp(26px, 4vw, 44px); line-height: 1.04; |
|
358 |
+ letter-spacing: -0.04em; max-width: 760px; text-wrap: balance; |
| 245 |
359 |
} |
|
360 |
+.vd-price { margin-left: auto; text-align: right; } |
| 246 |
361 |
.vd-price .p { |
| 247 |
|
− font-family: var(--font-display); font-weight: 700; font-size: 34px; |
| 248 |
|
− color: var(--accent-deep); letter-spacing: -0.02em; |
|
362 |
+ font-family: var(--font-display); font-weight: 700; |
|
363 |
+ font-size: clamp(30px, 3.6vw, 44px); |
|
364 |
+ color: var(--ink); letter-spacing: -0.03em; line-height: 1; |
| 249 |
365 |
} |
| 250 |
|
−.vd-price .was { font-size: 14px; color: var(--ink-3); text-decoration: line-through; } |
| 251 |
|
−.vd-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 28px; } |
| 252 |
|
−@media (max-width: 900px) { .vd-cols { grid-template-columns: 1fr; } } |
|
366 |
+.vd-price .was { font-size: 14px; color: var(--ink-3); text-decoration: line-through; margin-top: 4px; } |
|
367 |
+.vd-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 40px; } |
|
368 |
+@media (max-width: 900px) { .vd-cols { grid-template-columns: 1fr; gap: 0; } } |
| 253 |
369 |
|
| 254 |
|
−.gallery { border: 2px solid var(--ink); border-radius: var(--r-card); overflow: hidden; background: var(--surface); } |
| 255 |
|
−.gallery .main { aspect-ratio: 4 / 3; background: var(--surface-2); } |
|
370 |
+.gallery { border: 0; border-radius: 0; overflow: visible; background: transparent; } |
|
371 |
+.gallery .main { |
|
372 |
+ aspect-ratio: 4 / 3; background: var(--surface-2); position: relative; |
|
373 |
+ border-radius: 12px; overflow: hidden; |
|
374 |
+} |
|
375 |
+.gallery .main::after { |
|
376 |
+ content: ""; position: absolute; inset: 0; border-radius: 12px; |
|
377 |
+ box-shadow: inset 0 0 0 1px rgba(20, 24, 20, 0.12); pointer-events: none; |
|
378 |
+} |
| 256 |
379 |
.gallery .main img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; } |
| 257 |
380 |
.gallery .thumbs { |
| 258 |
|
− display: flex; gap: 6px; padding: 8px; overflow-x: auto; border-top: 2px solid var(--ink); |
| 259 |
|
− background: var(--surface-2); |
|
381 |
+ display: flex; gap: 8px; padding: 10px 0 0; overflow-x: auto; |
|
382 |
+ border-top: 0; background: transparent; |
| 260 |
383 |
} |
| 261 |
384 |
.gallery .thumbs img { |
| 262 |
|
− width: 84px; height: 60px; object-fit: cover; border-radius: 4px; |
| 263 |
|
− cursor: pointer; border: 2px solid transparent; flex: 0 0 auto; |
|
385 |
+ width: 84px; height: 60px; object-fit: cover; border-radius: 6px; |
|
386 |
+ cursor: pointer; flex: 0 0 auto; opacity: 0.55; |
|
387 |
+ border: 0; outline: 2px solid transparent; outline-offset: -2px; |
|
388 |
+ transition: opacity 0.15s ease; |
| 264 |
389 |
} |
| 265 |
|
−.gallery .thumbs img.sel { border-color: var(--accent); } |
|
390 |
+.gallery .thumbs img:hover { opacity: 0.85; } |
|
391 |
+.gallery .thumbs img.sel { opacity: 1; outline-color: var(--accent); } |
| 266 |
392 |
|
|
393 |
+/* panneaux → sections à filet (plus de boîtes ombrées) */ |
| 267 |
394 |
.panel { |
| 268 |
|
− background: var(--surface); border: 2px solid var(--ink); |
| 269 |
|
− border-radius: var(--r-card); box-shadow: var(--shadow-off-soft); |
| 270 |
|
− padding: 18px 20px; margin-bottom: 18px; |
|
395 |
+ background: transparent; border: 0; border-radius: 0; box-shadow: none; |
|
396 |
+ border-top: 2px solid var(--ink); |
|
397 |
+ padding: 14px 0 6px; margin-bottom: 30px; |
|
398 |
+} |
|
399 |
+.panel h3 { |
|
400 |
+ font-family: var(--font-mono); font-size: 11px; font-weight: 700; |
|
401 |
+ text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink); |
|
402 |
+ margin-bottom: 14px; display: flex; align-items: center; gap: 8px; |
| 271 |
403 |
} |
| 272 |
|
−.panel h3 { font-size: 15px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } |
| 273 |
404 |
.spec-table { width: 100%; border-collapse: collapse; font-size: 14px; } |
| 274 |
|
−.spec-table td { padding: 7px 0; border-bottom: 1px dashed var(--line); } |
| 275 |
|
−.spec-table td:first-child { color: var(--ink-3); font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; } |
|
405 |
+.spec-table td { padding: 8px 0; border-bottom: 1px solid var(--line); } |
|
406 |
+.spec-table td:first-child { color: var(--ink-3); font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; } |
| 276 |
407 |
.spec-table td:last-child { text-align: right; font-weight: 600; } |
| 277 |
408 |
.spec-table tr:last-child td { border-bottom: none; } |
| 278 |
409 |
|
| 280 |
411 |
display: block; text-align: center; font-family: var(--font-display); |
| 281 |
412 |
font-weight: 700; font-size: 16px; background: var(--accent); color: var(--on-accent); |
| 282 |
413 |
border: 2px solid var(--ink); border-radius: var(--r-ctl); |
| 283 |
|
− padding: 13px 18px; margin-top: 4px; |
|
414 |
+ padding: 13px 18px; margin-top: 12px; |
| 284 |
415 |
transition: transform 0.12s ease, box-shadow 0.12s ease; |
| 285 |
416 |
} |
| 286 |
417 |
.cta-source:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); } |
| 287 |
|
−.cta-note { font-size: 11.5px; color: var(--ink-3); text-align: center; margin-top: 8px; font-family: var(--font-mono); } |
|
418 |
+.cta-note { font-size: 11px; color: var(--ink-3); text-align: center; margin-top: 8px; font-family: var(--font-mono); } |
| 288 |
419 |
|
| 289 |
|
−.desc { white-space: pre-line; color: var(--ink-2); font-size: 14.5px; } |
| 290 |
|
−.feat-list { |
| 291 |
|
− display: flex; flex-wrap: wrap; gap: 6px; max-height: 340px; overflow-y: auto; |
| 292 |
|
−} |
|
420 |
+.desc { white-space: pre-line; color: var(--ink-2); font-size: 14.5px; max-width: 68ch; } |
|
421 |
+.feat-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 340px; overflow-y: auto; } |
| 293 |
422 |
.price-history { font-size: 13px; } |
| 294 |
|
−.price-history .row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--line); } |
|
423 |
+.price-history .row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--line); } |
|
424 |
+.price-history .row:last-child { border-bottom: 0; } |
| 295 |
425 |
.price-history .down { color: var(--good); font-weight: 700; } |
| 296 |
426 |
.price-history .up { color: var(--danger); font-weight: 700; } |
| 297 |
427 |
|
| 298 |
428 |
/* ================= Sections / pages annexes ================= */ |
| 299 |
429 |
.page { padding: 40px 0 70px; } |
| 300 |
|
−.page h1 { font-size: clamp(26px, 4vw, 40px); margin-bottom: 8px; } |
|
430 |
+.page h1 { font-size: clamp(28px, 4.4vw, 46px); letter-spacing: -0.04em; margin-bottom: 10px; } |
| 301 |
431 |
.page .lead { color: var(--ink-2); max-width: 640px; margin-bottom: 28px; } |
| 302 |
432 |
|
| 303 |
|
−.src-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } |
|
433 |
+/* sources : index éditorial à filets */ |
|
434 |
+.src-grid { display: grid; gap: 0 32px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } |
| 304 |
435 |
.src-card { |
| 305 |
|
− background: var(--surface); border: 2px solid var(--ink); border-radius: var(--r-card); |
| 306 |
|
− padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; |
| 307 |
|
− transition: transform 0.14s ease, box-shadow 0.14s ease; box-shadow: var(--shadow-flat); |
| 308 |
|
−} |
| 309 |
|
−.src-card:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-off); } |
| 310 |
|
−.src-card h3 { font-size: 16px; } |
|
436 |
+ background: transparent; border: 0; border-radius: 0; box-shadow: none; |
|
437 |
+ border-top: 1.5px solid var(--ink); |
|
438 |
+ padding: 14px 0 18px; display: flex; flex-direction: column; gap: 6px; |
|
439 |
+ transition: none; |
|
440 |
+} |
|
441 |
+.src-card:hover { transform: none; box-shadow: none; } |
|
442 |
+.src-card h3 { |
|
443 |
+ font-size: 16px; letter-spacing: -0.01em; |
|
444 |
+ text-decoration: underline transparent; text-decoration-thickness: 2px; |
|
445 |
+ text-underline-offset: 3px; transition: text-decoration-color 0.18s ease; |
|
446 |
+} |
|
447 |
+.src-card:hover h3 { text-decoration-color: var(--accent); } |
| 311 |
448 |
.src-card .meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); } |
| 312 |
|
−.src-card .n { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--accent-deep); } |
|
449 |
+.src-card .n { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--accent-deep); letter-spacing: -0.02em; } |
| 313 |
450 |
|
| 314 |
|
−.stat-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 30px; } |
|
451 |
+/* stats : tuiles → colonnes de chiffres à filet */ |
|
452 |
+.stat-grid { display: grid; gap: 0 28px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 34px; } |
| 315 |
453 |
.stat-tile { |
| 316 |
|
− background: var(--surface); border: 2px solid var(--ink); border-radius: var(--r-card); |
| 317 |
|
− padding: 18px; box-shadow: var(--shadow-off-soft); |
|
454 |
+ background: transparent; border: 0; border-radius: 0; box-shadow: none; |
|
455 |
+ border-top: 2.5px solid var(--ink); padding: 12px 0 16px; |
| 318 |
456 |
} |
| 319 |
|
−.stat-tile b { display: block; font-family: var(--font-display); font-size: 30px; letter-spacing: -0.02em; } |
| 320 |
|
−.stat-tile span { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); } |
|
457 |
+.stat-tile b { |
|
458 |
+ display: block; font-family: var(--font-display); font-weight: 700; |
|
459 |
+ font-size: clamp(30px, 3.2vw, 42px); letter-spacing: -0.03em; |
|
460 |
+} |
|
461 |
+.stat-tile span { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); } |
|
462 |
+.stat-tile.hero-tile { border-top-color: var(--accent); } |
|
463 |
+.stat-tile.hero-tile b { color: var(--accent-deep); } |
| 321 |
464 |
|
| 322 |
465 |
.bar-row { display: flex; align-items: center; gap: 10px; margin: 7px 0; font-size: 13.5px; } |
| 323 |
466 |
.bar-row .lbl { width: 170px; flex: 0 0 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } |
| 324 |
|
−.bar-row .bar { height: 16px; background: var(--accent); border: 1.5px solid var(--ink); border-radius: 3px; min-width: 2px; } |
|
467 |
+.bar-row .bar { height: 14px; background: var(--accent); border: 0; border-radius: 2px; min-width: 2px; } |
| 325 |
468 |
.bar-row .val { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); } |
| 326 |
469 |
|
| 327 |
470 |
/* ================= Graphiques (Charts.tsx) ================= */ |
| 328 |
471 |
.stats-head { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; } |
| 329 |
472 |
.pdf-btn { margin-left: auto; background: var(--accent); border-color: var(--ink); font-size: 15px; } |
| 330 |
473 |
.pdf-btn:hover { box-shadow: 4px 4px 0 var(--ink); } |
| 331 |
|
−.stat-tile.hero-tile b { color: var(--accent-deep); } |
| 332 |
474 |
|
| 333 |
475 |
.chart-wrap { position: relative; } |
| 334 |
476 |
.chart { width: 100%; height: auto; display: block; } |
| 367 |
509 |
} |
| 368 |
510 |
.chart-data th { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; color: var(--ink-3); } |
| 369 |
511 |
|
| 370 |
|
−/* ================= Cartes véhicules — raffinements ================= */ |
| 371 |
|
−.vcard .photo img { transition: transform 0.35s ease; } |
| 372 |
|
−.vcard:hover .photo img { transform: scale(1.04); } |
| 373 |
|
− |
| 374 |
512 |
/* ================= Adaptatif téléphone ================= */ |
| 375 |
513 |
@media (max-width: 640px) { |
| 376 |
|
− .hero { padding: 30px 0 4px; } |
|
514 |
+ .hero { padding: 32px 0 4px; } |
| 377 |
515 |
.hero p.sub { font-size: 15px; } |
| 378 |
|
− .hero-stats { gap: 18px; margin-top: 16px; } |
| 379 |
|
− .hstat b { font-size: 21px; } |
| 380 |
|
− |
| 381 |
|
− /* filtres : 2 colonnes compactes, recherche et actions pleine largeur */ |
| 382 |
|
− .filters { |
| 383 |
|
− grid-template-columns: repeat(2, minmax(0, 1fr)); |
| 384 |
|
− padding: 12px; gap: 8px; |
| 385 |
|
− box-shadow: 4px 4px 0 var(--ink); |
| 386 |
|
− } |
| 387 |
|
− .f-actions { grid-column: 1 / -1; } |
| 388 |
|
− .f-actions .btn { width: 100%; } |
|
516 |
+ .hero-stats { margin-top: 22px; } |
|
517 |
+ .hstat { padding: 10px 10px 0 0; font-size: 9px; letter-spacing: 0.07em; } |
|
518 |
+ .hstat + .hstat { padding-left: 12px; } |
|
519 |
+ .hstat b { font-size: 22px; } |
|
520 |
+ |
|
521 |
+ /* pupitre : 2 colonnes, recherche pleine largeur */ |
|
522 |
+ .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 26px; } |
|
523 |
+ .f-field { margin-right: 12px; padding-right: 12px; } |
|
524 |
+ .f-field:nth-child(even):not(.full) { margin-right: 0; padding-right: 0; } |
|
525 |
+ .f-field:nth-child(even):not(.full)::before { display: none; } |
|
526 |
+ .filters .full input { font-size: 18px; min-height: 48px; } |
|
527 |
+ .f-actions { grid-column: 1 / -1; justify-content: flex-start; padding: 8px 0; } |
| 389 |
528 |
.f-field select, .f-field input { font-size: 16px; } /* évite le zoom iOS */ |
| 390 |
529 |
|
| 391 |
|
− .result-bar { gap: 8px; margin: 16px 0 12px; } |
| 392 |
|
− .result-bar h2 { font-size: 17px; } |
|
530 |
+ .result-bar { gap: 8px; margin: 22px 0 16px; } |
|
531 |
+ .result-bar .count { font-size: 30px; } |
| 393 |
532 |
.sort-box { margin-left: 0; width: 100%; } |
| 394 |
533 |
.sort-box select { flex: 1; } |
| 395 |
534 |
|
| 396 |
|
− .vgrid { gap: 14px; grid-template-columns: 1fr; } |
| 397 |
|
− .vcard:hover { transform: none; box-shadow: var(--shadow-flat); } |
|
535 |
+ .vgrid { gap: 26px; grid-template-columns: 1fr; } |
|
536 |
+ .vcard:hover .photo img { transform: none; } |
|
537 |
+ .vcard h3 { font-size: 16.5px; } |
| 398 |
538 |
|
| 399 |
539 |
/* fiche véhicule : entête et prix empilés */ |
| 400 |
540 |
.vdetail { padding: 20px 0 40px; } |
| 401 |
|
− .vd-head { flex-direction: column; gap: 8px; } |
| 402 |
|
− .vd-head h1 { font-size: 23px; } |
|
541 |
+ .vd-head { flex-direction: column; align-items: flex-start; gap: 10px; padding-bottom: 16px; } |
|
542 |
+ .vd-head h1 { font-size: 26px; } |
| 403 |
543 |
.vd-price { margin-left: 0; text-align: left; } |
| 404 |
|
− .vd-price .p { font-size: 28px; } |
|
544 |
+ .vd-price .p { font-size: 32px; } |
| 405 |
545 |
.gallery .thumbs img { width: 68px; height: 50px; } |
| 406 |
|
− .panel { padding: 14px 14px; } |
|
546 |
+ .panel { margin-bottom: 24px; } |
| 407 |
547 |
.spec-table td:last-child { word-break: break-all; } /* VIN longs */ |
| 408 |
548 |
.desc { font-size: 14px; } |
| 409 |
549 |
.feat-list { max-height: 260px; } |
| 411 |
551 |
/* stats : bouton PDF pleine largeur, tuiles 2 colonnes */ |
| 412 |
552 |
.stats-head { flex-direction: column; align-items: stretch; } |
| 413 |
553 |
.pdf-btn { margin-left: 0; text-align: center; } |
| 414 |
|
− .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } |
| 415 |
|
− .stat-tile { padding: 13px; } |
| 416 |
|
− .stat-tile b { font-size: 22px; } |
|
554 |
+ .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; } |
|
555 |
+ .stat-tile { padding: 10px 0 12px; } |
|
556 |
+ .stat-tile b { font-size: 24px; } |
| 417 |
557 |
|
| 418 |
558 |
/* graphiques : défilement horizontal plutôt que texte illisible */ |
| 419 |
559 |
.chart-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } |
| 427 |
567 |
|
| 428 |
568 |
@media (max-width: 400px) { |
| 429 |
569 |
.brand { font-size: 22px; } |
| 430 |
|
− .nav a { padding: 7px 9px; font-size: 12.5px; } |
| 431 |
570 |
.header-inner { gap: 8px; } |
| 432 |
571 |
} |
| 433 |
572 |
|
| 438 |
577 |
.skeleton { |
| 439 |
578 |
background: linear-gradient(100deg, var(--surface-2) 40%, #fff 50%, var(--surface-2) 60%); |
| 440 |
579 |
background-size: 200% 100%; animation: sk 1.4s infinite; |
| 441 |
|
− border-radius: var(--r-card); border: 2px solid var(--line); |
|
580 |
+ border-radius: 10px; border: 0; |
| 442 |
581 |
} |
| 443 |
582 |
@keyframes sk { from { background-position: 130% 0; } to { background-position: -30% 0; } } |
| 444 |
583 |
|
| 446 |
585 |
.login-btn { |
| 447 |
586 |
display: inline-flex; align-items: center; gap: 8px; |
| 448 |
587 |
font-family: var(--font-display); font-weight: 600; font-size: 13.5px; |
| 449 |
|
− border: 2px solid var(--ink); border-radius: 999px; |
|
588 |
+ border: 1.5px solid var(--ink); border-radius: 999px; |
| 450 |
589 |
background: var(--surface); color: var(--ink); |
| 451 |
590 |
padding: 8px 15px; min-height: 44px; flex: none; |
| 452 |
591 |
transition: transform 0.12s ease, box-shadow 0.12s ease; |
| 455 |
594 |
.login-ka { |
| 456 |
595 |
display: inline-flex; align-items: center; justify-content: center; |
| 457 |
596 |
width: 18px; height: 16px; border-radius: 4px; |
| 458 |
|
− background: var(--ink); color: #d9f26b; /* lime KA ID — identité du groupe */ |
|
597 |
+ background: var(--accent); color: #101310; /* pastille KA ID aux couleurs du site */ |
| 459 |
598 |
font: 700 9px/1 var(--font-display); letter-spacing: -0.02em; |
| 460 |
599 |
transform: rotate(-2deg); |
| 461 |
600 |
} |
| 462 |
601 |
.account { position: relative; flex: none; } |
| 463 |
602 |
.account-btn { |
| 464 |
603 |
width: 44px; height: 44px; padding: 0; cursor: pointer; |
| 465 |
|
− border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; |
|
604 |
+ border: 1.5px solid var(--ink); border-radius: 999px; overflow: hidden; |
| 466 |
605 |
background: var(--surface); display: flex; align-items: center; justify-content: center; |
| 467 |
606 |
transition: transform 0.12s ease, box-shadow 0.12s ease; |
| 468 |
607 |
} |
| 476 |
615 |
.account-backdrop { position: fixed; inset: 0; z-index: var(--z-overlay, 800); } |
| 477 |
616 |
.account-menu { |
| 478 |
617 |
position: absolute; right: 0; top: calc(100% + 10px); z-index: var(--z-modal, 900); |
| 479 |
|
− min-width: 250px; background: var(--surface); |
|
618 |
+ min-width: 250px; background: var(--surface); color: var(--ink); |
| 480 |
619 |
border: 2px solid var(--ink); border-radius: var(--r-card); |
| 481 |
620 |
box-shadow: 6px 6px 0 rgba(23, 24, 28, 0.16); overflow: hidden; |
| 482 |
621 |
} |
| 546 |
685 |
|
| 547 |
686 |
.profil-grid { |
| 548 |
687 |
display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); |
| 549 |
|
− gap: 12px; margin-top: 30px; max-width: 760px; |
|
688 |
+ gap: 0 24px; margin-top: 30px; max-width: 760px; |
| 550 |
689 |
} |
| 551 |
690 |
.pg-item { |
| 552 |
|
− background: var(--surface); border: 2px solid var(--ink); |
| 553 |
|
− border-radius: var(--r-card); padding: 14px 16px; |
| 554 |
|
− display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow-flat); |
|
691 |
+ background: transparent; border: 0; border-top: 1.5px solid var(--ink); |
|
692 |
+ border-radius: 0; padding: 12px 0 16px; |
|
693 |
+ display: flex; flex-direction: column; gap: 4px; box-shadow: none; |
| 555 |
694 |
} |
| 556 |
695 |
.pg-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-3); } |
| 557 |
696 |
.pg-value { font-weight: 600; font-size: 14.5px; word-break: break-word; } |
| 570 |
709 |
/* — « Mon profil Groupe KA » (lu du hub groupe-ka.com, lecture seule) — */ |
| 571 |
710 |
.hub-profile { |
| 572 |
711 |
margin-top: 30px; max-width: 760px; |
| 573 |
|
− background: var(--surface); border: 2px solid var(--ink); |
| 574 |
|
− border-radius: var(--r-card); padding: 20px 22px 18px; |
| 575 |
|
− box-shadow: var(--shadow-flat); |
|
712 |
+ background: transparent; border: 0; border-top: 2px solid var(--ink); |
|
713 |
+ border-radius: 0; padding: 16px 0 0; box-shadow: none; |
| 576 |
714 |
} |
| 577 |
715 |
.hub-profile h3 { font-size: 18px; margin-bottom: 10px; } |
| 578 |
716 |
.hub-bio { color: var(--ink-2); font-size: 14px; line-height: 1.55; max-width: 620px; margin-bottom: 12px; } |
| 590 |
728 |
.profil-note a { text-decoration: underline; text-underline-offset: 3px; } |
| 591 |
729 |
.profil-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; } |
| 592 |
730 |
|
| 593 |
|
−/* ================= Footer ================= |
| 594 |
|
− Le footer est désormais le KaFooter commun (ka/KaFooter.tsx + .ka-footer |
| 595 |
|
− dans ka/tokens.css). Bordure accent au-dessus, signature Auto-Ka. */ |
|
731 |
+/* ================= Footer ================= */ |
| 596 |
732 |
.ka-footer { border-top: 3px solid var(--accent); } |
| 597 |
733 |
|
| 598 |
734 |
/* ================= Page /contact ================= */ |
| 599 |
735 |
.contact-grid { |
| 600 |
|
− display: grid; gap: 14px; margin: 22px 0 6px; |
|
736 |
+ display: grid; gap: 0 32px; margin: 22px 0 6px; |
| 601 |
737 |
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); max-width: 900px; |
| 602 |
738 |
} |
| 603 |
739 |
.contact-card { |
| 604 |
|
− background: var(--surface); border: 2px solid var(--ink); border-radius: var(--r-card); |
| 605 |
|
− padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; |
| 606 |
|
− box-shadow: var(--shadow-flat); |
| 607 |
|
− transition: transform 0.14s ease, box-shadow 0.14s ease; |
|
740 |
+ background: transparent; border: 0; border-top: 1.5px solid var(--ink); |
|
741 |
+ border-radius: 0; box-shadow: none; |
|
742 |
+ padding: 14px 0 18px; display: flex; flex-direction: column; gap: 6px; |
| 608 |
743 |
} |
| 609 |
|
−.contact-card:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-off); } |
|
744 |
+.contact-card:hover { transform: none; box-shadow: none; } |
| 610 |
745 |
.contact-card a.mail { |
| 611 |
746 |
font-family: var(--font-mono); font-weight: 700; font-size: 14px; |
| 612 |
747 |
color: var(--accent-deep); word-break: break-all; |
| 615 |
750 |
.contact-card a.mail:hover { text-decoration: underline; text-underline-offset: 3px; } |
| 616 |
751 |
.contact-card .role { font-size: 13px; color: var(--ink-2); } |
| 617 |
752 |
.contact-note { |
| 618 |
|
− max-width: 720px; margin: 24px 0; padding: 14px 18px; |
| 619 |
|
− background: var(--accent-soft); border: 2px solid var(--ink); |
| 620 |
|
− border-left-width: 6px; border-radius: var(--r-card); font-size: 14px; |
|
753 |
+ max-width: 720px; margin: 24px 0; padding: 14px 0 14px 18px; |
|
754 |
+ background: transparent; border: 0; border-left: 3px solid var(--accent); |
|
755 |
+ border-radius: 0; font-size: 14px; |
| 621 |
756 |
} |
| 622 |
757 |
.contact-sites { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; max-width: 900px; } |
| 623 |
758 |
.contact-sites a.spec-chip { text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; } |
| 624 |
759 |
.contact-sites a.spec-chip:hover { border-color: var(--accent); color: var(--ink); } |
| 625 |
760 |
.contact-hub { margin-top: 26px; } |
| 626 |
761 |
|
| 627 |
|
−/* --- blocs SEO (pages programmatiques rendues serveur + React) --------------- */ |
|
762 |
+/* --- blocs SEO (pages programmatiques rendues serveur + React) ------------- */ |
| 628 |
763 |
.breadcrumbs { font-size: 12px; color: var(--ink-3); margin: 14px 0 4px; } |
| 629 |
764 |
.breadcrumbs a { text-decoration: underline; } |
| 630 |
|
−.seo-block { margin: 30px 0; } |
| 631 |
|
−.seo-block h2 { font-size: 17px; margin: 0 0 12px; } |
|
765 |
+.seo-block { margin: 34px 0; border-top: 1.5px solid var(--ink); padding-top: 14px; } |
|
766 |
+.seo-block h2 { |
|
767 |
+ font-family: var(--font-mono); font-size: 11px; font-weight: 700; |
|
768 |
+ text-transform: uppercase; letter-spacing: 0.14em; margin: 0 0 12px; |
|
769 |
+} |
| 632 |
770 |
.seo-links { display: flex; flex-wrap: wrap; gap: 8px; } |
| 633 |
771 |
.seo-links a.spec-chip { text-decoration: none; } |
| 634 |
772 |
.seo-links a.spec-chip:hover { border-color: var(--accent); } |
| 636 |
774 |
@media (max-width: 800px) { .src-list { columns: 1; } } |
| 637 |
775 |
|
| 638 |
776 |
/* ========================================================================== |
| 639 |
|
− Menu déroulant mobile (hamburger standard KA) + socle mobile — 2026-08-19 |
| 640 |
|
− La nav en bande scroll-x est remplacée sous 760 px par le hamburger. |
|
777 |
+ Menu mobile plein écran (KA Nav v2) — version encre du masthead |
| 641 |
778 |
========================================================================== */ |
| 642 |
779 |
.menu-btn { |
| 643 |
780 |
display: none; position: relative; z-index: 60; |
| 644 |
781 |
width: 44px; height: 44px; margin-left: auto; flex: none; |
| 645 |
|
− border: 1.5px solid var(--ink); border-radius: var(--r-ctl); |
| 646 |
|
− background: var(--surface); cursor: pointer; padding: 0; |
|
782 |
+ border: 1.5px solid var(--mast-line); border-radius: var(--r-ctl); |
|
783 |
+ background: transparent; cursor: pointer; padding: 0; |
| 647 |
784 |
flex-direction: column; align-items: center; justify-content: center; gap: 5px; |
| 648 |
|
− box-shadow: 3px 3px 0 rgba(23, 24, 28, 0.15); |
| 649 |
|
− transition: box-shadow 0.15s ease, transform 0.15s ease; |
|
785 |
+ transition: border-color 0.15s ease, transform 0.15s ease; |
| 650 |
786 |
} |
| 651 |
|
−.menu-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(23, 24, 28, 0.15); } |
|
787 |
+.menu-btn:active { transform: scale(0.94); } |
| 652 |
788 |
.menu-btn span { |
| 653 |
|
− display: block; width: 18px; height: 2px; background: var(--ink); |
|
789 |
+ display: block; width: 18px; height: 2px; background: var(--mast-fg); |
| 654 |
790 |
border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease; |
| 655 |
791 |
} |
| 656 |
792 |
.menu-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } |
| 657 |
793 |
.menu-btn.open span:nth-child(2) { opacity: 0; } |
| 658 |
794 |
.menu-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } |
| 659 |
795 |
|
| 660 |
|
−/* KA Nav v2 (2026-08-25) : panneau PLEIN ECRAN fixed inset:0 - visible peu |
| 661 |
|
− importe le scroll (l'ancien dropdown absolute 480px clippait/se coupait). */ |
|
796 |
+/* panneau PLEIN ÉCRAN fixed inset:0 — encre, typographie une de journal */ |
| 662 |
797 |
.mobile-menu { |
| 663 |
798 |
display: none; position: fixed; inset: 0; |
| 664 |
|
− background: var(--paper); |
| 665 |
|
− padding: 76px 16px calc(24px + env(safe-area-inset-bottom)); |
|
799 |
+ background: var(--mast); color: var(--mast-fg); |
|
800 |
+ padding: 84px 20px calc(24px + env(safe-area-inset-bottom)); |
| 666 |
801 |
overflow-y: auto; overscroll-behavior: contain; |
| 667 |
802 |
} |
| 668 |
803 |
.mobile-menu.open { display: block; animation: mm-in 0.16s ease; } |
| 669 |
804 |
@keyframes mm-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } |
| 670 |
|
−/* burger masque a l'ouverture : la fermeture passe par le X fixe du panneau */ |
| 671 |
805 |
.header.menu-open .menu-btn { visibility: hidden; } |
| 672 |
|
−/* bouton de fermeture du panneau : fixe en haut a droite du viewport */ |
| 673 |
806 |
.mm-close { |
| 674 |
807 |
position: fixed; top: 10px; right: 14px; z-index: 2; |
| 675 |
808 |
width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; |
| 676 |
|
− border: 1.5px solid var(--ink); border-radius: 999px; |
| 677 |
|
− background: var(--ink); color: var(--paper); |
|
809 |
+ border: 1.5px solid var(--mast-line); border-radius: 999px; |
|
810 |
+ background: var(--accent); color: #101310; |
| 678 |
811 |
font-size: 17px; font-weight: 700; line-height: 1; cursor: pointer; padding: 0; |
| 679 |
812 |
} |
| 680 |
|
−/* verrou du scroll d'arriere-plan quand le menu est ouvert (CSS pur) */ |
| 681 |
813 |
html:has(.mobile-menu.open) { overflow: hidden; } |
| 682 |
814 |
.mm-link { |
| 683 |
|
− display: flex; align-items: center; gap: 12px; |
| 684 |
|
− padding: 15px 10px; min-height: 52px; |
| 685 |
|
− font-family: var(--font-display); font-weight: 700; font-size: 19px; |
| 686 |
|
− letter-spacing: -0.02em; border-bottom: 1.5px dashed var(--line); |
|
815 |
+ display: flex; align-items: center; gap: 14px; |
|
816 |
+ padding: 16px 6px; min-height: 56px; color: var(--mast-fg); |
|
817 |
+ font-family: var(--font-display); font-weight: 700; font-size: 24px; |
|
818 |
+ letter-spacing: -0.03em; border-bottom: 1px solid var(--mast-line); |
| 687 |
819 |
opacity: 0; transform: translateY(-8px); |
| 688 |
820 |
transition: opacity 0.25s ease, transform 0.25s ease; |
| 689 |
821 |
} |
| 690 |
822 |
.mobile-menu.open .mm-link { opacity: 1; transform: translateY(0); } |
| 691 |
|
−.mm-link.active { color: var(--accent-deep); } |
|
823 |
+.mm-link.active { color: var(--accent); } |
| 692 |
824 |
.mm-link.active .mm-arrow { opacity: 1; } |
| 693 |
825 |
.mm-ico { width: 26px; text-align: center; font-size: 17px; } |
| 694 |
|
−.mm-arrow { margin-left: auto; opacity: 0.25; transition: opacity 0.15s ease; } |
| 695 |
|
−.mm-link:active { background: var(--accent-soft); border-radius: var(--r-ctl); } |
| 696 |
|
−.mm-badge { display: flex; padding: 12px 10px 0; } |
|
826 |
+.mm-arrow { margin-left: auto; opacity: 0.25; transition: opacity 0.15s ease; color: var(--accent); } |
|
827 |
+.mm-link:active { background: rgba(255, 90, 42, 0.12); border-radius: var(--r-ctl); } |
|
828 |
+.mm-badge { display: flex; padding: 16px 6px 0; } |
|
829 |
+.mm-badge .gk-badge { background: transparent; border-color: var(--mast-line); color: var(--mast-dim); } |
|
830 |
+.mm-badge .gk-badge b { color: var(--mast-fg); } |
| 697 |
831 |
.mm-foot { |
| 698 |
|
− padding: 12px 10px 4px; font-family: var(--font-mono); |
| 699 |
|
− font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.04em; |
|
832 |
+ padding: 14px 6px 4px; font-family: var(--font-mono); |
|
833 |
+ font-size: 10.5px; color: var(--mast-dim); letter-spacing: 0.04em; |
| 700 |
834 |
} |
| 701 |
|
−/* Backdrop rendu en FRÈRE du header ; .menu-open remonte le header |
| 702 |
|
− au-dessus du backdrop pour que le panneau reste visible. */ |
| 703 |
835 |
.mm-backdrop { |
| 704 |
836 |
position: fixed; inset: 0; z-index: var(--z-overlay, 800); |
| 705 |
|
− background: rgba(23, 24, 28, 0.35); backdrop-filter: blur(2px); |
|
837 |
+ background: rgba(16, 19, 16, 0.5); backdrop-filter: blur(2px); |
| 706 |
838 |
} |
| 707 |
839 |
.header.menu-open { z-index: var(--z-modal, 900); } |
| 708 |
840 |
@media (max-width: 760px) { |
| 711 |
843 |
} |
| 712 |
844 |
|
| 713 |
845 |
/* Anti-zoom iOS généralisé : ≥16 px sur tous les champs et selects en |
| 714 |
|
− contexte tactile (couvre #f-sort et les 9 selects de la page d'accueil ; |
| 715 |
|
− renfort explicite du filet de ka/tokens.css). */ |
|
846 |
+ contexte tactile (renfort explicite du filet de ka/tokens.css). */ |
| 716 |
847 |
@media (hover: none) and (pointer: coarse) { |
| 717 |
848 |
select, |
| 718 |
849 |
input[type="text"], |
| 730 |
861 |
|
| 731 |
862 |
/* — badge de positionnement prix (en-tête, sous le prix) — */ |
| 732 |
863 |
.market-badge { |
| 733 |
|
− display: inline-block; margin-top: 8px; padding: 5px 10px; |
| 734 |
|
− border: 2px solid var(--ink); border-radius: 999px; |
| 735 |
|
− font-family: var(--font-mono); font-size: 12px; font-weight: 700; |
| 736 |
|
− background: var(--surface); |
|
864 |
+ display: inline-block; margin-top: 10px; padding: 5px 12px; |
|
865 |
+ border: 1.5px solid var(--ink); border-radius: 999px; |
|
866 |
+ font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; |
|
867 |
+ letter-spacing: 0.04em; background: var(--surface); |
| 737 |
868 |
} |
| 738 |
869 |
.market-badge .delta { font-weight: 500; } |
| 739 |
870 |
.market-badge.excellent { background: var(--good); color: #fff; border-color: var(--good); } |
| 740 |
|
−.market-badge.good { background: var(--good-soft); color: var(--good); } |
|
871 |
+.market-badge.good { background: var(--good-soft); color: var(--good); border-color: var(--good); } |
| 741 |
872 |
.market-badge.fair { background: var(--surface-2); color: var(--ink); } |
| 742 |
|
−.market-badge.high { background: var(--accent-soft); color: var(--accent-deep); } |
|
873 |
+.market-badge.high { background: var(--accent-soft); color: var(--accent-deep); border-color: var(--accent-deep); } |
| 743 |
874 |
|
| 744 |
875 |
/* — compteur photos sur la galerie — */ |
| 745 |
876 |
.gal-count { |
| 746 |
|
− position: absolute; left: 14px; bottom: 14px; padding: 5px 10px; |
| 747 |
|
− border: 2px solid var(--ink); border-radius: 999px; cursor: zoom-in; |
| 748 |
|
− background: color-mix(in srgb, var(--surface) 88%, transparent); |
| 749 |
|
− font-size: 12px; font-weight: 700; |
|
877 |
+ position: absolute; left: 14px; bottom: 14px; padding: 5px 11px; |
|
878 |
+ border: 0; border-radius: 999px; cursor: zoom-in; |
|
879 |
+ background: rgba(16, 19, 16, 0.72); color: var(--paper); |
|
880 |
+ font-size: 12px; font-weight: 700; backdrop-filter: blur(3px); |
| 750 |
881 |
} |
| 751 |
882 |
|
| 752 |
883 |
/* — lightbox plein écran — */ |
| 753 |
884 |
.lightbox { |
| 754 |
|
− position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; |
| 755 |
|
− background: rgba(12, 12, 10, 0.92); padding: 52px 16px; |
|
885 |
+ position: fixed; inset: 0; z-index: var(--z-modal, 900); display: grid; place-items: center; |
|
886 |
+ background: rgba(12, 12, 10, 0.94); padding: 52px 16px; |
| 756 |
887 |
} |
| 757 |
888 |
.lightbox img { |
| 758 |
889 |
max-width: min(1200px, 96vw); max-height: calc(100vh - 104px); |
| 782 |
913 |
/* — analyse du marché — */ |
| 783 |
914 |
.mkt-stats { |
| 784 |
915 |
display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); |
| 785 |
|
− gap: 10px 14px; margin-bottom: 14px; |
|
916 |
+ gap: 10px 14px; margin-bottom: 16px; |
| 786 |
917 |
} |
| 787 |
918 |
.mkt-stats .lbl { |
| 788 |
|
− display: block; font-family: var(--font-mono); font-size: 11px; |
|
919 |
+ display: block; font-family: var(--font-mono); font-size: 10.5px; |
| 789 |
920 |
text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); |
| 790 |
921 |
} |
| 791 |
|
−.mkt-stats b { font-size: 15px; } |
|
922 |
+.mkt-stats b { font-size: 17px; font-family: var(--font-display); letter-spacing: -0.01em; } |
| 792 |
923 |
.pos-bar { |
| 793 |
|
− position: relative; height: 14px; border: 2px solid var(--ink); |
|
924 |
+ position: relative; height: 12px; border: 1.5px solid var(--ink); |
| 794 |
925 |
border-radius: 999px; overflow: visible; |
| 795 |
926 |
background: linear-gradient(90deg, var(--good) 0%, var(--good-soft) 38%, |
| 796 |
927 |
var(--surface-2) 55%, var(--accent-soft) 78%, var(--accent) 100%); |
| 821 |
952 |
.score-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } |
| 822 |
953 |
.score-ball { |
| 823 |
954 |
flex: none; width: 62px; height: 62px; display: grid; place-items: center; |
| 824 |
|
− border: 3px solid var(--ink); border-radius: 999px; |
|
955 |
+ border: 2.5px solid var(--ink); border-radius: 999px; |
| 825 |
956 |
font-family: var(--font-display); font-size: 24px; font-weight: 700; |
| 826 |
|
− box-shadow: 3px 3px 0 var(--ink); |
| 827 |
957 |
} |
| 828 |
|
−.score-ball.good { background: var(--good-soft); color: var(--good); } |
|
958 |
+.score-ball.good { background: var(--good-soft); color: var(--good); border-color: var(--good); } |
| 829 |
959 |
.score-ball.fair { background: var(--surface-2); } |
| 830 |
|
−.score-ball.high { background: var(--accent-soft); color: var(--accent-deep); } |
|
960 |
+.score-ball.high { background: var(--accent-soft); color: var(--accent-deep); border-color: var(--accent-deep); } |
| 831 |
961 |
.score-note { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; } |
| 832 |
962 |
.score-row { |
| 833 |
963 |
display: grid; grid-template-columns: 1fr 90px 30px; align-items: center; |
| 834 |
964 |
gap: 10px; padding: 5px 0; font-size: 12.5px; |
| 835 |
965 |
} |
| 836 |
966 |
.score-row .bar { |
| 837 |
|
− height: 10px; border: 1.5px solid var(--ink); border-radius: 999px; |
|
967 |
+ height: 8px; border: 0; border-radius: 999px; |
| 838 |
968 |
overflow: hidden; background: var(--surface-2); display: block; |
|
969 |
+ box-shadow: inset 0 0 0 1px var(--line); |
| 839 |
970 |
} |
| 840 |
971 |
.score-row .bar i { display: block; height: 100%; background: var(--accent); } |
| 841 |
972 |
.score-row .val { text-align: right; font-weight: 700; } |
| 844 |
975 |
.offers { display: flex; flex-direction: column; } |
| 845 |
976 |
.offer { |
| 846 |
977 |
display: flex; justify-content: space-between; align-items: baseline; gap: 10px; |
| 847 |
|
− padding: 9px 0; border-bottom: 1px dashed var(--line); |
|
978 |
+ padding: 9px 0; border-bottom: 1px solid var(--line); |
| 848 |
979 |
text-decoration: none; color: var(--ink); font-size: 13.5px; |
| 849 |
980 |
} |
| 850 |
981 |
.offer:last-child { border-bottom: none; } |
| 856 |
987 |
.offer .price em.up { color: var(--danger); } |
| 857 |
988 |
|
| 858 |
989 |
/* — rappels Transports Canada — */ |
| 859 |
|
−.recall-panel .btn.sm { margin-top: 10px; padding: 7px 12px; font-size: 12.5px; } |
| 860 |
|
−.recall { border-bottom: 1px dashed var(--line); padding: 4px 0; } |
|
990 |
+.recall-panel .btn.sm { margin-top: 10px; padding: 7px 12px; font-size: 12.5px; border-width: 1.5px; } |
|
991 |
+.recall { border-bottom: 1px solid var(--line); padding: 4px 0; } |
| 861 |
992 |
.recall:last-child { border-bottom: none; } |
| 862 |
993 |
.recall summary { |
| 863 |
994 |
cursor: pointer; font-size: 13.5px; font-weight: 600; padding: 5px 0; |
| 869 |
1000 |
|
| 870 |
1001 |
/* — carte (OpenStreetMap) — */ |
| 871 |
1002 |
.map-embed { |
| 872 |
|
− width: 100%; height: 300px; border: 2px solid var(--ink); |
| 873 |
|
− border-radius: var(--r-card); display: block; background: var(--surface-2); |
|
1003 |
+ width: 100%; height: 300px; border: 0; |
|
1004 |
+ border-radius: 12px; display: block; background: var(--surface-2); |
|
1005 |
+ box-shadow: inset 0 0 0 1px rgba(20, 24, 20, 0.12); |
| 874 |
1006 |
} |
| 875 |
1007 |
|