Hugging Face's logo

Spaces:
Pyfefactory
/
zvf-affiliation
Running

App Files Community
Pyfefactory commited on
Commit
0e432aa
·
verified ·
1 Parent(s): a04e758

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +243 -431
index.html CHANGED
@@ -31,120 +31,120 @@
31
  <body class="bg-gray-50 font-sans">
32
  <div class="container mx-auto px-4 py-12 max-w-6xl">
33
  <!-- Header -->
34
- <header class="text-center mb-16">
35
  <h1 class="text-4xl md:text-5xl font-bold text-indigo-800 mb-4">Calendrier Pré-Ouverture</h1>
36
  <h2 class="text-2xl md:text-3xl font-semibold text-indigo-600">École de Musique - Septembre 2025</h2>
37
- <div class="mt-8">
38
- <div class="inline-flex items-center bg-indigo-100 text-indigo-800 px-6 py-3 rounded-full">
39
  <i class="fas fa-calendar-alt mr-2"></i>
40
- <span>24 mois pour construire votre succès</span>
41
  </div>
42
  </div>
43
  </header>
44
 
45
  <!-- Progress Overview -->
46
- <section class="bg-white rounded-xl shadow-md p-6 mb-12">
47
- <h3 class="text-xl font-semibold text-gray-800 mb-6 flex items-center">
48
  <i class="fas fa-chart-line text-indigo-600 mr-2"></i>
49
  Vue d'ensemble du projet
50
  </h3>
51
- <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
52
- <div class="bg-indigo-50 p-4 rounded-lg">
53
- <h4 class="font-medium text-indigo-700 mb-2">Date d'ouverture</h4>
54
- <p class="text-2xl font-bold text-indigo-900">Septembre 2025</p>
55
  </div>
56
- <div class="bg-indigo-50 p-4 rounded-lg">
57
- <h4 class="font-medium text-indigo-700 mb-2">Mois restants</h4>
58
- <p class="text-2xl font-bold text-indigo-900">24 mois</p>
59
  </div>
60
- <div class="bg-indigo-50 p-4 rounded-lg">
61
- <h4 class="font-medium text-indigo-700 mb-2">Progression globale</h4>
62
- <div class="mt-2">
63
- <div class="w-full bg-gray-200 rounded-full h-2.5">
64
- <div class="progress-bar bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div>
65
  </div>
66
- <p class="text-right text-sm text-gray-600 mt-1">0% complété</p>
67
  </div>
68
  </div>
69
  </div>
70
  </section>
71
 
72
- <!-- Timeline -->
73
- <section class="mb-16">
74
- <h3 class="text-2xl font-semibold text-gray-800 mb-8 text-center">
75
  <i class="fas fa-road mr-2 text-indigo-600"></i>
76
- Feuille de route stratégique
77
  </h3>
78
 
79
- <!-- Phase 1 -->
80
- <div class="phase-card bg-white rounded-xl shadow-md overflow-hidden mb-8 transition duration-300">
81
  <div class="md:flex">
82
- <div class="md:w-1/4 bg-indigo-700 p-6 text-white flex flex-col justify-center">
83
- <h4 class="text-xl font-bold mb-2">Phase 1</h4>
84
- <p class="text-indigo-100">Sept 2023 - Fév 2024</p>
85
- <p class="text-indigo-200 mt-2">Fondations & Identité</p>
86
- <span class="inline-block mt-4 px-3 py-1 bg-indigo-600 rounded-full text-xs font-medium">6 mois</span>
87
  </div>
88
- <div class="md:w-3/4 p-6">
89
- <div class="space-y-6">
90
- <div class="flex items-start timeline-item relative pl-8">
91
- <div class="absolute left-0 mt-1 w-4 h-4 rounded-full bg-indigo-600 border-4 border-indigo-200"></div>
92
  <div>
93
- <h5 class="font-semibold text-gray-800">Sept-Oct 2023</h5>
94
- <ul class="mt-2 space-y-2 text-gray-600">
95
  <li class="flex items-start">
96
- <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
97
- <span>Création de l'identité visuelle (logo, charte graphique)</span>
98
  </li>
99
  <li class="flex items-start">
100
- <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
101
- <span>Définition du positionnement et de l'offre pédagogique</span>
102
  </li>
103
  <li class="flex items-start">
104
- <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
105
- <span>Recherche de locaux et négociation</span>
106
  </li>
107
  </ul>
108
  </div>
109
  </div>
110
 
111
- <div class="flex items-start timeline-item relative pl-8">
112
- <div class="absolute left-0 mt-1 w-4 h-4 rounded-full bg-indigo-600 border-4 border-indigo-200"></div>
113
  <div>
114
- <h5 class="font-semibold text-gray-800">Nov-Déc 2023</h5>
115
- <ul class="mt-2 space-y-2 text-gray-600">
116
  <li class="flex items-start">
117
- <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
118
- <span>Lancement du site web vitrine avec formulaire de pré-inscription</span>
119
  </li>
120
  <li class="flex items-start">
121
- <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
122
- <span>Création des réseaux sociaux (Facebook, Instagram, LinkedIn)</span>
123
  </li>
124
  <li class="flex items-start">
125
- <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
126
- <span>Premiers partenariats avec magasins de musique locaux</span>
127
  </li>
128
  </ul>
129
  </div>
130
  </div>
131
 
132
- <div class="flex items-start relative pl-8">
133
- <div class="absolute left-0 mt-1 w-4 h-4 rounded-full bg-indigo-600 border-4 border-indigo-200"></div>
134
  <div>
135
- <h5 class="font-semibold text-gray-800">Jan-Fév 2024</h5>
136
- <ul class="mt-2 space-y-2 text-gray-600">
137
  <li class="flex items-start">
138
- <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
139
- <span>Signature des premiers professeurs référents</span>
140
  </li>
141
  <li class="flex items-start">
142
- <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
143
- <span>Campagne "Pré-inscriptions avant-première" avec tarifs préférentiels</span>
144
  </li>
145
  <li class="flex items-start">
146
- <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
147
- <span>Organisation d'un événement de présentation à la presse locale</span>
148
  </li>
149
  </ul>
150
  </div>
@@ -154,75 +154,75 @@
154
  </div>
155
  </div>
156
 
157
- <!-- Phase 2 -->
158
- <div class="phase-card bg-white rounded-xl shadow-md overflow-hidden mb-8 transition duration-300">
159
  <div class="md:flex">
160
- <div class="md:w-1/4 bg-indigo-600 p-6 text-white flex flex-col justify-center">
161
- <h4 class="text-xl font-bold mb-2">Phase 2</h4>
162
- <p class="text-indigo-100">Mars - Août 2024</p>
163
- <p class="text-indigo-200 mt-2">Visibilité & Engagement</p>
164
- <span class="inline-block mt-4 px-3 py-1 bg-indigo-500 rounded-full text-xs font-medium">6 mois</span>
165
  </div>
