Anelka237/undefined
0
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>SoundCraft - Chansons Personnalisées Premium</title>7 <style>8 * {9 margin: 0;10 padding: 0;11 box-sizing: border-box;12 }13 14 /* Thème Sombre (par défaut) */15 :root {16 --primary-pink: #FF1B6B;17 --primary-pink-bright: #FF4581;18 --primary-pink-dark: #E61756;19 --primary-pink-soft: #FFB3CC;20 21 --bg-primary: #191414;22 --bg-secondary: #121212;23 --bg-elevated: #282828;24 --bg-highlight: #3E3E3E;25 --bg-press: #000000;26 27 --text-primary: #FFFFFF;28 --text-secondary: #B3B3B3;29 --text-subdued: #8B8B8B;30 31 --border-color: #404040;32 --overlay: rgba(0, 0, 0, 0.5);33 34 --gradient-pink: linear-gradient(135deg, #FF1B6B 0%, #FF4581 100%);35 --gradient-dark: linear-gradient(180deg, rgba(0,0,0,0) 0%, #121212 100%);36 --gradient-hero: linear-gradient(180deg, #FF1B6B 0%, #191414 100%);37 38 --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.5);39 --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.5);40 --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);41 --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.7);42 }43 44 /* Thème Clair */45 [data-theme="light"] {46 --primary-pink: #FF1B6B;47 --primary-pink-bright: #FF4581;48 --primary-pink-dark: #E61756;49 --primary-pink-soft: #FFE5ED;50 51 --bg-primary: #FFFFFF;52 --bg-secondary: #F7F7F7;53 --bg-elevated: #FFFFFF;54 --bg-highlight: #F0F0F0;55 --bg-press: #E8E8E8;56 57 --text-primary: #191414;58 --text-secondary: #535353;59 --text-subdued: #8B8B8B;60 61 --border-color: #E0E0E0;62 --overlay: rgba(255, 255, 255, 0.9);63 64 --gradient-pink: linear-gradient(135deg, #FF1B6B 0%, #FF4581 100%);65 --gradient-dark: linear-gradient(180deg, rgba(255,255,255,0) 0%, #F7F7F7 100%);66 --gradient-hero: linear-gradient(180deg, #FF1B6B 0%, #FFE5ED 100%);67 68 --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);69 --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.08);70 --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.1);71 --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.12);72 }73 74 body {75 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;76 line-height: 1.6;77 color: var(--text-primary);78 background: var(--bg-primary);79 overflow-x: hidden;80 transition: background-color 0.3s ease, color 0.3s ease;81 }82 83 /* Custom Scrollbar */84 ::-webkit-scrollbar {85 width: 12px;86 }87 88 ::-webkit-scrollbar-track {89 background: var(--bg-elevated);90 }91 92 ::-webkit-scrollbar-thumb {93 background: var(--text-subdued);94 border-radius: 6px;95 }96 97 ::-webkit-scrollbar-thumb:hover {98 background: var(--primary-pink);99 }100 101 /* Theme Toggle Button */102 .theme-toggle {103 position: fixed;104 bottom: 2rem;105 right: 2rem;106 width: 60px;107 height: 60px;108 border-radius: 50%;109 background: var(--gradient-pink);110 border: none;111 cursor: pointer;112 display: flex;113 align-items: center;114 justify-content: center;115 font-size: 1.5rem;116 box-shadow: var(--shadow-lg);117 z-index: 9999;118 transition: transform 0.3s ease;119 }120 121 .theme-toggle:hover {122 transform: scale(1.1);123 }124 125 /* Navigation */126 .navbar {127 position: fixed;128 width: 100%;129 top: 0;130 z-index: 1000;131 transition: all 0.3s ease;132 padding: 1.5rem 0;133 background: transparent;134 }135 136 .navbar.scrolled {137 background: var(--overlay);138 backdrop-filter: blur(20px);139 padding: 1rem 0;140 box-shadow: var(--shadow-sm);141 }142 143 [data-theme="light"] .navbar.scrolled {144 background: rgba(255, 255, 255, 0.95);145 }146 147 .nav-container {148 max-width: 1400px;149 margin: 0 auto;150 padding: 0 2rem;151 display: flex;152 justify-content: space-between;153 align-items: center;154 }155 156 .logo {157 font-size: 1.75rem;158 font-weight: 700;159 color: var(--text-primary);160 display: flex;161 align-items: center;162 gap: 0.75rem;163 letter-spacing: -0.5px;164 }165 166 .navbar:not(.scrolled) .logo {167 color: var(--text-primary);168 }169 170 [data-theme="dark"] .navbar:not(.scrolled) .logo {171 color: #FFFFFF;172 }173 174 .logo-icon {175 width: 40px;176 height: 40px;177 background: var(--gradient-pink);178 border-radius: 50%;179 display: flex;180 align-items: center;181 justify-content: center;182 font-size: 1.25rem;183 color: white;184 }185 186 .nav-menu {187 display: flex;188 list-style: none;189 gap: 3rem;190 align-items: center;191 }192 193 .nav-link {194 text-decoration: none;195 color: var(--text-secondary);196 font-weight: 600;197 position: relative;198 transition: color 0.3s;199 font-size: 0.95rem;200 letter-spacing: 0.5px;201 }202 203 [data-theme="dark"] .navbar:not(.scrolled) .nav-link {204 color: rgba(255, 255, 255, 0.8);205 }206 207 .nav-link:hover {208 color: var(--text-primary);209 }210 211 [data-theme="dark"] .navbar:not(.scrolled) .nav-link:hover {212 color: #FFFFFF;213 }214 215 .nav-link::after {216 content: '';217 position: absolute;218 bottom: -5px;219 left: 0;220 width: 0;221 height: 2px;222 background: var(--primary-pink);223 transition: width 0.3s;224 }225 226 .nav-link:hover::after {227 width: 100%;228 }229 230 .btn {231 padding: 0.75rem 2rem;232 border-radius: 500px;233 text-decoration: none;234 font-weight: 700;235 transition: all 0.3s;236 display: inline-flex;237 align-items: center;238 gap: 0.5rem;239 border: none;240 cursor: pointer;241 font-size: 0.95rem;242 letter-spacing: 0.5px;243 text-transform: uppercase;244 }245 246 .btn-primary {247 background: var(--gradient-pink);248 color: white;249 box-shadow: 0 4px 15px rgba(255, 27, 107, 0.3);250 }251 252 .btn-primary:hover {253 transform: scale(1.05);254 box-shadow: 0 6px 20px rgba(255, 27, 107, 0.4);255 }256 257 .btn-outline {258 background: transparent;259 color: var(--text-primary);260 border: 2px solid var(--text-primary);261 }262 263 [data-theme="dark"] .navbar:not(.scrolled) .btn-outline {264 color: white;265 border-color: white;266 }267 268 .btn-outline:hover {269 background: var(--text-primary);270 color: var(--bg-primary);271 }272 273 [data-theme="dark"] .navbar:not(.scrolled) .btn-outline:hover {274 background: white;275 color: var(--bg-primary);276 }277 278 .hamburger {279 display: none;280 flex-direction: column;281 cursor: pointer;282 gap: 4px;283 }284 285 .hamburger span {286 width: 30px;287 height: 3px;288 background: var(--text-primary);289 border-radius: 3px;290 transition: all 0.3s;291 }292 293 [data-theme="dark"] .navbar:not(.scrolled) .hamburger span {294 background: white;295 }296 297 /* Hero Section */298 .hero {299 min-height: 100vh;300 background: var(--gradient-hero);301 position: relative;302 display: flex;303 align-items: center;304 overflow: hidden;305 }306 307 .hero::before {308 content: '';309 position: absolute;310 top: 0;311 left: 0;312 right: 0;313 bottom: 0;314 background: 315 radial-gradient(circle at 20% 50%, rgba(255, 27, 107, 0.3) 0%, transparent 50%),316 radial-gradient(circle at 80% 50%, rgba(255, 27, 107, 0.2) 0%, transparent 50%);317 }318 319 .sound-waves {320 position: absolute;321 width: 100%;322 height: 100%;323 overflow: hidden;324 opacity: 0.1;325 }326 327 .wave {328 position: absolute;329 bottom: 20%;330 width: 100%;331 height: 100px;332 background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23FF1B6B" fill-opacity="1" d="M0,128L48,133.3C96,139,192,149,288,165.3C384,181,480,203,576,186.7C672,171,768,117,864,106.7C960,96,1056,128,1152,133.3C1248,139,1344,117,1392,106.7L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') repeat-x;333 animation: wave 10s linear infinite;334 }335 336 @keyframes wave {337 0% { transform: translateX(0); }338 100% { transform: translateX(-1440px); }339 }340 341 .hero-content {342 max-width: 1400px;343 margin: 0 auto;344 padding: 0 2rem;345 position: relative;346 z-index: 1;347 display: grid;348 grid-template-columns: 1fr 1fr;349 gap: 4rem;350 align-items: center;351 }352 353 .hero-text h1 {354 font-size: 4rem;355 font-weight: 900;356 color: white;357 margin-bottom: 1.5rem;358 line-height: 1.1;359 letter-spacing: -2px;360 animation: fadeInUp 0.8s ease;361 }362 363 [data-theme="light"] .hero-text h1 {364 color: var(--text-primary);365 }366 367 .hero-text .highlight {368 background: linear-gradient(45deg, var(--primary-pink), var(--primary-pink-bright));369 -webkit-background-clip: text;370 -webkit-text-fill-color: transparent;371 }372 373 .hero-text p {374 font-size: 1.25rem;375 color: rgba(255, 255, 255, 0.9);376 margin-bottom: 2.5rem;377 animation: fadeInUp 0.8s ease 0.2s;378 animation-fill-mode: both;379 line-height: 1.8;380 }381 382 [data-theme="light"] .hero-text p {383 color: var(--text-secondary);384 }385 386 .hero-buttons {387 display: flex;388 gap: 1.5rem;389 animation: fadeInUp 0.8s ease 0.4s;390 animation-fill-mode: both;391 }392 393 .hero-visual {394 position: relative;395 animation: float 6s ease-in-out infinite;396 }397 398 .audio-visualizer {399 display: flex;400 align-items: flex-end;401 justify-content: center;402 gap: 4px;403 height: 300px;404 }405 406 .bar {407 width: 8px;408 background: linear-gradient(180deg, var(--primary-pink-bright), var(--primary-pink));409 border-radius: 4px;410 animation: pulse 1s ease-in-out infinite;411 box-shadow: 0 0 10px rgba(255, 27, 107, 0.5);412 }413 414 [data-theme="light"] .bar {415 box-shadow: 0 0 10px rgba(255, 27, 107, 0.2);416 }417 418 .bar:nth-child(1) { height: 40%; animation-delay: 0s; }419 .bar:nth-child(2) { height: 60%; animation-delay: 0.1s; }420 .bar:nth-child(3) { height: 80%; animation-delay: 0.2s; }421 .bar:nth-child(4) { height: 100%; animation-delay: 0.3s; }422 .bar:nth-child(5) { height: 70%; animation-delay: 0.4s; }423 .bar:nth-child(6) { height: 90%; animation-delay: 0.5s; }424 .bar:nth-child(7) { height: 50%; animation-delay: 0.6s; }425 .bar:nth-child(8) { height: 75%; animation-delay: 0.7s; }426 .bar:nth-child(9) { height: 60%; animation-delay: 0.8s; }427 .bar:nth-child(10) { height: 85%; animation-delay: 0.9s; }428 .bar:nth-child(11) { height: 45%; animation-delay: 1s; }429 .bar:nth-child(12) { height: 65%; animation-delay: 1.1s; }430 .bar:nth-child(13) { height: 80%; animation-delay: 1.2s; }431 .bar:nth-child(14) { height: 55%; animation-delay: 1.3s; }432 .bar:nth-child(15) { height: 70%; animation-delay: 1.4s; }433 434 @keyframes pulse {435 0%, 100% { transform: scaleY(0.5); opacity: 0.5; }436 50% { transform: scaleY(1); opacity: 1; }437 }438 439 @keyframes float {440 0%, 100% { transform: translateY(0); }441 50% { transform: translateY(-20px); }442 }443 444 @keyframes fadeInUp {445 from {446 opacity: 0;447 transform: translateY(30px);448 }449 to {450 opacity: 1;451 transform: translateY(0);452 }453 }454 455 /* Stats Section */456 .stats {457 padding: 5rem 2rem;458 background: var(--bg-secondary);459 position: relative;460 }461 462 .stats-grid {463 max-width: 1200px;464 margin: 0 auto;465 display: grid;466 grid-template-columns: repeat(4, 1fr);467 gap: 2rem;468 }469 470 .stat-card {471 text-align: center;472 padding: 2rem;473 }474 475 .stat-number {476 font-size: 3.5rem;477 font-weight: 900;478 background: var(--gradient-pink);479 -webkit-background-clip: text;480 -webkit-text-fill-color: transparent;481 letter-spacing: -1px;482 }483 484 .stat-label {485 color: var(--text-secondary);486 font-size: 1rem;487 margin-top: 0.5rem;488 text-transform: uppercase;489 letter-spacing: 1px;490 font-weight: 600;491 }492 493 /* How it Works */494 .how-it-works {495 padding: 6rem 2rem;496 background: var(--bg-primary);497 }498 499 .container {500 max-width: 1400px;501 margin: 0 auto;502 }503 504 .section-header {505 text-align: center;506 margin-bottom: 4rem;507 }508 509 .section-tag {510 display: inline-block;511 padding: 0.5rem 1.5rem;512 background: var(--primary-pink-soft);513 color: var(--primary-pink);514 border-radius: 500px;515 font-weight: 700;516 margin-bottom: 1rem;517 text-transform: uppercase;518 font-size: 0.75rem;519 letter-spacing: 1px;520 }521 522 [data-theme="dark"] .section-tag {523 background: rgba(255, 27, 107, 0.2);524 }525 526 .section-title {527 font-size: 3rem;528 font-weight: 900;529 color: var(--text-primary);530 margin-bottom: 1rem;531 letter-spacing: -1px;532 }533 534 .section-subtitle {535 font-size: 1.25rem;536 color: var(--text-secondary);537 max-width: 600px;538 margin: 0 auto;539 }540 541 .steps-grid {542 display: grid;543 grid-template-columns: repeat(4, 1fr);544 gap: 2rem;545 margin-top: 4rem;546 }547 548 .step-card {549 text-align: center;550 padding: 2rem;551 background: var(--bg-elevated);552 border-radius: 12px;553 transition: all 0.3s;554 box-shadow: var(--shadow-sm);555 }556 557 .step-card:hover {558 background: var(--bg-highlight);559 transform: translateY(-5px);560 box-shadow: var(--shadow-md);561 }562 563 .step-number {564 width: 60px;565 height: 60px;566 background: var(--gradient-pink);567 color: white;568 border-radius: 50%;569 display: flex;570 align-items: center;571 justify-content: center;572 margin: 0 auto 1.5rem;573 font-size: 1.5rem;574 font-weight: 900;575 }576 577 .step-card h3 {578 font-size: 1.25rem;579 margin-bottom: 0.5rem;580 color: var(--text-primary);581 font-weight: 700;582 }583 584 .step-card p {585 color: var(--text-secondary);586 font-size: 0.95rem;587 line-height: 1.6;588 }589 590 /* Services Section */591 .services {592 padding: 6rem 2rem;593 background: var(--bg-secondary);594 }595 596 .services-grid {597 display: grid;598 grid-template-columns: repeat(3, 1fr);599 gap: 2rem;600 margin-top: 4rem;601 }602 603 .service-card {604 padding: 2.5rem;605 border-radius: 12px;606 background: var(--bg-elevated);607 transition: all 0.3s;608 position: relative;609 overflow: hidden;610 box-shadow: var(--shadow-sm);611 }612 613 .service-card::before {614 content: '';615 position: absolute;616 top: 0;617 left: 0;618 right: 0;619 height: 4px;620 background: var(--gradient-pink);621 transform: scaleX(0);622 transition: transform 0.3s;623 }624 625 .service-card:hover {626 transform: translateY(-10px);627 box-shadow: var(--shadow-lg);628 }629 630 .service-card:hover::before {631 transform: scaleX(1);632 }633 634 .service-icon {635 width: 60px;636 height: 60px;637 background: var(--gradient-pink);638 border-radius: 12px;639 display: flex;640 align-items: center;641 justify-content: center;642 margin-bottom: 1.5rem;643 font-size: 1.5rem;644 }645 646 .service-card h3 {647 font-size: 1.5rem;648 margin-bottom: 1rem;649 color: var(--text-primary);650 font-weight: 700;651 }652 653 .service-card p {654 color: var(--text-secondary);655 line-height: 1.8;656 margin-bottom: 1.5rem;657 }658 659 .service-features {660 list-style: none;661 }662 663 .service-features li {664 padding: 0.5rem 0;665 color: var(--text-secondary);666 display: flex;667 align-items: center;668 gap: 0.5rem;669 font-size: 0.95rem;670 }671 672 .service-features li::before {673 content: '✓';674 color: var(--primary-pink);675 font-weight: bold;676 }677 678 /* Samples Section */679 .samples {680 padding: 6rem 2rem;681 background: var(--bg-primary);682 }683 684 .samples-grid {685 display: grid;686 grid-template-columns: repeat(3, 1fr);687 gap: 2rem;688 margin-top: 4rem;689 }690 691 .sample-card {692 background: var(--bg-elevated);693 border-radius: 8px;694 padding: 1.5rem;695 transition: all 0.3s;696 cursor: pointer;697 box-shadow: var(--shadow-sm);698 }699 700 .sample-card:hover {701 background: var(--bg-highlight);702 box-shadow: var(--shadow-md);703 transform: translateY(-5px);704 }705 706 .sample-header {707 display: flex;708 align-items: center;709 gap: 1rem;710 margin-bottom: 1rem;711 }712 713 .play-button {714 width: 48px;715 height: 48px;716 background: var(--gradient-pink);717 border-radius: 50%;718 display: flex;719 align-items: center;720 justify-content: center;721 cursor: pointer;722 transition: all 0.3s;723 color: white;724 font-size: 1.25rem;725 box-shadow: 0 4px 12px rgba(255, 27, 107, 0.3);726 }727 728 .play-button:hover {729 transform: scale(1.1);730 box-shadow: 0 6px 16px rgba(255, 27, 107, 0.4);731 }732 733 .sample-info h4 {734 font-size: 1.1rem;735 margin-bottom: 0.25rem;736 color: var(--text-primary);737 font-weight: 700;738 }739 740 .sample-info p {741 color: var(--text-secondary);742 font-size: 0.85rem;743 }744 745 .sample-description {746 color: var(--text-secondary);747 line-height: 1.6;748 margin-bottom: 1rem;749 font-size: 0.95rem;750 }751 752 .sample-tags {753 display: flex;754 gap: 0.5rem;755 flex-wrap: wrap;756 }757 758 .tag {759 padding: 0.25rem 0.75rem;760 background: var(--bg-highlight);761 color: var(--text-secondary);762 border-radius: 500px;763 font-size: 0.75rem;764 text-transform: uppercase;765 letter-spacing: 0.5px;766 font-weight: 600;767 }768 769 /* Pricing Section */770 .pricing {771 padding: 6rem 2rem;772 background: var(--bg-secondary);773 }774 775 .pricing-grid {776 display: grid;777 grid-template-columns: repeat(3, 1fr);778 gap: 2rem;779 margin-top: 4rem;780 }781 782 .pricing-card {783 background: var(--bg-elevated);784 border-radius: 12px;785 padding: 3rem 2rem;786 text-align: center;787 transition: all 0.3s;788 position: relative;789 border: 2px solid transparent;790 box-shadow: var(--shadow-sm);791 }792 793 .pricing-card.featured {794 border-color: var(--primary-pink);795 background: var(--bg-elevated);796 box-shadow: 0 0 30px rgba(255, 27, 107, 0.2);797 }798 799 .pricing-card.featured::before {800 content: 'RECOMMANDÉ';801 position: absolute;802 top: -12px;803 left: 50%;804 transform: translateX(-50%);805 background: var(--gradient-pink);806 color: white;807 padding: 0.25rem 1rem;808 border-radius: 500px;809 font-size: 0.75rem;810 font-weight: 700;811 letter-spacing: 1px;812 }813 814 .pricing-card:hover {815 transform: translateY(-10px);816 border-color: var(--primary-pink);817 box-shadow: var(--shadow-lg);818 }819 820 .pricing-icon {821 width: 60px;822 height: 60px;823 background: var(--gradient-pink);824 border-radius: 50%;825 display: flex;826 align-items: center;827 justify-content: center;828 margin: 0 auto 1.5rem;829 font-size: 1.5rem;830 }831 832 .pricing-card h3 {833 font-size: 1.75rem;834 margin-bottom: 0.5rem;835 color: var(--text-primary);836 font-weight: 700;837 }838 839 .price {840 font-size: 3.5rem;841 font-weight: 900;842 background: var(--gradient-pink);843 -webkit-background-clip: text;844 -webkit-text-fill-color: transparent;845 margin: 1rem 0;846 letter-spacing: -2px;847 }848 849 .price span {850 font-size: 1rem;851 color: var(--text-secondary);852 letter-spacing: 0;853 }854 855 .pricing-features {856 list-style: none;857 margin: 2rem 0;858 text-align: left;859 }860 861 .pricing-features li {862 padding: 0.75rem 0;863 color: var(--text-secondary);864 display: flex;865 align-items: center;866 gap: 0.5rem;867 border-bottom: 1px solid var(--border-color);868 }869 870 .pricing-features li::before {871 content: '✓';872 color: var(--primary-pink);873 font-weight: bold;874 }875 876 /* CTA Section */877 .cta {878 padding: 8rem 2rem;879 background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--primary-pink) 100%);880 text-align: center;881 position: relative;882 overflow: hidden;883 }884 885 [data-theme="light"] .cta {886 background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--primary-pink-soft) 100%);887 }888 889 .cta-content {890 position: relative;891 z-index: 1;892 max-width: 800px;893 margin: 0 auto;894 }895 896 .cta h2 {897 font-size: 3.5rem;898 color: white;899 margin-bottom: 1.5rem;900 font-weight: 900;901 letter-spacing: -1px;902 }903 904 [data-theme="light"] .cta h2 {905 color: var(--text-primary);906 }907 908 .cta p {909 font-size: 1.25rem;910 color: rgba(255, 255, 255, 0.9);911 margin-bottom: 2.5rem;912 font-weight: 500;913 }914 915 [data-theme="light"] .cta p {916 color: var(--text-secondary);917 }918 919 .btn-cta {920 background: white;921 color: var(--primary-pink);922 font-size: 1.1rem;923 padding: 1rem 3rem;924 box-shadow: var(--shadow-lg);925 }926 927 [data-theme="light"] .btn-cta {928 background: var(--text-primary);929 color: white;930 }931 932 .btn-cta:hover {933 transform: scale(1.05);934 box-shadow: var(--shadow-xl);935 }936 937 /* Footer */938 .footer {939 background: var(--bg-primary);940 color: var(--text-secondary);941 padding: 4rem 2rem 2rem;942 border-top: 1px solid var(--border-color);943 }944 945 .footer-content {946 max-width: 1400px;947 margin: 0 auto;948 display: grid;949 grid-template-columns: 2fr 1fr 1fr 1fr;950 gap: 3rem;951 margin-bottom: 3rem;952 }953 954 .footer-brand .logo {955 margin-bottom: 1rem;956 }957 958 .footer-brand p {959 line-height: 1.8;960 font-size: 0.95rem;961 }962 963 .social-links {964 display: flex;965 gap: 1rem;966 margin-top: 1.5rem;967 }968 969 .social-link {970 width: 40px;971 height: 40px;972 background: var(--bg-elevated);973 border-radius: 50%;974 display: flex;975 align-items: center;976 justify-content: center;977 color: var(--text-secondary);978 text-decoration: none;979 transition: all 0.3s;980 }981 982 .social-link:hover {983 background: var(--gradient-pink);984 color: white;985 transform: translateY(-3px);986 }987 988 .footer-column h3 {989 margin-bottom: 1.5rem;990 color: var(--text-primary);991 font-size: 0.9rem;992 text-transform: uppercase;993 letter-spacing: 1px;994 font-weight: 700;995 }996 997 .footer-column ul {998 list-style: none;999 }1000 1001 .footer-column ul li {1002 margin-bottom: 0.75rem;1003 }1004 1005 .footer-column ul li a {1006 color: var(--text-secondary);1007 text-decoration: none;1008 transition: color 0.3s;1009 font-size: 0.95rem;1010 }1011 1012 .footer-column ul li a:hover {1013 color: var(--primary-pink);1014 }1015 1016 .footer-bottom {1017 border-top: 1px solid var(--border-color);1018 padding-top: 2rem;1019 text-align: center;1020 font-size: 0.85rem;1021 }1022 1023 /* Responsive */1024 @media (max-width: 1024px) {1025 .hero-content {1026 grid-template-columns: 1fr;1027 text-align: center;1028 }1029 1030 .hero-visual {1031 display: none;1032 }1033 1034 .steps-grid {1035 grid-template-columns: repeat(2, 1fr);1036 }1037 1038 .services-grid,1039 .samples-grid,1040 .pricing-grid {1041 grid-template-columns: 1fr;1042 }1043 1044 .stats-grid {1045 grid-template-columns: repeat(2, 1fr);1046 }1047 1048 .footer-content {1049 grid-template-columns: repeat(2, 1fr);1050 }1051 }1052 1053 @media (max-width: 768px) {1054 .nav-menu {1055 position: fixed;1056 left: -100%;1057 top: 0;1058 flex-direction: column;1059 background-color: var(--bg-primary);1060 width: 100%;1061 height: 100vh;1062 text-align: center;1063 transition: 0.3s;1064 padding: 5rem 0;1065 gap: 2rem;1066 box-shadow: var(--shadow-xl);1067 }1068 1069 .nav-menu.active {1070 left: 0;1071 }1072 1073 .nav-menu .nav-link {1074 color: var(--text-primary) !important;1075 font-size: 1.25rem;1076 }1077 1078 .hamburger {1079 display: flex;1080 z-index: 1001;1081 }1082 1083 .hamburger.active span:nth-child(1) {1084 transform: rotate(-45deg) translate(-8px, 6px);1085 }1086 1087 .hamburger.active span:nth-child(2) {1088 opacity: 0;1089 }1090 1091 .hamburger.active span:nth-child(3) {1092 transform: rotate(45deg) translate(-8px, -6px);1093 }1094 1095 .hero-text h1 {1096 font-size: 2.5rem;1097 }1098 1099 .hero-buttons {1100 flex-direction: column;1101 width: 100%;1102 }1103 1104 .hero-buttons .btn {1105 width: 100%;1106 text-align: center;1107 justify-content: center;1108 }1109 1110 .section-title {1111 font-size: 2rem;1112 }1113 1114 .steps-grid {1115 grid-template-columns: 1fr;1116 }1117 1118 .stats-grid {1119 grid-template-columns: 1fr;1120 }1121 1122 .footer-content {1123 grid-template-columns: 1fr;1124 text-align: center;1125 }1126 1127 .social-links {1128 justify-content: center;1129 }1130 1131 .cta h2 {1132 font-size: 2rem;1133 }1134 1135 .theme-toggle {1136 bottom: 1rem;1137 right: 1rem;1138 width: 50px;1139 height: 50px;1140 }1141 }1142 </style>1143</head>1144<body>1145 <!-- Theme Toggle Button -->1146 <button class="theme-toggle" onclick="toggleTheme()" aria-label="Toggle theme">1147 <span id="theme-icon">🌙</span>1148 </button>1149 1150 <!-- Navigation -->1151 <nav class="navbar">1152 <div class="nav-container">1153 <div class="logo">1154 <div class="logo-icon">🎵</div>1155 SoundCraft1156 </div>1157 <ul class="nav-menu">1158 <li><a href="#services" class="nav-link">Services</a></li>1159 <li><a href="#samples" class="nav-link">Écouter</a></li>1160 <li><a href="#process" class="nav-link">Processus</a></li>1161 <li><a href="#pricing" class="nav-link">Tarifs</a></li>1162 <li><a href="#contact" class="nav-link">Contact</a></li>1163 <li><a href="#demo" class="btn btn-outline">Démo gratuite</a></li>1164 <li><a href="#start" class="btn btn-primary">Créer ma chanson</a></li>1165 </ul>1166 <div class="hamburger">1167 <span></span>1168 <span></span>1169 <span></span>1170 </div>1171 </div>1172 </nav>1173 1174 <!-- Hero Section -->1175 <section class="hero">1176 <div class="sound-waves">1177 <div class="wave"></div>1178 </div>1179 <div class="hero-content">1180 <div class="hero-text">1181 <h1>Votre histoire devient <span class="highlight">musique</span></h1>1182 <p>Créons ensemble une chanson unique avec le prénom et l'histoire de vos proches. Production studio professionnelle, paroles sur mesure, émotions garanties.</p>1183 <div class="hero-buttons">1184 <a href="#" class="btn btn-primary">Commencer maintenant</a>1185 <a href="#" class="btn btn-outline">Écouter des exemples</a>1186 </div>1187 </div>1188 <div class="hero-visual">1189 <div class="audio-visualizer">1190 <div class="bar"></div>1191 <div class="bar"></div>1192 <div class="bar"></div>1193 <div class="bar"></div>1194 <div class="bar"></div>1195 <div class="bar"></div>1196 <div class="bar"></div>1197 <div class="bar"></div>1198 <div class="bar"></div>1199 <div class="bar"></div>1200 <div class="bar"></div>