| |
1 | +<!DOCTYPE html> |
| |
2 | +<html lang="fr"> |
| |
3 | +<head> |
| |
4 | +<meta charset="UTF-8"> |
| |
5 | +<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| |
6 | +<title>Erika ♥ SP · Road Trip Québec → Toronto · Ed Sheeran LOOP Tour · 17–24 août 2026</title> |
| |
7 | +<meta name="description" content="Itinéraire complet du road trip Québec–Toronto pour le Ed Sheeran LOOP Tour au Rogers Centre, 17 au 24 août 2026."> |
| |
8 | +<link rel="preconnect" href="https://fonts.googleapis.com"> |
| |
9 | +<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| |
10 | +<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"> |
| |
11 | +<style> |
| |
12 | + :root { |
| |
13 | + --bg: #0b0d14; |
| |
14 | + --bg-2: #11141f; |
| |
15 | + --card: #161a28; |
| |
16 | + --card-2: #1c2133; |
| |
17 | + --ink: #f2f4fa; |
| |
18 | + --ink-soft: #9aa3ba; |
| |
19 | + --line: rgba(255,255,255,.08); |
| |
20 | + --orange: #ff6b2c; |
| |
21 | + --pink: #ff2e88; |
| |
22 | + --violet: #7c4dff; |
| |
23 | + --teal: #2dd4bf; |
| |
24 | + --grad: linear-gradient(100deg, #ff6b2c, #ff2e88 45%, #7c4dff); |
| |
25 | + --radius: 22px; |
| |
26 | + } |
| |
27 | + * { margin: 0; padding: 0; box-sizing: border-box; } |
| |
28 | + html { scroll-behavior: smooth; } |
| |
29 | + body { |
| |
30 | + font-family: "Inter", -apple-system, sans-serif; |
| |
31 | + background: var(--bg); |
| |
32 | + color: var(--ink); |
| |
33 | + line-height: 1.65; |
| |
34 | + overflow-x: hidden; |
| |
35 | + } |
| |
36 | + h1, h2, h3, .num, .cd-num { font-family: "Space Grotesk", "Inter", sans-serif; } |
| |
37 | + .wrap { max-width: 1020px; margin: 0 auto; padding: 0 24px; } |
| |
38 | + |
| |
39 | + /* ---------- STICKY NAV ---------- */ |
| |
40 | + .nav { |
| |
41 | + position: fixed; top: 0; left: 0; right: 0; z-index: 50; |
| |
42 | + background: rgba(11,13,20,.72); backdrop-filter: blur(14px); |
| |
43 | + border-bottom: 1px solid var(--line); |
| |
44 | + } |
| |
45 | + .nav-inner { |
| |
46 | + max-width: 1020px; margin: 0 auto; padding: 12px 24px; |
| |
47 | + display: flex; align-items: center; gap: 16px; |
| |
48 | + } |
| |
49 | + .nav .logo { font-weight: 800; font-size: 15px; letter-spacing: .02em; white-space: nowrap; } |
| |
50 | + .nav .logo span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } |
| |
51 | + .nav-days { display: flex; gap: 4px; margin-left: auto; overflow-x: auto; scrollbar-width: none; } |
| |
52 | + .nav-days::-webkit-scrollbar { display: none; } |
| |
53 | + .nav-days a { |
| |
54 | + color: var(--ink-soft); text-decoration: none; font-size: 13px; font-weight: 600; |
| |
55 | + padding: 6px 12px; border-radius: 999px; white-space: nowrap; transition: all .2s; |
| |
56 | + } |
| |
57 | + .nav-days a:hover { color: #fff; background: rgba(255,255,255,.08); } |
| |
58 | + .nav-days a.hot { color: #fff; background: linear-gradient(100deg, #ff6b2c, #ff2e88); } |
| |
59 | + |
| |
60 | + /* ---------- HERO ---------- */ |
| |
61 | + .hero { |
| |
62 | + position: relative; min-height: 92vh; |
| |
63 | + display: flex; align-items: flex-end; |
| |
64 | + isolation: isolate; overflow: hidden; |
| |
65 | + } |
| |
66 | + .hero-bg { |
| |
67 | + position: absolute; inset: -6%; |
| |
68 | + background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Sunset_Toronto_Skyline_Panorama_Crop_from_Snake_Island.jpg/1920px-Sunset_Toronto_Skyline_Panorama_Crop_from_Snake_Island.jpg") center 62% / cover no-repeat; |
| |
69 | + z-index: -2; animation: kenburns 26s ease-in-out infinite alternate; |
| |
70 | + } |
| |
71 | + @keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.09) translateY(-1.5%); } } |
| |
72 | + .hero::after { |
| |
73 | + content: ""; position: absolute; inset: 0; z-index: -1; |
| |
74 | + background: |
| |
75 | + radial-gradient(120% 70% at 70% 10%, transparent 40%, rgba(11,13,20,.55) 100%), |
| |
76 | + linear-gradient(180deg, rgba(11,13,20,.45) 0%, rgba(11,13,20,.35) 45%, var(--bg) 100%); |
| |
77 | + } |
| |
78 | + .hero-inner { position: relative; width: 100%; max-width: 1020px; margin: 0 auto; padding: 140px 24px 72px; } |
| |
79 | + .kicker { |
| |
80 | + display: inline-flex; align-items: center; gap: 10px; |
| |
81 | + text-transform: uppercase; letter-spacing: .3em; font-size: 12px; font-weight: 700; |
| |
82 | + color: #ffd9c4; margin-bottom: 18px; |
| |
83 | + } |
| |
84 | + .kicker::before { content: ""; width: 34px; height: 2px; background: var(--grad); border-radius: 2px; } |
| |
85 | + .hero h1 { |
| |
86 | + font-size: clamp(40px, 7.5vw, 84px); font-weight: 700; line-height: 1.02; |
| |
87 | + letter-spacing: -.02em; margin-bottom: 14px; |
| |
88 | + } |
| |
89 | + .hero h1 .grad { |
| |
90 | + background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; |
| |
91 | + background-size: 200% 100%; animation: shine 6s linear infinite; |
| |
92 | + } |
| |
93 | + @keyframes shine { to { background-position: 200% 0; } } |
| |
94 | + .hero .sub { font-size: clamp(16px, 2.2vw, 20px); color: #d5daea; max-width: 640px; } |
| |
95 | + .badges { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; } |
| |
96 | + .badge { |
| |
97 | + background: rgba(255,255,255,.08); backdrop-filter: blur(8px); |
| |
98 | + border: 1px solid rgba(255,255,255,.18); border-radius: 999px; |
| |
99 | + padding: 8px 18px; font-size: 14px; font-weight: 600; |
| |
100 | + } |
| |
101 | + .badge.hot { background: linear-gradient(100deg, rgba(255,107,44,.9), rgba(255,46,136,.9)); border-color: transparent; } |
| |
102 | + |
| |
103 | + /* ---------- ERIKA + SP ---------- */ |
| |
104 | + .lovers { |
| |
105 | + display: inline-flex; align-items: center; gap: 12px; |
| |
106 | + margin: 6px 0 16px; |
| |
107 | + font-family: "Space Grotesk", "Inter", sans-serif; |
| |
108 | + font-size: clamp(19px, 2.8vw, 26px); font-weight: 700; letter-spacing: .01em; |
| |
109 | + } |
| |
110 | + .lovers .name { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } |
| |
111 | + .lovers .heart { |
| |
112 | + display: inline-block; color: #ff2e88; font-size: 1.15em; line-height: 1; |
| |
113 | + animation: heartbeat 1.5s ease-in-out infinite; |
| |
114 | + filter: drop-shadow(0 0 10px rgba(255,46,136,.55)); |
| |
115 | + } |
| |
116 | + @keyframes heartbeat { |
| |
117 | + 0%, 100% { transform: scale(1); } |
| |
118 | + 14% { transform: scale(1.3); } |
| |
119 | + 28% { transform: scale(1); } |
| |
120 | + 42% { transform: scale(1.22); } |
| |
121 | + 56% { transform: scale(1); } |
| |
122 | + } |
| |
123 | + |
| |
124 | + /* ---------- COUNTDOWN ---------- */ |
| |
125 | + .countdown { margin-top: 34px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } |
| |
126 | + .cd-label { font-size: 13px; text-transform: uppercase; letter-spacing: .18em; color: #ffd9c4; font-weight: 700; width: 100%; } |
| |
127 | + .cd-box { |
| |
128 | + min-width: 86px; text-align: center; padding: 14px 10px 10px; |
| |
129 | + background: rgba(255,255,255,.07); backdrop-filter: blur(10px); |
| |
130 | + border: 1px solid rgba(255,255,255,.16); border-radius: 16px; |
| |
131 | + } |
| |
132 | + .cd-num { font-size: 34px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } |
| |
133 | + .cd-unit { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-soft); margin-top: 6px; } |
| |
134 | + |
| |
135 | + /* ---------- STATS ---------- */ |
| |
136 | + .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: -10px; position: relative; z-index: 2; } |
| |
137 | + .stat { |
| |
138 | + background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); |
| |
139 | + padding: 20px; text-align: center; transition: transform .25s, border-color .25s; |
| |
140 | + } |
| |
141 | + .stat:hover { transform: translateY(-4px); border-color: rgba(255,107,44,.5); } |
| |
142 | + .stat .num { font-size: 28px; font-weight: 700; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } |
| |
143 | + .stat .lbl { font-size: 12px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .1em; margin-top: 2px; } |
| |
144 | + |
| |
145 | + /* ---------- ROUTE STRIP ---------- */ |
| |
146 | + .route-strip { |
| |
147 | + margin: 30px 0 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); |
| |
148 | + padding: 22px 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; justify-content: center; |
| |
149 | + font-weight: 700; font-size: 15px; |
| |
150 | + } |
| |
151 | + .route-strip .city { color: var(--ink); } |
| |
152 | + .route-strip .leg { color: var(--ink-soft); font-weight: 500; font-size: 12.5px; padding: 0 8px; position: relative; } |
| |
153 | + |
| |
154 | + /* ---------- SECTIONS ---------- */ |
| |
155 | + h2.section { |
| |
156 | + font-size: clamp(24px, 3.4vw, 34px); font-weight: 700; letter-spacing: -.01em; |
| |
157 | + margin: 72px 0 8px; display: flex; align-items: center; gap: 14px; |
| |
158 | + } |
| |
159 | + h2.section::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,107,44,.6), transparent); } |
| |
160 | + .section-sub { color: var(--ink-soft); margin-bottom: 30px; max-width: 720px; } |
| |
161 | + |
| |
162 | + /* ---------- DAY CARDS ---------- */ |
| |
163 | + .day { |
| |
164 | + background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); |
| |
165 | + overflow: hidden; margin-bottom: 40px; scroll-margin-top: 90px; |
| |
166 | + transition: border-color .3s; |
| |
167 | + } |
| |
168 | + .day:hover { border-color: rgba(255,255,255,.2); } |
| |
169 | + .day-photo { height: 340px; overflow: hidden; position: relative; } |
| |
170 | + .day-photo .img { |
| |
171 | + position: absolute; inset: 0; background-size: cover; background-position: center; |
| |
172 | + transition: transform .8s cubic-bezier(.2,.6,.2,1); |
| |
173 | + } |
| |
174 | + .day:hover .day-photo .img { transform: scale(1.06); } |
| |
175 | + .day-photo::after { |
| |
176 | + content: ""; position: absolute; inset: 0; |
| |
177 | + background: linear-gradient(180deg, rgba(11,13,20,.15), transparent 35%, transparent 70%, rgba(22,26,40,.9)); |
| |
178 | + pointer-events: none; |
| |
179 | + } |
| |
180 | + .day-photo .tag { |
| |
181 | + position: absolute; top: 18px; left: 18px; z-index: 2; |
| |
182 | + background: rgba(11,13,20,.7); backdrop-filter: blur(8px); color: #fff; |
| |
183 | + border: 1px solid rgba(255,255,255,.2); |
| |
184 | + padding: 8px 18px; border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: .08em; |
| |
185 | + } |
| |
186 | + .day-photo .drive { |
| |
187 | + position: absolute; bottom: 18px; right: 18px; z-index: 2; |
| |
188 | + background: rgba(255,255,255,.92); color: #10131d; |
| |
189 | + padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; |
| |
190 | + } |
| |
191 | + .day-body { padding: 30px 34px 34px; } |
| |
192 | + .day-body h3 { font-size: 24px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 2px; } |
| |
193 | + .day-body .date { |
| |
194 | + color: var(--orange); font-weight: 800; font-size: 13px; |
| |
195 | + text-transform: uppercase; letter-spacing: .14em; margin-bottom: 16px; |
| |
196 | + } |
| |
197 | + .timeline { list-style: none; margin: 14px 0 4px; } |
| |
198 | + .timeline li { |
| |
199 | + display: grid; grid-template-columns: 92px 1fr; gap: 16px; |
| |
200 | + padding: 10px 0; border-bottom: 1px dashed var(--line); align-items: start; |
| |
201 | + } |
| |
202 | + .timeline li:last-child { border-bottom: none; } |
| |
203 | + .timeline .t { font-weight: 800; color: var(--teal); font-size: 14px; padding-top: 2px; white-space: nowrap; font-variant-numeric: tabular-nums; } |
| |
204 | + .timeline .d { color: #cdd3e4; } |
| |
205 | + .timeline .d strong { color: #fff; } |
| |
206 | + .timeline .d em { color: #ffb38a; font-style: normal; font-weight: 600; } |
| |
207 | + .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } |
| |
208 | + .chip { |
| |
209 | + font-size: 13px; font-weight: 600; padding: 7px 15px; border-radius: 999px; |
| |
210 | + background: rgba(45,212,191,.1); color: var(--teal); border: 1px solid rgba(45,212,191,.3); |
| |
211 | + } |
| |
212 | + .chip.hotel { background: rgba(255,107,44,.12); color: #ffa06b; border-color: rgba(255,107,44,.35); } |
| |
213 | + .tip { |
| |
214 | + margin-top: 18px; background: rgba(250,204,21,.08); border: 1px solid rgba(250,204,21,.3); |
| |
215 | + border-radius: 14px; padding: 13px 17px; font-size: 14px; color: #fde68a; |
| |
216 | + } |
| |
217 | + .maplink { |
| |
218 | + display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; |
| |
219 | + font-size: 14px; font-weight: 700; color: var(--teal); text-decoration: none; |
| |
220 | + padding: 9px 18px; border: 1px solid rgba(45,212,191,.35); border-radius: 999px; |
| |
221 | + transition: all .2s; |
| |
222 | + } |
| |
223 | + .maplink:hover { background: rgba(45,212,191,.12); transform: translateX(3px); } |
| |
224 | + |
| |
225 | + /* ---------- CONCERT SPOTLIGHT ---------- */ |
| |
226 | + .concert { position: relative; border: none; } |
| |
227 | + .concert::before { |
| |
228 | + content: ""; position: absolute; inset: 0; border-radius: var(--radius); padding: 2px; |
| |
229 | + background: var(--grad); background-size: 300% 100%; animation: shine 5s linear infinite; |
| |
230 | + -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); |
| |
231 | + -webkit-mask-composite: xor; mask-composite: exclude; |
| |
232 | + pointer-events: none; z-index: 3; |
| |
233 | + } |
| |
234 | + .concert-banner { |
| |
235 | + background: var(--grad); background-size: 300% 100%; animation: shine 5s linear infinite; |
| |
236 | + color: #fff; text-align: center; padding: 12px; font-weight: 800; letter-spacing: .16em; |
| |
237 | + text-transform: uppercase; font-size: 14px; |
| |
238 | + } |
| |
239 | + .concert .day-photo .tag { background: linear-gradient(100deg, #ff6b2c, #ff2e88); border-color: transparent; } |
| |
240 | + .concert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; } |
| |
241 | + .concert-fact { |
| |
242 | + background: var(--card-2); border: 1px solid var(--line); border-radius: 16px; |
| |
243 | + padding: 16px 14px; text-align: center; transition: transform .25s; |
| |
244 | + } |
| |
245 | + .concert-fact:hover { transform: translateY(-3px); } |
| |
246 | + .concert-fact .k { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); } |
| |
247 | + .concert-fact .v { font-weight: 800; font-size: 16px; margin-top: 4px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } |
| |
248 | + .eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; margin-left: 10px; } |
| |
249 | + .eq i { width: 3px; background: #fff; border-radius: 2px; animation: eq 1s ease-in-out infinite; } |
| |
250 | + .eq i:nth-child(1) { height: 60%; animation-delay: 0s; } |
| |
251 | + .eq i:nth-child(2) { height: 100%; animation-delay: .18s; } |
| |
252 | + .eq i:nth-child(3) { height: 45%; animation-delay: .34s; } |
| |
253 | + .eq i:nth-child(4) { height: 80%; animation-delay: .5s; } |
| |
254 | + @keyframes eq { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } } |
| |
255 | + |
| |
256 | + /* ---------- INFO GRID ---------- */ |
| |
257 | + .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } |
| |
258 | + .info-card { |
| |
259 | + background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); |
| |
260 | + padding: 26px 28px; transition: border-color .3s; |
| |
261 | + } |
| |
262 | + .info-card:hover { border-color: rgba(255,255,255,.2); } |
| |
263 | + .info-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 14px; } |
| |
264 | + .info-card ul { margin-left: 20px; } |
| |
265 | + .info-card li { margin-bottom: 8px; font-size: 15px; color: #cdd3e4; } |
| |
266 | + .info-card li strong { color: #fff; } |
| |
267 | + table.budget { width: 100%; border-collapse: collapse; font-size: 15px; color: #cdd3e4; } |
| |
268 | + table.budget td { padding: 9px 4px; border-bottom: 1px solid var(--line); } |
| |
269 | + table.budget td:last-child { text-align: right; font-weight: 700; white-space: nowrap; color: #fff; } |
| |
270 | + table.budget tr.total td { |
| |
271 | + border-top: 2px solid rgba(255,107,44,.6); border-bottom: none; |
| |
272 | + font-weight: 800; font-size: 16px; padding-top: 14px; color: #fff; |
| |
273 | + } |
| |
274 | + |
| |
275 | + /* ---------- REVEAL ANIMATION ---------- */ |
| |
276 | + .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; } |
| |
277 | + .reveal.in { opacity: 1; transform: none; } |
| |
278 | + |
| |
279 | + /* ---------- FOOTER ---------- */ |
| |
280 | + footer { margin: 80px 0 50px; color: var(--ink-soft); font-size: 12.5px; text-align: center; } |
| |
281 | + footer a { color: var(--ink-soft); } |
| |
282 | + .footer-heart { margin-top: 8px; font-size: 13px; } |
| |
283 | + .footer-heart span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; } |
| |
284 | + |
| |
285 | + @media (max-width: 720px) { |
| |
286 | + .stats { grid-template-columns: repeat(2, 1fr); } |
| |
287 | + .info-grid, .concert-grid { grid-template-columns: 1fr; } |
| |
288 | + .hero-inner { padding-top: 110px; } |
| |
289 | + .cd-box { min-width: 72px; } |
| |
290 | + .day-body { padding: 24px 22px 28px; } |
| |
291 | + .nav-days a { padding: 6px 9px; } |
| |
292 | + } |
| |
293 | + |
| |
294 | + @media print { |
| |
295 | + :root { --bg: #fff; --bg-2: #fff; --card: #fff; --card-2: #f6f7fa; --ink: #1a2233; --ink-soft: #4a556b; --line: #dde2ec; } |
| |
296 | + body { background: #fff; color: #1a2233; } |
| |
297 | + .nav, .countdown, .eq { display: none !important; } |
| |
298 | + .hero { min-height: 340px; } |
| |
299 | + .hero .sub { color: #333; } |
| |
300 | + .day, .info-card, .stat, .route-strip { box-shadow: none; border: 1px solid #dde2ec; page-break-inside: avoid; } |
| |
301 | + .timeline .d, .info-card li, table.budget { color: #1a2233; } |
| |
302 | + .timeline .d strong, .info-card li strong, table.budget td:last-child { color: #000; } |
| |
303 | + .reveal { opacity: 1 !important; transform: none !important; } |
| |
304 | + -webkit-print-color-adjust: exact; print-color-adjust: exact; |
| |
305 | + } |
| |
306 | +</style> |
| |
307 | +</head> |
| |
308 | +<body> |
| |
309 | + |
| |
310 | +<nav class="nav"> |
| |
311 | + <div class="nav-inner"> |
| |
312 | + <div class="logo">🚗 <span>QC → TO 2026</span></div> |
| |
313 | + <div class="nav-days"> |
| |
314 | + <a href="#j1">J1</a><a href="#j2">J2</a><a href="#j3">J3</a> |
| |
315 | + <a href="#j4" class="hot">🎤 J4</a> |
| |
316 | + <a href="#j5">J5</a><a href="#j6">J6</a><a href="#j7">J7</a><a href="#j8">J8</a> |
| |
317 | + <a href="#infos">Infos</a> |
| |
318 | + </div> |
| |
319 | + </div> |
| |
320 | +</nav> |
| |
321 | + |
| |
322 | +<header class="hero"> |
| |
323 | + <div class="hero-bg"></div> |
| |
324 | + <div class="hero-inner"> |
| |
325 | + <div class="kicker">Road trip · 17 – 24 août 2026</div> |
| |
326 | + <h1>Québec → Toronto<br><span class="grad">Ed Sheeran LOOP Tour</span></h1> |
| |
327 | + <div class="lovers">Le trip de <span class="name">Erika</span> <span class="heart">♥</span> <span class="name">SP</span></div> |
| |
328 | + <p class="sub">8 jours sur la route — Montréal, Ottawa, les Mille-Îles, Toronto et Niagara. Et au centre de tout : LE show au Rogers Centre.</p> |
| |
329 | + <div class="badges"> |
| |
330 | + <span class="badge hot">🎤 20 août · Rogers Centre</span> |
| |
331 | + <span class="badge">🚗 ~1 900 km</span> |
| |
332 | + <span class="badge">🛏️ 7 nuits</span> |
| |
333 | + <span class="badge">🏙️ 6 villes</span> |
| |
334 | + </div> |
| |
335 | + <div class="countdown" id="countdown"> |
| |
336 | + <div class="cd-label">Compte à rebours avant le show</div> |
| |
337 | + <div class="cd-box"><div class="cd-num" id="cd-d">–</div><div class="cd-unit">jours</div></div> |
| |
338 | + <div class="cd-box"><div class="cd-num" id="cd-h">–</div><div class="cd-unit">heures</div></div> |
| |
339 | + <div class="cd-box"><div class="cd-num" id="cd-m">–</div><div class="cd-unit">min</div></div> |
| |
340 | + <div class="cd-box"><div class="cd-num" id="cd-s">–</div><div class="cd-unit">sec</div></div> |
| |
341 | + </div> |
| |
342 | + </div> |
| |
343 | +</header> |
| |
344 | + |
| |
345 | +<div class="wrap"> |
| |
346 | + |
| |
347 | + <div class="stats reveal"> |
| |
348 | + <div class="stat"><div class="num">8</div><div class="lbl">jours</div></div> |
| |
349 | + <div class="stat"><div class="num">1 900 km</div><div class="lbl">de route</div></div> |
| |
350 | + <div class="stat"><div class="num">6</div><div class="lbl">villes-étapes</div></div> |
| |
351 | + <div class="stat"><div class="num">20 août</div><div class="lbl">🎤 concert</div></div> |
| |
352 | + </div> |
| |
353 | + |
| |
354 | + <div class="route-strip reveal"> |
| |
355 | + <span class="city">Québec</span><span class="leg">— 250 km →</span> |
| |
356 | + <span class="city">Montréal</span><span class="leg">— 200 km →</span> |
| |
357 | + <span class="city">Ottawa</span><span class="leg">— 195 km →</span> |
| |
358 | + <span class="city">Kingston</span><span class="leg">— 265 km →</span> |
| |
359 | + <span class="city">Toronto</span><span class="leg">— 540 km →</span> |
| |
360 | + <span class="city">Montréal</span><span class="leg">— 250 km →</span> |
| |
361 | + <span class="city">Québec</span> |
| |
362 | + </div> |
| |
363 | + |
| |
364 | + <h2 class="section reveal">📅 Itinéraire jour par jour</h2> |
| |
365 | + <p class="section-sub reveal">Toutes les durées de route sont sans trafic — ajoute 20-30 % aux heures de pointe (surtout en arrivant à Montréal et Toronto).</p> |
| |
366 | + |
| |
367 | + <!-- JOUR 1 --> |
| |
368 | + <div class="day reveal" id="j1"> |
| |
369 | + <div class="day-photo"> |
| |
370 | + <div class="img" style="background-image:url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Bas%C3%ADlica_de_Notre-Dame%2C_Montreal%2C_Canad%C3%A1%2C_2017-08-12%2C_DD_22-24_HDR.jpg/1920px-Bas%C3%ADlica_de_Notre-Dame%2C_Montreal%2C_Canad%C3%A1%2C_2017-08-12%2C_DD_22-24_HDR.jpg')"></div> |
| |
371 | + <span class="tag">JOUR 1</span> |
| |
372 | + <span class="drive">🚗 250 km · ~2 h 45</span> |
| |
373 | + </div> |
| |
374 | + <div class="day-body"> |
| |
375 | + <div class="date">Lundi 17 août 2026</div> |
| |
376 | + <h3>Québec → Montréal</h3> |
| |
377 | + <ul class="timeline"> |
| |
378 | + <li><span class="t">9 h 30</span><span class="d">Départ de Québec (A-20 ou A-40, au choix)</span></li> |
| |
379 | + <li><span class="t">11 h 00</span><span class="d">Pause à <strong>Trois-Rivières</strong> — café et marche sur le vieux port</span></li> |
| |
380 | + <li><span class="t">13 h 00</span><span class="d">Arrivée à Montréal, dîner dans le <strong>Vieux-Montréal</strong></span></li> |
| |
381 | + <li><span class="t">14 h 30</span><span class="d"><strong>Basilique Notre-Dame</strong>, place Jacques-Cartier, rue Saint-Paul</span></li> |
| |
382 | + <li><span class="t">18 h 00</span><span class="d">Montée au <strong>belvédère du Mont-Royal</strong> pour le coucher de soleil</span></li> |
| |
383 | + <li><span class="t">20 h 00</span><span class="d">Souper sur une terrasse du Plateau ou dans le Mile End</span></li> |
| |
384 | + </ul> |
| |
385 | + <div class="chips"> |
| |
386 | + <span class="chip hotel">🛏️ Nuit : Montréal (Vieux-Port ou Plateau)</span> |
| |
387 | + <span class="chip">🍽️ Olive & Gourmando · Foiegwa · Schwartz's</span> |
| |
388 | + </div> |
| |
389 | + <a class="maplink" href="https://www.google.com/maps/dir/Qu%C3%A9bec,+QC/Trois-Rivi%C3%A8res,+QC/Montr%C3%A9al,+QC" target="_blank">🗺️ Ouvrir le trajet dans Google Maps →</a> |
| |
390 | + </div> |
| |
391 | + </div> |
| |
392 | + |
| |
393 | + <!-- JOUR 2 --> |
| |
394 | + <div class="day reveal" id="j2"> |
| |
395 | + <div class="day-photo"> |
| |
396 | + <div class="img" style="background-image:url('https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Centre_Block_-_Parliament_Hill.jpg/1920px-Centre_Block_-_Parliament_Hill.jpg')"></div> |
| |
397 | + <span class="tag">JOUR 2</span> |
| |
398 | + <span class="drive">🚗 200 km · ~2 h</span> |
| |
399 | + </div> |
| |
400 | + <div class="day-body"> |
| |
401 | + <div class="date">Mardi 18 août 2026</div> |
| |
402 | + <h3>Montréal → Ottawa</h3> |
| |
403 | + <ul class="timeline"> |
| |
404 | + <li><span class="t">9 h 00</span><span class="d">Déjeuner : bagels <strong>St-Viateur</strong> ou marché <strong>Jean-Talon</strong></span></li> |
| |
405 | + <li><span class="t">10 h 30</span><span class="d">Départ vers Ottawa (A-40 → ON-417)</span></li> |
| |
406 | + <li><span class="t">12 h 30</span><span class="d">Dîner au <strong>marché By</strong> (ByWard Market) — queue de castor obligatoire 🦫</span></li> |
| |
407 | + <li><span class="t">14 h 00</span><span class="d"><strong>Colline du Parlement</strong> — édifices, flamme du centenaire, vue sur la rivière</span></li> |
| |
408 | + <li><span class="t">15 h 30</span><span class="d">Au choix : <strong>Galerie nationale du Canada</strong> ou <strong>Musée canadien de l'histoire</strong> (côté Gatineau, superbe vue)</span></li> |
| |
409 | + <li><span class="t">18 h 30</span><span class="d">Marche le long du <strong>canal Rideau</strong> (UNESCO), souper au centre-ville</span></li> |
| |
410 | + </ul> |
| |
411 | + <div class="chips"> |
| |
412 | + <span class="chip hotel">🛏️ Nuit : Ottawa (centre-ville / ByWard)</span> |
| |
413 | + <span class="chip">🍽️ Play Food & Wine · El Camino</span> |
| |
414 | + </div> |
| |
415 | + <a class="maplink" href="https://www.google.com/maps/dir/Montr%C3%A9al,+QC/Ottawa,+ON" target="_blank">🗺️ Ouvrir le trajet dans Google Maps →</a> |
| |
416 | + </div> |
| |
417 | + </div> |
| |
418 | + |
| |
419 | + <!-- JOUR 3 --> |
| |
420 | + <div class="day reveal" id="j3"> |
| |
421 | + <div class="day-photo"> |
| |
422 | + <div class="img" style="background-image:url('https://upload.wikimedia.org/wikipedia/commons/thumb/6/6c/1000_Islands_Tower_view_July_2015_panorama_5.jpg/1920px-1000_Islands_Tower_view_July_2015_panorama_5.jpg')"></div> |
| |
423 | + <span class="tag">JOUR 3</span> |
| |
424 | + <span class="drive">🚗 460 km · ~5 h</span> |
| |
425 | + </div> |
| |
426 | + <div class="day-body"> |
| |
427 | + <div class="date">Mercredi 19 août 2026</div> |
| |
428 | + <h3>Ottawa → Mille-Îles → Toronto</h3> |
| |
429 | + <ul class="timeline"> |
| |
430 | + <li><span class="t">8 h 30</span><span class="d">Départ d'Ottawa vers <strong>Gananoque</strong> (~1 h 45)</span></li> |
| |
431 | + <li><span class="t">10 h 30</span><span class="d"><strong>Croisière des Mille-Îles</strong> (1 h, City Cruises Gananoque) — châteaux, îlots, chenaux 🏝️ <em>Réserver en ligne!</em></span></li> |
| |
432 | + <li><span class="t">12 h 00</span><span class="d">Dîner à <strong>Kingston</strong> — centre historique, hôtel de ville, front de lac</span></li> |
| |
433 | + <li><span class="t">14 h 00</span><span class="d">Route vers Toronto par la 401 (~2 h 45)</span></li> |
| |
434 | + <li><span class="t">17 h 30</span><span class="d">Check-in à l'hôtel (4 nuits, même hôtel — Entertainment District idéalement)</span></li> |
| |
435 | + <li><span class="t">19 h 30</span><span class="d">Souper détendu sur <strong>King West</strong> et repérage du Rogers Centre à pied</span></li> |
| |
436 | + </ul> |
| |
437 | + <div class="chips"> |
| |
438 | + <span class="chip hotel">🛏️ Nuits 3-4-5-6 : Toronto (Entertainment District)</span> |
| |
439 | + <span class="chip">💡 À pied du stade : Le Germain · Delta · Marriott City Centre</span> |
| |
440 | + </div> |
| |
441 | + <div class="tip">⚠️ Réserve l'hôtel <strong>dès maintenant</strong> : Ed Sheeran joue 3 soirs (20-21-22 août) + saison des Blue Jays = centre-ville plein et cher.</div> |
| |
442 | + <a class="maplink" href="https://www.google.com/maps/dir/Ottawa,+ON/Gananoque,+ON/Kingston,+ON/Toronto,+ON" target="_blank">🗺️ Ouvrir le trajet dans Google Maps →</a> |
| |
443 | + </div> |
| |
444 | + </div> |
| |
445 | + |
| |
446 | + <!-- JOUR 4 — CONCERT --> |
| |
447 | + <div class="day concert reveal" id="j4"> |
| |
448 | + <div class="concert-banner">⭐ Le grand soir — Ed Sheeran LOOP Tour <span class="eq"><i></i><i></i><i></i><i></i></span></div> |
| |
449 | + <div class="day-photo"> |
| |
450 | + <div class="img" style="background-image:url('https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Toronto_-_ON_-_Rogers_Centre_%28Nacht%29.jpg/1920px-Toronto_-_ON_-_Rogers_Centre_%28Nacht%29.jpg')"></div> |
| |
451 | + <span class="tag">JOUR 4 · CONCERT 🎤</span> |
| |
452 | + </div> |
| |
453 | + <div class="day-body"> |
| |
454 | + <div class="date">Jeudi 20 août 2026</div> |
| |
455 | + <h3>Toronto + Ed Sheeran au Rogers Centre</h3> |
| |
456 | + <div class="concert-grid"> |
| |
457 | + <div class="concert-fact"><div class="k">Lieu</div><div class="v">Rogers Centre<br>1 Blue Jays Way</div></div> |
| |
458 | + <div class="concert-fact"><div class="k">Portes / Show</div><div class="v">16 h 30 / 17 h 30</div></div> |
| |
459 | + <div class="concert-fact"><div class="k">Premières parties</div><div class="v">Myles Smith<br>Lukas Graham</div></div> |
| |
460 | + </div> |
| |
461 | + <ul class="timeline" style="margin-top:22px"> |
| |
462 | + <li><span class="t">9 h 30</span><span class="d">Brunch tranquille, puis <strong>CN Tower</strong> (juste à côté du stade) — réserver un créneau en ligne</span></li> |
| |
463 | + <li><span class="t">12 h 00</span><span class="d"><strong>Aquarium Ripley's</strong> ou promenade sur le <strong>Harbourfront</strong></span></li> |
| |
464 | + <li><span class="t">15 h 00</span><span class="d">Souper TÔT près du stade (King West / Front St) — les restos débordent les soirs de show</span></li> |
| |
465 | + <li><span class="t">16 h 30</span><span class="d"><strong>Ouverture des portes</strong> au Rogers Centre — arriver tôt, sécurité + fouille</span></li> |
| |
466 | + <li><span class="t">17 h 30</span><span class="d">🎶 Début du spectacle — premières parties puis <strong>~2 h 30 de Ed Sheeran</strong> (hits + album <em>Play</em> + loop pedal)</span></li> |
| |
467 | + <li><span class="t">22 h 30</span><span class="d">Retour à pied à l'hôtel — aucun stress de stationnement 🙌</span></li> |
| |
468 | + </ul> |
| |
469 | + <div class="chips"> |
| |
470 | + <span class="chip hotel">🛏️ Nuit : Toronto</span> |
| |
471 | + <span class="chip">🎟️ Ticketmaster.ca — app mobile requise (billets électroniques)</span> |
| |
472 | + </div> |
| |
473 | + <div class="tip">💡 Laisse l'auto au stationnement de l'hôtel toute la journée. Batterie de téléphone pleine pour le billet électronique + petite veste (le toit peut être ouvert en soirée).</div> |
| |
474 | + </div> |
| |
475 | + </div> |
| |
476 | + |
| |
477 | + <!-- JOUR 5 --> |
| |
478 | + <div class="day reveal" id="j5"> |
| |
479 | + <div class="day-photo"> |
| |
480 | + <div class="img" style="background-image:url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Maid_of_the_Mist_VII_approaching_the_Horseshoe_Falls%2C_West_view_20170418_1.jpg/1920px-Maid_of_the_Mist_VII_approaching_the_Horseshoe_Falls%2C_West_view_20170418_1.jpg')"></div> |
| |
481 | + <span class="tag">JOUR 5</span> |
| |
482 | + <span class="drive">🚗 260 km A/R · ~3 h</span> |
| |
483 | + </div> |
| |
484 | + <div class="day-body"> |
| |
485 | + <div class="date">Vendredi 21 août 2026</div> |
| |
486 | + <h3>Excursion — Chutes Niagara & Niagara-on-the-Lake</h3> |
| |
487 | + <ul class="timeline"> |
| |
488 | + <li><span class="t">8 h 30</span><span class="d">Départ de Toronto par la QEW (~1 h 30 sans trafic)</span></li> |
| |
489 | + <li><span class="t">10 h 30</span><span class="d"><strong>Croisière <em>Voyage to the Falls</em></strong> (Niagara City Cruises) — au pied des chutes, poncho fourni 🌊 <em>Réserver en ligne!</em></span></li> |
| |
490 | + <li><span class="t">12 h 00</span><span class="d"><strong>Journey Behind the Falls</strong> + terrasse Table Rock, dîner avec vue</span></li> |
| |
491 | + <li><span class="t">15 h 00</span><span class="d">Route panoramique <strong>Niagara Parkway</strong> vers <strong>Niagara-on-the-Lake</strong> — village adorable, crème glacée, boutiques</span></li> |
| |
492 | + <li><span class="t">16 h 30</span><span class="d">Dégustation dans un vignoble (Inniskillin, Peller Estates) — <strong>vin de glace</strong> 🍷 (conducteur désigné!)</span></li> |
| |
493 | + <li><span class="t">18 h 30</span><span class="d">Retour vers Toronto, souper en chemin ou en ville</span></li> |
| |
494 | + </ul> |
| |
495 | + <div class="chips"> |
| |
496 | + <span class="chip hotel">🛏️ Nuit : Toronto</span> |
| |
497 | + <span class="chip">📸 Meilleure lumière sur les chutes : le matin (soleil derrière toi côté canadien)</span> |
| |
498 | + </div> |
| |
499 | + <a class="maplink" href="https://www.google.com/maps/dir/Toronto,+ON/Niagara+Falls,+ON/Niagara-on-the-Lake,+ON/Toronto,+ON" target="_blank">🗺️ Ouvrir le trajet dans Google Maps →</a> |
| |
500 | + </div> |
| |
501 | + </div> |
| |
502 | + |
| |
503 | + <!-- JOUR 6 --> |
| |
504 | + <div class="day reveal" id="j6"> |
| |
505 | + <div class="day-photo"> |
| |
506 | + <div class="img" style="background-image:url('https://upload.wikimedia.org/wikipedia/commons/thumb/7/7f/Distillery_District%2C_Trinity_Street_looking_north%2C_2026.jpg/1920px-Distillery_District%2C_Trinity_Street_looking_north%2C_2026.jpg')"></div> |
| |
507 | + <span class="tag">JOUR 6</span> |
| |
508 | + <span class="drive">🚶 Journée à pied + traversier</span> |
| |
509 | + </div> |
| |
510 | + <div class="day-body"> |
| |
511 | + <div class="date">Samedi 22 août 2026</div> |
| |
512 | + <h3>Toronto à fond</h3> |
| |
513 | + <ul class="timeline"> |
| |
514 | + <li><span class="t">9 h 00</span><span class="d">Traversier au quai Jack Layton vers les <strong>Toronto Islands</strong> — LA vue iconique sur la skyline 🌆</span></li> |
| |
515 | + <li><span class="t">10 h 00</span><span class="d">Vélo ou marche sur <strong>Centre Island</strong> et <strong>Ward's Island</strong>, plage si le cœur t'en dit</span></li> |
| |
516 | + <li><span class="t">13 h 00</span><span class="d">Retour en ville, dîner au <strong>St. Lawrence Market</strong> — sandwich au peameal bacon chez Carousel Bakery</span></li> |
| |
517 | + <li><span class="t">15 h 00</span><span class="d"><strong>Distillery District</strong> — ruelles pavées, galeries, cafés, microbrasseries</span></li> |
| |
518 | + <li><span class="t">17 h 30</span><span class="d"><strong>Kensington Market</strong> & Chinatown pour l'ambiance funky (ou Queen West pour le magasinage)</span></li> |
| |
519 | + <li><span class="t">20 h 00</span><span class="d">Souper + rooftop sur King West, ou match des Blue Jays s'ils sont en ville ⚾</span></li> |
| |
520 | + </ul> |
| |
521 | + <div class="chips"> |
| |
522 | + <span class="chip hotel">🛏️ Nuit : Toronto</span> |
| |
523 | + <span class="chip">🚋 Tramways TTC + marche — pas besoin de l'auto aujourd'hui</span> |
| |
524 | + </div> |
| |
525 | + </div> |
| |
526 | + </div> |
| |
527 | + |
| |
528 | + <!-- JOUR 7 --> |
| |
529 | + <div class="day reveal" id="j7"> |
| |
530 | + <div class="day-photo"> |
| |
531 | + <div class="img" style="background-image:url('https://upload.wikimedia.org/wikipedia/commons/thumb/2/22/Sandbanks_Provincial_Park_Ontario_Jul_2020.jpg/1920px-Sandbanks_Provincial_Park_Ontario_Jul_2020.jpg')"></div> |
| |
532 | + <span class="tag">JOUR 7</span> |
| |
533 | + <span class="drive">🚗 540 km · ~5 h 30</span> |
| |
534 | + </div> |
| |
535 | + <div class="day-body"> |
| |
536 | + <div class="date">Dimanche 23 août 2026</div> |
| |
537 | + <h3>Toronto → Montréal (retour, étape 1)</h3> |
| |
538 | + <ul class="timeline"> |
| |
539 | + <li><span class="t">9 h 00</span><span class="d">Brunch d'adieu à Toronto, derniers achats</span></li> |
| |
540 | + <li><span class="t">11 h 00</span><span class="d">Départ sur la 401 Est</span></li> |
| |
541 | + <li><span class="t">13 h 00</span><span class="d"><em>Option plage</em> : détour au parc <strong>Sandbanks</strong> (Prince Edward County, +45 min) — dunes et plages magnifiques 🏖️ <em>ou</em> simple pause à <strong>Kingston</strong></span></li> |
| |
542 | + <li><span class="t">18 h 30</span><span class="d">Arrivée à Montréal, check-in</span></li> |
| |
543 | + <li><span class="t">20 h 00</span><span class="d">Dernière soirée de vacances — souper dans le Vieux-Montréal 🥂</span></li> |
| |
544 | + </ul> |
| |
545 | + <div class="chips"> |
| |
546 | + <span class="chip hotel">🛏️ Nuit : Montréal</span> |
| |
547 | + <span class="chip">💡 Sandbanks : réserver le stationnement journalier sur ontarioparks.ca</span> |
| |
548 | + </div> |
| |
549 | + <a class="maplink" href="https://www.google.com/maps/dir/Toronto,+ON/Kingston,+ON/Montr%C3%A9al,+QC" target="_blank">🗺️ Ouvrir le trajet dans Google Maps →</a> |
| |
550 | + </div> |
| |
551 | + </div> |
| |
552 | + |
| |
553 | + <!-- JOUR 8 --> |
| |
554 | + <div class="day reveal" id="j8"> |
| |
555 | + <div class="day-photo"> |
| |
556 | + <div class="img" style="background-image:url('https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Ch%C3%A2teau_Frontenac_in_Quebec_city%2C_Canada_colorfull.jpg/1920px-Ch%C3%A2teau_Frontenac_in_Quebec_city%2C_Canada_colorfull.jpg')"></div> |
| |
557 | + <span class="tag">JOUR 8</span> |
| |
558 | + <span class="drive">🚗 250 km · ~2 h 45</span> |
| |
559 | + </div> |
| |
560 | + <div class="day-body"> |
| |
561 | + <div class="date">Lundi 24 août 2026</div> |
| |
562 | + <h3>Montréal → Québec — retour à la maison</h3> |
| |
563 | + <ul class="timeline"> |
| |
564 | + <li><span class="t">10 h 00</span><span class="d">Déjeuner tranquille, départ en fin d'avant-midi</span></li> |
| |
565 | + <li><span class="t">13 h 00</span><span class="d">Arrivée à Québec, reposé et la tête pleine de souvenirs ✅</span></li> |
| |
566 | + </ul> |
| |
567 | + <div class="chips"> |
| |
568 | + <span class="chip">🎶 Playlist du retour : <em>Play</em>, <em>÷</em>, <em>×</em> et <em>+</em> — évidemment</span> |
| |
569 | + </div> |
| |
570 | + <a class="maplink" href="https://www.google.com/maps/dir/Montr%C3%A9al,+QC/Qu%C3%A9bec,+QC" target="_blank">🗺️ Ouvrir le trajet dans Google Maps →</a> |
| |
571 | + </div> |
| |
572 | + </div> |
| |
573 | + |
| |
574 | + <!-- ===== INFOS PRATIQUES ===== --> |
| |
575 | + <h2 class="section reveal" id="infos">🧳 Infos pratiques</h2> |
| |
576 | + |
| |
577 | + <div class="info-grid"> |
| |
578 | + <div class="info-card reveal"> |
| |
579 | + <h3>✅ À réserver d'avance (par priorité)</h3> |
| |
580 | + <ul> |
| |
581 | + <li><strong>Hôtel Toronto (4 nuits, 19-23 août)</strong> — le plus urgent, 3 soirs de Ed Sheeran cette fin de semaine-là</li> |
| |
582 | + <li><strong>Billets du concert</strong> — Ticketmaster.ca, dans l'app mobile</li> |
| |
583 | + <li><strong>Croisière Niagara</strong> (niagaracruises.com) — créneau du matin</li> |
| |
584 | + <li><strong>Croisière Mille-Îles</strong> (cityexperiences.com, Gananoque)</li> |
| |
585 | + <li><strong>CN Tower</strong> — billet horodaté en ligne (évite 1 h de file)</li> |
| |
586 | + <li>Hôtels Montréal (2 nuits) et Ottawa (1 nuit)</li> |
| |
587 | + </ul> |
| |
588 | + </div> |
| |
589 | + |
| |
590 | + <div class="info-card reveal"> |
| |
591 | + <h3>💰 Budget estimé (2 personnes)</h3> |
| |
592 | + <table class="budget"> |
| |
593 | + <tr><td>Hôtels (7 nuits, moy. ~250 $)</td><td>1 750 $</td></tr> |
| |
594 | + <tr><td>Essence (~1 900 km)</td><td>250 $</td></tr> |
| |
595 | + <tr><td>Stationnements (Toronto ~40 $/jr)</td><td>200 $</td></tr> |
| |
596 | + <tr><td>Repas (~120 $/jour)</td><td>950 $</td></tr> |
| |
597 | + <tr><td>Activités (croisières, CN Tower…)</td><td>350 $</td></tr> |
| |
598 | + <tr><td>Billets de concert (variable)</td><td>—</td></tr> |
| |
599 | + <tr class="total"><td>Total (hors billets)</td><td>≈ 3 500 $</td></tr> |
| |
600 | + </table> |
| |
601 | + </div> |
| |
602 | + |
| |
603 | + <div class="info-card reveal"> |
| |
604 | + <h3>🚗 Conduite & stationnement</h3> |
| |
605 | + <ul> |
| |
606 | + <li>Éviter d'arriver à Toronto entre 15 h et 19 h (la 401/Gardiner = 🐌)</li> |
| |
607 | + <li>Le soir du concert : <strong>ne pas bouger l'auto</strong> — tout se fait à pied du centre-ville</li> |
| |
608 | + <li>Péage optionnel 407 ETR : rapide mais cher (~40-60 $) — la 401 suffit</li> |
| |
609 | + <li>Green P (app) pour les stationnements municipaux à Toronto</li> |
| |
610 | + <li>Essence moins chère en périphérie qu'au centre-ville</li> |
| |
611 | + </ul> |
| |
612 | + </div> |
| |
613 | + |
| |
614 | + <div class="info-card reveal"> |
| |
615 | + <h3>🎒 À ne pas oublier</h3> |
| |
616 | + <ul> |
| |
617 | + <li>Téléphone chargé + batterie externe (billets électroniques au stade)</li> |
| |
618 | + <li>Petit sac transparent ou minimal — politique de sacs stricte au Rogers Centre</li> |
| |
619 | + <li>Veste légère pour le soir (toit du stade parfois ouvert)</li> |
| |
620 | + <li>Maillot + serviette (Toronto Islands, Sandbanks)</li> |
| |
621 | + <li>Bouteilles d'eau réutilisables pour la route</li> |
| |
622 | + <li>Permis de conduire + preuve d'assurance auto</li> |
| |
623 | + </ul> |
| |
624 | + </div> |
| |
625 | + </div> |
| |
626 | + |
| |
627 | + <footer> |
| |
628 | + Concert vérifié : Ed Sheeran LOOP Tour, Rogers Centre, jeudi 20 août 2026, 17 h 30 (Ticketmaster.ca / Live Nation)<br> |
| |
629 | + Photos : <a href="https://commons.wikimedia.org" target="_blank">Wikimedia Commons</a> (licences libres) |
| |
630 | + <div class="footer-heart">Le road trip d'<span>Erika ♥ SP</span> — été 2026</div> |
| |
631 | + </footer> |
| |
632 | + |
| |
633 | +</div> |
| |
634 | + |
| |
635 | +<script> |
| |
636 | + // Countdown to showtime (17:30 EDT, Aug 20 2026) |
| |
637 | + const SHOW = new Date("2026-08-20T17:30:00-04:00").getTime(); |
| |
638 | + const pad = n => String(n).padStart(2, "0"); |
| |
639 | + function tick() { |
| |
640 | + let ms = SHOW - Date.now(); |
| |
641 | + const cd = document.getElementById("countdown"); |
| |
642 | + if (ms <= 0) { |
| |
643 | + cd.querySelector(".cd-label").textContent = "🎶 C'est ce soir (ou c'est déjà passé)!"; |
| |
644 | + ms = 0; |
| |
645 | + } |
| |
646 | + const d = Math.floor(ms / 864e5), h = Math.floor(ms % 864e5 / 36e5), |
| |
647 | + m = Math.floor(ms % 36e5 / 6e4), s = Math.floor(ms % 6e4 / 1e3); |
| |
648 | + document.getElementById("cd-d").textContent = d; |
| |
649 | + document.getElementById("cd-h").textContent = pad(h); |
| |
650 | + document.getElementById("cd-m").textContent = pad(m); |
| |
651 | + document.getElementById("cd-s").textContent = pad(s); |
| |
652 | + } |
| |
653 | + tick(); setInterval(tick, 1000); |
| |
654 | + |
| |
655 | + // Scroll reveal |
| |
656 | + const io = new IntersectionObserver(entries => { |
| |
657 | + for (const e of entries) if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } |
| |
658 | + }, { threshold: 0.08 }); |
| |
659 | + document.querySelectorAll(".reveal").forEach(el => io.observe(el)); |
| |
660 | +</script> |
| |
661 | +</body> |
| |
662 | +</html> |