166
- <div class="md:w-3/4 p-6">
167
- <div class="space-y-6">
168
- <div class="flex items-start timeline-item relative pl-8">
169
- <div class="absolute left-0 mt-1 w-4 h-4 rounded-full bg-indigo-600 border-4 border-indigo-200"></div>
170
  <div>
171
- <h5 class="font-semibold text-gray-800">Mars-Mai 2024</h5>
172
- <ul class="mt-2 space-y-2 text-gray-600">
173
  <li class="flex items-start">
174
- <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
175
- <span>Ateliers découverte gratuits dans les écoles et centres culturels</span>
176
  </li>
177
  <li class="flex items-start">
178
- <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
179
- <span>Partenariat avec les conservatoires locaux pour complémentarité</span>
180
  </li>
181
  <li class="flex items-start">
182
- <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
183
- <span>Lancement d'une chaîne YouTube avec tutoriels et présentations</span>
184
  </li>
185
  </ul>
186
  </div>
187
  </div>
188
 
189
- <div class="flex items-start timeline-item relative pl-8">
190
- <div class="absolute left-0 mt-1 w-4 h-4 rounded-full bg-indigo-600 border-4 border-indigo-200"></div>
191
  <div>
192
- <h5 class="font-semibold text-gray-800">Juin-Juil 2024</h5>
193
- <ul class="mt-2 space-y-2 text-gray-600">
194
  <li class="flex items-start">
195
- <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
196
- <span>Participation aux festivals et événements musicaux locaux</span>
197
  </li>
198
  <li class="flex items-start">
199
- <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
200
- <span>Campagne publicitaire ciblée (Google Ads, Facebook Ads)</span>
201
  </li>
202
  <li class="flex items-start">
203
- <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
204
- <span>Mise en place d'un programme de parrainage (élèves actuels)</span>
205
  </li>
206
  </ul>
207
  </div>
208
  </div>
209
 
210
- <div class="flex items-start relative pl-8">
211
- <div class="absolute left-0 mt-1 w-4 h-4 rounded-full bg-indigo-600 border-4 border-indigo-200"></div>
212
  <div>
213
- <h5 class="font-semibold text-gray-800">Août 2024</h5>
214
- <ul class="mt-2 space-y-2 text-gray-600">
215
  <li class="flex items-start">
216
- <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
217
- <span>Finalisation des locaux et aménagement des salles</span>
218
  </li>
219
  <li class="flex items-start">
220
- <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
221
- <span>Portes ouvertes avec démonstrations et essais gratuits</span>
222
  </li>
223
  <li class="flex items-start">
224
- <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
225
- <span>Lancement du programme de bourses pour jeunes talents</span>
226
  </li>
227
  </ul>
228
  </div>
@@ -232,132 +232,75 @@
232
  </div>
233
  </div>
234
 
235
- <!-- Phase 3 -->
236
- <div class="phase-card bg-white rounded-xl shadow-md overflow-hidden mb-8 transition duration-300">
237
- <div class="md:flex">
238
- <div class="md:w-1/4 bg-indigo-500 p-6 text-white flex flex-col justify-center">
239
- <h4 class="text-xl font-bold mb-2">Phase 3</h4>
240
- <p class="text-indigo-100">Sept 2024 - Fév 2025</p>
241
- <p class="text-indigo-200 mt-2">Accélération & Recrutement</p>
242
- <span class="inline-block mt-4 px-3 py-1 bg-indigo-400 rounded-full text-xs font-medium">6 mois</span>
243
- </div>
244
- <div class="md:w-3/4 p-6">
245
- <div class="space-y-6">
246
- <div class="flex items-start timeline-item relative pl-8">
247
- <div class="absolute left-0 mt-1 w-4 h-4 rounded-full bg-indigo-600 border-4 border-indigo-200"></div>
248
- <div>
249
- <h5 class="font-semibold text-gray-800">Sept-Déc 2024</h5>
250
- <ul class="mt-2 space-y-2 text-gray-600">
251
- <li class="flex items-start">
252
- <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
253
- <span>Masterclasses avec musiciens renommés (communication événementielle)</span>
254
- </li>
255
- <li class="flex items-start">
256
- <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
257
- <span>Partenariats avec entreprises locales pour cours en entreprise</span>
258
- </li>
259
- <li class="flex items-start">
260
- <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
261
- <span>Campagne "Noël musical" avec cadeaux et promotions</span>
262
- </li>
263
- </ul>
264
- </div>
265
- </div>
266
-
267
- <div class="flex items-start relative pl-8">
268
- <div class="absolute left-0 mt-1 w-4 h-4 rounded-full bg-indigo-600 border-4 border-indigo-200"></div>
269
- <div>
270
- <h5 class="font-semibold text-gray-800">Jan-Fév 2025</h5>
271
- <ul class="mt-2 space-y-2 text-gray-600">
272
- <li class="flex items-start">
273
- <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
274
- <span>Lancement d'un podcast sur l'apprentissage musical</span>
275
- </li>
276
- <li class="flex items-start">
277
- <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
278
- <span>Programme de fidélisation avec avantages progressifs</span>
279
- </li>
280
- <li class="flex items-start">
281
- <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
282
- <span>Stratégie de référencement local intensifiée</span>
283
- </li>
284
- </ul>
285
- </div>
286
- </div>
287
- </div>
288
- </div>
289
- </div>
290
- </div>
291
-
292
- <!-- Phase 4 -->
293
  <div class="phase-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
294
  <div class="md:flex">
295
- <div class="md:w-1/4 bg-indigo-400 p-6 text-white flex flex-col justify-center">
296
- <h4 class="text-xl font-bold mb-2">Phase 4</h4>
297
- <p class="text-indigo-100">Mars - Sept 2025</p>
298
- <p class="text-indigo-200 mt-2">Lancement & Pérennisation</p>
299
- <span class="inline-block mt-4 px-3 py-1 bg-indigo-300 rounded-full text-xs font-medium">6 mois</span>
300
  </div>
301
- <div class="md:w-3/4 p-6">
302
- <div class="space-y-6">
303
- <div class="flex items-start timeline-item relative pl-8">
304
- <div class="absolute left-0 mt-1 w-4 h-4 rounded-full bg-indigo-600 border-4 border-indigo-200"></div>
305
  <div>
306
- <h5 class="font-semibold text-gray-800">Mars-Mai 2025</h5>
307
- <ul class="mt-2 space-y-2 text-gray-600">
308
  <li class="flex items-start">
309
- <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
310
  <span>Grande campagne de lancement multi-canaux</span>
311
  </li>
312
  <li class="flex items-start">
