| 1 | /* ----------------------------------------------------------------------------- |
1 | /* ----------------------------------------------------------------------------- |
| 2 | Lou-Ka — Agrégateur de logements à louer (province de Québec) |
2 | Lou-Ka — Agrégateur de logements à louer (province de Québec) |
| 3 | Auteur : Simon-Pierre Boucher — contact@spboucher.ai |
3 | Auteur : Simon-Pierre Boucher — contact@spboucher.ai |
| 4 | − styles.css : système de design « éditorial sharp » — thème clair |
4 | + styles.css : identité visuelle officielle Lou-Ka |
| 5 | − · Typo display Space Grotesk / texte Inter / micro-étiquettes JetBrains Mono |
5 | + · Palette : marine #0B1330 · bleu vif #2258FF · orange #FF6A00 |
| 6 | − · Signature : bordures encre + ombres décalées (néo-brutalisme raffiné) |
6 | + gris pâle #F2F2F2 · blanc #FFFFFF |
| 7 | − · Accent électrique lime #d9f26b sur encre verte profonde |
7 | + · Typo : Inter (fallback SF Pro / system-ui) |
| |
8 | + · Style : minimaliste chaleureux — coins très arrondis, pill-shaped, |
| |
9 | + ombres douces diffuses, touches « liquid glass » |
| |
10 | + · Baseline : « La porte d'entrée vers votre prochain chez-vous. » |
| 8 | · 100 % adaptatif mobile (PWA installable, safe-areas iOS) |
11 | · 100 % adaptatif mobile (PWA installable, safe-areas iOS) |
| 9 | ----------------------------------------------------------------------------- */ |
12 | ----------------------------------------------------------------------------- */ |
| 10 | :root { |
13 | :root { |
| 11 | − --paper: #f5f3ee; |
14 | + /* palette officielle */ |
| 12 | − --surface: #ffffff; |
15 | + --navy: #0b1330; |
| 13 | − --surface-2: #faf9f5; |
16 | + --blue: #2258ff; |
| 14 | − --ink: #141814; |
17 | + --orange: #ff6a00; |
| 15 | − --ink-2: #4d5551; |
18 | + --grey: #f2f2f2; |
| 16 | − --ink-3: #8b928c; |
19 | + --white: #ffffff; |
| 17 | − --line: rgba(20, 24, 20, 0.14); |
20 | + |
| 18 | − --line-strong: rgba(20, 24, 20, 0.85); |
21 | + /* dérivés (nuances des couleurs officielles) */ |
| 19 | − --green: #1c5c41; |
22 | + --orange-deep: #e55f00; |
| 20 | − --green-deep: #123f2e; |
23 | + --orange-soft: #fff1e6; |
| 21 | − --lime: #d9f26b; |
24 | + --blue-soft: #e9efff; |
| 22 | − --lime-soft: #f0f9d2; |
25 | + --navy-soft: #eef0f6; |
| 23 | − --amber: #e8a33d; |
26 | + |
| 24 | − --amber-soft: #fdf3e2; |
27 | + /* jetons sémantiques */ |
| 25 | − --danger: #b3423a; |
28 | + --paper: var(--white); |
| 26 | − --r-card: 10px; |
29 | + --surface: var(--white); |
| 27 | − --r-ctl: 6px; |
30 | + --surface-2: var(--grey); |
| 28 | − --shadow-flat: 0 1px 2px rgba(20, 24, 20, 0.05); |
31 | + --ink: var(--navy); |
| 29 | − --shadow-off: 6px 6px 0 var(--ink); |
32 | + --ink-2: #3e4560; |
| 30 | − --shadow-off-soft: 8px 8px 0 rgba(20, 24, 20, 0.08); |
33 | + --ink-3: #8a90a5; |
| 31 | − --font-display: "Space Grotesk", system-ui, sans-serif; |
34 | + --line: rgba(11, 19, 48, 0.1); |
| 32 | − --font-body: "Inter", system-ui, sans-serif; |
35 | + --line-strong: rgba(11, 19, 48, 0.16); |
| 33 | − --font-mono: "JetBrains Mono", ui-monospace, monospace; |
36 | + --danger: #d64545; |
| |
37 | + |
| |
38 | + /* alias hérités (compatibilité) */ |
| |
39 | + --green: var(--blue); |
| |
40 | + --green-deep: var(--navy); |
| |
41 | + --lime: var(--orange); |
| |
42 | + --lime-soft: var(--orange-soft); |
| |
43 | + --amber: var(--orange); |
| |
44 | + --amber-soft: var(--orange-soft); |
| |
45 | + |
| |
46 | + /* géométrie : coins très arrondis, contrôles pill */ |
| |
47 | + --r-card: 18px; |
| |
48 | + --r-ctl: 12px; |
| |
49 | + --r-pill: 999px; |
| |
50 | + |
| |
51 | + /* ombres douces et diffuses, jamais dures */ |
| |
52 | + --shadow-flat: 0 1px 3px rgba(11, 19, 48, 0.06); |
| |
53 | + --shadow-off: 0 16px 40px rgba(11, 19, 48, 0.14); |
| |
54 | + --shadow-off-soft: 0 8px 24px rgba(11, 19, 48, 0.08); |
| |
55 | + |
| |
56 | + --font-display: "Inter", "SF Pro Display", system-ui, sans-serif; |
| |
57 | + --font-body: "Inter", "SF Pro Text", system-ui, sans-serif; |
| |
58 | + --font-mono: "Inter", "SF Pro Text", system-ui, sans-serif; |
| 34 | } |
59 | } |
| 35 | |
60 | |
| 36 | * { box-sizing: border-box; } |
61 | * { box-sizing: border-box; } |
| 45 | -webkit-font-smoothing: antialiased; |
70 | -webkit-font-smoothing: antialiased; |
| 46 | padding-bottom: env(safe-area-inset-bottom); |
71 | padding-bottom: env(safe-area-inset-bottom); |
| 47 | } |
72 | } |
| 48 | −/* grain subtil — texture signature */ |
| |
| 49 | −body::before { |
| |
| 50 | − content: ""; |
| |
| 51 | − position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.35; |
| |
| 52 | − background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); |
| |
| 53 | −} |
| |
| 54 | #root { position: relative; z-index: 1; } |
73 | #root { position: relative; z-index: 1; } |
| 55 | |
74 | |
| 56 | −h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.03em; margin: 0; } |
75 | +h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; margin: 0; } |
| 57 | a { color: inherit; text-decoration: none; } |
76 | a { color: inherit; text-decoration: none; } |
| 58 | button { font-family: inherit; } |
77 | button { font-family: inherit; } |
| 59 | img { display: block; } |
78 | img { display: block; } |
| 60 | −::selection { background: var(--lime); color: var(--ink); } |
79 | +::selection { background: var(--orange); color: var(--white); } |
| 61 | |
80 | |
| 62 | .mono { font-family: var(--font-mono); } |
81 | .mono { font-family: var(--font-mono); } |
| |
82 | +/* mot-clé accentué des titres — toujours orange (« chez-vous. ») */ |
| |
83 | +h1 .hl, h2 .hl { color: var(--orange); } |
| 63 | .kicker { |
84 | .kicker { |
| 64 | − font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; |
85 | + font-family: var(--font-body); font-size: 12px; font-weight: 600; |
| 65 | − text-transform: uppercase; letter-spacing: 0.14em; color: var(--green); |
86 | + text-transform: uppercase; letter-spacing: 0.12em; color: var(--blue); |
| 66 | display: inline-flex; align-items: center; gap: 8px; |
87 | display: inline-flex; align-items: center; gap: 8px; |
| 67 | } |
88 | } |
| 68 | −.kicker::before { content: ""; width: 22px; height: 2px; background: var(--green); } |
89 | +.kicker::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--orange); } |
| 69 | |
90 | |
| 70 | .container { max-width: 1240px; margin: 0 auto; padding: 0 24px; } |
91 | .container { max-width: 1240px; margin: 0 auto; padding: 0 24px; } |
| 71 | @media (max-width: 640px) { .container { padding: 0 16px; } } |
92 | @media (max-width: 640px) { .container { padding: 0 16px; } } |
| 73 | /* ================= Header ================= */ |
94 | /* ================= Header ================= */ |
| 74 | .header { |
95 | .header { |
| 75 | position: sticky; top: 0; z-index: 50; |
96 | position: sticky; top: 0; z-index: 50; |
| 76 | − background: rgba(245, 243, 238, 0.88); |
97 | + background: rgba(255, 255, 255, 0.86); |
| 77 | − backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); |
98 | + backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); |
| 78 | − border-bottom: 2px solid var(--ink); |
99 | + border-bottom: 1px solid var(--line); |
| 79 | } |
100 | } |
| 80 | −.header-inner { display: flex; align-items: center; gap: 20px; height: 64px; } |
101 | +.header-inner { display: flex; align-items: center; gap: 20px; height: 66px; } |
| 81 | .brand { |
102 | .brand { |
| 82 | − font-family: var(--font-display); font-weight: 700; font-size: 26px; |
103 | + font-family: var(--font-display); font-weight: 700; font-size: 25px; |
| 83 | − letter-spacing: -0.04em; display: flex; align-items: center; line-height: 1; |
104 | + letter-spacing: -0.03em; display: flex; align-items: center; line-height: 1; |
| 84 | −} |
105 | + color: var(--navy); |
| 85 | −.brand .ka { |
| |
| 86 | − background: var(--ink); color: var(--lime); padding: 2px 7px 4px; |
| |
| 87 | − border-radius: 6px; margin-left: 3px; transform: rotate(-2deg); |
| |
| 88 | − transition: transform 0.2s ease; |
| |
| 89 | } |
106 | } |
| 90 | −.brand:hover .ka { transform: rotate(0deg); } |
107 | +.brand .logo-ico { margin-right: 9px; flex: none; } |
| |
108 | +.brand .ka { color: var(--orange); } |
| 91 | .brand-tag { |
109 | .brand-tag { |
| 92 | − font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); |
110 | + font-size: 11px; font-weight: 500; color: var(--ink-3); |
| 93 | − letter-spacing: 0.08em; text-transform: uppercase; margin-left: 12px; |
111 | + letter-spacing: 0.02em; margin-left: 12px; |
| 94 | } |
112 | } |
| 95 | −@media (max-width: 760px) { .brand-tag { display: none; } } |
113 | +@media (max-width: 900px) { .brand-tag { display: none; } } |
| 96 | .nav { margin-left: auto; display: flex; gap: 4px; } |
114 | .nav { margin-left: auto; display: flex; gap: 4px; } |
| 97 | .nav a { |
115 | .nav a { |
| 98 | − padding: 9px 16px; border-radius: 999px; font-weight: 600; font-size: 14px; |
116 | + padding: 9px 16px; border-radius: var(--r-pill); font-weight: 600; font-size: 14px; |
| 99 | − color: var(--ink-2); border: 1.5px solid transparent; |
117 | + color: var(--navy); transition: all 0.15s ease; min-height: 40px; |
| 100 | − transition: all 0.15s ease; min-height: 40px; display: inline-flex; align-items: center; |
118 | + display: inline-flex; align-items: center; |
| 101 | } |
119 | } |
| 102 | −.nav a:hover { border-color: var(--ink); color: var(--ink); } |
120 | +.nav a:hover { color: var(--orange); background: var(--orange-soft); } |
| 103 | −.nav a.active { background: var(--ink); color: var(--lime); } |
121 | +.nav a.active { background: var(--navy); color: var(--white); } |
| 104 | |
122 | |
| 105 | /* ================= Ticker ================= */ |
123 | /* ================= Ticker ================= */ |
| 106 | .ticker { |
124 | .ticker { |
| 107 | − background: var(--ink); color: var(--lime); overflow: hidden; |
125 | + background: var(--navy); color: rgba(255, 255, 255, 0.85); overflow: hidden; |
| 108 | − font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; |
126 | + font-size: 11.5px; font-weight: 500; letter-spacing: 0.08em; |
| 109 | text-transform: uppercase; padding: 7px 0; white-space: nowrap; |
127 | text-transform: uppercase; padding: 7px 0; white-space: nowrap; |
| 110 | − border-bottom: 1px solid rgba(217, 242, 107, 0.25); |
| |
| 111 | } |
128 | } |
| 112 | .ticker-track { display: inline-flex; gap: 0; animation: ticker 40s linear infinite; will-change: transform; } |
129 | .ticker-track { display: inline-flex; gap: 0; animation: ticker 40s linear infinite; will-change: transform; } |
| 113 | .ticker span { padding: 0 26px; position: relative; } |
130 | .ticker span { padding: 0 26px; position: relative; } |
| 114 | −.ticker span::after { content: "◆"; position: absolute; right: -6px; opacity: 0.5; font-size: 8px; top: 3px; } |
131 | +.ticker span::after { content: "◆"; position: absolute; right: -6px; color: var(--orange); opacity: 0.8; font-size: 8px; top: 3px; } |
| 115 | @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } |
132 | @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } |
| 116 | @media (prefers-reduced-motion: reduce) { |
133 | @media (prefers-reduced-motion: reduce) { |
| 117 | .ticker-track { animation: none; } |
134 | .ticker-track { animation: none; } |
| 122 | .hero { padding: 58px 0 22px; } |
139 | .hero { padding: 58px 0 22px; } |
| 123 | @media (max-width: 640px) { .hero { padding: 34px 0 14px; } } |
140 | @media (max-width: 640px) { .hero { padding: 34px 0 14px; } } |
| 124 | .hero h1 { |
141 | .hero h1 { |
| 125 | − font-size: clamp(38px, 6.4vw, 78px); font-weight: 700; line-height: 0.98; |
142 | + font-size: clamp(36px, 5.4vw, 56px); font-weight: 700; line-height: 1.06; |
| 126 | − text-transform: uppercase; letter-spacing: -0.035em; max-width: 900px; margin-top: 14px; |
143 | + letter-spacing: -0.03em; max-width: 900px; margin-top: 14px; color: var(--navy); |
| 127 | −} |
| |
| 128 | −.hero h1 .outline { |
| |
| 129 | − color: transparent; -webkit-text-stroke: 2px var(--ink); |
| |
| 130 | } |
144 | } |
| 131 | −.hero h1 .hl { |
145 | +.hero h1 .outline { color: var(--navy); } |
| 132 | − background: var(--lime); padding: 0 10px; border-radius: 8px; display: inline-block; |
146 | +.hero h1 .hl { color: var(--orange); } |
| 133 | − transform: rotate(-1deg); |
147 | +.hero p.lede { color: var(--ink-2); font-size: 17px; max-width: 640px; margin: 18px 0 0; } |
| 134 | −} |
| |
| 135 | −.hero p.lede { color: var(--ink-2); font-size: 16.5px; max-width: 640px; margin: 20px 0 0; } |
| |
| 136 | .stat-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; } |
148 | .stat-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; } |
| 137 | .stat-chip { |
149 | .stat-chip { |
| 138 | − background: var(--surface); border: 1.5px solid var(--ink); border-radius: 999px; |
150 | + background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); |
| 139 | − padding: 8px 16px; font-family: var(--font-mono); font-size: 12px; |
151 | + padding: 8px 16px; font-size: 12.5px; font-weight: 500; |
| 140 | color: var(--ink-2); display: flex; gap: 8px; align-items: center; |
152 | color: var(--ink-2); display: flex; gap: 8px; align-items: center; |
| 141 | − box-shadow: 3px 3px 0 rgba(20, 24, 20, 0.12); |
153 | + box-shadow: var(--shadow-flat); |
| 142 | } |
154 | } |
| 143 | −.stat-chip b { color: var(--ink); font-weight: 700; } |
155 | +.stat-chip b { color: var(--navy); font-weight: 700; } |
| 144 | .stat-chip .pulse { |
156 | .stat-chip .pulse { |
| 145 | − width: 8px; height: 8px; border-radius: 50%; background: var(--green); |
157 | + width: 8px; height: 8px; border-radius: 50%; background: var(--orange); |
| 146 | − box-shadow: 0 0 0 4px var(--lime-soft); animation: pulse 2.4s ease infinite; |
158 | + box-shadow: 0 0 0 4px var(--orange-soft); animation: pulse 2.4s ease infinite; |
| |
159 | +} |
| |
160 | +@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(255, 106, 0, 0.18); } } |
| |
161 | + |
| |
162 | +/* ================= Rangée d'avantages ================= */ |
| |
163 | +.benefits { |
| |
164 | + display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); |
| |
165 | + gap: 14px; margin-top: 30px; |
| |
166 | +} |
| |
167 | +.benefit { display: flex; align-items: center; gap: 12px; } |
| |
168 | +.benefit-ico { |
| |
169 | + width: 42px; height: 42px; border-radius: var(--r-pill); flex: none; |
| |
170 | + display: flex; align-items: center; justify-content: center; |
| |
171 | + background: var(--orange-soft); color: var(--orange); |
| |
172 | +} |
| |
173 | +.benefit-ico.blue { background: var(--blue-soft); color: var(--blue); } |
| |
174 | +.benefit-label { |
| |
175 | + font-size: 11.5px; font-weight: 700; text-transform: uppercase; |
| |
176 | + letter-spacing: 0.08em; color: var(--navy); |
| |
177 | +} |
| |
178 | +@media (max-width: 640px) { |
| |
179 | + .benefits { grid-template-columns: 1fr 1fr; gap: 12px; } |
| 147 | } |
180 | } |
| 148 | −@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(217, 242, 107, 0.4); } } |
| |
| 149 | |
181 | |
| 150 | /* ================= Filter bar ================= */ |
182 | /* ================= Filter bar ================= */ |
| 151 | .filterbar { |
183 | .filterbar { |
| 152 | − background: var(--surface); border: 2px solid var(--ink); border-radius: var(--r-card); |
184 | + background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); |
| 153 | box-shadow: var(--shadow-off-soft); padding: 14px; margin: 30px 0 6px; |
185 | box-shadow: var(--shadow-off-soft); padding: 14px; margin: 30px 0 6px; |
| 154 | display: flex; flex-direction: column; gap: 0; min-width: 0; |
186 | display: flex; flex-direction: column; gap: 0; min-width: 0; |
| 155 | } |
187 | } |
| 158 | .f-primary { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; min-width: 0; } |
190 | .f-primary { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; min-width: 0; } |
| 159 | .f-search { |
191 | .f-search { |
| 160 | flex: 1 1 240px; min-width: 0; display: flex; align-items: center; gap: 9px; |
192 | flex: 1 1 240px; min-width: 0; display: flex; align-items: center; gap: 9px; |
| 161 | − border: 1.5px solid var(--ink); border-radius: 9px; background: var(--surface-2); |
193 | + border: 1px solid transparent; border-radius: var(--r-pill); background: var(--grey); |
| 162 | − padding: 0 13px; min-height: 52px; color: var(--ink-2); |
194 | + padding: 0 18px; min-height: 52px; color: var(--ink-2); |
| 163 | − transition: box-shadow 0.15s ease; |
195 | + transition: box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease; |
| |
196 | +} |
| |
197 | +.f-search:focus-within { |
| |
198 | + background: var(--white); border-color: var(--blue); |
| |
199 | + box-shadow: 0 0 0 3px rgba(34, 88, 255, 0.15); |
| 164 | } |
200 | } |
| 165 | −.f-search:focus-within { box-shadow: 3px 3px 0 var(--lime); background: var(--surface); } |
| |
| 166 | .f-search input { |
201 | .f-search input { |
| 167 | border: none; background: none; outline: none; flex: 1; min-width: 0; |
202 | border: none; background: none; outline: none; flex: 1; min-width: 0; |
| 168 | font-size: 15px; color: var(--ink); font-family: inherit; |
203 | font-size: 15px; color: var(--ink); font-family: inherit; |
| 174 | } |
209 | } |
| 175 | .f-ctl { |
210 | .f-ctl { |
| 176 | flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; |
211 | flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; |
| 177 | − gap: 2px; border: 1.5px solid var(--ink); border-radius: 9px; background: var(--surface); |
212 | + gap: 2px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); |
| 178 | − padding: 7px 12px 6px; min-height: 52px; cursor: pointer; |
213 | + padding: 7px 14px 6px; min-height: 52px; cursor: pointer; |
| 179 | − transition: box-shadow 0.15s ease; |
214 | + transition: box-shadow 0.15s ease, border-color 0.15s ease; |
| 180 | } |
215 | } |
| 181 | −.f-ctl:focus-within { box-shadow: 3px 3px 0 var(--lime); } |
216 | +.f-ctl:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(34, 88, 255, 0.15); } |
| 182 | .f-ctl > span { |
217 | .f-ctl > span { |
| 183 | − font-family: var(--font-mono); font-size: 9px; font-weight: 700; |
218 | + font-size: 9.5px; font-weight: 700; |
| 184 | − text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); |
219 | + text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); |
| 185 | } |
220 | } |
| 186 | .f-ctl select { |
221 | .f-ctl select { |
| 187 | border: none; background: transparent; outline: none; font-family: var(--font-display); |
222 | border: none; background: transparent; outline: none; font-family: var(--font-display); |
| 188 | − font-weight: 700; font-size: 14.5px; color: var(--ink); cursor: pointer; |
223 | + font-weight: 700; font-size: 14.5px; color: var(--navy); cursor: pointer; |
| 189 | appearance: none; -webkit-appearance: none; padding-right: 16px; min-width: 0; max-width: 170px; |
224 | appearance: none; -webkit-appearance: none; padding-right: 16px; min-width: 0; max-width: 170px; |
| 190 | text-overflow: ellipsis; |
225 | text-overflow: ellipsis; |
| 191 | − background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5'%3E%3Cpath d='M0 0l4.5 5L9 0z' fill='%23141814'/%3E%3C/svg%3E"); |
226 | + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5'%3E%3Cpath d='M0 0l4.5 5L9 0z' fill='%230B1330'/%3E%3C/svg%3E"); |
| 192 | background-repeat: no-repeat; background-position: right center; |
227 | background-repeat: no-repeat; background-position: right center; |
| 193 | } |
228 | } |
| 194 | .range-pair { display: flex; align-items: center; gap: 4px; } |
229 | .range-pair { display: flex; align-items: center; gap: 4px; } |
| 195 | .range-pair select { max-width: 86px; } |
230 | .range-pair select { max-width: 86px; } |
| 196 | −.range-sep { color: var(--ink-3); font-family: var(--font-mono); font-size: 11px; } |
231 | +.range-sep { color: var(--ink-3); font-size: 11px; } |
| 197 | .f-more { |
232 | .f-more { |
| 198 | − flex: none; align-self: stretch; border: 1.5px solid var(--ink); border-radius: 9px; |
233 | + flex: none; align-self: stretch; border: 1px solid var(--line-strong); border-radius: var(--r-pill); |
| 199 | − background: var(--surface); color: var(--ink); padding: 0 18px; cursor: pointer; |
234 | + background: var(--surface); color: var(--navy); padding: 0 20px; cursor: pointer; |
| 200 | − font-family: var(--font-display); font-weight: 700; font-size: 14px; min-height: 52px; |
235 | + font-family: var(--font-display); font-weight: 600; font-size: 14px; min-height: 52px; |
| 201 | transition: all 0.13s ease; |
236 | transition: all 0.13s ease; |
| 202 | } |
237 | } |
| 203 | −.f-more:hover { background: var(--lime-soft); } |
238 | +.f-more:hover { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); } |
| 204 | −.f-more.on { background: var(--ink); color: var(--lime); box-shadow: 3px 3px 0 rgba(20,24,20,0.22); } |
239 | +.f-more.on { background: var(--blue); border-color: var(--blue); color: var(--white); } |
| 205 | |
240 | |
| 206 | /* — panneau avancé — */ |
241 | /* — panneau avancé — */ |
| 207 | .f-adv { |
242 | .f-adv { |
| 208 | display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px 22px; |
243 | display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px 22px; |
| 209 | − border-top: 1.5px dashed var(--line); margin-top: 14px; padding-top: 14px; min-width: 0; |
244 | + border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; min-width: 0; |
| 210 | animation: adv-in 0.18s ease; |
245 | animation: adv-in 0.18s ease; |
| 211 | } |
246 | } |
| 212 | @keyframes adv-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } |
247 | @keyframes adv-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } |
| 213 | .f-group { display: flex; flex-direction: column; gap: 7px; min-width: 0; } |
248 | .f-group { display: flex; flex-direction: column; gap: 7px; min-width: 0; } |
| 214 | .f-group > label { |
249 | .f-group > label { |
| 215 | − font-family: var(--font-mono); font-size: 10px; font-weight: 700; |
250 | + font-size: 10.5px; font-weight: 700; |
| 216 | − text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); |
251 | + text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); |
| 217 | } |
252 | } |
| 218 | .f-group-end { justify-content: flex-end; } |
253 | .f-group-end { justify-content: flex-end; } |
| 219 | .f-group .btn:disabled { opacity: 0.4; cursor: default; } |
254 | .f-group .btn:disabled { opacity: 0.4; cursor: default; } |
| 220 | .f-native { |
255 | .f-native { |
| 221 | − border: 1.5px solid var(--line); background: var(--surface-2); border-radius: var(--r-ctl); |
256 | + border: 1px solid var(--line); background: var(--grey); border-radius: var(--r-ctl); |
| 222 | − padding: 10px 30px 10px 12px; font-size: 14px; color: var(--ink); outline: none; |
257 | + padding: 10px 30px 10px 14px; font-size: 14px; color: var(--ink); outline: none; |
| 223 | font-family: inherit; min-height: 42px; width: 100%; min-width: 0; |
258 | font-family: inherit; min-height: 42px; width: 100%; min-width: 0; |
| 224 | appearance: none; -webkit-appearance: none; |
259 | appearance: none; -webkit-appearance: none; |
| 225 | − background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23141814'/%3E%3C/svg%3E"); |
260 | + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%230B1330'/%3E%3C/svg%3E"); |
| 226 | background-repeat: no-repeat; background-position: right 12px center; |
261 | background-repeat: no-repeat; background-position: right 12px center; |
| 227 | } |
262 | } |
| 228 | −.f-native:focus { border-color: var(--ink); box-shadow: 3px 3px 0 var(--lime); } |
263 | +.f-native:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(34, 88, 255, 0.15); background: var(--white); } |
| 229 | |
264 | |
| 230 | /* segments (pilules soudées) */ |
265 | /* segments (pilules soudées) */ |
| 231 | .seg { display: inline-flex; flex-wrap: wrap; row-gap: 6px; } |
266 | .seg { display: inline-flex; flex-wrap: wrap; row-gap: 6px; } |
| 232 | .seg button { |
267 | .seg button { |
| 233 | − border: 1.5px solid var(--ink); background: var(--surface); color: var(--ink-2); |
268 | + border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); |
| 234 | − padding: 8px 13px; font-family: var(--font-display); font-weight: 600; font-size: 13px; |
269 | + padding: 8px 14px; font-family: var(--font-display); font-weight: 600; font-size: 13px; |
| 235 | − cursor: pointer; margin-left: -1.5px; white-space: nowrap; min-height: 38px; |
270 | + cursor: pointer; margin-left: -1px; white-space: nowrap; min-height: 38px; |
| 236 | transition: all 0.12s ease; |
271 | transition: all 0.12s ease; |
| 237 | } |
272 | } |
| 238 | −.seg button:first-child { border-radius: 8px 0 0 8px; margin-left: 0; } |
273 | +.seg button:first-child { border-radius: var(--r-pill) 0 0 var(--r-pill); margin-left: 0; padding-left: 16px; } |
| 239 | −.seg button:last-child { border-radius: 0 8px 8px 0; } |
274 | +.seg button:last-child { border-radius: 0 var(--r-pill) var(--r-pill) 0; padding-right: 16px; } |
| 240 | −.seg button:hover { background: var(--lime-soft); color: var(--ink); } |
275 | +.seg button:hover { background: var(--blue-soft); color: var(--blue); } |
| 241 | −.seg button.on { background: var(--ink); color: var(--lime); position: relative; z-index: 1; } |
276 | +.seg button.on { background: var(--blue); border-color: var(--blue); color: var(--white); position: relative; z-index: 1; } |
| 242 | |
277 | |
| 243 | /* pastilles de filtres actifs */ |
278 | /* pastilles de filtres actifs */ |
| 244 | .pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 2px; } |
279 | .pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 2px; } |
| 245 | .pill { |
280 | .pill { |
| 246 | display: inline-flex; align-items: center; gap: 7px; |
281 | display: inline-flex; align-items: center; gap: 7px; |
| 247 | − border: 1.5px solid var(--ink); background: var(--lime-soft); color: var(--ink); |
282 | + border: 1px solid rgba(34, 88, 255, 0.3); background: var(--blue-soft); color: var(--blue); |
| 248 | − border-radius: 999px; padding: 6px 13px; font-size: 12.5px; font-weight: 600; |
283 | + border-radius: var(--r-pill); padding: 6px 14px; font-size: 12.5px; font-weight: 600; |
| 249 | − font-family: var(--font-mono); cursor: pointer; transition: all 0.13s ease; |
284 | + cursor: pointer; transition: all 0.13s ease; |
| 250 | } |
285 | } |
| 251 | −.pill:hover { background: var(--lime); } |
286 | +.pill:hover { background: var(--blue); color: var(--white); } |
| 252 | .pill-x { font-size: 10px; opacity: 0.65; } |
287 | .pill-x { font-size: 10px; opacity: 0.65; } |
| 253 | .pill-clear { background: var(--surface); border-color: var(--danger); color: var(--danger); } |
288 | .pill-clear { background: var(--surface); border-color: var(--danger); color: var(--danger); } |
| 254 | .pill-clear:hover { background: var(--danger); color: #fff; } |
289 | .pill-clear:hover { background: var(--danger); color: #fff; } |
| 255 | −.chip-sep { width: 1.5px; align-self: stretch; background: var(--line); margin: 4px 4px; flex: none; } |
290 | +.chip-sep { width: 1px; align-self: stretch; background: var(--line); margin: 4px 4px; flex: none; } |
| 256 | .link-btn { |
291 | .link-btn { |
| 257 | − background: none; border: none; padding: 0; color: var(--green); font: inherit; |
292 | + background: none; border: none; padding: 0; color: var(--blue); font: inherit; |
| 258 | text-decoration: underline; cursor: pointer; |
293 | text-decoration: underline; cursor: pointer; |
| 259 | } |
294 | } |
| 260 | .field { display: flex; flex-direction: column; gap: 5px; } |
295 | .field { display: flex; flex-direction: column; gap: 5px; } |
| 261 | .field label { |
296 | .field label { |
| 262 | − font-family: var(--font-mono); font-size: 10px; font-weight: 700; |
297 | + font-size: 10.5px; font-weight: 700; |
| 263 | − text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); padding-left: 2px; |
298 | + text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); padding-left: 2px; |
| 264 | } |
299 | } |
| 265 | .field input, .field select { |
300 | .field input, .field select { |
| 266 | − border: 1.5px solid var(--line); background: var(--surface-2); border-radius: var(--r-ctl); |
301 | + border: 1px solid var(--line); background: var(--grey); border-radius: var(--r-ctl); |
| 267 | − padding: 11px 12px; font-size: 15px; color: var(--ink); outline: none; font-family: inherit; |
302 | + padding: 11px 14px; font-size: 15px; color: var(--ink); outline: none; font-family: inherit; |
| 268 | − transition: border-color 0.15s ease, box-shadow 0.15s ease; min-height: 44px; |
303 | + transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; min-height: 44px; |
| 269 | appearance: none; -webkit-appearance: none; |
304 | appearance: none; -webkit-appearance: none; |
| 270 | } |
305 | } |
| 271 | .field select { |
306 | .field select { |
| 272 | − background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23141814'/%3E%3C/svg%3E"); |
307 | + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%230B1330'/%3E%3C/svg%3E"); |
| 273 | background-repeat: no-repeat; background-position: right 12px center; padding-right: 30px; |
308 | background-repeat: no-repeat; background-position: right 12px center; padding-right: 30px; |
| 274 | } |
309 | } |
| 275 | −.field input:focus, .field select:focus { border-color: var(--ink); box-shadow: 3px 3px 0 var(--lime); } |
310 | +.field input:focus, .field select:focus { |
| |
311 | + border-color: var(--blue); background: var(--white); |
| |
312 | + box-shadow: 0 0 0 3px rgba(34, 88, 255, 0.15); |
| |
313 | +} |
| 276 | .btn { |
314 | .btn { |
| 277 | − border: 1.5px solid var(--ink); border-radius: var(--r-ctl); padding: 11px 20px; |
315 | + border: 1px solid transparent; border-radius: var(--r-pill); padding: 11px 22px; |
| 278 | − font-weight: 700; font-size: 14px; cursor: pointer; min-height: 44px; |
316 | + font-weight: 600; font-size: 14px; cursor: pointer; min-height: 44px; |
| 279 | transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease; |
317 | transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease; |
| 280 | font-family: var(--font-display); letter-spacing: 0.01em; |
318 | font-family: var(--font-display); letter-spacing: 0.01em; |
| 281 | } |
319 | } |
| 282 | −.btn:active { transform: translate(2px, 2px); box-shadow: none !important; } |
320 | +.btn:active { transform: translateY(1px); } |
| 283 | −.btn-primary { background: var(--ink); color: var(--lime); box-shadow: 4px 4px 0 rgba(20,24,20,0.25); } |
321 | +.btn-primary { |
| 284 | −.btn-primary:hover { background: var(--green-deep); } |
322 | + background: var(--orange); color: var(--white); |
| 285 | −.btn-ghost { background: transparent; color: var(--ink); } |
323 | + box-shadow: 0 6px 18px rgba(255, 106, 0, 0.32); |
| 286 | −.btn-ghost:hover { background: var(--lime); box-shadow: 4px 4px 0 rgba(20,24,20,0.2); } |
324 | +} |
| |
325 | +.btn-primary:hover { background: var(--orange-deep); } |
| |
326 | +.btn-ghost { background: transparent; color: var(--navy); border-color: var(--line-strong); } |
| |
327 | +.btn-ghost:hover { background: var(--navy-soft); border-color: var(--navy); } |
| 287 | |
328 | |
| 288 | /* ================= Chips ================= */ |
329 | /* ================= Chips ================= */ |
| 289 | .chips { display: flex; gap: 8px; margin: 16px 0 4px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; } |
330 | .chips { display: flex; gap: 8px; margin: 16px 0 4px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; } |
| 290 | .chips::-webkit-scrollbar { display: none; } |
331 | .chips::-webkit-scrollbar { display: none; } |
| 291 | .chip { |
332 | .chip { |
| 292 | − border: 1.5px solid var(--ink); background: var(--surface); color: var(--ink); |
333 | + border: 1px solid var(--line-strong); background: var(--surface); color: var(--navy); |
| 293 | − border-radius: 999px; padding: 8px 18px; font-size: 13.5px; font-weight: 600; cursor: pointer; |
334 | + border-radius: var(--r-pill); padding: 8px 18px; font-size: 13.5px; font-weight: 600; cursor: pointer; |
| 294 | font-family: var(--font-display); white-space: nowrap; min-height: 40px; |
335 | font-family: var(--font-display); white-space: nowrap; min-height: 40px; |
| 295 | transition: all 0.13s ease; |
336 | transition: all 0.13s ease; |
| 296 | } |
337 | } |
| 297 | −.chip:hover { background: var(--lime-soft); transform: translateY(-1px); } |
338 | +.chip:hover { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); transform: translateY(-1px); } |
| 298 | −.chip.on { background: var(--ink); color: var(--lime); box-shadow: 3px 3px 0 rgba(20,24,20,0.2); } |
339 | +.chip.on { background: var(--blue); border-color: var(--blue); color: var(--white); box-shadow: 0 6px 16px rgba(34, 88, 255, 0.28); } |
| 299 | |
340 | |
| 300 | /* ================= Results ================= */ |
341 | /* ================= Results ================= */ |
| 301 | .results-head { display: flex; align-items: baseline; gap: 14px; margin: 28px 0 18px; } |
342 | .results-head { display: flex; align-items: baseline; gap: 14px; margin: 28px 0 18px; } |
| 302 | −.results-head h2 { font-size: 22px; text-transform: uppercase; letter-spacing: -0.02em; } |
343 | +.results-head h2 { font-size: 22px; letter-spacing: -0.02em; color: var(--navy); } |
| 303 | −.results-head span { font-family: var(--font-mono); color: var(--ink-3); font-size: 12px; letter-spacing: 0.06em; } |
344 | +.results-head span { color: var(--ink-3); font-size: 12.5px; font-weight: 500; } |
| 304 | .grid { |
345 | .grid { |
| 305 | display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); |
346 | display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); |
| 306 | gap: 22px; padding-bottom: 70px; |
347 | gap: 22px; padding-bottom: 70px; |
| 308 | @media (max-width: 640px) { .grid { grid-template-columns: 1fr; gap: 16px; padding-bottom: 48px; } } |
349 | @media (max-width: 640px) { .grid { grid-template-columns: 1fr; gap: 16px; padding-bottom: 48px; } } |
| 309 | |
350 | |
| 310 | .card { |
351 | .card { |
| 311 | − background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--r-card); |
352 | + background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); |
| 312 | overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-flat); |
353 | overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-flat); |
| 313 | transition: transform 0.16s ease, box-shadow 0.16s ease; |
354 | transition: transform 0.16s ease, box-shadow 0.16s ease; |
| 314 | } |
355 | } |
| 315 | −.card:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-off); } |
356 | +.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-off); } |
| 316 | −.card:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; } |
357 | +.card:focus-visible { outline: 3px solid rgba(34, 88, 255, 0.4); outline-offset: 2px; } |
| 317 | −.card-img { position: relative; aspect-ratio: 16/10.5; background: repeating-linear-gradient(45deg, #eceae3 0 12px, #f3f1ea 12px 24px); overflow: hidden; } |
358 | +.card-img { position: relative; aspect-ratio: 16/10.5; background: var(--grey); overflow: hidden; } |
| 318 | .card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } |
359 | .card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } |
| 319 | .card:hover .card-img img { transform: scale(1.05); } |
360 | .card:hover .card-img img { transform: scale(1.05); } |
| 320 | .card-img .noimg { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--ink-3); font-size: 34px; } |
361 | .card-img .noimg { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--ink-3); font-size: 34px; } |
| 321 | .badge { |
362 | .badge { |
| 322 | − position: absolute; top: 12px; left: 12px; border-radius: 6px; padding: 4px 10px; |
363 | + position: absolute; top: 12px; left: 12px; border-radius: var(--r-pill); padding: 4px 12px; |
| 323 | − font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; |
364 | + font-size: 11px; font-weight: 700; letter-spacing: 0.04em; |
| 324 | − background: rgba(255, 255, 255, 0.95); color: var(--ink); border: 1px solid var(--ink); |
365 | + background: rgba(255, 255, 255, 0.94); color: var(--navy); |
| |
366 | + backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); |
| 325 | } |
367 | } |
| 326 | −.badge.type { background: var(--ink); color: var(--lime); border-color: var(--ink); } |
368 | +.badge.type { background: var(--orange); color: var(--white); } |
| 327 | −.badge.right { left: auto; right: 12px; background: rgba(255,255,255,0.92); border-color: transparent; } |
369 | +.badge.right { left: auto; right: 12px; background: rgba(255, 255, 255, 0.92); } |
| 328 | .card-body { padding: 16px 18px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; } |
370 | .card-body { padding: 16px 18px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; } |
| 329 | −.card-price { font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: -0.02em; } |
371 | +.card-price { font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: -0.02em; color: var(--navy); } |
| 330 | −.card-price small { font-family: var(--font-mono); font-weight: 500; color: var(--ink-3); font-size: 11px; letter-spacing: 0.05em; } |
372 | +.card-price small { font-weight: 500; color: var(--ink-3); font-size: 11.5px; } |
| 331 | .card-title { font-weight: 600; font-size: 14.5px; color: var(--ink); } |
373 | .card-title { font-weight: 600; font-size: 14.5px; color: var(--ink); } |
| 332 | −.card-meta { color: var(--ink-3); font-size: 12.5px; display: flex; gap: 7px; flex-wrap: wrap; align-items: center; font-family: var(--font-mono); } |
374 | +.card-meta { color: var(--ink-3); font-size: 12.5px; display: flex; gap: 7px; flex-wrap: wrap; align-items: center; } |
| 333 | −.card-meta .sep { width: 4px; height: 4px; background: var(--lime); border: 1px solid var(--ink); border-radius: 1px; transform: rotate(45deg); } |
375 | +.card-meta .sep { width: 4px; height: 4px; background: var(--orange); border-radius: 50%; } |
| 334 | −.card-foot { margin-top: auto; padding-top: 11px; border-top: 1.5px dashed var(--line); display: flex; justify-content: space-between; align-items: center; gap: 8px; } |
376 | +.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; } |
| 335 | .source-tag { |
377 | .source-tag { |
| 336 | − font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; |
378 | + font-size: 10px; font-weight: 700; text-transform: uppercase; |
| 337 | − letter-spacing: 0.08em; color: var(--green-deep); background: var(--lime-soft); |
379 | + letter-spacing: 0.06em; color: var(--blue); background: var(--blue-soft); |
| 338 | − border: 1px solid var(--green); border-radius: 4px; padding: 3px 8px; |
380 | + border-radius: var(--r-pill); padding: 3px 10px; |
| 339 | overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; |
381 | overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; |
| 340 | } |
382 | } |
| 341 | .avail { font-size: 11.5px; color: var(--ink-2); font-weight: 500; text-align: right; } |
383 | .avail { font-size: 11.5px; color: var(--ink-2); font-weight: 500; text-align: right; } |
| 342 | |
384 | |
| 343 | /* ================= Skeletons ================= */ |
385 | /* ================= Skeletons ================= */ |
| 344 | @keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } |
386 | @keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } |
| 345 | −.skel { border-radius: var(--r-card); border: 1.5px solid var(--line); overflow: hidden; background: var(--surface); } |
387 | +.skel { border-radius: var(--r-card); border: 1px solid var(--line); overflow: hidden; background: var(--surface); } |
| 346 | .skel .sk-img, .skel .sk-line { |
388 | .skel .sk-img, .skel .sk-line { |
| 347 | − background: linear-gradient(90deg, #eeece5 25%, #f7f5ef 50%, #eeece5 75%); |
389 | + background: linear-gradient(90deg, #ececef 25%, #f7f7f9 50%, #ececef 75%); |
| 348 | background-size: 800px 100%; animation: shimmer 1.4s infinite linear; |
390 | background-size: 800px 100%; animation: shimmer 1.4s infinite linear; |
| 349 | } |
391 | } |
| 350 | .skel .sk-img { aspect-ratio: 16/10.5; } |
392 | .skel .sk-img { aspect-ratio: 16/10.5; } |
| 354 | /* ================= Empty / error ================= */ |
396 | /* ================= Empty / error ================= */ |
| 355 | .notice { text-align: center; padding: 72px 24px; color: var(--ink-2); } |
397 | .notice { text-align: center; padding: 72px 24px; color: var(--ink-2); } |
| 356 | .notice .big { font-size: 44px; margin-bottom: 10px; } |
398 | .notice .big { font-size: 44px; margin-bottom: 10px; } |
| 357 | −.notice h2 { text-transform: uppercase; } |
399 | +.notice h2 { color: var(--navy); } |
| 358 | |
400 | |
| 359 | /* ================= Detail page ================= */ |
401 | /* ================= Detail page ================= */ |
| 360 | .detail { padding: 30px 0 90px; } |
402 | .detail { padding: 30px 0 90px; } |
| 361 | .crumbs { |
403 | .crumbs { |
| 362 | − font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; |
404 | + font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; |
| 363 | color: var(--ink-3); margin-bottom: 20px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; |
405 | color: var(--ink-3); margin-bottom: 20px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; |
| 364 | } |
406 | } |
| 365 | .crumbs a { border-bottom: 1.5px solid transparent; } |
407 | .crumbs a { border-bottom: 1.5px solid transparent; } |
| 366 | −.crumbs a:hover { color: var(--green); border-color: var(--green); } |
408 | +.crumbs a:hover { color: var(--blue); border-color: var(--blue); } |
| 367 | .detail-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 30px; align-items: start; } |
409 | .detail-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 30px; align-items: start; } |
| 368 | @media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } } |
410 | @media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } } |
| 369 | /* les enfants de grille ont min-width:auto par défaut : un contenu large |
411 | /* les enfants de grille ont min-width:auto par défaut : un contenu large |
| 372 | |
414 | |
| 373 | .gallery { display: flex; flex-direction: column; gap: 10px; } |
415 | .gallery { display: flex; flex-direction: column; gap: 10px; } |
| 374 | .gallery-main { |
416 | .gallery-main { |
| 375 | − border-radius: var(--r-card); overflow: hidden; border: 1.5px solid var(--ink); |
417 | + border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--line); |
| 376 | − aspect-ratio: 16/10; background: #eceae3; cursor: zoom-in; box-shadow: var(--shadow-off-soft); |
418 | + aspect-ratio: 16/10; background: var(--grey); cursor: zoom-in; box-shadow: var(--shadow-off-soft); |
| 377 | } |
419 | } |
| 378 | .gallery-main img { width: 100%; height: 100%; object-fit: cover; } |
420 | .gallery-main img { width: 100%; height: 100%; object-fit: cover; } |
| 379 | .thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; } |
421 | .thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; } |
| 380 | .thumbs button { |
422 | .thumbs button { |
| 381 | − border: 2px solid var(--line); border-radius: 8px; overflow: hidden; padding: 0; cursor: pointer; |
423 | + border: 2px solid var(--line); border-radius: 12px; overflow: hidden; padding: 0; cursor: pointer; |
| 382 | − aspect-ratio: 4/3; background: #eceae3; transition: border-color 0.12s ease, transform 0.12s ease; |
424 | + aspect-ratio: 4/3; background: var(--grey); transition: border-color 0.12s ease, transform 0.12s ease; |
| 383 | } |
425 | } |
| 384 | .thumbs button:hover { transform: translateY(-2px); } |
426 | .thumbs button:hover { transform: translateY(-2px); } |
| 385 | −.thumbs button.on { border-color: var(--ink); box-shadow: 3px 3px 0 var(--lime); } |
427 | +.thumbs button.on { border-color: var(--orange); } |
| 386 | .thumbs img { width: 100%; height: 100%; object-fit: cover; } |
428 | .thumbs img { width: 100%; height: 100%; object-fit: cover; } |
| 387 | |
429 | |
| 388 | .panel { |
430 | .panel { |
| 389 | − background: var(--surface); border: 1.5px solid var(--ink); border-radius: var(--r-card); |
431 | + background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); |
| 390 | box-shadow: var(--shadow-off-soft); padding: 26px; position: sticky; top: 120px; |
432 | box-shadow: var(--shadow-off-soft); padding: 26px; position: sticky; top: 120px; |
| 391 | } |
433 | } |
| 392 | @media (max-width: 900px) { .panel { position: static; } } |
434 | @media (max-width: 900px) { .panel { position: static; } } |
| 393 | −.panel .price { font-family: var(--font-display); font-size: 34px; font-weight: 700; letter-spacing: -0.03em; } |
435 | +.panel .price { font-family: var(--font-display); font-size: 34px; font-weight: 700; letter-spacing: -0.03em; color: var(--navy); } |
| 394 | −.panel .price small { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); font-weight: 500; letter-spacing: 0.05em; } |
436 | +.panel .price small { font-size: 12.5px; color: var(--ink-3); font-weight: 500; } |
| 395 | .panel h1 { font-size: 22px; margin: 8px 0 2px; } |
437 | .panel h1 { font-size: 22px; margin: 8px 0 2px; } |
| 396 | .panel .loc { color: var(--ink-2); font-size: 14px; } |
438 | .panel .loc { color: var(--ink-2); font-size: 14px; } |
| 397 | .kv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0; } |
439 | .kv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0; } |
| 398 | @media (max-width: 380px) { .kv { grid-template-columns: 1fr; } } |
440 | @media (max-width: 380px) { .kv { grid-template-columns: 1fr; } } |
| 399 | −.kv .cell { background: var(--surface-2); border: 1.5px solid var(--line); border-radius: var(--r-ctl); padding: 10px 13px; } |
441 | +.kv .cell { background: var(--grey); border-radius: var(--r-ctl); padding: 10px 14px; } |
| 400 | −.kv .cell .k { font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); font-weight: 700; } |
442 | +.kv .cell .k { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); font-weight: 700; } |
| 401 | −.kv .cell .v { font-weight: 700; font-size: 14.5px; margin-top: 2px; font-family: var(--font-display); } |
443 | +.kv .cell .v { font-weight: 700; font-size: 14.5px; margin-top: 2px; font-family: var(--font-display); color: var(--navy); } |
| 402 | −.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; } |
444 | +.klabel { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); font-weight: 700; margin-bottom: 8px; } |
| 403 | .amenity-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 20px; } |
445 | .amenity-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 20px; } |
| 404 | .amenity { |
446 | .amenity { |
| 405 | − background: var(--lime-soft); color: var(--green-deep); font-size: 12px; font-weight: 600; |
447 | + background: var(--blue-soft); color: var(--blue); font-size: 12px; font-weight: 600; |
| 406 | − border: 1px solid var(--green); border-radius: 999px; padding: 5px 12px; |
448 | + border: 1px solid rgba(34, 88, 255, 0.25); border-radius: var(--r-pill); padding: 5px 13px; |
| 407 | } |
449 | } |
| 408 | .cta { |
450 | .cta { |
| 409 | − display: block; text-align: center; background: var(--ink); color: var(--lime); |
451 | + display: block; text-align: center; background: var(--orange); color: var(--white); |
| 410 | − font-weight: 700; font-family: var(--font-display); border-radius: var(--r-ctl); |
452 | + font-weight: 600; font-family: var(--font-display); border-radius: var(--r-pill); |
| 411 | − padding: 15px; border: 1.5px solid var(--ink); min-height: 48px; |
453 | + padding: 15px; min-height: 48px; |
| 412 | − box-shadow: 4px 4px 0 rgba(20,24,20,0.25); transition: all 0.14s ease; |
454 | + box-shadow: 0 8px 22px rgba(255, 106, 0, 0.34); transition: all 0.14s ease; |
| 413 | } |
455 | } |
| 414 | −.cta:hover { background: var(--lime); color: var(--ink); } |
456 | +.cta:hover { background: var(--orange-deep); } |
| 415 | −.cta:active { transform: translate(2px, 2px); box-shadow: none; } |
457 | +.cta:active { transform: translateY(1px); } |
| 416 | −.panel .fine { font-size: 11.5px; color: var(--ink-3); margin-top: 14px; text-align: center; font-family: var(--font-mono); letter-spacing: 0.02em; } |
458 | +.panel .fine { font-size: 11.5px; color: var(--ink-3); margin-top: 14px; text-align: center; } |
| 417 | |
459 | |
| 418 | /* ================= Lightbox ================= */ |
460 | /* ================= Lightbox ================= */ |
| 419 | .lightbox { |
461 | .lightbox { |
| 420 | − position: fixed; inset: 0; background: rgba(16, 18, 16, 0.94); z-index: 100; |
462 | + position: fixed; inset: 0; background: rgba(11, 19, 48, 0.94); z-index: 100; |
| 421 | display: flex; align-items: center; justify-content: center; cursor: zoom-out; |
463 | display: flex; align-items: center; justify-content: center; cursor: zoom-out; |
| 422 | padding: max(16px, env(safe-area-inset-top)) 16px; |
464 | padding: max(16px, env(safe-area-inset-top)) 16px; |
| 423 | } |
465 | } |
| 424 | −.lightbox img { max-width: 94vw; max-height: 90vh; border-radius: 6px; border: 2px solid var(--lime); } |
466 | +.lightbox img { max-width: 94vw; max-height: 90vh; border-radius: 12px; } |
| 425 | |
467 | |
| 426 | /* ================= Sources page ================= */ |
468 | /* ================= Sources page ================= */ |
| 427 | .sources { padding: 44px 0 90px; } |
469 | .sources { padding: 44px 0 90px; } |
| 428 | −.sources h1 { font-size: clamp(28px, 4vw, 40px); text-transform: uppercase; margin: 10px 0 6px; } |
470 | +.sources h1 { font-size: clamp(28px, 4vw, 40px); margin: 10px 0 6px; color: var(--navy); } |
| 429 | .sources .sub { color: var(--ink-2); margin-bottom: 30px; max-width: 700px; } |
471 | .sources .sub { color: var(--ink-2); margin-bottom: 30px; max-width: 700px; } |
| 430 | −.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); } |
472 | +.src-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-off-soft); background: var(--surface); } |
| 431 | .src-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 720px; } |
473 | .src-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 720px; } |
| 432 | .src-table th { |
474 | .src-table th { |
| 433 | − text-align: left; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; |
475 | + text-align: left; font-size: 10.5px; text-transform: uppercase; |
| 434 | − letter-spacing: 0.12em; color: var(--ink-3); padding: 14px 18px; |
476 | + letter-spacing: 0.1em; color: var(--ink-3); padding: 14px 18px; |
| 435 | − border-bottom: 1.5px solid var(--ink); background: var(--surface-2); |
477 | + border-bottom: 1px solid var(--line-strong); background: var(--grey); |
| 436 | } |
478 | } |
| 437 | .src-table td { padding: 13px 18px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: top; } |
479 | .src-table td { padding: 13px 18px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: top; } |
| 438 | .src-table tr:last-child td { border-bottom: none; } |
480 | .src-table tr:last-child td { border-bottom: none; } |
| 439 | −.src-table tr:hover td { background: var(--surface-2); } |
481 | +.src-table tr:hover td { background: var(--navy-soft); } |
| 440 | −.src-table a { color: var(--green-deep); font-weight: 600; border-bottom: 1.5px solid var(--lime); } |
482 | +.src-table a { color: var(--blue); font-weight: 600; border-bottom: 1.5px solid rgba(34, 88, 255, 0.35); } |
| 441 | −.pill { display: inline-block; border-radius: 4px; padding: 3px 10px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } |
483 | +.pill { display: inline-block; border-radius: var(--r-pill); padding: 3px 10px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } |
| 442 | −.pill.ok { background: var(--lime); color: var(--ink); border: 1px solid var(--ink); } |
484 | +.pill.ok { background: var(--blue-soft); color: var(--blue); } |
| 443 | −.pill.todo { background: var(--amber-soft); color: #8a5a12; border: 1px solid var(--amber); } |
485 | +.pill.todo { background: var(--orange-soft); color: var(--orange-deep); } |
| 444 | −.count-pill { font-weight: 700; font-family: var(--font-display); font-size: 16px; } |
486 | +.count-pill { font-weight: 700; font-family: var(--font-display); font-size: 16px; color: var(--navy); } |
| 445 | |
487 | |
| 446 | /* ================= Page Statistiques ================= */ |
488 | /* ================= Page Statistiques ================= */ |
| 447 | .stats-page { padding: 44px 0 90px; } |
489 | .stats-page { padding: 44px 0 90px; } |
| 448 | −.stats-title { font-size: clamp(30px, 4.6vw, 46px); text-transform: uppercase; margin: 10px 0 6px; } |
490 | +.stats-title { font-size: clamp(30px, 4.6vw, 46px); margin: 10px 0 6px; color: var(--navy); } |
| 449 | .stats-page .sub { color: var(--ink-2); max-width: 640px; margin-bottom: 30px; } |
491 | .stats-page .sub { color: var(--ink-2); max-width: 640px; margin-bottom: 30px; } |
| 450 | |
492 | |
| 451 | .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 30px; } |
493 | .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 30px; } |
| 452 | .tile { |
494 | .tile { |
| 453 | − background: var(--surface); border: 1.5px solid var(--ink); border-radius: var(--r-card); |
495 | + background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); |
| 454 | − padding: 18px 20px; box-shadow: 3px 3px 0 rgba(20, 24, 20, 0.1); |
496 | + padding: 18px 20px; box-shadow: var(--shadow-flat); |
| 455 | } |
497 | } |
| 456 | −.tile-v { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.03em; line-height: 1.05; } |
498 | +.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(--navy); } |
| 457 | −.tile-k { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); margin-top: 6px; } |
499 | +.tile-k { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); margin-top: 6px; } |
| 458 | −.hero-tile { background: var(--ink); color: var(--lime); border-color: var(--ink); } |
500 | +.hero-tile { background: var(--navy); color: var(--white); border-color: var(--navy); } |
| 459 | −.hero-tile .tile-k { color: rgba(217, 242, 107, 0.7); } |
501 | +.hero-tile .tile-v { color: var(--white); } |
| |
502 | +.hero-tile .tile-k { color: rgba(255, 255, 255, 0.6); } |
| 460 | |
503 | |
| 461 | .viz-card { |
504 | .viz-card { |
| 462 | − background: var(--surface); border: 1.5px solid var(--ink); border-radius: var(--r-card); |
505 | + background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); |
| 463 | box-shadow: var(--shadow-off-soft); padding: 26px 28px 20px; margin-bottom: 22px; |
506 | box-shadow: var(--shadow-off-soft); padding: 26px 28px 20px; margin-bottom: 22px; |
| 464 | } |
507 | } |
| 465 | −.viz-card h2 { font-size: 19px; text-transform: uppercase; letter-spacing: -0.01em; } |
508 | +.viz-card h2 { font-size: 19px; letter-spacing: -0.01em; color: var(--navy); } |
| 466 | −.viz-sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin: 4px 0 20px; } |
509 | +.viz-sub { font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin: 4px 0 20px; } |
| 467 | .viz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } |
510 | .viz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } |
| 468 | @media (max-width: 900px) { .viz-grid { grid-template-columns: 1fr; } } |
511 | @media (max-width: 900px) { .viz-grid { grid-template-columns: 1fr; } } |
| 469 | |
512 | |
| 470 | −/* Histogramme (mono-série, encre verte) */ |
513 | +/* Histogramme (mono-série, bleu vif) */ |
| 471 | .histo { display: flex; align-items: stretch; gap: 2px; height: 240px; } |
514 | .histo { display: flex; align-items: stretch; gap: 2px; height: 240px; } |
| 472 | .histo-col { flex: 1; display: flex; flex-direction: column; min-width: 0; cursor: default; } |
515 | .histo-col { flex: 1; display: flex; flex-direction: column; min-width: 0; cursor: default; } |
| 473 | −.histo-bar-zone { flex: 1; display: flex; align-items: flex-end; border-bottom: 1.5px solid var(--ink); } |
516 | +.histo-bar-zone { flex: 1; display: flex; align-items: flex-end; border-bottom: 1px solid var(--line-strong); } |
| 474 | .histo-bar { |
517 | .histo-bar { |
| 475 | − width: 100%; background: var(--green); border-radius: 4px 4px 0 0; |
518 | + width: 100%; background: var(--blue); border-radius: 6px 6px 0 0; |
| 476 | min-height: 2px; transition: background 0.12s ease; |
519 | min-height: 2px; transition: background 0.12s ease; |
| 477 | } |
520 | } |
| 478 | −.histo-col:hover .histo-bar { background: var(--ink); box-shadow: inset 0 0 0 2px var(--lime); } |
521 | +.histo-col:hover .histo-bar { background: var(--orange); } |
| 479 | −.histo-x { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-3); text-align: left; height: 18px; padding-top: 5px; overflow: visible; white-space: nowrap; } |
522 | +.histo-x { font-size: 9.5px; color: var(--ink-3); text-align: left; height: 18px; padding-top: 5px; overflow: visible; white-space: nowrap; } |
| 480 | |
523 | |
| 481 | /* Barres horizontales (mono-série) */ |
524 | /* Barres horizontales (mono-série) */ |
| 482 | .hbars { display: flex; flex-direction: column; gap: 7px; } |
525 | .hbars { display: flex; flex-direction: column; gap: 7px; } |
| 485 | gap: 12px; align-items: center; min-height: 26px; cursor: default; |
528 | gap: 12px; align-items: center; min-height: 26px; cursor: default; |
| 486 | } |
529 | } |
| 487 | .hbar-label { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } |
530 | .hbar-label { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } |
| 488 | −.hbar-label a { border-bottom: 1.5px solid var(--lime); } |
531 | +.hbar-label a { border-bottom: 1.5px solid rgba(34, 88, 255, 0.35); } |
| 489 | −.hbar-label a:hover { color: var(--green-deep); } |
532 | +.hbar-label a:hover { color: var(--blue); } |
| 490 | −.hbar-track { background: var(--surface-2); border-radius: 0 4px 4px 0; height: 18px; overflow: hidden; } |
533 | +.hbar-track { background: var(--grey); border-radius: var(--r-pill); height: 18px; overflow: hidden; } |
| 491 | .hbar-fill { |
534 | .hbar-fill { |
| 492 | − display: block; height: 100%; background: var(--green); border-radius: 0 4px 4px 0; |
535 | + display: block; height: 100%; background: var(--blue); border-radius: var(--r-pill); |
| 493 | min-width: 2px; transition: background 0.12s ease; |
536 | min-width: 2px; transition: background 0.12s ease; |
| 494 | } |
537 | } |
| 495 | −.hbar-row:hover .hbar-fill { background: var(--ink); box-shadow: inset 0 0 0 2px var(--lime); } |
538 | +.hbar-row:hover .hbar-fill { background: var(--orange); } |
| 496 | −.hbar-value { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; white-space: nowrap; } |
539 | +.hbar-value { font-size: 11.5px; font-weight: 700; white-space: nowrap; color: var(--navy); } |
| 497 | .hbar-value em { font-style: normal; font-weight: 500; color: var(--ink-3); } |
540 | .hbar-value em { font-style: normal; font-weight: 500; color: var(--ink-3); } |
| 498 | @media (max-width: 640px) { |
541 | @media (max-width: 640px) { |
| 499 | .hbar-row { grid-template-columns: minmax(80px, 110px) 1fr auto; gap: 8px; } |
542 | .hbar-row { grid-template-columns: minmax(80px, 110px) 1fr auto; gap: 8px; } |
| 505 | /* Infobulle */ |
548 | /* Infobulle */ |
| 506 | .viz-tip { |
549 | .viz-tip { |
| 507 | position: fixed; z-index: 120; pointer-events: none; max-width: 180px; |
550 | position: fixed; z-index: 120; pointer-events: none; max-width: 180px; |
| 508 | − background: var(--ink); color: var(--paper); border-radius: 8px; |
551 | + background: var(--navy); color: var(--white); border-radius: 12px; |
| 509 | − border: 1px solid var(--lime); padding: 9px 12px; font-size: 12px; line-height: 1.5; |
552 | + padding: 9px 12px; font-size: 12px; line-height: 1.5; |
| 510 | − box-shadow: 0 8px 24px rgba(16, 18, 16, 0.35); |
553 | + box-shadow: 0 8px 24px rgba(11, 19, 48, 0.35); |
| 511 | } |
554 | } |
| 512 | −.viz-tip-title { font-family: var(--font-display); font-weight: 700; color: var(--lime); margin-bottom: 2px; } |
555 | +.viz-tip-title { font-family: var(--font-display); font-weight: 700; color: var(--orange); margin-bottom: 2px; } |
| 513 | |
556 | |
| 514 | /* Vue tableau repliable (accessibilité / relief) */ |
557 | /* Vue tableau repliable (accessibilité / relief) */ |
| 515 | −.viz-table { margin-top: 16px; border-top: 1.5px dashed var(--line); padding-top: 10px; } |
558 | +.viz-table { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 10px; } |
| 516 | .viz-table summary { |
559 | .viz-table summary { |
| 517 | − cursor: pointer; font-family: var(--font-mono); font-size: 11px; font-weight: 700; |
560 | + cursor: pointer; font-size: 11.5px; font-weight: 700; |
| 518 | − text-transform: uppercase; letter-spacing: 0.08em; color: var(--green-deep); |
561 | + text-transform: uppercase; letter-spacing: 0.08em; color: var(--blue); |
| 519 | } |
562 | } |
| 520 | .viz-table table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; } |
563 | .viz-table table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; } |
| 521 | −.viz-table th { text-align: left; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); padding: 6px 10px; border-bottom: 1.5px solid var(--ink); } |
564 | +.viz-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); padding: 6px 10px; border-bottom: 1px solid var(--line-strong); } |
| 522 | .viz-table td { padding: 6px 10px; border-bottom: 1px solid var(--line); } |
565 | .viz-table td { padding: 6px 10px; border-bottom: 1px solid var(--line); } |
| 523 | |
566 | |
| 524 | −.stats-foot { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; margin-top: 6px; } |
567 | +.stats-foot { font-size: 11.5px; color: var(--ink-3); letter-spacing: 0.02em; margin-top: 6px; } |
| 525 | |
568 | |
| 526 | /* ================= Mobile : feuille de filtres + FAB ================= */ |
569 | /* ================= Mobile : feuille de filtres + FAB ================= */ |
| 527 | .sheet-head { display: none; } |
570 | .sheet-head { display: none; } |
| 531 | |
574 | |
| 532 | @media (max-width: 640px) { |
575 | @media (max-width: 640px) { |
| 533 | /* En-tête compact */ |
576 | /* En-tête compact */ |
| 534 | − .header-inner { height: 56px; } |
577 | + .header-inner { height: 58px; } |
| 535 | .brand { font-size: 21px; } |
578 | .brand { font-size: 21px; } |
| 536 | .nav a { padding: 8px 13px; font-size: 13.5px; } |
579 | .nav a { padding: 8px 13px; font-size: 13.5px; } |
| 537 | .ticker { font-size: 10.5px; padding: 6px 0; } |
580 | .ticker { font-size: 10.5px; padding: 6px 0; } |
| 538 | |
581 | |
| 539 | /* Héro resserré + stats en rangée défilante */ |
582 | /* Héro resserré + stats en rangée défilante */ |
| 540 | − .hero h1 { font-size: clamp(30px, 9.4vw, 44px); } |
583 | + .hero h1 { font-size: clamp(30px, 8.6vw, 42px); } |
| 541 | .hero p.lede { font-size: 15px; } |
584 | .hero p.lede { font-size: 15px; } |
| 542 | .stat-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; margin-right: -16px; padding-right: 16px; } |
585 | .stat-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; margin-right: -16px; padding-right: 16px; } |
| 543 | .stat-row::-webkit-scrollbar { display: none; } |
586 | .stat-row::-webkit-scrollbar { display: none; } |
| 552 | .filterbar.open { |
595 | .filterbar.open { |
| 553 | display: flex; flex-direction: column; gap: 12px; |
596 | display: flex; flex-direction: column; gap: 12px; |
| 554 | position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; |
597 | position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; |
| 555 | − margin: 0; border-radius: 20px 20px 0 0; border-width: 2px 0 0 0; |
598 | + margin: 0; border-radius: 24px 24px 0 0; border: none; |
| 556 | max-height: 82dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; |
599 | max-height: 82dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; |
| 557 | padding: 16px 18px calc(18px + env(safe-area-inset-bottom)); |
600 | padding: 16px 18px calc(18px + env(safe-area-inset-bottom)); |
| 558 | − box-shadow: 0 -16px 48px rgba(16, 18, 16, 0.35); |
601 | + box-shadow: 0 -16px 48px rgba(11, 19, 48, 0.28); |
| 559 | animation: sheet-up 0.22s ease; |
602 | animation: sheet-up 0.22s ease; |
| 560 | } |
603 | } |
| 561 | @keyframes sheet-up { from { transform: translateY(30%); opacity: 0.4; } to { transform: none; opacity: 1; } } |
604 | @keyframes sheet-up { from { transform: translateY(30%); opacity: 0.4; } to { transform: none; opacity: 1; } } |
| 562 | .filterbar.open .sheet-head { |
605 | .filterbar.open .sheet-head { |
| 563 | display: flex; justify-content: space-between; align-items: center; |
606 | display: flex; justify-content: space-between; align-items: center; |
| 564 | font-family: var(--font-display); font-weight: 700; font-size: 17px; |
607 | font-family: var(--font-display); font-weight: 700; font-size: 17px; |
| 565 | − text-transform: uppercase; letter-spacing: -0.01em; |
608 | + letter-spacing: -0.01em; color: var(--navy); |
| 566 | position: sticky; top: -16px; background: var(--surface); padding: 6px 0 8px; |
609 | position: sticky; top: -16px; background: var(--surface); padding: 6px 0 8px; |
| 567 | − border-bottom: 1.5px solid var(--line); margin-bottom: 2px; z-index: 1; |
610 | + border-bottom: 1px solid var(--line); margin-bottom: 2px; z-index: 1; |
| 568 | } |
611 | } |
| 569 | .sheet-close { |
612 | .sheet-close { |
| 570 | − border: 1.5px solid var(--ink); background: var(--surface); border-radius: 50%; |
613 | + border: 1px solid var(--line-strong); background: var(--surface); border-radius: 50%; |
| 571 | − width: 36px; height: 36px; font-size: 15px; cursor: pointer; line-height: 1; |
614 | + width: 36px; height: 36px; font-size: 15px; cursor: pointer; line-height: 1; color: var(--navy); |
| 572 | } |
615 | } |
| 573 | .filterbar.open .sheet-apply { display: block; width: 100%; } |
616 | .filterbar.open .sheet-apply { display: block; width: 100%; } |
| 574 | .sheet-backdrop { |
617 | .sheet-backdrop { |
| 575 | display: block; position: fixed; inset: 0; z-index: 90; |
618 | display: block; position: fixed; inset: 0; z-index: 90; |
| 576 | − background: rgba(16, 18, 16, 0.45); backdrop-filter: blur(2px); |
619 | + background: rgba(11, 19, 48, 0.45); backdrop-filter: blur(2px); |
| 577 | } |
620 | } |
| 578 | |
621 | |
| 579 | /* Bouton flottant */ |
622 | /* Bouton flottant */ |
| 580 | .fab { |
623 | .fab { |
| 581 | display: flex; align-items: center; gap: 6px; |
624 | display: flex; align-items: center; gap: 6px; |
| 582 | position: fixed; left: 50%; transform: translateX(-50%); |
625 | position: fixed; left: 50%; transform: translateX(-50%); |
| 583 | − bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 80; |
626 | + bottom: calc(74px + env(safe-area-inset-bottom)); z-index: 80; |
| 584 | − background: var(--ink); color: var(--lime); border: 1.5px solid var(--ink); |
627 | + background: var(--orange); color: var(--white); border: none; |
| 585 | − border-radius: 999px; padding: 13px 24px; font-family: var(--font-display); |
628 | + border-radius: var(--r-pill); padding: 13px 24px; font-family: var(--font-display); |
| 586 | − font-weight: 700; font-size: 15px; cursor: pointer; |
629 | + font-weight: 600; font-size: 15px; cursor: pointer; |
| 587 | − box-shadow: 0 8px 24px rgba(16, 18, 16, 0.35), 4px 4px 0 rgba(20, 24, 20, 0.25); |
630 | + box-shadow: 0 10px 28px rgba(255, 106, 0, 0.4); |
| 588 | } |
631 | } |
| 589 | .fab:active { transform: translateX(-50%) scale(0.97); } |
632 | .fab:active { transform: translateX(-50%) scale(0.97); } |
| 590 | |
633 | |
| 600 | .notice { padding: 48px 16px; } |
643 | .notice { padding: 48px 16px; } |
| 601 | } |
644 | } |
| 602 | |
645 | |
| |
646 | +/* ================= Barre de navigation inférieure (mobile) ================= */ |
| |
647 | +.tabbar { display: none; } |
| |
648 | +@media (max-width: 760px) { |
| |
649 | + .tabbar { |
| |
650 | + display: grid; grid-template-columns: repeat(4, 1fr); |
| |
651 | + position: fixed; left: 0; right: 0; bottom: 0; z-index: 85; |
| |
652 | + background: rgba(255, 255, 255, 0.92); |
| |
653 | + backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); |
| |
654 | + border-top: 1px solid var(--line); |
| |
655 | + padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); |
| |
656 | + } |
| |
657 | + .tabbar a { |
| |
658 | + display: flex; flex-direction: column; align-items: center; gap: 3px; |
| |
659 | + padding: 5px 2px; min-height: 48px; justify-content: center; |
| |
660 | + font-size: 10.5px; font-weight: 600; color: var(--ink-3); |
| |
661 | + border-radius: var(--r-ctl); transition: color 0.12s ease; |
| |
662 | + } |
| |
663 | + .tabbar a.active { color: var(--orange); } |
| |
664 | + .tabbar a svg { display: block; } |
| |
665 | + body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); } |
| |
666 | + .footer { padding-bottom: calc(72px + env(safe-area-inset-bottom)); } |
| |
667 | +} |
| |
668 | + |
| 603 | /* Anti-zoom iOS : les champs doivent faire >= 16px */ |
669 | /* Anti-zoom iOS : les champs doivent faire >= 16px */ |
| 604 | @media (max-width: 900px) { |
670 | @media (max-width: 900px) { |
| 605 | .field input, .field select { font-size: 16px; } |
671 | .field input, .field select { font-size: 16px; } |
| 606 | } |
672 | } |
| 607 | |
673 | |
| 608 | /* ================= Footer ================= */ |
674 | /* ================= Footer ================= */ |
| 609 | −.footer { background: var(--ink); color: rgba(245, 243, 238, 0.75); margin-top: 20px; padding: 44px 0 max(40px, env(safe-area-inset-bottom)); font-size: 13px; } |
675 | +.footer { background: var(--navy); color: rgba(255, 255, 255, 0.72); margin-top: 20px; padding: 44px 0 max(40px, env(safe-area-inset-bottom)); font-size: 13px; } |
| 610 | −.footer .fbrand { font-family: var(--font-display); font-weight: 700; font-size: 34px; color: var(--paper); letter-spacing: -0.04em; margin-bottom: 12px; } |
676 | +.footer .fbrand { font-family: var(--font-display); font-weight: 700; font-size: 32px; color: var(--white); letter-spacing: -0.03em; margin-bottom: 4px; display: flex; align-items: center; } |
| 611 | −.footer .fbrand .ka { color: var(--lime); } |
677 | +.footer .fbrand .logo-ico { margin-right: 10px; } |
| 612 | −.footer b { color: var(--paper); } |
678 | +.footer .fbrand .ka { color: var(--orange); } |
| |
679 | +.footer .fbaseline { color: rgba(255, 255, 255, 0.65); font-size: 14px; margin-bottom: 16px; } |
| |
680 | +.footer .fbaseline .hl { color: var(--orange); font-weight: 600; } |
| |
681 | +.footer b { color: var(--white); } |
| 613 | .footer .frow { display: flex; flex-direction: column; gap: 5px; max-width: 720px; } |
682 | .footer .frow { display: flex; flex-direction: column; gap: 5px; max-width: 720px; } |
| 614 | −.footer .fmono { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(245,243,238,0.45); margin-top: 18px; } |
683 | +.footer .fmono { font-size: 11.5px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.42); margin-top: 18px; } |
| 615 | |
684 | |
| 616 | /* --- Carte interactive (mission 4) --------------------------------------- */ |
685 | /* --- Carte interactive (mission 4) --------------------------------------- */ |
| 617 | .results-tools { display: flex; align-items: center; gap: 14px; } |
686 | .results-tools { display: flex; align-items: center; gap: 14px; } |
| 618 | .view-toggle { |
687 | .view-toggle { |
| 619 | − display: inline-flex; border: 1.5px solid var(--line-strong); |
688 | + display: inline-flex; border: 1px solid var(--line-strong); |
| 620 | − border-radius: var(--r-ctl); overflow: hidden; background: var(--surface); |
689 | + border-radius: var(--r-pill); overflow: hidden; background: var(--surface); |
| 621 | box-shadow: var(--shadow-flat); |
690 | box-shadow: var(--shadow-flat); |
| 622 | } |
691 | } |
| 623 | .view-toggle button { |
692 | .view-toggle button { |
| 624 | − border: 0; background: transparent; padding: 7px 14px; cursor: pointer; |
693 | + border: 0; background: transparent; padding: 7px 16px; cursor: pointer; |
| 625 | − font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); |
694 | + font-size: 12.5px; font-weight: 600; color: var(--ink-2); |
| 626 | } |
695 | } |
| 627 | −.view-toggle button + button { border-left: 1.5px solid var(--line-strong); } |
696 | +.view-toggle button + button { border-left: 1px solid var(--line); } |
| 628 | −.view-toggle button.on { background: var(--ink); color: var(--lime); } |
697 | +.view-toggle button.on { background: var(--blue); color: var(--white); } |
| 629 | |
698 | |
| 630 | .map-split { |
699 | .map-split { |
| 631 | display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 18px; |
700 | display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 18px; |
| 637 | } |
706 | } |
| 638 | .map-list .card { margin: 0; flex: 0 0 auto; } |
707 | .map-list .card { margin: 0; flex: 0 0 auto; } |
| 639 | .mapview { |
708 | .mapview { |
| 640 | − width: 100%; height: 100%; border: 1.5px solid var(--line-strong); |
709 | + width: 100%; height: 100%; border: 1px solid var(--line); |
| 641 | border-radius: var(--r-card); box-shadow: var(--shadow-off-soft); |
710 | border-radius: var(--r-card); box-shadow: var(--shadow-off-soft); |
| 642 | − overflow: hidden; background: var(--surface-2); |
711 | + overflow: hidden; background: var(--grey); |
| 643 | } |
712 | } |
| 644 | .map-loading { |
713 | .map-loading { |
| 645 | display: flex; align-items: center; justify-content: center; |
714 | display: flex; align-items: center; justify-content: center; |
| 646 | − color: var(--ink-3); font-family: var(--font-mono); font-size: 13px; |
715 | + color: var(--ink-3); font-size: 13px; |
| 647 | } |
716 | } |
| 648 | |
717 | |
| 649 | /* mobile d'abord : carte plein écran, liste masquée (bascule via l'onglet) */ |
718 | /* mobile d'abord : carte plein écran, liste masquée (bascule via l'onglet) */ |
| 656 | /* popup MapLibre au style Lou-Ka */ |
725 | /* popup MapLibre au style Lou-Ka */ |
| 657 | .maplibregl-popup-content { |
726 | .maplibregl-popup-content { |
| 658 | padding: 0; border-radius: var(--r-card); overflow: hidden; |
727 | padding: 0; border-radius: var(--r-card); overflow: hidden; |
| 659 | − border: 1.5px solid var(--line-strong); box-shadow: var(--shadow-off); |
728 | + border: 1px solid var(--line); box-shadow: var(--shadow-off); |
| 660 | font-family: var(--font-body); |
729 | font-family: var(--font-body); |
| 661 | } |
730 | } |
| 662 | .maplibregl-popup-close-button { |
731 | .maplibregl-popup-close-button { |
| 663 | − font-size: 18px; padding: 2px 8px; color: var(--paper); z-index: 2; |
732 | + font-size: 18px; padding: 2px 8px; color: var(--white); z-index: 2; |
| 664 | − text-shadow: 0 0 4px rgba(20, 24, 20, 0.8); |
733 | + text-shadow: 0 0 4px rgba(11, 19, 48, 0.8); |
| 665 | } |
734 | } |
| 666 | .mv-pop img, .mv-noimg { width: 100%; height: 130px; object-fit: cover; } |
735 | .mv-pop img, .mv-noimg { width: 100%; height: 130px; object-fit: cover; } |
| 667 | .mv-noimg { display: flex; align-items: center; justify-content: center; |
736 | .mv-noimg { display: flex; align-items: center; justify-content: center; |
| 668 | − font-size: 34px; background: var(--surface-2); } |
737 | + font-size: 34px; background: var(--grey); } |
| 669 | .mv-pop-body { padding: 10px 12px 12px; } |
738 | .mv-pop-body { padding: 10px 12px 12px; } |
| 670 | −.mv-pop-price { font-family: var(--font-display); font-weight: 700; font-size: 18px; } |
739 | +.mv-pop-price { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--navy); } |
| 671 | .mv-pop-price small { font-weight: 400; color: var(--ink-3); font-size: 12px; } |
740 | .mv-pop-price small { font-weight: 400; color: var(--ink-3); font-size: 12px; } |
| 672 | .mv-pop-title { font-size: 13px; color: var(--ink-2); margin-top: 2px; |
741 | .mv-pop-title { font-size: 13px; color: var(--ink-2); margin-top: 2px; |
| 673 | overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } |
742 | overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } |
| 674 | −.mv-pop-meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); margin-top: 6px; } |
743 | +.mv-pop-meta { font-size: 11.5px; color: var(--ink-2); margin-top: 6px; } |
| 675 | −.mv-pop-src { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); |
744 | +.mv-pop-src { font-size: 10px; color: var(--ink-3); |
| 676 | text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; } |
745 | text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; } |
| 677 | .mv-pop-cta { |
746 | .mv-pop-cta { |
| 678 | − display: block; margin-top: 10px; padding: 8px 10px; text-align: center; |
747 | + display: block; margin-top: 10px; padding: 9px 10px; text-align: center; |
| 679 | − background: var(--ink); color: var(--lime); border-radius: var(--r-ctl); |
748 | + background: var(--orange); color: var(--white); border-radius: var(--r-pill); |
| 680 | font-weight: 600; font-size: 13px; |
749 | font-weight: 600; font-size: 13px; |
| 681 | } |
750 | } |
| 682 | −.mv-pop-cta:hover { background: var(--green-deep); } |
751 | +.mv-pop-cta:hover { background: var(--orange-deep); } |
| 683 | |
752 | |
| 684 | /* --- Commodités de proximité (fiche) -------------------------------------- */ |
753 | /* --- Commodités de proximité (fiche) -------------------------------------- */ |
| 685 | .poi-list { |
754 | .poi-list { |
| 688 | } |
757 | } |
| 689 | .poi-list li { |
758 | .poi-list li { |
| 690 | display: flex; align-items: center; gap: 9px; |
759 | display: flex; align-items: center; gap: 9px; |
| 691 | − padding: 5px 2px; border-bottom: 1px dashed var(--line); |
760 | + padding: 5px 2px; border-bottom: 1px solid var(--line); |
| 692 | font-size: 13px; |
761 | font-size: 13px; |
| 693 | } |
762 | } |
| 694 | .poi-list li:last-child { border-bottom: 0; } |
763 | .poi-list li:last-child { border-bottom: 0; } |
| 695 | .poi-ico { width: 20px; text-align: center; flex: 0 0 auto; } |
764 | .poi-ico { width: 20px; text-align: center; flex: 0 0 auto; } |
| 696 | .poi-name { flex: 1; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } |
765 | .poi-name { flex: 1; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } |
| 697 | −.poi-dist { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink); font-weight: 600; flex: 0 0 auto; } |
766 | +.poi-dist { font-size: 11.5px; color: var(--navy); font-weight: 600; flex: 0 0 auto; } |
| 698 | |
767 | |
| 699 | /* --- Menu déroulant mobile ------------------------------------------------- */ |
768 | /* --- Menu déroulant mobile ------------------------------------------------- */ |
| 700 | .menu-btn { |
769 | .menu-btn { |
| 701 | display: none; position: relative; z-index: 60; |
770 | display: none; position: relative; z-index: 60; |
| 702 | width: 44px; height: 44px; margin-left: auto; |
771 | width: 44px; height: 44px; margin-left: auto; |
| 703 | − border: 1.5px solid var(--ink); border-radius: var(--r-ctl); |
772 | + border: 1px solid var(--line-strong); border-radius: var(--r-ctl); |
| 704 | background: var(--surface); cursor: pointer; padding: 0; |
773 | background: var(--surface); cursor: pointer; padding: 0; |
| 705 | flex-direction: column; align-items: center; justify-content: center; gap: 5px; |
774 | flex-direction: column; align-items: center; justify-content: center; gap: 5px; |
| 706 | − box-shadow: 3px 3px 0 rgba(20, 24, 20, 0.15); |
775 | + box-shadow: var(--shadow-flat); |
| 707 | transition: box-shadow 0.15s ease, transform 0.15s ease; |
776 | transition: box-shadow 0.15s ease, transform 0.15s ease; |
| 708 | } |
777 | } |
| 709 | −.menu-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(20,24,20,0.15); } |
778 | +.menu-btn:active { transform: scale(0.96); } |
| 710 | .menu-btn span { |
779 | .menu-btn span { |
| 711 | − display: block; width: 18px; height: 2px; background: var(--ink); |
780 | + display: block; width: 18px; height: 2px; background: var(--navy); |
| 712 | border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease; |
781 | border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease; |
| 713 | } |
782 | } |
| 714 | .menu-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } |
783 | .menu-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } |
| 717 | |
786 | |
| 718 | .mobile-menu { |
787 | .mobile-menu { |
| 719 | display: none; position: absolute; left: 0; right: 0; top: 100%; |
788 | display: none; position: absolute; left: 0; right: 0; top: 100%; |
| 720 | − background: var(--paper); border-bottom: 2px solid var(--ink); |
789 | + background: var(--white); border-bottom: 1px solid var(--line); |
| 721 | − box-shadow: 0 18px 30px rgba(20, 24, 20, 0.18); |
790 | + box-shadow: 0 18px 30px rgba(11, 19, 48, 0.14); |
| 722 | padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); |
791 | padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); |
| 723 | max-height: 0; overflow: hidden; opacity: 0; |
792 | max-height: 0; overflow: hidden; opacity: 0; |
| 724 | transition: max-height 0.3s ease, opacity 0.22s ease; |
793 | transition: max-height 0.3s ease, opacity 0.22s ease; |
| 728 | display: flex; align-items: center; gap: 12px; |
797 | display: flex; align-items: center; gap: 12px; |
| 729 | padding: 15px 10px; min-height: 52px; |
798 | padding: 15px 10px; min-height: 52px; |
| 730 | font-family: var(--font-display); font-weight: 700; font-size: 19px; |
799 | font-family: var(--font-display); font-weight: 700; font-size: 19px; |
| 731 | − letter-spacing: -0.02em; border-bottom: 1.5px dashed var(--line); |
800 | + letter-spacing: -0.02em; border-bottom: 1px solid var(--line); |
| |
801 | + color: var(--navy); |
| 732 | opacity: 0; transform: translateY(-8px); |
802 | opacity: 0; transform: translateY(-8px); |
| 733 | transition: opacity 0.25s ease, transform 0.25s ease; |
803 | transition: opacity 0.25s ease, transform 0.25s ease; |
| 734 | } |
804 | } |
| 735 | .mobile-menu.open .mm-link { opacity: 1; transform: translateY(0); } |
805 | .mobile-menu.open .mm-link { opacity: 1; transform: translateY(0); } |
| 736 | −.mm-link.active { color: var(--green); } |
806 | +.mm-link.active { color: var(--orange); } |
| 737 | −.mm-link.active .mm-arrow { opacity: 1; } |
807 | +.mm-link.active .mm-arrow { opacity: 1; color: var(--orange); } |
| 738 | .mm-ico { width: 26px; text-align: center; font-size: 17px; } |
808 | .mm-ico { width: 26px; text-align: center; font-size: 17px; } |
| 739 | −.mm-arrow { margin-left: auto; opacity: 0.25; transition: opacity 0.15s ease; } |
809 | +.mm-arrow { margin-left: auto; opacity: 0.25; color: var(--orange); transition: opacity 0.15s ease; } |
| 740 | −.mm-link:active { background: var(--lime-soft); border-radius: var(--r-ctl); } |
810 | +.mm-link:active { background: var(--orange-soft); border-radius: var(--r-ctl); } |
| 741 | .mm-foot { |
811 | .mm-foot { |
| 742 | − padding: 12px 10px 4px; font-family: var(--font-mono); |
812 | + padding: 12px 10px 4px; |
| 743 | − font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.04em; |
813 | + font-size: 11px; color: var(--ink-3); letter-spacing: 0.02em; |
| 744 | } |
814 | } |
| 745 | .mm-backdrop { |
815 | .mm-backdrop { |
| 746 | position: fixed; inset: 0; z-index: 40; |
816 | position: fixed; inset: 0; z-index: 40; |
| 747 | − background: rgba(20, 24, 20, 0.35); backdrop-filter: blur(2px); |
817 | + background: rgba(11, 19, 48, 0.35); backdrop-filter: blur(2px); |
| 748 | } |
818 | } |
| 749 | @media (max-width: 760px) { |
819 | @media (max-width: 760px) { |
| 750 | .menu-btn { display: flex; } |
820 | .menu-btn { display: flex; } |
| 761 | @keyframes cookie-in { from { transform: translateY(24px); opacity: 0; } } |
831 | @keyframes cookie-in { from { transform: translateY(24px); opacity: 0; } } |
| 762 | .cookie-inner { |
832 | .cookie-inner { |
| 763 | max-width: 720px; margin: 0 auto; background: var(--surface); |
833 | max-width: 720px; margin: 0 auto; background: var(--surface); |
| 764 | − border: 2px solid var(--ink); border-radius: var(--r-card); |
834 | + border: 1px solid var(--line); border-radius: var(--r-card); |
| 765 | box-shadow: var(--shadow-off); padding: 16px 18px; |
835 | box-shadow: var(--shadow-off); padding: 16px 18px; |
| 766 | } |
836 | } |
| 767 | .cookie-text { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; } |
837 | .cookie-text { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; } |
| 768 | −.cookie-text b { color: var(--ink); } |
838 | +.cookie-text b { color: var(--navy); } |
| 769 | .cookie-text a { text-decoration: underline; text-underline-offset: 2px; } |
839 | .cookie-text a { text-decoration: underline; text-underline-offset: 2px; } |
| 770 | .cookie-options { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } |
840 | .cookie-options { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } |
| 771 | .cookie-opt { |
841 | .cookie-opt { |
| 772 | display: flex; align-items: flex-start; gap: 10px; font-size: 13px; |
842 | display: flex; align-items: flex-start; gap: 10px; font-size: 13px; |
| 773 | color: var(--ink-2); cursor: pointer; |
843 | color: var(--ink-2); cursor: pointer; |
| 774 | } |
844 | } |
| 775 | −.cookie-opt input { margin-top: 2px; accent-color: var(--green); width: 16px; height: 16px; } |
845 | +.cookie-opt input { margin-top: 2px; accent-color: var(--orange); width: 16px; height: 16px; } |
| 776 | .cookie-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; justify-content: flex-end; } |
846 | .cookie-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; justify-content: flex-end; } |
| 777 | @media (max-width: 640px) { |
847 | @media (max-width: 640px) { |
| 778 | .cookie-actions { justify-content: stretch; } |
848 | .cookie-actions { justify-content: stretch; } |
| 781 | |
851 | |
| 782 | /* --- Page confidentialité + lien pied de page ------------------------------- */ |
852 | /* --- Page confidentialité + lien pied de page ------------------------------- */ |
| 783 | .legal { padding: 48px 0 70px; max-width: 760px; } |
853 | .legal { padding: 48px 0 70px; max-width: 760px; } |
| 784 | −.legal h1 { font-size: clamp(30px, 5vw, 46px); margin: 12px 0 8px; letter-spacing: -0.03em; } |
854 | +.legal h1 { font-size: clamp(30px, 5vw, 46px); margin: 12px 0 8px; letter-spacing: -0.03em; color: var(--navy); } |
| 785 | .legal section { margin-top: 26px; } |
855 | .legal section { margin-top: 26px; } |
| 786 | .legal h3 { font-size: 18px; margin-bottom: 8px; } |
856 | .legal h3 { font-size: 18px; margin-bottom: 8px; } |
| 787 | .legal p, .legal li { color: var(--ink-2); font-size: 14.5px; } |
857 | .legal p, .legal li { color: var(--ink-2); font-size: 14.5px; } |
| 793 | |
863 | |
| 794 | /* --- Section « Le quartier » (fiche) --------------------------------------- */ |
864 | /* --- Section « Le quartier » (fiche) --------------------------------------- */ |
| 795 | .quartier { margin-top: 34px; } |
865 | .quartier { margin-top: 34px; } |
| 796 | −.quartier h2 { font-size: 24px; letter-spacing: -0.02em; } |
866 | +.quartier h2 { font-size: 24px; letter-spacing: -0.02em; color: var(--navy); } |
| 797 | .q-sub { color: var(--ink-3); font-size: 13px; margin: 4px 0 16px; } |
867 | .q-sub { color: var(--ink-3); font-size: 13px; margin: 4px 0 16px; } |
| 798 | .q-grid { |
868 | .q-grid { |
| 799 | display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; |
869 | display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; |
| 800 | } |
870 | } |
| 801 | @media (max-width: 640px) { .q-grid { grid-template-columns: repeat(2, 1fr); } } |
871 | @media (max-width: 640px) { .q-grid { grid-template-columns: repeat(2, 1fr); } } |
| 802 | .q-cell { |
872 | .q-cell { |
| 803 | − background: var(--surface); border: 1.5px solid var(--line-strong); |
873 | + background: var(--surface); border: 1px solid var(--line); |
| 804 | border-radius: var(--r-card); padding: 12px 14px; box-shadow: var(--shadow-flat); |
874 | border-radius: var(--r-card); padding: 12px 14px; box-shadow: var(--shadow-flat); |
| 805 | } |
875 | } |
| 806 | −.q-val { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; } |
876 | +.q-val { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; color: var(--navy); } |
| 807 | −.q-label { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); |
877 | +.q-label { font-size: 10.5px; font-weight: 600; color: var(--ink-3); |
| 808 | text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; } |
878 | text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; } |
| 809 | .q-prox { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; } |
879 | .q-prox { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; } |
| 810 | .q-bar { display: flex; align-items: center; gap: 10px; font-size: 13px; } |
880 | .q-bar { display: flex; align-items: center; gap: 10px; font-size: 13px; } |
| 811 | .q-bar-label { flex: 0 0 150px; color: var(--ink-2); } |
881 | .q-bar-label { flex: 0 0 150px; color: var(--ink-2); } |
| 812 | @media (max-width: 640px) { .q-bar-label { flex-basis: 120px; font-size: 12px; } } |
882 | @media (max-width: 640px) { .q-bar-label { flex-basis: 120px; font-size: 12px; } } |
| 813 | .q-bar-track { |
883 | .q-bar-track { |
| 814 | − flex: 1; height: 10px; background: var(--surface-2); |
884 | + flex: 1; height: 10px; background: var(--grey); |
| 815 | − border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; |
885 | + border-radius: var(--r-pill); overflow: hidden; |
| 816 | } |
886 | } |
| 817 | −.q-bar-fill { display: block; height: 100%; background: var(--green); border-radius: 999px; } |
887 | +.q-bar-fill { display: block; height: 100%; background: var(--blue); border-radius: var(--r-pill); } |
| 818 | −.q-bar-num { flex: 0 0 30px; text-align: right; font-family: var(--font-mono); |
888 | +.q-bar-num { flex: 0 0 30px; text-align: right; |
| 819 | − font-size: 11.5px; font-weight: 700; } |
889 | + font-size: 11.5px; font-weight: 700; color: var(--navy); } |
| 820 | .q-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } |
890 | .q-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } |
| 821 | .q-badge { |
891 | .q-badge { |
| 822 | display: inline-flex; align-items: center; gap: 6px; |
892 | display: inline-flex; align-items: center; gap: 6px; |
| 823 | − border: 1.5px solid var(--line-strong); border-radius: 999px; |
893 | + border: 1px solid var(--line-strong); border-radius: var(--r-pill); |
| 824 | − padding: 7px 13px; font-size: 12.5px; background: var(--surface); |
894 | + padding: 7px 14px; font-size: 12.5px; background: var(--surface); |
| 825 | } |
895 | } |
| 826 | −.q-badge.cool { background: var(--lime-soft); border-color: var(--green); color: var(--green-deep); } |
896 | +.q-badge.cool { background: var(--blue-soft); border-color: rgba(34, 88, 255, 0.3); color: var(--blue); } |
| 827 | −.q-badge.hot { background: var(--amber-soft); border-color: var(--amber); color: #8a5a12; } |
897 | +.q-badge.hot { background: var(--orange-soft); border-color: rgba(255, 106, 0, 0.35); color: var(--orange-deep); } |
| 828 | .quartier .fine { margin-top: 10px; } |
898 | .quartier .fine { margin-top: 10px; } |
| 829 | |
899 | |
| 830 | /* --- Fiche v2 (mobile-first) ------------------------------------------------ */ |
900 | /* --- Fiche v2 (mobile-first) ------------------------------------------------ */ |
| 839 | .f-col { display: flex; flex-direction: column; gap: 26px; min-width: 0; } |
909 | .f-col { display: flex; flex-direction: column; gap: 26px; min-width: 0; } |
| 840 | } |
910 | } |
| 841 | .f-bloc { min-width: 0; } |
911 | .f-bloc { min-width: 0; } |
| 842 | −.f-bloc h2 { font-size: 21px; letter-spacing: -0.02em; margin-bottom: 10px; } |
912 | +.f-bloc h2 { font-size: 21px; letter-spacing: -0.02em; margin-bottom: 10px; color: var(--navy); } |
| 843 | .f-bloc:empty { display: none; } |
913 | .f-bloc:empty { display: none; } |
| 844 | |
914 | |
| 845 | /* galerie à balayage natif */ |
915 | /* galerie à balayage natif */ |
| 846 | .carousel { position: relative; border-radius: var(--r-card); overflow: hidden; |
916 | .carousel { position: relative; border-radius: var(--r-card); overflow: hidden; |
| 847 | − border: 1.5px solid var(--line-strong); background: var(--surface-2); } |
917 | + border: 1px solid var(--line); background: var(--grey); box-shadow: var(--shadow-off-soft); } |
| 848 | .carousel-track { |
918 | .carousel-track { |
| 849 | display: flex; overflow-x: auto; scroll-snap-type: x mandatory; |
919 | display: flex; overflow-x: auto; scroll-snap-type: x mandatory; |
| 850 | -webkit-overflow-scrolling: touch; scrollbar-width: none; aspect-ratio: 16/11; |
920 | -webkit-overflow-scrolling: touch; scrollbar-width: none; aspect-ratio: 16/11; |
| 858 | aspect-ratio: 16/11; font-size: 48px; } |
928 | aspect-ratio: 16/11; font-size: 48px; } |
| 859 | .carousel-count { |
929 | .carousel-count { |
| 860 | position: absolute; right: 12px; bottom: 12px; z-index: 2; |
930 | position: absolute; right: 12px; bottom: 12px; z-index: 2; |
| 861 | − background: rgba(20, 24, 20, 0.82); color: var(--lime); |
931 | + background: rgba(11, 19, 48, 0.78); color: var(--white); |
| 862 | − font-family: var(--font-mono); font-size: 12px; font-weight: 700; |
932 | + font-size: 12px; font-weight: 600; |
| 863 | − padding: 4px 10px; border-radius: 999px; |
933 | + padding: 4px 11px; border-radius: var(--r-pill); |
| |
934 | + backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); |
| 864 | } |
935 | } |
| 865 | .carousel-nav { |
936 | .carousel-nav { |
| 866 | position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; |
937 | position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; |
| 867 | − width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ink); |
938 | + width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); |
| 868 | − background: rgba(255, 255, 255, 0.92); font-size: 22px; cursor: pointer; |
939 | + background: rgba(255, 255, 255, 0.92); color: var(--navy); font-size: 22px; cursor: pointer; |
| 869 | display: flex; align-items: center; justify-content: center; line-height: 1; |
940 | display: flex; align-items: center; justify-content: center; line-height: 1; |
| |
941 | + box-shadow: var(--shadow-flat); |
| 870 | } |
942 | } |
| 871 | .carousel-nav.prev { left: 10px; } .carousel-nav.next { right: 10px; } |
943 | .carousel-nav.prev { left: 10px; } .carousel-nav.next { right: 10px; } |
| 872 | @media (max-width: 640px) { .carousel-nav { display: none; } } /* balayage natif */ |
944 | @media (max-width: 640px) { .carousel-nav { display: none; } } /* balayage natif */ |
| 875 | .f-hero .price { font-size: clamp(34px, 8vw, 44px); } |
947 | .f-hero .price { font-size: clamp(34px, 8vw, 44px); } |
| 876 | .deal-badge { |
948 | .deal-badge { |
| 877 | display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 4px; |
949 | display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 4px; |
| 878 | − border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 600; |
950 | + border-radius: var(--r-pill); padding: 7px 14px; font-size: 13px; font-weight: 600; |
| 879 | − border: 1.5px solid var(--line-strong); |
951 | + border: 1px solid var(--line-strong); |
| 880 | } |
952 | } |
| 881 | −.deal-good { background: var(--lime-soft); border-color: var(--green); color: var(--green-deep); } |
953 | +.deal-good { background: var(--blue-soft); border-color: rgba(34, 88, 255, 0.3); color: var(--blue); } |
| 882 | .deal-ok { background: var(--surface); color: var(--ink-2); } |
954 | .deal-ok { background: var(--surface); color: var(--ink-2); } |
| 883 | −.deal-high { background: var(--amber-soft); border-color: var(--amber); color: #8a5a12; } |
955 | +.deal-high { background: var(--orange-soft); border-color: rgba(255, 106, 0, 0.35); color: var(--orange-deep); } |
| 884 | .f-hero h1 { font-size: clamp(20px, 4.5vw, 26px); margin-top: 8px; } |
956 | .f-hero h1 { font-size: clamp(20px, 4.5vw, 26px); margin-top: 8px; } |
| 885 | |
957 | |
| 886 | /* chips clés à défilement horizontal */ |
958 | /* chips clés à défilement horizontal */ |
| 890 | } |
962 | } |
| 891 | .chips-scroll::-webkit-scrollbar { display: none; } |
963 | .chips-scroll::-webkit-scrollbar { display: none; } |
| 892 | .chip-key { |
964 | .chip-key { |
| 893 | − flex: 0 0 auto; background: var(--ink); color: var(--lime); |
965 | + flex: 0 0 auto; background: var(--navy); color: var(--white); |
| 894 | − border-radius: 999px; padding: 8px 14px; font-family: var(--font-mono); |
966 | + border-radius: var(--r-pill); padding: 8px 15px; |
| 895 | − font-size: 12px; font-weight: 700; white-space: nowrap; min-height: 34px; |
967 | + font-size: 12px; font-weight: 600; white-space: nowrap; min-height: 34px; |
| 896 | display: inline-flex; align-items: center; |
968 | display: inline-flex; align-items: center; |
| 897 | } |
969 | } |
| 898 | |
970 | |
| 899 | /* ancres de navigation rapide */ |
971 | /* ancres de navigation rapide */ |
| 900 | .ancres { |
972 | .ancres { |
| 901 | display: flex; gap: 4px; overflow-x: auto; padding: 6px 0 2px; |
973 | display: flex; gap: 4px; overflow-x: auto; padding: 6px 0 2px; |
| 902 | − scrollbar-width: none; border-bottom: 1.5px dashed var(--line); margin-bottom: 8px; |
974 | + scrollbar-width: none; border-bottom: 1px solid var(--line); margin-bottom: 8px; |
| 903 | } |
975 | } |
| 904 | .ancres::-webkit-scrollbar { display: none; } |
976 | .ancres::-webkit-scrollbar { display: none; } |
| 905 | .ancres a { |
977 | .ancres a { |
| 906 | − flex: 0 0 auto; padding: 9px 12px; font-size: 13.5px; font-weight: 600; |
978 | + flex: 0 0 auto; padding: 9px 14px; font-size: 13.5px; font-weight: 600; |
| 907 | − color: var(--ink-2); border-radius: var(--r-ctl); min-height: 44px; |
979 | + color: var(--ink-2); border-radius: var(--r-pill); min-height: 44px; |
| 908 | display: inline-flex; align-items: center; |
980 | display: inline-flex; align-items: center; |
| 909 | } |
981 | } |
| 910 | −.ancres a:hover { background: var(--lime-soft); color: var(--ink); } |
982 | +.ancres a:hover { background: var(--orange-soft); color: var(--orange); } |
| 911 | html { scroll-padding-top: 76px; } /* header sticky au-dessus des ancres */ |
983 | html { scroll-padding-top: 76px; } /* header sticky au-dessus des ancres */ |
| 912 | |
984 | |
| 913 | /* description restructurée */ |
985 | /* description restructurée */ |
| 914 | .enbref { |
986 | .enbref { |
| 915 | − background: var(--lime-soft); border: 1.5px solid var(--green); |
987 | + background: var(--blue-soft); border: 1px solid rgba(34, 88, 255, 0.25); |
| 916 | − border-radius: var(--r-card); padding: 12px 15px; color: var(--green-deep); |
988 | + border-radius: var(--r-card); padding: 12px 16px; color: var(--navy); |
| 917 | font-size: 15px; margin: 0 0 14px; |
989 | font-size: 15px; margin: 0 0 14px; |
| 918 | } |
990 | } |
| 919 | .desc-section { margin-bottom: 12px; } |
991 | .desc-section { margin-bottom: 12px; } |
| 921 | .desc-section p { color: var(--ink-2); font-size: 14.5px; margin: 0; white-space: pre-line; } |
993 | .desc-section p { color: var(--ink-2); font-size: 14.5px; margin: 0; white-space: pre-line; } |
| 922 | .texte-original { margin-top: 12px; } |
994 | .texte-original { margin-top: 12px; } |
| 923 | .texte-original summary { |
995 | .texte-original summary { |
| 924 | − cursor: pointer; font-family: var(--font-mono); font-size: 12px; |
996 | + cursor: pointer; font-size: 12.5px; |
| 925 | color: var(--ink-3); min-height: 44px; display: flex; align-items: center; |
997 | color: var(--ink-3); min-height: 44px; display: flex; align-items: center; |
| 926 | } |
998 | } |
| 927 | .texte-original p { color: var(--ink-3); font-size: 13px; white-space: pre-line; } |
999 | .texte-original p { color: var(--ink-3); font-size: 13px; white-space: pre-line; } |
| 928 | |
1000 | |
| 929 | /* inclusions : confirmées vs mentionnées */ |
1001 | /* inclusions : confirmées vs mentionnées */ |
| 930 | −.amenity.confirmed { background: var(--lime-soft); border-color: var(--green); color: var(--green-deep); font-weight: 600; } |
1002 | +.amenity.confirmed { background: var(--blue-soft); border-color: rgba(34, 88, 255, 0.25); color: var(--blue); font-weight: 600; } |
| 931 | −.amenity.unconfirmed { background: transparent; border-style: dashed; color: var(--ink-3); } |
1003 | +.amenity.unconfirmed { background: transparent; border-style: dashed; border-color: var(--line-strong); color: var(--ink-3); } |
| 932 | |
1004 | |
| 933 | /* détails pratiques : historique de prix */ |
1005 | /* détails pratiques : historique de prix */ |
| 934 | .prix-histo { |
1006 | .prix-histo { |
| 935 | margin-top: 12px; padding: 10px 14px; border-radius: var(--r-card); |
1007 | margin-top: 12px; padding: 10px 14px; border-radius: var(--r-card); |
| 936 | − border: 1.5px solid var(--line-strong); font-size: 13.5px; background: var(--surface); |
1008 | + border: 1px solid var(--line-strong); font-size: 13.5px; background: var(--surface); |
| 937 | } |
1009 | } |
| 938 | −.prix-histo.down { background: var(--lime-soft); border-color: var(--green); color: var(--green-deep); } |
1010 | +.prix-histo.down { background: var(--blue-soft); border-color: rgba(34, 88, 255, 0.3); color: var(--blue); } |
| 939 | |
1011 | |
| 940 | /* quartier compacté sur mobile */ |
1012 | /* quartier compacté sur mobile */ |
| 941 | @media (max-width: 640px) { |
1013 | @media (max-width: 640px) { |
| 947 | .q-badge-sub { display: block; font-size: 10.5px; color: var(--ink-3); font-weight: 400; margin-left: 4px; } |
1019 | .q-badge-sub { display: block; font-size: 10.5px; color: var(--ink-3); font-weight: 400; margin-left: 4px; } |
| 948 | |
1020 | |
| 949 | /* POI groupés repliables */ |
1021 | /* POI groupés repliables */ |
| 950 | −.poi-groupe { border: 1.5px solid var(--line); border-radius: var(--r-card); |
1022 | +.poi-groupe { border: 1px solid var(--line); border-radius: var(--r-card); |
| 951 | margin-bottom: 8px; background: var(--surface); overflow: hidden; } |
1023 | margin-bottom: 8px; background: var(--surface); overflow: hidden; } |
| 952 | .poi-groupe summary { |
1024 | .poi-groupe summary { |
| 953 | display: flex; justify-content: space-between; align-items: center; gap: 10px; |
1025 | display: flex; justify-content: space-between; align-items: center; gap: 10px; |
| 957 | .poi-groupe summary::-webkit-details-marker { display: none; } |
1029 | .poi-groupe summary::-webkit-details-marker { display: none; } |
| 958 | .poi-groupe summary::after { content: "▾"; color: var(--ink-3); transition: transform 0.15s ease; } |
1030 | .poi-groupe summary::after { content: "▾"; color: var(--ink-3); transition: transform 0.15s ease; } |
| 959 | .poi-groupe[open] summary::after { transform: rotate(180deg); } |
1031 | .poi-groupe[open] summary::after { transform: rotate(180deg); } |
| 960 | −.poi-resume { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); font-weight: 400; } |
1032 | +.poi-resume { font-size: 11.5px; color: var(--ink-3); font-weight: 400; } |
| 961 | .poi-groupe .poi-list { padding: 0 14px 10px; } |
1033 | .poi-groupe .poi-list { padding: 0 14px 10px; } |
| 962 | |
1034 | |
| 963 | /* CTA sticky mobile */ |
1035 | /* CTA sticky mobile */ |
| 964 | .cta-sticky { |
1036 | .cta-sticky { |
| 965 | − position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; |
1037 | + position: fixed; left: 0; right: 0; bottom: 0; z-index: 88; |
| 966 | display: flex; align-items: center; gap: 12px; |
1038 | display: flex; align-items: center; gap: 12px; |
| 967 | − background: rgba(245, 243, 238, 0.94); backdrop-filter: blur(12px); |
1039 | + background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(12px); |
| 968 | − border-top: 2px solid var(--ink); |
1040 | + border-top: 1px solid var(--line); |
| 969 | padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); |
1041 | padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); |
| 970 | } |
1042 | } |
| 971 | .cta-sticky .cta { flex: 1; margin: 0; text-align: center; } |
1043 | .cta-sticky .cta { flex: 1; margin: 0; text-align: center; } |
| 972 | −.cta-sticky-prix { font-family: var(--font-display); font-weight: 700; font-size: 19px; white-space: nowrap; } |
1044 | +.cta-sticky-prix { font-family: var(--font-display); font-weight: 700; font-size: 19px; white-space: nowrap; color: var(--navy); } |
| 973 | −.cta-sticky-prix small { font-family: var(--font-mono); font-weight: 500; font-size: 10px; color: var(--ink-3); } |
1045 | +.cta-sticky-prix small { font-weight: 500; font-size: 10px; color: var(--ink-3); } |
| 974 | @media (min-width: 900px) { .cta-sticky { display: none; } } |
1046 | @media (min-width: 900px) { .cta-sticky { display: none; } } |
| 975 | @media (max-width: 899px) { |
1047 | @media (max-width: 899px) { |
| 976 | .cta-desktop { display: none; } |
1048 | .cta-desktop { display: none; } |
| 985 | } |
1057 | } |
| 986 | .pass-card { |
1058 | .pass-card { |
| 987 | width: 100%; max-width: 520px; background: var(--surface); |
1059 | width: 100%; max-width: 520px; background: var(--surface); |
| 988 | − border: 2px solid var(--ink); border-radius: var(--r-card); |
1060 | + border: 1px solid var(--line); border-radius: var(--r-card); |
| 989 | box-shadow: var(--shadow-off); padding: 30px 28px; text-align: center; |
1061 | box-shadow: var(--shadow-off); padding: 30px 28px; text-align: center; |
| 990 | } |
1062 | } |
| 991 | .pass-brands { |
1063 | .pass-brands { |
| 994 | } |
1066 | } |
| 995 | .pass-brand { |
1067 | .pass-brand { |
| 996 | font-family: var(--font-display); font-weight: 700; font-size: 24px; |
1068 | font-family: var(--font-display); font-weight: 700; font-size: 24px; |
| 997 | − letter-spacing: -0.04em; display: inline-flex; align-items: center; |
1069 | + letter-spacing: -0.03em; display: inline-flex; align-items: center; color: var(--navy); |
| 998 | −} |
| |
| 999 | −.pass-brand .ka { |
| |
| 1000 | − background: var(--ink); color: var(--lime); padding: 2px 7px 4px; |
| |
| 1001 | − border-radius: 6px; margin-left: 3px; transform: rotate(-2deg); |
| |
| 1002 | } |
1070 | } |
| |
1071 | +.pass-brand .ka { color: var(--orange); } |
| 1003 | .pass-trajet { display: inline-flex; align-items: center; gap: 5px; } |
1072 | .pass-trajet { display: inline-flex; align-items: center; gap: 5px; } |
| 1004 | .pass-dot { |
1073 | .pass-dot { |
| 1005 | − width: 6px; height: 6px; border-radius: 50%; background: var(--green); |
1074 | + width: 6px; height: 6px; border-radius: 50%; background: var(--orange); |
| 1006 | opacity: 0.25; animation: pass-dot 1.2s ease infinite; |
1075 | opacity: 0.25; animation: pass-dot 1.2s ease infinite; |
| 1007 | } |
1076 | } |
| 1008 | .pass-dot:nth-child(2) { animation-delay: 0.2s; } |
1077 | .pass-dot:nth-child(2) { animation-delay: 0.2s; } |
| 1009 | .pass-dot:nth-child(3) { animation-delay: 0.4s; } |
1078 | .pass-dot:nth-child(3) { animation-delay: 0.4s; } |
| 1010 | @keyframes pass-dot { 40% { opacity: 1; transform: translateX(2px); } } |
1079 | @keyframes pass-dot { 40% { opacity: 1; transform: translateX(2px); } } |
| 1011 | −.pass-fleche { color: var(--green); font-size: 18px; } |
1080 | +.pass-fleche { color: var(--orange); font-size: 18px; } |
| 1012 | .pass-gestionnaire { |
1081 | .pass-gestionnaire { |
| 1013 | font-family: var(--font-display); font-weight: 700; font-size: 19px; |
1082 | font-family: var(--font-display); font-weight: 700; font-size: 19px; |
| 1014 | display: inline-flex; align-items: center; gap: 8px; |
1083 | display: inline-flex; align-items: center; gap: 8px; |
| 1015 | − background: var(--lime-soft); border: 1.5px solid var(--green); |
1084 | + background: var(--blue-soft); border: 1px solid rgba(34, 88, 255, 0.25); |
| 1016 | − border-radius: 999px; padding: 6px 16px; color: var(--green-deep); |
1085 | + border-radius: var(--r-pill); padding: 6px 16px; color: var(--blue); |
| 1017 | } |
1086 | } |
| 1018 | .pass-card h1 { font-size: 20px; letter-spacing: -0.02em; } |
1087 | .pass-card h1 { font-size: 20px; letter-spacing: -0.02em; } |
| 1019 | .pass-texte { color: var(--ink-2); font-size: 14.5px; margin: 10px 0 20px; } |
1088 | .pass-texte { color: var(--ink-2); font-size: 14.5px; margin: 10px 0 20px; } |
| 1020 | .pass-progress { |
1089 | .pass-progress { |
| 1021 | − height: 10px; border: 1.5px solid var(--ink); border-radius: 999px; |
1090 | + height: 10px; border-radius: var(--r-pill); |
| 1022 | − overflow: hidden; background: var(--surface-2); margin-bottom: 20px; |
1091 | + overflow: hidden; background: var(--grey); margin-bottom: 20px; |
| 1023 | } |
1092 | } |
| 1024 | .pass-progress-fill { |
1093 | .pass-progress-fill { |
| 1025 | − display: block; height: 100%; width: 0; background: var(--lime); |
1094 | + display: block; height: 100%; width: 0; background: var(--orange); |
| 1026 | − border-right: 2px solid var(--ink); |
1095 | + border-radius: var(--r-pill); |
| 1027 | } |
1096 | } |
| 1028 | .pass-progress-fill.go { animation: pass-fill 2.2s linear forwards; } |
1097 | .pass-progress-fill.go { animation: pass-fill 2.2s linear forwards; } |
| 1029 | @keyframes pass-fill { to { width: 100%; } } |
1098 | @keyframes pass-fill { to { width: 100%; } } |
| 1038 | |
1107 | |
| 1039 | /* --- Onglets de la page Stats -------------------------------------------- */ |
1108 | /* --- Onglets de la page Stats -------------------------------------------- */ |
| 1040 | .onglets { |
1109 | .onglets { |
| 1041 | − display: flex; gap: 6px; overflow-x: auto; margin: 26px 0 22px; |
1110 | + display: flex; gap: 8px; overflow-x: auto; margin: 26px 0 22px; |
| 1042 | padding-bottom: 4px; scrollbar-width: none; |
1111 | padding-bottom: 4px; scrollbar-width: none; |
| 1043 | − border-bottom: 2px solid var(--ink); |
1112 | + border-bottom: 1px solid var(--line); |
| 1044 | } |
1113 | } |
| 1045 | .onglets::-webkit-scrollbar { display: none; } |
1114 | .onglets::-webkit-scrollbar { display: none; } |
| 1046 | .onglet { |
1115 | .onglet { |
| 1047 | flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; |
1116 | flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; |
| 1048 | − border: 1.5px solid var(--ink); border-bottom: 0; |
1117 | + border: 1px solid var(--line-strong); |
| 1049 | − border-radius: var(--r-ctl) var(--r-ctl) 0 0; |
1118 | + border-radius: var(--r-pill); |
| 1050 | background: var(--surface); color: var(--ink-2); cursor: pointer; |
1119 | background: var(--surface); color: var(--ink-2); cursor: pointer; |
| 1051 | − padding: 10px 16px; font-weight: 600; font-size: 13.5px; min-height: 44px; |
1120 | + padding: 10px 18px; font-weight: 600; font-size: 13.5px; min-height: 44px; |
| 1052 | − transition: background 0.12s ease, color 0.12s ease; |
1121 | + margin-bottom: 8px; |
| |
1122 | + transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; |
| 1053 | } |
1123 | } |
| 1054 | −.onglet:hover { background: var(--lime-soft); color: var(--ink); } |
1124 | +.onglet:hover { background: var(--blue-soft); color: var(--blue); border-color: var(--blue); } |
| 1055 | −.onglet.on { background: var(--ink); color: var(--lime); } |
1125 | +.onglet.on { background: var(--blue); border-color: var(--blue); color: var(--white); } |
| 1056 | |
1126 | |
| 1057 | /* baisses de prix */ |
1127 | /* baisses de prix */ |
| 1058 | .baisses { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } |
1128 | .baisses { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } |
| 1059 | .baisses li { |
1129 | .baisses li { |
| 1060 | display: flex; align-items: center; gap: 12px; flex-wrap: wrap; |
1130 | display: flex; align-items: center; gap: 12px; flex-wrap: wrap; |
| 1061 | − padding: 9px 4px; border-bottom: 1px dashed var(--line); font-size: 13.5px; |
1131 | + padding: 9px 4px; border-bottom: 1px solid var(--line); font-size: 13.5px; |
| 1062 | } |
1132 | } |
| 1063 | .baisses li a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } |
1133 | .baisses li a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } |
| 1064 | −.baisse-ville { color: var(--ink-3); font-family: var(--font-mono); font-size: 11px; } |
1134 | +.baisse-ville { color: var(--ink-3); font-size: 11.5px; } |
| 1065 | .baisse-prix { margin-left: auto; } |
1135 | .baisse-prix { margin-left: auto; } |
| 1066 | .baisse-prix s { color: var(--ink-3); } |
1136 | .baisse-prix s { color: var(--ink-3); } |
| 1067 | .baisse-pct { |
1137 | .baisse-pct { |
| 1068 | − font-style: normal; font-family: var(--font-mono); font-weight: 700; |
1138 | + font-style: normal; font-weight: 700; |
| 1069 | − background: var(--lime-soft); border: 1px solid var(--green); |
1139 | + background: var(--blue-soft); |
| 1070 | − color: var(--green-deep); border-radius: 999px; padding: 2px 8px; |
1140 | + color: var(--blue); border-radius: var(--r-pill); padding: 2px 9px; |
| 1071 | font-size: 11px; margin-left: 8px; |
1141 | font-size: 11px; margin-left: 8px; |
| 1072 | } |
1142 | } |
| 1073 | .alertes { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-2); } |
1143 | .alertes { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-2); } |
| 1076 | .pager { |
1146 | .pager { |
| 1077 | display: flex; align-items: center; justify-content: space-between; |
1147 | display: flex; align-items: center; justify-content: space-between; |
| 1078 | gap: 16px; flex-wrap: wrap; margin: 26px 0 10px; padding-top: 18px; |
1148 | gap: 16px; flex-wrap: wrap; margin: 26px 0 10px; padding-top: 18px; |
| 1079 | − border-top: 2px solid var(--ink); |
1149 | + border-top: 1px solid var(--line); |
| 1080 | } |
1150 | } |
| 1081 | .pager-info { |
1151 | .pager-info { |
| 1082 | − font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); |
1152 | + font-size: 12.5px; color: var(--ink-2); letter-spacing: 0.02em; |
| 1083 | − letter-spacing: 0.04em; |
| |
| 1084 | } |
1153 | } |
| 1085 | .pager-info em { font-style: normal; color: var(--ink-3); } |
1154 | .pager-info em { font-style: normal; color: var(--ink-3); } |
| 1086 | .pager-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } |
1155 | .pager-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } |
| 1087 | .pager-btn { |
1156 | .pager-btn { |
| 1088 | min-width: 38px; height: 38px; padding: 0 10px; |
1157 | min-width: 38px; height: 38px; padding: 0 10px; |
| 1089 | display: inline-flex; align-items: center; justify-content: center; |
1158 | display: inline-flex; align-items: center; justify-content: center; |
| 1090 | − background: var(--surface); border: 1.5px solid var(--ink); |
1159 | + background: var(--surface); border: 1px solid var(--line-strong); |
| 1091 | − border-radius: var(--r-ctl); cursor: pointer; |
1160 | + border-radius: var(--r-pill); cursor: pointer; |
| 1092 | − font-family: var(--font-mono); font-size: 13px; font-weight: 600; |
1161 | + font-size: 13px; font-weight: 600; |
| 1093 | − color: var(--ink); transition: all 0.12s ease; |
1162 | + color: var(--navy); transition: all 0.12s ease; |
| 1094 | } |
1163 | } |
| 1095 | .pager-btn:hover:not(:disabled):not(.on) { |
1164 | .pager-btn:hover:not(:disabled):not(.on) { |
| 1096 | − background: var(--lime-soft); transform: translate(-1px, -1px); |
1165 | + background: var(--blue-soft); border-color: var(--blue); color: var(--blue); |
| 1097 | − box-shadow: 3px 3px 0 var(--ink); |
| |
| 1098 | } |
1166 | } |
| 1099 | −.pager-btn.on { background: var(--ink); color: var(--lime); cursor: default; } |
1167 | +.pager-btn.on { background: var(--navy); border-color: var(--navy); color: var(--white); cursor: default; } |
| 1100 | −.pager-btn:disabled { opacity: 0.35; cursor: not-allowed; border-color: var(--line-strong); } |
1168 | +.pager-btn:disabled { opacity: 0.35; cursor: not-allowed; } |
| 1101 | −.pager-ellipsis { color: var(--ink-3); font-family: var(--font-mono); padding: 0 2px; } |
1169 | +.pager-ellipsis { color: var(--ink-3); padding: 0 2px; } |
| 1102 | .map-list .pager { margin: 10px 0 4px; } |
1170 | .map-list .pager { margin: 10px 0 4px; } |
| 1103 | @media (max-width: 640px) { |
1171 | @media (max-width: 640px) { |
| 1104 | .pager { justify-content: center; } |
1172 | .pager { justify-content: center; } |
| 1121 | .mv-noimg { display: flex; align-items: center; justify-content: center; color: var(--ink-3); } |
1189 | .mv-noimg { display: flex; align-items: center; justify-content: center; color: var(--ink-3); } |
| 1122 | |
1190 | |
| 1123 | /* footer — liens (Groupe KA, courriels, mentions légales) */ |
1191 | /* footer — liens (Groupe KA, courriels, mentions légales) */ |
| 1124 | −.footer .frow a { color: var(--paper); text-decoration: underline; text-decoration-color: rgba(217,242,107,0.5); text-underline-offset: 3px; } |
1192 | +.footer .frow a { color: var(--white); text-decoration: underline; text-decoration-color: rgba(255, 106, 0, 0.5); text-underline-offset: 3px; } |
| 1125 | −.footer .frow a:hover { color: var(--lime); } |
1193 | +.footer .frow a:hover { color: var(--orange); } |
| 1126 | −.footer .fmono a:hover { color: var(--lime); } |
1194 | +.footer .fmono a:hover { color: var(--orange); } |
| 1127 | |
1195 | |
| 1128 | /* ================= Compte (connexion Google) ================= */ |
1196 | /* ================= Compte (connexion Google) ================= */ |
| 1129 | .login-btn { |
1197 | .login-btn { |
| 1130 | display: inline-flex; align-items: center; gap: 8px; |
1198 | display: inline-flex; align-items: center; gap: 8px; |
| 1131 | − padding: 8px 15px; margin-left: 10px; min-height: 38px; |
1199 | + padding: 8px 16px; margin-left: 10px; min-height: 38px; |
| 1132 | − background: var(--surface); border: 1.5px solid var(--ink); |
1200 | + background: var(--navy); border: none; |
| 1133 | − border-radius: 999px; font-weight: 600; font-size: 13.5px; color: var(--ink); |
1201 | + border-radius: var(--r-pill); font-weight: 600; font-size: 13.5px; color: var(--white); |
| 1134 | transition: all 0.12s ease; white-space: nowrap; |
1202 | transition: all 0.12s ease; white-space: nowrap; |
| |
1203 | + box-shadow: 0 4px 14px rgba(11, 19, 48, 0.22); |
| 1135 | } |
1204 | } |
| 1136 | −.login-btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); background: var(--lime-soft); } |
1205 | +.login-btn:hover { background: var(--blue); } |
| 1137 | .account { position: relative; margin-left: 10px; } |
1206 | .account { position: relative; margin-left: 10px; } |
| 1138 | .account-btn { |
1207 | .account-btn { |
| 1139 | − width: 38px; height: 38px; padding: 0; border: 2px solid var(--ink); |
1208 | + width: 38px; height: 38px; padding: 0; border: 2px solid var(--orange); |
| 1140 | − border-radius: 999px; overflow: hidden; cursor: pointer; |
1209 | + border-radius: var(--r-pill); overflow: hidden; cursor: pointer; |
| 1141 | − background: var(--lime); display: flex; align-items: center; justify-content: center; |
1210 | + background: var(--orange-soft); display: flex; align-items: center; justify-content: center; |
| 1142 | } |
1211 | } |
| 1143 | .account-btn img { width: 100%; height: 100%; object-fit: cover; } |
1212 | .account-btn img { width: 100%; height: 100%; object-fit: cover; } |
| 1144 | −.account-initial { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink); } |
1213 | +.account-initial { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--orange); } |
| 1145 | .account-backdrop { position: fixed; inset: 0; z-index: 90; } |
1214 | .account-backdrop { position: fixed; inset: 0; z-index: 90; } |
| 1146 | .account-menu { |
1215 | .account-menu { |
| 1147 | position: absolute; right: 0; top: calc(100% + 10px); z-index: 91; |
1216 | position: absolute; right: 0; top: calc(100% + 10px); z-index: 91; |
| 1148 | − min-width: 220px; background: var(--surface); border: 2px solid var(--ink); |
1217 | + min-width: 220px; background: var(--surface); border: 1px solid var(--line); |
| 1149 | border-radius: var(--r-card); box-shadow: var(--shadow-off); overflow: hidden; |
1218 | border-radius: var(--r-card); box-shadow: var(--shadow-off); overflow: hidden; |
| 1150 | } |
1219 | } |
| 1151 | −.account-id { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-bottom: 1.5px solid var(--line); } |
1220 | +.account-id { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-bottom: 1px solid var(--line); } |
| 1152 | .account-id b { font-size: 14px; } |
1221 | .account-id b { font-size: 14px; } |
| 1153 | −.account-id span { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); word-break: break-all; } |
1222 | +.account-id span { font-size: 11.5px; color: var(--ink-3); word-break: break-all; } |
| 1154 | .account-menu button { |
1223 | .account-menu button { |
| 1155 | width: 100%; text-align: left; padding: 11px 14px; border: 0; cursor: pointer; |
1224 | width: 100%; text-align: left; padding: 11px 14px; border: 0; cursor: pointer; |
| 1156 | background: transparent; font-weight: 600; font-size: 13.5px; color: var(--danger); |
1225 | background: transparent; font-weight: 600; font-size: 13.5px; color: var(--danger); |
| 1157 | } |
1226 | } |
| 1158 | −.account-menu button:hover { background: var(--lime-soft); color: var(--ink); } |
1227 | +.account-menu button:hover { background: var(--orange-soft); color: var(--navy); } |
| 1159 | @media (max-width: 640px) { .login-btn { padding: 8px 12px; font-size: 12.5px; } } |
1228 | @media (max-width: 640px) { .login-btn { padding: 8px 12px; font-size: 12.5px; } } |
| 1160 | |
1229 | |
| 1161 | /* ================= Profil — carte de membre Groupe KA ================= */ |
1230 | /* ================= Profil — carte de membre Groupe KA ================= */ |
| 1162 | .profil { padding-top: 40px; padding-bottom: 60px; } |
1231 | .profil { padding-top: 40px; padding-bottom: 60px; } |
| 1163 | −.profil h1 { font-size: clamp(30px, 5vw, 44px); margin: 10px 0 26px; } |
1232 | +.profil h1 { font-size: clamp(30px, 5vw, 44px); margin: 10px 0 26px; color: var(--navy); } |
| 1164 | −.profil h1 .hl { background: var(--lime); padding: 0 8px; } |
1233 | +.profil h1 .hl { color: var(--orange); } |
| 1165 | .profil .lede { max-width: 520px; color: var(--ink-2); margin-bottom: 22px; } |
1234 | .profil .lede { max-width: 520px; color: var(--ink-2); margin-bottom: 22px; } |
| 1166 | |
1235 | |
| 1167 | .pc { |
1236 | .pc { |
| 1168 | position: relative; max-width: 520px; overflow: hidden; |
1237 | position: relative; max-width: 520px; overflow: hidden; |
| 1169 | − background: var(--ink); color: var(--paper); |
1238 | + background: linear-gradient(135deg, #101a40 0%, var(--navy) 55%, #080e24 100%); |
| 1170 | − border: 2px solid var(--ink); border-radius: 16px; |
1239 | + color: var(--white); |
| 1171 | − padding: 24px 26px 0; box-shadow: 10px 10px 0 rgba(20, 24, 20, 0.18); |
1240 | + border-radius: 20px; |
| |
1241 | + padding: 24px 26px 0; box-shadow: var(--shadow-off); |
| 1172 | } |
1242 | } |
| 1173 | .pc-watermark { |
1243 | .pc-watermark { |
| 1174 | position: absolute; right: -18px; top: -34px; pointer-events: none; |
1244 | position: absolute; right: -18px; top: -34px; pointer-events: none; |
| 1175 | font-family: var(--font-display); font-weight: 700; font-size: 170px; |
1245 | font-family: var(--font-display); font-weight: 700; font-size: 170px; |
| 1176 | − letter-spacing: -0.06em; color: rgba(217, 242, 107, 0.07); |
1246 | + letter-spacing: -0.06em; color: rgba(255, 106, 0, 0.07); |
| 1177 | transform: rotate(-8deg); line-height: 1; |
1247 | transform: rotate(-8deg); line-height: 1; |
| 1178 | } |
1248 | } |
| 1179 | .pc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } |
1249 | .pc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } |
| 1180 | −.pc-brand { font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -0.04em; } |
1250 | +.pc-brand { font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -0.03em; } |
| 1181 | −.pc-ka { background: var(--lime); color: var(--ink); padding: 1px 6px 3px; border-radius: 5px; margin-left: 3px; display: inline-block; transform: rotate(-2deg); } |
1251 | +.pc-ka { color: var(--orange); margin-left: 1px; display: inline-block; } |
| 1182 | −.pc-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(245, 243, 238, 0.55); } |
1252 | +.pc-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.5); } |
| 1183 | .pc-id-block { margin: 26px 0 22px; display: flex; flex-direction: column; gap: 4px; } |
1253 | .pc-id-block { margin: 26px 0 22px; display: flex; flex-direction: column; gap: 4px; } |
| 1184 | −.pc-id-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(217, 242, 107, 0.65); } |
1254 | +.pc-id-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(255, 106, 0, 0.75); } |
| 1185 | .pc-id { |
1255 | .pc-id { |
| 1186 | − font-family: var(--font-mono); font-weight: 700; color: var(--lime); |
1256 | + font-weight: 700; color: var(--orange); |
| 1187 | font-size: clamp(22px, 6vw, 34px); letter-spacing: 0.14em; |
1257 | font-size: clamp(22px, 6vw, 34px); letter-spacing: 0.14em; |
| 1188 | − text-shadow: 0 0 24px rgba(217, 242, 107, 0.35); |
1258 | + text-shadow: 0 0 24px rgba(255, 106, 0, 0.35); |
| 1189 | } |
1259 | } |
| 1190 | .pc-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding-bottom: 18px; } |
1260 | .pc-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding-bottom: 18px; } |
| 1191 | .pc-holder { display: flex; flex-direction: column; gap: 2px; min-width: 0; } |
1261 | .pc-holder { display: flex; flex-direction: column; gap: 2px; min-width: 0; } |
| 1192 | .pc-holder-name { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } |
1262 | .pc-holder-name { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } |
| 1193 | −.pc-holder-since { font-family: var(--font-mono); font-size: 10.5px; color: rgba(245, 243, 238, 0.5); letter-spacing: 0.06em; } |
1263 | +.pc-holder-since { font-size: 10.5px; color: rgba(255, 255, 255, 0.5); letter-spacing: 0.06em; } |
| 1194 | .pc-role-badge { |
1264 | .pc-role-badge { |
| 1195 | display: inline-block; width: fit-content; margin: 3px 0 2px; |
1265 | display: inline-block; width: fit-content; margin: 3px 0 2px; |
| 1196 | − background: var(--lime); color: var(--ink); |
1266 | + background: var(--orange); color: var(--white); |
| 1197 | − font-family: var(--font-mono); font-size: 9px; font-weight: 700; |
1267 | + font-size: 9px; font-weight: 700; |
| 1198 | text-transform: uppercase; letter-spacing: 0.12em; |
1268 | text-transform: uppercase; letter-spacing: 0.12em; |
| 1199 | − padding: 2px 7px 3px; border-radius: 5px; transform: rotate(-1deg); |
1269 | + padding: 2px 8px 3px; border-radius: var(--r-pill); |
| 1200 | } |
1270 | } |
| 1201 | −.pc-avatar { width: 52px; height: 52px; border-radius: 999px; border: 2px solid var(--lime); flex: none; } |
1271 | +.pc-avatar { width: 52px; height: 52px; border-radius: var(--r-pill); border: 2px solid var(--orange); flex: none; } |
| 1202 | −.pc-strip { display: flex; gap: 5px; margin: 0 -26px; padding: 9px 18px; background: rgba(217, 242, 107, 0.1); border-top: 1px solid rgba(217, 242, 107, 0.25); overflow: hidden; } |
1272 | +.pc-strip { display: flex; gap: 5px; margin: 0 -26px; padding: 9px 18px; background: rgba(255, 106, 0, 0.1); border-top: 1px solid rgba(255, 106, 0, 0.25); overflow: hidden; } |
| 1203 | −.pc-strip i { display: block; width: 3px; border-radius: 1px; background: var(--lime); opacity: 0.7; } |
1273 | +.pc-strip i { display: block; width: 3px; border-radius: 1px; background: var(--orange); opacity: 0.7; } |
| 1204 | .pc-strip i:nth-child(3n) { height: 14px; opacity: 0.35; } |
1274 | .pc-strip i:nth-child(3n) { height: 14px; opacity: 0.35; } |
| 1205 | .pc-strip i:nth-child(3n+1) { height: 9px; } |
1275 | .pc-strip i:nth-child(3n+1) { height: 9px; } |
| 1206 | .pc-strip i:nth-child(3n+2) { height: 17px; opacity: 0.9; } |
1276 | .pc-strip i:nth-child(3n+2) { height: 17px; opacity: 0.9; } |
| 1207 | .pc-copy { margin-top: 16px; } |
1277 | .pc-copy { margin-top: 16px; } |
| 1208 | −.pc-copy.ok { background: var(--lime); border-color: var(--ink); color: var(--ink); } |
1278 | +.pc-copy.ok { background: var(--blue); color: var(--white); } |
| 1209 | |
1279 | |
| 1210 | .profil-grid { |
1280 | .profil-grid { |
| 1211 | display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); |
1281 | display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); |
| 1212 | gap: 12px; margin-top: 30px; max-width: 760px; |
1282 | gap: 12px; margin-top: 30px; max-width: 760px; |
| 1213 | } |
1283 | } |
| 1214 | .pg-item { |
1284 | .pg-item { |
| 1215 | − background: var(--surface); border: 1.5px solid var(--ink); |
1285 | + background: var(--surface); border: 1px solid var(--line); |
| 1216 | border-radius: var(--r-card); padding: 14px 16px; |
1286 | border-radius: var(--r-card); padding: 14px 16px; |
| 1217 | display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow-flat); |
1287 | display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow-flat); |
| 1218 | } |
1288 | } |
| 1219 | −.pg-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-3); } |
1289 | +.pg-label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); } |
| 1220 | .pg-value { font-weight: 600; font-size: 14.5px; word-break: break-word; } |
1290 | .pg-value { font-weight: 600; font-size: 14.5px; word-break: break-word; } |
| 1221 | −.pg-value.mono { font-family: var(--font-mono); color: var(--green-deep); } |
1291 | +.pg-value.mono { color: var(--blue); } |
| 1222 | |
1292 | |
| 1223 | .profil-note { max-width: 640px; color: var(--ink-2); font-size: 13.5px; margin-top: 22px; } |
1293 | .profil-note { max-width: 640px; color: var(--ink-2); font-size: 13.5px; margin-top: 22px; } |
| 1224 | .profil-note a { text-decoration: underline; text-underline-offset: 3px; } |
1294 | .profil-note a { text-decoration: underline; text-underline-offset: 3px; } |
| 1225 | .profil-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; } |
1295 | .profil-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; } |
| 1226 | .profil-actions .btn { display: inline-flex; align-items: center; gap: 7px; } |
1296 | .profil-actions .btn { display: inline-flex; align-items: center; gap: 7px; } |
| 1227 | |
1297 | |
| 1228 | −.account-kaid { font-family: var(--font-mono); font-size: 10.5px; color: var(--green); letter-spacing: 0.08em; } |
1298 | +.account-kaid { font-size: 10.5px; color: var(--blue); letter-spacing: 0.08em; } |
| 1229 | .account-link { |
1299 | .account-link { |
| 1230 | display: block; width: 100%; text-align: left; padding: 11px 14px; |
1300 | display: block; width: 100%; text-align: left; padding: 11px 14px; |
| 1231 | − font-weight: 600; font-size: 13.5px; color: var(--ink); |
1301 | + font-weight: 600; font-size: 13.5px; color: var(--navy); |
| 1232 | − border-bottom: 1.5px solid var(--line); |
1302 | + border-bottom: 1px solid var(--line); |
| 1233 | } |
1303 | } |
| 1234 | −.account-link:hover { background: var(--lime-soft); } |
1304 | +.account-link:hover { background: var(--orange-soft); } |
| 1235 | |
1305 | |
| 1236 | /* profil public — section + lien partageable */ |
1306 | /* profil public — section + lien partageable */ |
| 1237 | .profil-public { margin-top: 30px; max-width: 640px; } |
1307 | .profil-public { margin-top: 30px; max-width: 640px; } |
| 1239 | .profil-public p { color: var(--ink-2); font-size: 13.5px; margin: 0 0 12px; } |
1309 | .profil-public p { color: var(--ink-2); font-size: 13.5px; margin: 0 0 12px; } |
| 1240 | .public-link { |
1310 | .public-link { |
| 1241 | display: flex; align-items: center; gap: 10px; flex-wrap: wrap; |
1311 | display: flex; align-items: center; gap: 10px; flex-wrap: wrap; |
| 1242 | − margin-top: 14px; padding: 12px 14px; background: var(--lime-soft); |
1312 | + margin-top: 14px; padding: 12px 14px; background: var(--blue-soft); |
| 1243 | − border: 1.5px solid var(--green); border-radius: var(--r-card); |
1313 | + border: 1px solid rgba(34, 88, 255, 0.25); border-radius: var(--r-card); |
| 1244 | } |
1314 | } |
| 1245 | −.public-link a { font-size: 13px; color: var(--green-deep); text-decoration: underline; text-underline-offset: 3px; word-break: break-all; } |
1315 | +.public-link a { font-size: 13px; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; word-break: break-all; } |
| 1246 | |
1316 | |
| 1247 | /* ================= Bienvenue — choix du rôle ================= */ |
1317 | /* ================= Bienvenue — choix du rôle ================= */ |
| 1248 | .bienvenue { padding-top: 44px; padding-bottom: 70px; } |
1318 | .bienvenue { padding-top: 44px; padding-bottom: 70px; } |
| 1249 | −.bienvenue h1 { font-size: clamp(30px, 5vw, 46px); margin: 10px 0 14px; } |
1319 | +.bienvenue h1 { font-size: clamp(30px, 5vw, 46px); margin: 10px 0 14px; color: var(--navy); } |
| 1250 | −.bienvenue h1 .hl { background: var(--lime); padding: 0 8px; } |
1320 | +.bienvenue h1 .hl { color: var(--orange); } |
| 1251 | .bienvenue .lede { max-width: 480px; color: var(--ink-2); margin-bottom: 30px; } |
1321 | .bienvenue .lede { max-width: 480px; color: var(--ink-2); margin-bottom: 30px; } |
| 1252 | .role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; max-width: 780px; } |
1322 | .role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; max-width: 780px; } |
| 1253 | .role-card { |
1323 | .role-card { |
| 1254 | display: flex; flex-direction: column; align-items: flex-start; gap: 10px; |
1324 | display: flex; flex-direction: column; align-items: flex-start; gap: 10px; |
| 1255 | text-align: left; padding: 24px 24px 20px; cursor: pointer; |
1325 | text-align: left; padding: 24px 24px 20px; cursor: pointer; |
| 1256 | − background: var(--surface); border: 2px solid var(--ink); |
1326 | + background: var(--surface); border: 1px solid var(--line); |
| 1257 | border-radius: var(--r-card); box-shadow: var(--shadow-flat); |
1327 | border-radius: var(--r-card); box-shadow: var(--shadow-flat); |
| 1258 | font-family: var(--font-body); transition: all 0.15s ease; |
1328 | font-family: var(--font-body); transition: all 0.15s ease; |
| 1259 | } |
1329 | } |
| 1260 | −.role-card:hover:not(:disabled) { transform: translate(-3px, -3px); box-shadow: var(--shadow-off); background: var(--lime-soft); } |
1330 | +.role-card:hover:not(:disabled) { transform: translateY(-4px); box-shadow: var(--shadow-off); border-color: rgba(255, 106, 0, 0.4); } |
| 1261 | .role-card:disabled { opacity: 0.6; cursor: wait; } |
1331 | .role-card:disabled { opacity: 0.6; cursor: wait; } |
| 1262 | −.role-ico { display: flex; width: 54px; height: 54px; align-items: center; justify-content: center; background: var(--ink); color: var(--lime); border-radius: 12px; } |
1332 | +.role-ico { display: flex; width: 54px; height: 54px; align-items: center; justify-content: center; background: var(--orange-soft); color: var(--orange); border-radius: 16px; } |
| 1263 | −.role-title { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; } |
1333 | +.role-title { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; color: var(--navy); } |
| 1264 | .role-desc { color: var(--ink-2); font-size: 13.5px; } |
1334 | .role-desc { color: var(--ink-2); font-size: 13.5px; } |
| 1265 | .role-perks { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; } |
1335 | .role-perks { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; } |
| 1266 | −.role-perks li { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); } |
1336 | +.role-perks li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); } |
| 1267 | −.role-perks li::before { content: "◆"; color: var(--green); font-size: 8px; } |
1337 | +.role-perks li::before { |
| 1268 | −.role-cta { margin-top: 10px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--green-deep); } |
1338 | + content: "✓"; flex: none; width: 16px; height: 16px; border-radius: 50%; |
| |
1339 | + background: var(--orange); color: var(--white); font-size: 10px; font-weight: 700; |
| |
1340 | + display: inline-flex; align-items: center; justify-content: center; |
| |
1341 | +} |
| |
1342 | +.role-cta { margin-top: 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--orange); } |
| 1269 | |
1343 | |
| 1270 | /* ================= Favoris — cœur sur les cartes ================= */ |
1344 | /* ================= Favoris — cœur sur les cartes ================= */ |
| 1271 | .fav-btn { |
1345 | .fav-btn { |
| 1272 | position: absolute; right: 10px; bottom: 10px; z-index: 2; |
1346 | position: absolute; right: 10px; bottom: 10px; z-index: 2; |
| 1273 | width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; |
1347 | width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; |
| 1274 | − background: rgba(255, 255, 255, 0.94); border: 1.5px solid var(--ink); |
1348 | + background: rgba(255, 255, 255, 0.94); border: none; |
| 1275 | − border-radius: 999px; cursor: pointer; color: var(--ink); |
1349 | + border-radius: var(--r-pill); cursor: pointer; color: var(--navy); |
| 1276 | − transition: transform 0.12s ease, background 0.12s ease; |
1350 | + box-shadow: var(--shadow-flat); |
| |
1351 | + transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease; |
| 1277 | } |
1352 | } |
| 1278 | .fav-btn:hover { transform: scale(1.12); } |
1353 | .fav-btn:hover { transform: scale(1.12); } |
| 1279 | −.fav-btn.on { background: var(--lime); color: var(--danger); } |
1354 | +.fav-btn.on { background: var(--white); color: var(--orange); } |
| 1280 | −.fav-btn.on svg { filter: drop-shadow(0 0 3px rgba(179, 66, 58, 0.35)); } |
1355 | +.fav-btn.on svg { filter: drop-shadow(0 0 3px rgba(255, 106, 0, 0.35)); } |
| 1281 | |
1356 | |
| 1282 | /* ================= Espace gestionnaire ================= */ |
1357 | /* ================= Espace gestionnaire ================= */ |
| 1283 | .claim-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; max-width: 640px; } |
1358 | .claim-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; max-width: 640px; } |
| 1284 | .claim-row select { |
1359 | .claim-row select { |
| 1285 | − flex: 1; min-width: 260px; padding: 11px 12px; font-size: 14px; |
1360 | + flex: 1; min-width: 260px; padding: 11px 14px; font-size: 14px; |
| 1286 | − border: 1.5px solid var(--ink); border-radius: var(--r-ctl); |
1361 | + border: 1px solid var(--line-strong); border-radius: var(--r-ctl); |
| 1287 | background: var(--surface); font-family: var(--font-body); |
1362 | background: var(--surface); font-family: var(--font-body); |
| 1288 | } |
1363 | } |
| 1289 | .claim-error { color: var(--danger); font-size: 13.5px; font-weight: 600; margin-top: 10px; } |
1364 | .claim-error { color: var(--danger); font-size: 13.5px; font-weight: 600; margin-top: 10px; } |
| 1292 | .org-form { max-width: 640px; display: flex; flex-direction: column; gap: 14px; } |
1367 | .org-form { max-width: 640px; display: flex; flex-direction: column; gap: 14px; } |
| 1293 | .org-form h3 { font-size: 18px; } |
1368 | .org-form h3 { font-size: 18px; } |
| 1294 | .org-form label { display: flex; flex-direction: column; gap: 5px; flex: 1; } |
1369 | .org-form label { display: flex; flex-direction: column; gap: 5px; flex: 1; } |
| 1295 | −.org-form label span { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); } |
1370 | +.org-form label span { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); } |
| 1296 | .org-form input, .org-form textarea { |
1371 | .org-form input, .org-form textarea { |
| 1297 | − padding: 10px 12px; font-size: 14px; font-family: var(--font-body); |
1372 | + padding: 10px 14px; font-size: 14px; font-family: var(--font-body); |
| 1298 | − border: 1.5px solid var(--ink); border-radius: var(--r-ctl); background: var(--surface); |
1373 | + border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background: var(--surface); |
| 1299 | } |
1374 | } |
| 1300 | .org-form textarea { resize: vertical; } |
1375 | .org-form textarea { resize: vertical; } |
| 1301 | −.org-form input:focus, .org-form textarea:focus { outline: 2px solid var(--lime); outline-offset: 1px; } |
1376 | +.org-form input:focus, .org-form textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(34, 88, 255, 0.15); } |
| 1302 | .org-form-row { display: flex; gap: 12px; flex-wrap: wrap; } |
1377 | .org-form-row { display: flex; gap: 12px; flex-wrap: wrap; } |
| 1303 | .org-form .btn { align-self: flex-start; } |
1378 | .org-form .btn { align-self: flex-start; } |
| 1304 | |
1379 | |
| 1305 | /* ================= Page publique /g/{source} ================= */ |
1380 | /* ================= Page publique /g/{source} ================= */ |
| 1306 | .orgpub-head { display: flex; gap: 20px; align-items: flex-start; margin-top: 8px; } |
1381 | .orgpub-head { display: flex; gap: 20px; align-items: flex-start; margin-top: 8px; } |
| 1307 | −.orgpub-logo { width: 84px; height: 84px; object-fit: contain; background: var(--surface); border: 2px solid var(--ink); border-radius: 14px; padding: 8px; flex: none; } |
1382 | +.orgpub-logo { width: 84px; height: 84px; object-fit: contain; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 8px; flex: none; box-shadow: var(--shadow-flat); } |
| 1308 | −.orgpub-id h1 { font-size: clamp(26px, 4.4vw, 40px); margin: 6px 0 8px; } |
1383 | +.orgpub-id h1 { font-size: clamp(26px, 4.4vw, 40px); margin: 6px 0 8px; color: var(--navy); } |
| 1309 | .orgpub-tagline { font-size: 16px; color: var(--ink-2); margin: 0 0 12px; max-width: 640px; } |
1384 | .orgpub-tagline { font-size: 16px; color: var(--ink-2); margin: 0 0 12px; max-width: 640px; } |
| 1310 | .orgpub-meta { display: flex; gap: 8px; flex-wrap: wrap; } |
1385 | .orgpub-meta { display: flex; gap: 8px; flex-wrap: wrap; } |
| 1311 | −.orgpub-meta a.stat-chip:hover { background: var(--lime-soft); } |
1386 | +.orgpub-meta a.stat-chip:hover { background: var(--blue-soft); } |
| 1312 | −.orgpub-verified { background: var(--lime); border-color: var(--ink); font-weight: 600; } |
1387 | +.orgpub-verified { background: var(--blue-soft); border-color: rgba(34, 88, 255, 0.3); color: var(--blue); font-weight: 600; } |
| 1313 | .orgpub-desc { max-width: 720px; color: var(--ink-2); margin: 18px 0 6px; white-space: pre-line; } |
1388 | .orgpub-desc { max-width: 720px; color: var(--ink-2); margin: 18px 0 6px; white-space: pre-line; } |
| 1314 | .orgpub .results-head h2 { display: inline-flex; align-items: center; gap: 8px; } |
1389 | .orgpub .results-head h2 { display: inline-flex; align-items: center; gap: 8px; } |
| 1315 | @media (max-width: 560px) { .orgpub-head { flex-direction: column; } } |
1390 | @media (max-width: 560px) { .orgpub-head { flex-direction: column; } } |
| 1316 | |
1391 | |
| 1317 | /* ================= Éditeur de profil (photo, bio, réseaux) ================= */ |
1392 | /* ================= Éditeur de profil (photo, bio, réseaux) ================= */ |
| 1318 | −.profil-edit { margin-top: 34px; padding-top: 24px; border-top: 2px solid var(--ink); } |
1393 | +.profil-edit { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line-strong); } |
| 1319 | /* profil géré au hub Groupe KA — lecture seule */ |
1394 | /* profil géré au hub Groupe KA — lecture seule */ |
| 1320 | .hub-profile .hub-bio { color: var(--ink-2); font-size: 14px; margin: 0; max-width: 560px; } |
1395 | .hub-profile .hub-bio { color: var(--ink-2); font-size: 14px; margin: 0; max-width: 560px; } |
| 1321 | .hub-profile .pub-meta { display: flex; gap: 8px; flex-wrap: wrap; } |
1396 | .hub-profile .pub-meta { display: flex; gap: 8px; flex-wrap: wrap; } |
| 1322 | .hub-profile .stat-chip { display: inline-flex; align-items: center; gap: 6px; } |
1397 | .hub-profile .stat-chip { display: inline-flex; align-items: center; gap: 6px; } |
| 1323 | −.hub-profile a.stat-chip:hover { background: var(--lime-soft); } |
1398 | +.hub-profile a.stat-chip:hover { background: var(--blue-soft); } |
| 1324 | .hub-profile .btn-primary { display: inline-flex; align-items: center; gap: 7px; } |
1399 | .hub-profile .btn-primary { display: inline-flex; align-items: center; gap: 7px; } |
| 1325 | .pe-avatar-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } |
1400 | .pe-avatar-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } |
| 1326 | .pe-avatar { |
1401 | .pe-avatar { |
| 1327 | − width: 84px; height: 84px; border-radius: 999px; object-fit: cover; |
1402 | + width: 84px; height: 84px; border-radius: var(--r-pill); object-fit: cover; |
| 1328 | − border: 2.5px solid var(--ink); box-shadow: 4px 4px 0 rgba(20,24,20,0.15); |
1403 | + border: 2.5px solid var(--orange); box-shadow: var(--shadow-flat); |
| 1329 | display: flex; align-items: center; justify-content: center; |
1404 | display: flex; align-items: center; justify-content: center; |
| 1330 | } |
1405 | } |
| 1331 | −.pe-avatar-empty { background: var(--lime); font-family: var(--font-display); font-weight: 700; font-size: 34px; } |
1406 | +.pe-avatar-empty { background: var(--orange-soft); color: var(--orange); font-family: var(--font-display); font-weight: 700; font-size: 34px; } |
| 1332 | .pe-avatar-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } |
1407 | .pe-avatar-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } |
| 1333 | .pe-avatar-actions .btn { display: inline-flex; align-items: center; gap: 7px; } |
1408 | .pe-avatar-actions .btn { display: inline-flex; align-items: center; gap: 7px; } |
| 1334 | −.pe-hint { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); } |
1409 | +.pe-hint { font-size: 11px; color: var(--ink-3); } |
| 1335 | .pe-socials-title { font-size: 15px; margin-top: 6px; } |
1410 | .pe-socials-title { font-size: 15px; margin-top: 6px; } |
| 1336 | .pe-socials { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; } |
1411 | .pe-socials { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; } |
| 1337 | .pe-social { display: flex !important; flex-direction: row !important; align-items: center; gap: 0 !important; } |
1412 | .pe-social { display: flex !important; flex-direction: row !important; align-items: center; gap: 0 !important; } |
| 1338 | .pe-social-ico { |
1413 | .pe-social-ico { |
| 1339 | display: flex; align-items: center; justify-content: center; |
1414 | display: flex; align-items: center; justify-content: center; |
| 1340 | width: 40px; align-self: stretch; flex: none; |
1415 | width: 40px; align-self: stretch; flex: none; |
| 1341 | − background: var(--ink); color: var(--lime); |
1416 | + background: var(--navy); color: var(--white); |
| 1342 | − border: 1.5px solid var(--ink); border-radius: var(--r-ctl) 0 0 var(--r-ctl); |
1417 | + border-radius: var(--r-ctl) 0 0 var(--r-ctl); |
| 1343 | } |
1418 | } |
| 1344 | .pe-social input { flex: 1; border-radius: 0 var(--r-ctl) var(--r-ctl) 0; border-left: 0; } |
1419 | .pe-social input { flex: 1; border-radius: 0 var(--r-ctl) var(--r-ctl) 0; border-left: 0; } |
| 1345 | |
1420 | |
| 1351 | .pub-social { |
1426 | .pub-social { |
| 1352 | display: flex; align-items: center; justify-content: center; |
1427 | display: flex; align-items: center; justify-content: center; |
| 1353 | width: 44px; height: 44px; background: var(--surface); |
1428 | width: 44px; height: 44px; background: var(--surface); |
| 1354 | − border: 2px solid var(--ink); border-radius: 12px; color: var(--ink); |
1429 | + border: 1px solid var(--line-strong); border-radius: 14px; color: var(--navy); |
| 1355 | transition: all 0.12s ease; |
1430 | transition: all 0.12s ease; |
| 1356 | } |
1431 | } |
| 1357 | −.pub-social:hover { background: var(--ink); color: var(--lime); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 rgba(20,24,20,0.25); } |
1432 | +.pub-social:hover { background: var(--navy); border-color: var(--navy); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-off-soft); } |
| 1358 | |
1433 | |
| 1359 | /* ----------------------------------------------------------------------------- |
1434 | /* ----------------------------------------------------------------------------- |
| 1360 | Lou-Ka Maps (framework Ka Maps par Groupe Ka) |
1435 | Lou-Ka Maps (framework Ka Maps par Groupe Ka) |
| 1361 | Jetons du design system appliqués au chrome de la carte + sync liste↔carte. |
1436 | Jetons du design system appliqués au chrome de la carte + sync liste↔carte. |
| 1362 | ----------------------------------------------------------------------------- */ |
1437 | ----------------------------------------------------------------------------- */ |
| 1363 | .mapview .ka-map { |
1438 | .mapview .ka-map { |
| 1364 | − --ka-accent: var(--ink); |
1439 | + --ka-accent: var(--blue); |
| 1365 | − --ka-on-accent: var(--lime); |
1440 | + --ka-on-accent: var(--white); |
| 1366 | --ka-surface: var(--surface); |
1441 | --ka-surface: var(--surface); |
| 1367 | − --ka-ink: var(--ink); |
1442 | + --ka-ink: var(--navy); |
| 1368 | --ka-line: var(--line-strong); |
1443 | --ka-line: var(--line-strong); |
| 1369 | --ka-radius: var(--r-ctl); |
1444 | --ka-radius: var(--r-ctl); |
| 1370 | − --ka-shadow: 4px 4px 0 rgba(20, 24, 20, 0.18); |
1445 | + --ka-shadow: 0 8px 24px rgba(11, 19, 48, 0.14); |
| 1371 | --ka-font: var(--font-body); |
1446 | --ka-font: var(--font-body); |
| 1372 | } |
1447 | } |
| 1373 | .mapview { position: relative; overflow: hidden; } |
1448 | .mapview { position: relative; overflow: hidden; } |
| 1374 | .mapview .ka-map { position: absolute; inset: 0; } |
1449 | .mapview .ka-map { position: absolute; inset: 0; } |
| 1375 | |
1450 | |
| 1376 | −/* mini-carte 3D de la fiche (Emplacement) — bâtiment de l'annonce en rouge */ |
1451 | +/* mini-carte 3D de la fiche (Emplacement) — bâtiment de l'annonce en orange */ |
| 1377 | .lmap3d { |
1452 | .lmap3d { |
| 1378 | − position: relative; height: 340px; border: 1.5px solid var(--line-strong); |
1453 | + position: relative; height: 340px; border: 1px solid var(--line); |
| 1379 | border-radius: var(--r-card); box-shadow: var(--shadow-off-soft); |
1454 | border-radius: var(--r-card); box-shadow: var(--shadow-off-soft); |
| 1380 | − overflow: hidden; background: var(--surface-2); |
1455 | + overflow: hidden; background: var(--grey); |
| 1381 | } |
1456 | } |
| 1382 | .lmap3d .ka-map { |
1457 | .lmap3d .ka-map { |
| 1383 | − --ka-accent: var(--ink); |
1458 | + --ka-accent: var(--blue); |
| 1384 | − --ka-on-accent: var(--lime); |
1459 | + --ka-on-accent: var(--white); |
| 1385 | --ka-surface: var(--surface); |
1460 | --ka-surface: var(--surface); |
| 1386 | − --ka-ink: var(--ink); |
1461 | + --ka-ink: var(--navy); |
| 1387 | --ka-line: var(--line-strong); |
1462 | --ka-line: var(--line-strong); |
| 1388 | --ka-radius: var(--r-ctl); |
1463 | --ka-radius: var(--r-ctl); |
| 1389 | − --ka-shadow: 4px 4px 0 rgba(20, 24, 20, 0.18); |
1464 | + --ka-shadow: 0 8px 24px rgba(11, 19, 48, 0.14); |
| 1390 | --ka-font: var(--font-body); |
1465 | --ka-font: var(--font-body); |
| 1391 | position: absolute; inset: 0; |
1466 | position: absolute; inset: 0; |
| 1392 | } |
1467 | } |
| 1393 | .lmap3d-skel { |
1468 | .lmap3d-skel { |
| 1394 | − background: linear-gradient(90deg, #eeece5 25%, #f7f5ef 50%, #eeece5 75%); |
1469 | + background: linear-gradient(90deg, #ececef 25%, #f7f7f9 50%, #ececef 75%); |
| 1395 | background-size: 800px 100%; animation: shimmer 1.4s infinite linear; |
1470 | background-size: 800px 100%; animation: shimmer 1.4s infinite linear; |
| 1396 | } |
1471 | } |
| 1397 | .lmap3d-legende { |
1472 | .lmap3d-legende { |
| 1398 | position: absolute; left: 10px; bottom: 10px; z-index: 5; |
1473 | position: absolute; left: 10px; bottom: 10px; z-index: 5; |
| 1399 | display: inline-flex; align-items: center; gap: 6px; |
1474 | display: inline-flex; align-items: center; gap: 6px; |
| 1400 | − padding: 4px 9px; border: 1.5px solid var(--line-strong); |
1475 | + padding: 4px 10px; border: 1px solid var(--line); |
| 1401 | − border-radius: var(--r-ctl); background: var(--surface); |
1476 | + border-radius: var(--r-pill); background: var(--surface); |
| 1402 | − font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-2); |
1477 | + font-size: 10.5px; font-weight: 500; color: var(--ink-2); |
| 1403 | pointer-events: none; |
1478 | pointer-events: none; |
| 1404 | } |
1479 | } |
| 1405 | .lmap3d-legende i { |
1480 | .lmap3d-legende i { |
| 1406 | width: 10px; height: 10px; border-radius: 3px; |
1481 | width: 10px; height: 10px; border-radius: 3px; |
| 1407 | − background: #e03131; border: 1px solid rgba(20, 24, 20, 0.35); |
1482 | + background: var(--orange); border: 1px solid rgba(11, 19, 48, 0.25); |
| 1408 | } |
1483 | } |
| 1409 | @media (max-width: 780px) { .lmap3d { height: 280px; } } |
1484 | @media (max-width: 780px) { .lmap3d { height: 280px; } } |
| 1410 | .ka-preview .mv-pop img, .ka-preview .mv-noimg { height: 120px; } |
1485 | .ka-preview .mv-pop img, .ka-preview .mv-noimg { height: 120px; } |
| 1413 | |
1488 | |
| 1414 | /* carte de liste synchronisée avec la carte (survol / sélection) */ |
1489 | /* carte de liste synchronisée avec la carte (survol / sélection) */ |
| 1415 | .map-card { border-radius: var(--r-card); } |
1490 | .map-card { border-radius: var(--r-card); } |
| 1416 | −.map-card-sel { outline: 2px solid var(--ink); outline-offset: 2px; } |
1491 | +.map-card-sel { outline: 2px solid var(--blue); outline-offset: 2px; } |