313
- <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
314
- <span>Partenariats médias locaux (radio, journaux, TV locale)</span>
315
  </li>
316
  <li class="flex items-start">
317
- <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
318
- <span>Concours de jeunes talents avec jury de professionnels</span>
319
  </li>
320
  </ul>
321
  </div>
322
  </div>
323
 
324
- <div class="flex items-start timeline-item relative pl-8">
325
- <div class="absolute left-0 mt-1 w-4 h-4 rounded-full bg-indigo-600 border-4 border-indigo-200"></div>
326
  <div>
327
- <h5 class="font-semibold text-gray-800">Juin-Juil 2025</h5>
328
- <ul class="mt-2 space-y-2 text-gray-600">
329
  <li class="flex items-start">
330
- <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
331
- <span>Journées portes ouvertes avec concerts d'élèves</span>
332
  </li>
333
  <li class="flex items-start">
334
- <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
335
- <span>Stages d'été intensifs (communication ciblée parents)</span>
336
  </li>
337
  <li class="flex items-start">
338
- <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
339
- <span>Programme "Rentrée musicale" avec avantages exclusifs</span>
340
  </li>
341
  </ul>
342
  </div>
343
  </div>
344
 
345
- <div class="flex items-start relative pl-8">
346
- <div class="absolute left-0 mt-1 w-4 h-4 rounded-full bg-indigo-600 border-4 border-indigo-200"></div>
347
  <div>
348
- <h5 class="font-semibold text-gray-800">Août-Sept 2025</h5>
349
- <ul class="mt-2 space-y-2 text-gray-600">
350
  <li class="flex items-start">
351
- <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
352
- <span>Grand événement d'ouverture avec concert inaugural</span>
353
  </li>
354
  <li class="flex items-start">
355
- <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
356
  <span>Reportage média sur la première rentrée</span>
357
  </li>
358
  <li class="flex items-start">
359
- <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
360
- <span>Mise en place d'un programme alumni pour fidélisation</span>
361
  </li>
362
  </ul>
363
  </div>
@@ -368,330 +311,200 @@
368
  </div>
369
  </section>
370
 
371
- <!-- Checklist -->
372
- <section class="bg-white rounded-xl shadow-md p-6 mb-12">
373
- <h3 class="text-xl font-semibold text-gray-800 mb-6 flex items-center">
374
  <i class="fas fa-tasks text-indigo-600 mr-2"></i>
375
  Checklist des Canaux de Communication
376
  </h3>
377
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
378
  <!-- Digital -->
379
- <div class="checklist-item border border-gray-200 rounded-lg p-4 transition duration-200">
380
- <h4 class="font-medium text-indigo-700 mb-3 flex items-center">
381
- <i class="fas fa-laptop-code mr-2"></i>
382
  Digital
383
  </h4>
384
- <ul class="space-y-2 text-sm">
385
- <li class="flex items-start">
386
- <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
387
- <span>Site web responsive avec blog pédagogique</span>
388
- </li>
389
  <li class="flex items-start">
390
- <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
391
- <span>Réseaux sociaux (Instagram, Facebook, TikTok)</span>
392
  </li>
393
  <li class="flex items-start">
394
- <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
395
- <span>Newsletter emailing (Mailchimp)</span>
396
  </li>
397
  <li class="flex items-start">
398
- <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
399
- <span>SEO local et Google My Business</span>
400
  </li>
401
  </ul>
402
  </div>
403
 
404
  <!-- Événementiel -->
405
- <div class="checklist-item border border-gray-200 rounded-lg p-4 transition duration-200">
406
- <h4 class="font-medium text-indigo-700 mb-3 flex items-center">
407
- <i class="fas fa-calendar-check mr-2"></i>
408
  Événementiel
409
  </h4>
410
- <ul class="space-y-2 text-sm">
411
  <li class="flex items-start">
412
- <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
413
- <span>Portes ouvertes avec démos</span>
414
  </li>
415
  <li class="flex items-start">
416
- <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
417
  <span>Concerts pédagogiques</span>
418
  </li>
419
  <li class="flex items-start">
420
- <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
421
- <span>Participation à des salons</span>
422
- </li>
423
- <li class="flex items-start">
424
- <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
425
- <span>Événements corporatifs</span>
426
  </li>
427
  </ul>
428
  </div>
429
 
430
  <!-- Partenariats -->
431
- <div class="checklist-item border border-gray-200 rounded-lg p-4 transition duration-200">
432
- <h4 class="font-medium text-indigo-700 mb-3 flex items-center">
433
- <i class="fas fa-handshake mr-2"></i>
434
  Partenariats
435
  </h4>
436
- <ul class="space-y-2 text-sm">
437
  <li class="flex items-start">
438
- <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
439
- <span>Écoles et centres culturels</span>
440
  </li>
441
  <li class="flex items-start">
442
- <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
443
- <span>Magasins d'instruments</span>
444
  </li>
445
  <li class="flex items-start">
446
- <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
447
- <span>Artistes et influenceurs locaux</span>
448
- </li>
449
- <li class="flex items-start">
450
- <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
451
- <span>Entreprises pour cours en entreprise</span>
452
  </li>
453
  </ul>
454
  </div>
455
 
456
  <!-- Print -->
457
- <div class="checklist-item border border-gray-200 rounded-lg p-4 transition duration-200">
458
- <h4 class="font-medium text-indigo-700 mb-3 flex items-center">
459
- <i class="fas fa-newspaper mr-2"></i>
460
  Print
461
  </h4>
462
- <ul class="space-y-2 text-sm">
463
  <li class="flex items-start">
464
- <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
465
  <span>Flyers et affiches</span>
466
  </li>
467
  <li class="flex items-start">
468
- <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
469
  <span>Dossier de presse</span>
470
  </li>
471
  <li class="flex items-start">
472
- <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
473
- <span>Plaquette institutionnelle</span>
474
- </li>
475
- <li class="flex items-start">
476
- <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
477
  <span>Encarts presse locale</span>
478
  </li>
479
  </ul>
480
  </div>
481
-
482
- <!-- Relations Presse -->
483
- <div class="checklist-item border border-gray-200 rounded-lg p-4 transition duration-200">
484
- <h4 class="font-medium text-indigo-700 mb-3 flex items-center">
485
- <i class="fas fa-microphone mr-2"></i>
486
- Relations Presse
487
- </h4>
488
- <ul class="space-y-2 text-sm">
489
- <li class="flex items-start">
490
- <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
491
- <span>Communiqués de presse</span>
492
- </li>
493
- <li class="flex items-start">
494
- <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
495
- <span>Interviews radio/TV</span>
496
- </li>
497
- <li class="flex items-start">
498
- <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
499
- <span>Articles invités dans blogs</span>
500
- </li>
501
- <li class="flex items-start">
502
- <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
503
- <span>Reportages sur l'école</span>
504
- </li>
505
- </ul>
506
- </div>
507
-
508
- <!-- Fidélisation -->
509
- <div class="checklist-item border border-gray-200 rounded-lg p-4 transition duration-200">
510
- <h4 class="font-medium text-indigo-700 mb-3 flex items-center">
511
- <i class="fas fa-star mr-2"></i>
512
- Fidélisation
513
- </h4>
514
- <ul class="space-y-2 text-sm">
515
- <li class="flex items-start">
516
- <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
517
- <span>Programme de parrainage</span>
518
- </li>
519
- <li class="flex items-start">
520
- <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
521
- <span>Carte de fidélité</span>
522
- </li>
523
- <li class="flex items-start">
524
- <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
525
- <span>Événements exclusifs élèves</span>
526
- </li>
527
- <li class="flex items-start">
528
- <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
529
- <span>Programme alumni</span>
530
- </li>
531
- </ul>
532
- </div>
533
  </div>
534
  </section>
535
 
536
- <!-- Budget Estimate -->
537
- <section class="bg-white rounded-xl shadow-md p-6 mb-12">
538
- <h3 class="text-xl font-semibold text-gray-800 mb-6 flex items-center">
539
  <i class="fas fa-coins text-indigo-600 mr-2"></i>
540
- Estimation Budgétaire Communication
541
  </h3>
542
  <div class="overflow-x-auto">
543
- <table class="min-w-full divide-y divide-gray-200">
544
  <thead class="bg-gray-50">
545
  <tr>
546
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Poste</th>
547
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Phase 1</th>
548
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Phase 2</th>
549
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Phase 3</th>
550
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Phase 4</th>
551
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total</th>
552
  </tr>
553
  </thead>
554
  <tbody class="bg-white divide-y divide-gray-200">
555
  <tr>
556
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Création site web</td>
557
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3 000€</td>
558
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">500€</td>
559
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">500€</td>
560
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1 000€</td>
561
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-indigo-600">5 000€</td>
562
  </tr>
563
  <tr>
564
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Réseaux sociaux</td>
565
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1 000€</td>
566
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2 000€</td>
567
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2 000€</td>
568
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1 500€</td>
569
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-indigo-600">6 500€</td>
570
  </tr>
571
  <tr>
572
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Publicité en ligne</td>
573
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">500€</td>
574
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2 500€</td>
575
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3 000€</td>
576
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4 000€</td>
577
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-indigo-600">10 000€</td>
578
  </tr>
579
  <tr>
580
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Événements</td>
581
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1 500€</td>
582
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5 000€</td>
583
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">7 000€</td>
584
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10 000€</td>
585
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-indigo-600">23 500€</td>
586
- </tr>
587
- <tr>
588
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Print</td>
589
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1 000€</td>
590
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2 000€</td>
591
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1 500€</td>
592
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1 500€</td>
593
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-indigo-600">6 000€</td>
594
  </tr>
595
  <tr class="bg-gray-50">
596
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Total</td>
597
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-indigo-600">7 000€</td>
598
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-indigo-600">12 000€</td>
599
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-indigo-600">14 000€</td>
600
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-indigo-600">18 000€</td>
601
- <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-indigo-800">51 000€</td>
602
  </tr>
603
  </tbody>
604
  </table>
605
  </div>
606
- <div class="mt-4 text-sm text-gray-600">
607
- <p><i class="fas fa-info-circle text-indigo-500 mr-1"></i> Ces estimations peuvent varier selon votre localisation et les prestataires choisis.</p>
608
  </div>
609
  </section>
610
 
611
- <!-- Tips -->
612
- <section class="bg-indigo-50 rounded-xl p-6">
613
- <h3 class="text-xl font-semibold text-indigo-800 mb-4 flex items-center">
614
  <i class="fas fa-lightbulb text-indigo-600 mr-2"></i>
615
- Conseils Stratégiques
616
  </h3>
617
- <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
618
- <div class="bg-white p-4 rounded-lg shadow-sm">
619
- <h4 class="font-medium text-indigo-700 mb-2 flex items-center">
620
- <i class="fas fa-users mr-2"></i>
621
- Stratégie de Contenu
622
  </h4>
623
- <ul class="space-y-2 text-sm text-gray-700">
624
- <li class="flex items-start">
625
- <i class="fas fa-check text-indigo-500 mt-1 mr-2"></i>
626
- <span>Créez un blog avec des conseils pour apprendre la musique</span>
627
- </li>
628
  <li class="flex items-start">
629
- <i class="fas fa-check text-indigo-500 mt-1 mr-2"></i>
630
- <span>Postez régulièrement des vidéos courtes sur les réseaux</span>
631
  </li>
632
  <li class="flex items-start">
633
- <i class="fas fa-check text-indigo-500 mt-1 mr-2"></i>
634
- <span>Mettez en avant les succès de vos élèves</span>
635
  </li>
636
  </ul>
637
  </div>
638
- <div class="bg-white p-4 rounded-lg shadow-sm">
639
- <h4 class="font-medium text-indigo-700 mb-2 flex items-center">
640
- <i class="fas fa-hand-holding-usd mr-2"></i>
641
  Rentabilisation
642
  </h4>
643
- <ul class="space-y-2 text-sm text-gray-700">
644
- <li class="flex items-start">
645
- <i class="fas fa-check text-indigo-500 mt-1 mr-2"></i>
646
- <span>Proposez des cours d'essai payants</span>
647
- </li>
648
- <li class="flex items-start">
649
- <i class="fas fa-check text-indigo-500 mt-1 mr-2"></i>
650
- <span>Vendez des accessoires et partitions</span>
651
- </li>
652
- <li class="flex items-start">
653
- <i class="fas fa-check text-indigo-500 mt-1 mr-2"></i>
654
- <span>Organisez des stages pendant les vacances</span>
655
- </li>
656
- </ul>
657
- </div>
658
- <div class="bg-white p-4 rounded-lg shadow-sm">
659
- <h4 class="font-medium text-indigo-700 mb-2 flex items-center">
660
- <i class="fas fa-chart-pie mr-2"></i>
661
- Analyse
662
- </h4>
663
- <ul class="space-y-2 text-sm text-gray-700">
664
- <li class="flex items-start">
665
- <i class="fas fa-check text-indigo-500 mt-1 mr-2"></i>
666
- <span>Trackez les sources de vos élèves (Google Analytics)</span>
667
- </li>
668
- <li class="flex items-start">
669
- <i class="fas fa-check text-indigo-500 mt-1 mr-2"></i>
670
- <span>Analysez les taux de conversion par canal</span>
671
- </li>
672
- <li class="flex items-start">
673
- <i class="fas fa-check text-indigo-500 mt-1 mr-2"></i>
674
- <span>Adaptez votre budget en fonction des ROI</span>
675
- </li>
676
- </ul>
677
- </div>
678
- <div class="bg-white p-4 rounded-lg shadow-sm">
679
- <h4 class="font-medium text-indigo-700 mb-2 flex items-center">
680
- <i class="fas fa-graduation-cap mr-2"></i>
681
- Pédagogie
682
- </h4>
683
- <ul class="space-y-2 text-sm text-gray-700">
684
- <li class="flex items-start">
685
- <i class="fas fa-check text-indigo-500 mt-1 mr-2"></i>
686
- <span>Créez des programmes adaptés à chaque âge</span>
687
- </li>
688
  <li class="flex items-start">
689
- <i class="fas fa-check text-indigo-500 mt-1 mr-2"></i>
690
- <span>Proposez des cours en groupe et individuels</span>
691
  </li>
692
  <li class="flex items-start">
693
- <i class="fas fa-check text-indigo-500 mt-1 mr-2"></i>
694
- <span>Développez une méthode unique pour vous différencier</span>
695
  </li>
696
  </ul>
697
  </div>
@@ -699,28 +512,27 @@
699
  </section>
700
 
701
  <!-- Footer -->
702
- <footer class="mt-16 text-center text-gray-600 text-sm">
703
- <p>© 2023 Calendrier Pré-Ouverture École de Musique - Tous droits réservés</p>
704
- <p class="mt-2">Conçu avec <i class="fas fa-heart text-red-500"></i> pour les entrepreneurs musicaux</p>
705
  </footer>
706
  </div>
707
 
708
  <script>
709
- // Simple animation for progress bar
710
  document.addEventListener('DOMContentLoaded', function() {
711
  const progressBar = document.querySelector('.progress-bar');
712
- let width = 0;
713
  const interval = setInterval(function() {
714
- if (width >= 100) {
715
  clearInterval(interval);
716
  } else {
717
  width++;
718
  progressBar.style.width = width + '%';
719
  progressBar.previousElementSibling.textContent = width + '% complété';
720
  }
721
- }, 30);
722
 
723
- // Checklist interaction
724
  const checklistItems = document.querySelectorAll('.checklist-item li');
725
  checklistItems.forEach(item => {
726
  item.addEventListener('click', function() {
 
31
  <body class="bg-gray-50 font-sans">
32
  <div class="container mx-auto px-4 py-12 max-w-6xl">
33
  <!-- Header -->
34
+ <header class="text-center mb-12">
35
  <h1 class="text-4xl md:text-5xl font-bold text-indigo-800 mb-4">Calendrier Pré-Ouverture</h1>
36
  <h2 class="text-2xl md:text-3xl font-semibold text-indigo-600">École de Musique - Septembre 2025</h2>
37
+ <div class="mt-6">
38
+ <div class="inline-flex items-center bg-indigo-100 text-indigo-800 px-6 py-2 rounded-full text-sm">
39
  <i class="fas fa-calendar-alt mr-2"></i>
40
+ <span>9 mois pour construire votre succès</span>
41
  </div>
42
  </div>
43
  </header>
44
 
45
  <!-- Progress Overview -->
46
+ <section class="bg-white rounded-xl shadow-md p-6 mb-10">
47
+ <h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
48
  <i class="fas fa-chart-line text-indigo-600 mr-2"></i>
49
  Vue d'ensemble du projet
50
  </h3>
51
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
52
+ <div class="bg-indigo-50 p-3 rounded-lg">
53
+ <h4 class="font-medium text-indigo-700 text-sm mb-1">Date d'ouverture</h4>
54
+ <p class="text-xl font-bold text-indigo-900">15 Septembre 2025</p>
55
  </div>
56
+ <div class="bg-indigo-50 p-3 rounded-lg">
57
+ <h4 class="font-medium text-indigo-700 text-sm mb-1">Mois restants</h4>
58
+ <p class="text-xl font-bold text-indigo-900">9 mois</p>
59
  </div>
60
+ <div class="bg-indigo-50 p-3 rounded-lg">
61
+ <h4 class="font-medium text-indigo-700 text-sm mb-1">Progression globale</h4>
62
+ <div class="mt-1">
63
+ <div class="w-full bg-gray-200 rounded-full h-2">
64
+ <div class="progress-bar bg-indigo-600 h-2 rounded-full" style="width: 10%"></div>
65
  </div>
66
+ <p class="text-right text-xs text-gray-600 mt-1">10% complété</p>
67
  </div>
68
  </div>
69
  </div>
70
  </section>
71
 
72
+ <!-- Timeline Condensée -->
73
+ <section class="mb-12">
74
+ <h3 class="text-xl font-semibold text-gray-800 mb-6 text-center">
75
  <i class="fas fa-road mr-2 text-indigo-600"></i>
76
+ Feuille de route condensée (Janvier-Septembre 2025)
77
  </h3>
78
 
79
+ <!-- Phase 1 - Préparation (3 mois) -->
80
+ <div class="phase-card bg-white rounded-xl shadow-md overflow-hidden mb-6 transition duration-300">
81
  <div class="md:flex">
82
+ <div class="md:w-1/4 bg-indigo-700 p-4 text-white flex flex-col justify-center">
83
+ <h4 class="text-lg font-bold mb-1">Phase 1</h4>
84
+ <p class="text-indigo-100 text-sm">Janvier - Mars 2025</p>
85
+ <p class="text-indigo-200 text-xs mt-1">Fondations & Visibilité</p>
86
+ <span class="inline-block mt-2 px-2 py-0.5 bg-indigo-600 rounded-full text-xs font-medium">3 mois</span>
87
  </div>
88
+ <div class="md:w-3/4 p-4">
89
+ <div class="space-y-4">
90
+ <div class="flex items-start timeline-item relative pl-6">
91
+ <div class="absolute left-0 mt-1 w-3 h-3 rounded-full bg-indigo-600 border-3 border-indigo-200"></div>
92
  <div>
93
+ <h5 class="font-semibold text-gray-800 text-sm">Janvier 2025</h5>
94
+ <ul class="mt-1 space-y-1 text-gray-600 text-xs">
95
  <li class="flex items-start">
96
+ <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i>
97
+ <span>Finalisation identité visuelle et charte graphique</span>
98
  </li>
99
  <li class="flex items-start">
100
+ <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i>
101
+ <span>Lancement site web et réseaux sociaux</span>
102
  </li>
103
  <li class="flex items-start">
104
+ <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i>
105
+ <span>Recrutement des premiers professeurs</span>
106
  </li>
107
  </ul>
108
  </div>
109
  </div>
110
 
111
+ <div class="flex items-start timeline-item relative pl-6">
112
+ <div class="absolute left-0 mt-1 w-3 h-3 rounded-full bg-indigo-600 border-3 border-indigo-200"></div>
113
  <div>
114
+ <h5 class="font-semibold text-gray-800 text-sm">Février 2025</h5>
115
+ <ul class="mt-1 space-y-1 text-gray-600 text-xs">
116
  <li class="flex items-start">
117
+ <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i>
118
+ <span>Campagne pré-inscriptions avec tarifs préférentiels</span>
119
  </li>
120
  <li class="flex items-start">
121
+ <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i>
122
+ <span>Partenariats avec magasins de musique locaux</span>
123
  </li>
124
  <li class="flex items-start">
125
+ <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i>
126
+ <span>Premiers ateliers découverte dans écoles</span>
127
  </li>
128
  </ul>
129
  </div>
130
  </div>
131
 
132
+ <div class="flex items-start relative pl-6">
133
+ <div class="absolute left-0 mt-1 w-3 h-3 rounded-full bg-indigo-600 border-3 border-indigo-200"></div>
134
  <div>
135
+ <h5 class="font-semibold text-gray-800 text-sm">Mars 2025</h5>
136
+ <ul class="mt-1 space-y-1 text-gray-600 text-xs">
137
  <li class="flex items-start">
138
+ <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i>
139
+ <span>Aménagement des locaux et équipement</span>
140
  </li>
141
  <li class="flex items-start">
142
+ <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i>
143
+ <span>Conférence de presse de présentation</span>
144
  </li>
145
  <li class="flex items-start">
146
+ <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i>
147
+ <span>Lancement chaîne YouTube pédagogique</span>
148
  </li>
149
  </ul>
150
  </div>
 
154
  </div>
155
  </div>
156
 
157
+ <!-- Phase 2 - Accélération (3 mois) -->
158
+ <div class="phase-card bg-white rounded-xl shadow-md overflow-hidden mb-6 transition duration-300">
159
  <div class="md:flex">
160
+ <div class="md:w-1/4 bg-indigo-600 p-4 text-white flex flex-col justify-center">
161
+ <h4 class="text-lg font-bold mb-1">Phase 2</h4>
162
+ <p class="text-indigo-100 text-sm">Avril - Juin 2025</p>
163
+ <p class="text-indigo-200 text-xs mt-1">Engagement & Recrutement</p>
164
+ <span class="inline-block mt-2 px-2 py-0.5 bg-indigo-500 rounded-full text-xs font-medium">3 mois</span>
165
  </div>
166
+ <div class="md:w-3/4 p-4">
167
+ <div class="space-y-4">
168
+ <div class="flex items-start timeline-item relative pl-6">
169
+ <div class="absolute left-0 mt-1 w-3 h-3 rounded-full bg-indigo-600 border-3 border-indigo-200"></div>
170
  <div>
171
+ <h5 class="font-semibold text-gray-800 text-sm">Avril 2025</h5>
172
+ <ul class="mt-1 space-y-1 text-gray-600 text-xs">
173
  <li class="flex items-start">
174
+ <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i>
175
+ <span>Masterclass avec artistes invités</span>
176
  </li>
177
  <li class="flex items-start">
178
+ <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i>
179
+ <span>Campagne publicitaire intensive (online/offline)</span>
180
  </li>
181
  <li class="flex items-start">
182
+ <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i>
183
+ <span>Partenariats écoles et entreprises locales</span>
184
  </li>
185
  </ul>
186
  </div>
187
  </div>
188
 
189
+ <div class="flex items-start timeline-item relative pl-6">
190
+ <div class="absolute left-0 mt-1 w-3 h-3 rounded-full bg-indigo-600 border-3 border-indigo-200"></div>
191
  <div>
192
+ <h5 class="font-semibold text-gray-800 text-sm">Mai 2025</h5>
193
+ <ul class="mt-1 space-y-1 text-gray-600 text-xs">
194
  <li class="flex items-start">
195
+ <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i>
196
+ <span>Portes ouvertes avec démonstrations</span>
197
  </li>
198
  <li class="flex items-start">
199
+ <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i>
200
+ <span>Participation festivals musicaux locaux</span>
201
  </li>
202
  <li class="flex items-start">
203
+ <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i>
204
+ <span>Lancement programme de parrainage</span>
205
  </li>
206
  </ul>
207
  </div>
208
  </div>
209
 
210
+ <div class="flex items-start relative pl-6">
211
+ <div class="absolute left-0 mt-1 w-3 h-3 rounded-full bg-indigo-600 border-3 border-indigo-200"></div>
212
  <div>
213
+ <h5 class="font-semibold text-gray-800 text-sm">Juin 2025</h5>
214
+ <ul class="mt-1 space-y-1 text-gray-600 text-xs">
215
  <li class="flex items-start">
216
+ <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i>
217
+ <span>Stages d'été intensifs (communication parents)</span>
218
  </li>
219
  <li class="flex items-start">
220
+ <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i>
221
+ <span>Finalisation programme pédagogique</span>
222
  </li>
223
  <li class="flex items-start">
224
+ <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i>
225
+ <span>Lancement podcast sur l'apprentissage musical</span>
226
  </li>
227
  </ul>
228
  </div>
 
232
  </div>
233
  </div>
234
 
235
+ <!-- Phase 3 - Lancement (3 mois) -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
236
  <div class="phase-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
237
  <div class="md:flex">
238
+ <div class="md:w-1/4 bg-indigo-500 p-4 text-white flex flex-col justify-center">
239
+ <h4 class="text-lg font-bold mb-1">Phase 3</h4>
240
+ <p class="text-indigo-100 text-sm">Juillet - Septembre 2025</p>
241
+ <p class="text-indigo-200 text-xs mt-1">Lancement & Pérennisation</p>
242
+ <span class="inline-block mt-2 px-2 py-0.5 bg-indigo-400 rounded-full text-xs font-medium">3 mois</span>
243
  </div>
244
+ <div class="md:w-3/4 p-4">
245
+ <div class="space-y-4">
246
+ <div class="flex items-start timeline-item relative pl-6">
247
+ <div class="absolute left-0 mt-1 w-3 h-3 rounded-full bg-indigo-600 border-3 border-indigo-200"></div>
248
  <div>
249
+ <h5 class="font-semibold text-gray-800 text-sm">Juillet 2025</h5>
250
+ <ul class="mt-1 space-y-1 text-gray-600 text-xs">
251
  <li class="flex items-start">
252
+ <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i>
253
  <span>Grande campagne de lancement multi-canaux</span>
254
  </li>
255
  <li class="flex items-start">
256
+ <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i>
257
+ <span>Partenariats médias locaux (radio, journaux)</span>
258
  </li>
259
  <li class="flex items-start">
260
+ <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i>
261
+ <span>Concours jeunes talents avec jury professionnel</span>
262
  </li>
263
  </ul>
264
  </div>
265
  </div>
266
 
267
+ <div class="flex items-start timeline-item relative pl-6">
268
+ <div class="absolute left-0 mt-1 w-3 h-3 rounded-full bg-indigo-600 border-3 border-indigo-200"></div>
269
  <div>
270
+ <h5 class="font-semibold text-gray-800 text-sm">Août 2025</h5>
271
+ <ul class="mt-1 space-y-1 text-gray-600 text-xs">
272
  <li class="flex items-start">
273
+ <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i>
274
+ <span>Portes ouvertes avec concerts d'élèves</span>
275
  </li>
276
  <li class="flex items-start">
277
+ <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i>
278
+ <span>Finalisation inscriptions rentrée</span>
279
  </li>
280
  <li class="flex items-start">
281
+ <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i>
282
+ <span>Programme "Rentrée musicale" avantages</span>
283
  </li>
284
  </ul>
285
  </div>
286
  </div>
287
 
288
+ <div class="flex items-start relative pl-6">
289
+ <div class="absolute left-0 mt-1 w-3 h-3 rounded-full bg-indigo-600 border-3 border-indigo-200"></div>
290
  <div>
291
+ <h5 class="font-semibold text-gray-800 text-sm">Septembre 2025</h5>
292
+ <ul class="mt-1 space-y-1 text-gray-600 text-xs">
293
  <li class="flex items-start">
294
+ <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i>
295
+ <span>Événement d'ouverture avec concert inaugural</span>
296
  </li>
297
  <li class="flex items-start">
298
+ <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i>
299
  <span>Reportage média sur la première rentrée</span>
300
  </li>
301
  <li class="flex items-start">
302
+ <i class="far fa-circle text-indigo-500 mt-0.5 mr-1"></i>
303
+ <span>Mise en place programme alumni</span>
304
  </li>
305
  </ul>
306
  </div>
 
311
  </div>
312
  </section>
313
 
314
+ <!-- Checklist condensée -->
315
+ <section class="bg-white rounded-xl shadow-md p-5 mb-10">
316
+ <h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
317
  <i class="fas fa-tasks text-indigo-600 mr-2"></i>
318
  Checklist des Canaux de Communication
319
  </h3>
320
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
321
  <!-- Digital -->
322
+ <div class="checklist-item border border-gray-200 rounded-lg p-3 transition duration-200">
323
+ <h4 class="font-medium text-indigo-700 text-sm mb-2 flex items-center">
324
+ <i class="fas fa-laptop-code mr-1 text-xs"></i>
325
  Digital
326
  </h4>
327
+ <ul class="space-y-1 text-xs">
 
 
 
 
328
  <li class="flex items-start">
329
+ <i class="far fa-square text-gray-400 mt-0.5 mr-1"></i>
330
+ <span>Site web + blog pédagogique</span>
331
  </li>
332
  <li class="flex items-start">
333
+ <i class="far fa-square text-gray-400 mt-0.5 mr-1"></i>
334
+ <span>Réseaux sociaux actifs</span>
335
  </li>
336
  <li class="flex items-start">
337
+ <i class="far fa-square text-gray-400 mt-0.5 mr-1"></i>
338
+ <span>Newsletter emailing</span>
339
  </li>
340
  </ul>
341
  </div>
342
 
343
  <!-- Événementiel -->
344
+ <div class="checklist-item border border-gray-200 rounded-lg p-3 transition duration-200">
345
+ <h4 class="font-medium text-indigo-700 text-sm mb-2 flex items-center">
346
+ <i class="fas fa-calendar-check mr-1 text-xs"></i>
347
  Événementiel
348
  </h4>
349
+ <ul class="space-y-1 text-xs">
350
  <li class="flex items-start">
351
+ <i class="far fa-square text-gray-400 mt-0.5 mr-1"></i>
352
+ <span>Portes ouvertes</span>
353
  </li>
354
  <li class="flex items-start">
355
+ <i class="far fa-square text-gray-400 mt-0.5 mr-1"></i>
356
  <span>Concerts pédagogiques</span>
357
  </li>
358
  <li class="flex items-start">
359
+ <i class="far fa-square text-gray-400 mt-0.5 mr-1"></i>
360
+ <span>Participation salons</span>
 
 
 
 
361
  </li>
362
  </ul>
363
  </div>
364
 
365
  <!-- Partenariats -->
366
+ <div class="checklist-item border border-gray-200 rounded-lg p-3 transition duration-200">
367
+ <h4 class="font-medium text-indigo-700 text-sm mb-2 flex items-center">
368
+ <i class="fas fa-handshake mr-1 text-xs"></i>
369
  Partenariats
370
  </h4>
371
+ <ul class="space-y-1 text-xs">
372
  <li class="flex items-start">
373
+ <i class="far fa-square text-gray-400 mt-0.5 mr-1"></i>
374
+ <span>Écoles/centres culturels</span>
375
  </li>
376
  <li class="flex items-start">
377
+ <i class="far fa-square text-gray-400 mt-0.5 mr-1"></i>
378
+ <span>Magasins instruments</span>
379
  </li>
380
  <li class="flex items-start">
381
+ <i class="far fa-square text-gray-400 mt-0.5 mr-1"></i>
382
+ <span>Artistes locaux</span>
 
 
 
 
383
  </li>
384
  </ul>
385
  </div>
386
 
387
  <!-- Print -->
388
+ <div class="checklist-item border border-gray-200 rounded-lg p-3 transition duration-200">
389
+ <h4 class="font-medium text-indigo-700 text-sm mb-2 flex items-center">
390
+ <i class="fas fa-newspaper mr-1 text-xs"></i>
391
  Print
392
  </h4>
393
+ <ul class="space-y-1 text-xs">
394
  <li class="flex items-start">
395
+ <i class="far fa-square text-gray-400 mt-0.5 mr-1"></i>
396
  <span>Flyers et affiches</span>
397
  </li>
398
  <li class="flex items-start">
399
+ <i class="far fa-square text-gray-400 mt-0.5 mr-1"></i>
400
  <span>Dossier de presse</span>
401
  </li>
402
  <li class="flex items-start">
403
+ <i class="far fa-square text-gray-400 mt-0.5 mr-1"></i>
 
 
 
 
404
  <span>Encarts presse locale</span>
405
  </li>
406
  </ul>
407
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
408
  </div>
409
  </section>
410
 
411
+ <!-- Budget condensé -->
412
+ <section class="bg-white rounded-xl shadow-md p-5 mb-10">
413
+ <h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
414
  <i class="fas fa-coins text-indigo-600 mr-2"></i>
415
+ Budget Communication Condensé
416
  </h3>
417
  <div class="overflow-x-auto">
418
+ <table class="min-w-full divide-y divide-gray-200 text-xs">
419
  <thead class="bg-gray-50">
420
  <tr>
421
+ <th class="px-3 py-2 text-left font-medium text-gray-500 uppercase tracking-wider">Poste</th>
422
+ <th class="px-3 py-2 text-left font-medium text-gray-500 uppercase tracking-wider">Phase 1</th>
423
+ <th class="px-3 py-2 text-left font-medium text-gray-500 uppercase tracking-wider">Phase 2</th>
424
+ <th class="px-3 py-2 text-left font-medium text-gray-500 uppercase tracking-wider">Phase 3</th>
425
+ <th class="px-3 py-2 text-left font-medium text-gray-500 uppercase tracking-wider">Total</th>
 
426
  </tr>
427
  </thead>
428
  <tbody class="bg-white divide-y divide-gray-200">
429
  <tr>
430
+ <td class="px-3 py-2 whitespace-nowrap font-medium text-gray-900">Site web & réseaux</td>
431
+ <td class="px-3 py-2 whitespace-nowrap">2 500€</td>
432
+ <td class="px-3 py-2 whitespace-nowrap">1 500€</td>
433
+ <td class="px-3 py-2 whitespace-nowrap">1 000€</td>
434
+ <td class="px-3 py-2 whitespace-nowrap font-medium text-indigo-600">5 000€</td>
 
435
  </tr>
436
  <tr>
437
+ <td class="px-3 py-2 whitespace-nowrap font-medium text-gray-900">Publicité</td>
438
+ <td class="px-3 py-2 whitespace-nowrap">1 000€</td>
439
+ <td class="px-3 py-2 whitespace-nowrap">3 000€</td>
440
+ <td class="px-3 py-2 whitespace-nowrap">2 000€</td>
441
+ <td class="px-3 py-2 whitespace-nowrap font-medium text-indigo-600">6 000€</td>
 
442
  </tr>
443
  <tr>
444
+ <td class="px-3 py-2 whitespace-nowrap font-medium text-gray-900">Événements</td>
445
+ <td class="px-3 py-2 whitespace-nowrap">2 000€</td>
446
+ <td class="px-3 py-2 whitespace-nowrap">5 000€</td>
447
+ <td class="px-3 py-2 whitespace-nowrap">3 000€</td>
448
+ <td class="px-3 py-2 whitespace-nowrap font-medium text-indigo-600">10 000€</td>
 
449
  </tr>
450
  <tr>
451
+ <td class="px-3 py-2 whitespace-nowrap font-medium text-gray-900">Print</td>
452
+ <td class="px-3 py-2 whitespace-nowrap">1 500€</td>
453
+ <td class="px-3 py-2 whitespace-nowrap">1 000€</td>
454
+ <td class="px-3 py-2 whitespace-nowrap">500€</td>
455
+ <td class="px-3 py-2 whitespace-nowrap font-medium text-indigo-600">3 000€</td>
 
 
 
 
 
 
 
 
 
456
  </tr>
457
  <tr class="bg-gray-50">
458
+ <td class="px-3 py-2 whitespace-nowrap font-medium text-gray-900">Total</td>
459
+ <td class="px-3 py-2 whitespace-nowrap font-medium text-indigo-600">7 000€</td>
460
+ <td class="px-3 py-2 whitespace-nowrap font-medium text-indigo-600">10 500€</td>
461
+ <td class="px-3 py-2 whitespace-nowrap font-medium text-indigo-600">6 500€</td>
462
+ <td class="px-3 py-2 whitespace-nowrap font-bold text-indigo-800">24 000€</td>
 
463
  </tr>
464
  </tbody>
465
  </table>
466
  </div>
467
+ <div class="mt-3 text-xs text-gray-600">
468
+ <p><i class="fas fa-info-circle text-indigo-500 mr-1"></i> Budget adapté pour une période de 9 mois</p>
469
  </div>
470
  </section>
471
 
472
+ <!-- Tips condensés -->
473
+ <section class="bg-indigo-50 rounded-xl p-5">
474
+ <h3 class="text-lg font-semibold text-indigo-800 mb-3 flex items-center">
475
  <i class="fas fa-lightbulb text-indigo-600 mr-2"></i>
476
+ Conseils Clés
477
  </h3>
478
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
479
+ <div class="bg-white p-3 rounded-lg shadow-sm">
480
+ <h4 class="font-medium text-indigo-700 text-sm mb-1 flex items-center">
481
+ <i class="fas fa-users mr-1"></i>
482
+ Stratégie Contenu
483
  </h4>
484
+ <ul class="space-y-1 text-xs text-gray-700">
 
 
 
 
485
  <li class="flex items-start">
486
+ <i class="fas fa-check text-indigo-500 mt-0.5 mr-1"></i>
487
+ <span>Blog conseils + vidéos courtes</span>
488
  </li>
489
  <li class="flex items-start">
490
+ <i class="fas fa-check text-indigo-500 mt-0.5 mr-1"></i>
491
+ <span>Mettre en avant les succès élèves</span>
492
  </li>
493
  </ul>
494
  </div>
495
+ <div class="bg-white p-3 rounded-lg shadow-sm">
496
+ <h4 class="font-medium text-indigo-700 text-sm mb-1 flex items-center">
497
+ <i class="fas fa-hand-holding-usd mr-1"></i>
498
  Rentabilisation
499
  </h4>
500
+ <ul class="space-y-1 text-xs text-gray-700">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
501
  <li class="flex items-start">
502
+ <i class="fas fa-check text-indigo-500 mt-0.5 mr-1"></i>
503
+ <span>Cours d'essai payants</span>
504
  </li>
505
  <li class="flex items-start">
506
+ <i class="fas fa-check text-indigo-500 mt-0.5 mr-1"></i>
507
+ <span>Stages vacances</span>
508
  </li>
509
  </ul>
510
  </div>
 
512
  </section>
513
 
514
  <!-- Footer -->
515
+ <footer class="mt-10 text-center text-gray-600 text-xs">
516
+ <p>© 2025 Calendrier Pré-Ouverture École de Musique</p>
 
517
  </footer>
518
  </div>
519
 
520
  <script>
521
+ // Animation pour la barre de progression
522
  document.addEventListener('DOMContentLoaded', function() {
523
  const progressBar = document.querySelector('.progress-bar');
524
+ let width = 10;
525
  const interval = setInterval(function() {
526
+ if (width >= 33) {
527
  clearInterval(interval);
528
  } else {
529
  width++;
530
  progressBar.style.width = width + '%';
531
  progressBar.previousElementSibling.textContent = width + '% complété';
532
  }
533
+ }, 50);
534
 
535
+ // Interaction checklist
536
  const checklistItems = document.querySelectorAll('.checklist-item li');
537
  checklistItems.forEach(item => {
538
  item.addEventListener('click', function() {