/* Palette principale */:root { --blue-dark: #0a1a47; --orange: #fb9d1c; --white: #fff; --gray-light: #f7f7fa; --gray: #e5e7ef; --text-dark: #0a1a47; --text-light: #fff; --shadow: 0 4px 24px rgba(10,26,71,0.08);}html, body { margin: 0; padding: 0; font-family: 'Figtree', 'Rubik', Arial, sans-serif; background: var(--blue-dark); color: var(--text-light); scroll-behavior: smooth;}.container { width: 90%; max-width: 1200px; margin: 0 auto;}/* Header */.header { background: var(--blue-dark); position: fixed; top: 0; left: 0; right: 0; z-index: 100; box-shadow: var(--shadow);}.header-content { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 0;}.logo { display: flex; align-items: center; gap: 0;}.logo img { height: 32px; margin-right: 0;}.logo span { margin-left: 0; font-weight: bold; font-size: 1.3rem; letter-spacing: 0.5px; color: #fff; text-decoration: none;}.nav { display: flex; gap: 2rem; align-items: center;}.nav a { color: var(--white); text-decoration: none; font-weight: 500; transition: color 0.2s; position: relative;}.nav a:not(.btn-orange):hover { color: var(--orange);}.btn-orange { background: var(--orange); color: var(--blue-dark) !important; border-radius: 30px; padding: 0.7em 1.6em; font-weight: bold; text-decoration: none; transition: background 0.2s, color 0.2s, box-shadow 0.2s; box-shadow: 0 2px 8px rgba(251,157,28,0.08); border: none; cursor: pointer;}.btn-orange:hover { background: #ffb13c; color: var(--blue-dark);}.btn-lg { font-size: 1.2rem; padding: 1em 2em;}/* Menu burger pour mobile */.menu-toggle { display: none; flex-direction: column; cursor: pointer; padding: 0.5rem; z-index: 101;}.menu-toggle span { width: 25px; height: 3px; background: var(--white); margin: 3px 0; transition: 0.3s; border-radius: 2px;}.menu-toggle.active span:nth-child(1) { transform: rotate(-45deg) translate(-5px, 6px);}.menu-toggle.active span:nth-child(2) { opacity: 0;}.menu-toggle.active span:nth-child(3) { transform: rotate(45deg) translate(-5px, -6px);}/* Hero Section */.hero-section { min-height: 100vh; background: linear-gradient(135deg, #0a1a47 60%, #1e267a 100%); display: flex; align-items: center; padding-top: 90px;}.hero-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 3rem;}.hero-text { flex: 1 1 350px; min-width: 320px;}.hero-text h1 { font-size: 2.7rem; color: var(--white); font-weight: 800; margin-bottom: 1.2rem; line-height: 1.15;}.hero-text .highlight { color: var(--orange);}.hero-text p { color: #e5e7ef; font-size: 1.2rem; margin-bottom: 2rem;}.hero-cta { margin-bottom: 1.5rem;}.store-buttons { display: flex; gap: 1.2rem; margin-top: 1rem;}.store-buttons img { height: 54px; transition: transform 0.2s;}.store-buttons img:hover { transform: scale(1.07);}.hero-image { overflow: hidden; display: flex; justify-content: center; align-items: center;}.hero-image .main-visual { width: 100%; max-width: 370px; border-radius: 2.2rem; box-shadow: var(--shadow); animation: fadeInUp 1.2s cubic-bezier(.23,1.01,.32,1) 0.2s both;}/* Features Section */.features-section { background: var(--white); color: var(--text-dark); padding: 5rem 0 4rem 0;}.section-title { text-align: center; font-size: 2.2rem; color: var(--blue-dark); margin-bottom: 2.5rem; font-weight: 800;}.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2.5rem;}.feature-block { background: var(--gray-light); border-radius: 1.5rem; padding: 2.2rem 1.5rem 1.7rem 1.5rem; box-shadow: var(--shadow); text-align: center; transition: transform 0.2s, box-shadow 0.2s; position: relative; overflow: hidden; min-height: 260px; animation: fadeInUp 1.2s cubic-bezier(.23,1.01,.32,1) both;}.feature-block:hover { transform: translateY(-8px) scale(1.03); box-shadow: 0 8px 32px rgba(10,26,71,0.13);}.feature-icon { font-size: 2.7rem; color: var(--orange); margin-bottom: 1.1rem;}.feature-block h3 { color: var(--blue-dark); font-size: 1.18rem; font-weight: 700; margin-bottom: 0.7rem;}.feature-block p { color: #3a3a4d; font-size: 1rem;}/* Demo Section */.demo-section { background: linear-gradient(135deg, #0a1a47 80%, #1e267a 100%); color: var(--white); padding: 5rem 0 4rem 0; display: flex; align-items: center;}.demo-content { display: flex; flex-wrap: wrap; align-items: center; gap: 3rem; justify-content: space-between;}.demo-text { flex: 1 1 350px; min-width: 320px; color:#fb9d1c}.demo-text h2 { font-size: 2rem; font-weight: 800; margin-bottom: 1.5rem;}.demo-video { flex: 1 1 350px; min-width: 320px; display: flex; justify-content: center;}.video-placeholder { width: 340px; height: 210px; background: var(--gray); border-radius: 1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--blue-dark); font-size: 1.5rem; font-weight: 600; gap: 0.7rem; box-shadow: var(--shadow); animation: fadeInUp 1.2s cubic-bezier(.23,1.01,.32,1) 0.2s both;}.video-placeholder i { font-size: 3.5rem; color: var(--orange);}/* Testimonials Section */.testimonials-section { background: var(--gray-light); color: var(--blue-dark); padding: 5rem 0 4rem 0;}.testimonial-list { display: flex; flex-direction: column; gap: 2.5rem; margin-top: 2.5rem;}.testimonial-row { display: flex; align-items: center; gap: 2.5rem; margin-bottom: 2.5rem;}.testimonial-img-col { flex: 0 0 220px; display: flex; justify-content: center; align-items: center;}.testimonial-img-large { width: 220px; max-width: 90vw; height: auto; border-radius: 12px; object-fit: cover; box-shadow: var(--shadow);}.testimonial-quote-col { flex: 1 1 0; display: flex; align-items: stretch;}.testimonial-quote-box { background: #ffe89c; border-radius: 14px; padding: 2.2rem 2rem 1.5rem 2.5rem; position: relative; min-height: 180px; display: flex; flex-direction: column; justify-content: center; box-shadow: 0 4px 24px rgba(10,26,71,0.08);}.testimonial-quote-mark { font-size: 3.5rem; color: var(--orange); font-weight: bold; line-height: 1; margin-bottom: 1.2rem;}.testimonial-quote-text { font-size: 1.3rem; color: var(--blue-dark); font-weight: 700; margin-bottom: 1.2rem;}.testimonial-name { font-size: 1rem; color: var(--orange); font-weight: 700; margin-top: 0.7rem; letter-spacing: 0.5px;}@media (max-width: 900px) { .testimonial-row { flex-direction: column; align-items: stretch; gap: 1.2rem; } .testimonial-img-col { justify-content: center; margin-bottom: 0.7rem; } .testimonial-quote-box { padding: 1.5rem 1rem 1.2rem 1.5rem; }}/* About Section */.about-section { background: linear-gradient(135deg, #0a1a47 80%, #1e267a 100%); color: var(--white); padding: 5rem 0 4rem 0;}.about-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 3rem;}.about-text { flex: 1 1 350px; min-width: 320px;}.about-text h2 { font-size: 2rem; font-weight: 800; margin-bottom: 1.5rem; color:#fb9d1c}.about-list { list-style: none; padding: 0; margin-top: 1.5rem;}.about-list li { margin-bottom: 1rem; font-size: 1.1rem; display: flex; align-items: center; gap: 0.7rem;}.about-list i { color: var(--orange); font-size: 1.3rem;}.about-image { flex: 1 1 350px; min-width: 320px; display: flex; justify-content: center;}.about-image img { width: 100%; max-width: 340px; border-radius: 2rem; box-shadow: var(--shadow); animation: fadeInUp 1.2s cubic-bezier(.23,1.01,.32,1) 0.2s both;}/* Download Section */.download-section { background: var(--blue-dark); color: var(--white); padding: 4rem 0 3rem 0; text-align: center;}.download-content h2 { font-size: 2rem; font-weight: 800; margin-bottom: 2rem;}.download-section .store-buttons { justify-content: center;}/* Footer */.footer { background: var(--blue-dark); color: var(--white); padding: 2.5rem 0 0.5rem 0;}.footer-content { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; border-bottom: 1px solid #1e267a; padding-bottom: 1.2rem;}.footer-logo { display: flex; align-items: center; gap: 0.7rem; font-size: 1.3rem; font-weight: bold; color:#fb9d1c}.footer-logo img { height: 32px;}.footer-links { display: flex; gap: 1.5rem;}.footer-links a { color: var(--white); text-decoration: none; font-size: 1rem; transition: color 0.2s;}.footer-links a:hover { color: var(--orange);}.footer-social { display: flex; gap: 1.5rem; align-items: center; justify-content: flex-end;}.footer-social a { color: #fb9d1c; font-size: 2rem; transition: color 0.2s; display: flex; align-items: center;}.footer-social a:hover { color: #fff;}.footer-bottom { text-align: center; color: #bfc6e0; font-size: 0.95rem; margin-top: 1.2rem;}@media (max-width: 900px) { .footer-content { flex-direction: column; gap: 1.2rem; text-align: center; } .footer-social { justify-content: center; gap: 1rem; }}/* Animations */@keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); }}/* Responsive */@media (max-width: 900px) { .hero-grid, .about-grid, .demo-content { flex-direction: column; gap: 2.2rem; text-align: center; } .header-content { flex-direction: column; gap: 1.2rem; } .footer-content { flex-direction: column; gap: 1.2rem; text-align: center; }}@media (max-width: 600px) { .hero-text h1 { font-size: 1.5rem; } .section-title, .about-text h2, .demo-text h2, .download-content h2 { font-size: 1.2rem; } .feature-block, .testimonial, .about-image img, .video-placeholder { padding: 1.2rem 0.7rem; max-width: 100%; } .store-buttons img { height: 40px; } .small-video { max-width: 100%; } .main-visual { max-width: 100%; }}/* Vidéo démo responsive et plus petite */.small-video { max-width: 340px; width: 100%; margin: 1.5rem auto 0 auto; display: block; border-radius: 1.2rem; box-shadow: var(--shadow);}/* Mockup image encore plus petite et centrée */.main-visual { max-width: 200px; width: 100%; margin: 1.5rem auto 0 auto; display: block; border-radius: 2.2rem; box-shadow: var(--shadow);}/* Espacement pour section Fonctionnalités clés sous header sticky */#features { scroll-margin-top: 90px;}html { scroll-behavior: smooth;}/* Témoignages côte à côte, pleine largeur */.testimonial-slider { display: flex; overflow: visible; gap: 2.5rem; justify-content: center; width: 100%; max-width: none;}.testimonial-slide { flex: 1 1 0; min-width: 0; max-width: 600px; margin: 0; opacity: 1; pointer-events: auto; transition: none; display: flex; align-items: center; justify-content: center; gap: 2.5rem;}@media (max-width: 900px) { .testimonial-slider { flex-direction: column; gap: 1.2rem; } .testimonial-slide { max-width: 100%; flex-direction: column; align-items: stretch; gap: 1.2rem; }}.testimonial-dots { display: none; }/* Section partenaires */.partners-section { background: #ffe89c; padding: 3rem 0; margin-top: 0;}.partners-block { background: transparent; border-radius: 16px; box-shadow: 0 2px 12px rgba(10,26,71,0.06); text-align: center;}.partners-title { font-size: 2rem; color: var(--blue-dark); margin-bottom: 1.5rem; font-weight: 800;}.partners-title i { color: var(--orange); margin-right: 0.5rem;}.partners-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; list-style: none; padding: 0; margin: 0;}.partner-item { background: #fff; color: var(--blue-dark); font-weight: 700; border-radius: 8px; padding: 0.7rem 1.5rem; box-shadow: 0 2px 8px rgba(10,26,71,0.08); font-size: 1.1rem; transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.25s cubic-bezier(.23,1.01,.32,1); cursor: pointer;}.partner-item:hover { background: var(--orange); color: #fff; box-shadow: 0 4px 16px rgba(251,157,28,0.13); transform: scale(1.08);}@media (max-width: 600px) { .partners-section { padding: 1.5rem 0; } .partners-list { gap: 0.7rem; } .partner-item { padding: 0.5rem 1rem; font-size: 1rem; }}/* Section réseaux sociaux */.social-section { background: #f7f7fa; padding: 1.5rem 0;}.social-block { text-align: center;}.social-list { display: flex; justify-content: center; gap: 2.2rem; list-style: none; margin: 0; padding: 0;}.social-list li { display: flex;}.social-list a { color: #0a1a47; font-size: 2.5rem; transition: color 0.2s; display: flex; align-items: center;}.social-list a:hover { color: #fb9d1c;}@media (max-width: 600px) { .social-list { gap: 1.2rem; } .social-list a { font-size: 2rem; }}/* Animation fade-in sur les sections */.fade-in { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(.23,1.01,.32,1), transform 0.8s cubic-bezier(.23,1.01,.32,1);}.fade-in.visible { opacity: 1; transform: translateY(0);}/* Animation slide-up sur les fonctionnalités */.feature-block { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(.23,1.01,.32,1), transform 0.8s cubic-bezier(.23,1.01,.32,1);}.feature-block.visible { opacity: 1; transform: translateY(0);}/* Animation scale sur les icônes réseaux sociaux du footer */.footer-social a { transition: color 0.2s, transform 0.2s;}.footer-social a:hover { color: #fb9d1c; transform: scale(1.18);}.footer-logo-colle { display: flex; align-items: center; gap: 0;}.footer-logo-colle img { height: 32px; margin-right: 0;}.footer-logo-colle span { margin-left: 0; font-weight: bold; font-size: 1.3rem; letter-spacing: 0.5px;}.header .logo { text-decoration: none;}.header .logo span { color: #fb9d1c; text-decoration: none;}/* ===== RESPONSIVE DESIGN ===== *//* Tablettes et petits écrans */@media (max-width: 900px) { .container { width: 95%; } .hero-grid, .about-grid, .demo-content { flex-direction: column; gap: 2rem; text-align: center; } .header-content { flex-direction: column; gap: 1rem; padding: 1rem 0; } .nav { gap: 1.5rem; } .footer-content { flex-direction: column; gap: 1.5rem; text-align: center; } .footer-social { justify-content: center; gap: 1.5rem; } .testimonial-slider { flex-direction: column; gap: 2rem; } .testimonial-slide { max-width: 100%; flex-direction: column; align-items: stretch; gap: 1.5rem; } .testimonial-row { flex-direction: column; align-items: stretch; gap: 1.5rem; } .testimonial-img-col { justify-content: center; margin-bottom: 0.5rem; } .testimonial-quote-box { padding: 1.5rem 1.5rem 1.2rem 1.5rem; } .features-section, .demo-section, .testimonials-section, .about-section { padding: 3rem 0 2.5rem 0; } .section-title { font-size: 1.8rem; margin-bottom: 2rem; } .hero-text h1 { font-size: 2.2rem; } .hero-text p { font-size: 1.1rem; } .store-buttons { justify-content: center; } .store-buttons img { height: 48px; } /* Pages légales */ .faq-container, .privacy-container { max-width: 95%; padding: 2rem 1.5rem 1.5rem 1.5rem; margin: 2rem auto; } .faq-container h1, .privacy-container h1 { font-size: 1.2rem; } .faq-container h2, .privacy-container h2, .faq-container h3, .privacy-container h3 { font-size: 1rem; } .faq-container p, .privacy-container p, .faq-container ul, .privacy-container ul { font-size: 0.95rem; }}/* Smartphones */@media (max-width: 600px) { .container { width: 92%; } /* Menu burger */ .menu-toggle { display: flex; } .nav { position: fixed; top: 0; right: -100%; width: 80%; max-width: 300px; height: 100vh; background: var(--blue-dark); flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 80px 2rem 2rem 2rem; gap: 1.5rem; transition: right 0.3s ease; box-shadow: -5px 0 15px rgba(0,0,0,0.3); } .nav.active { right: 0; } .nav a { font-size: 1.1rem; padding: 0.8rem 0; border-bottom: 1px solid rgba(255,255,255,0.1); width: 100%; } /* Header optimisé */ .header-content { flex-direction: row; justify-content: space-between; padding: 0.8rem 0; } .logo img { height: 28px; } .logo span { font-size: 1.2rem; } /* Hero section */ .hero-section { padding-top: 70px; min-height: 90vh; } .hero-text h1 { font-size: 1.8rem; line-height: 1.2; margin-bottom: 1rem; } .hero-text p { font-size: 1rem; margin-bottom: 1.5rem; } .hero-grid { gap: 1.5rem; } /* Sections générales */ .features-section, .demo-section, .testimonials-section, .about-section, .partners-section, .download-section { padding: 2rem 0 1.5rem 0; } .section-title, .about-text h2, .demo-text h2, .download-content h2, .partners-title { font-size: 1.5rem; margin-bottom: 1.5rem; } /* Features */ .features-grid { grid-template-columns: 1fr; gap: 1.5rem; } .feature-block { padding: 1.5rem 1rem 1.2rem 1rem; min-height: 220px; } .feature-icon { font-size: 2.2rem; margin-bottom: 0.8rem; } .feature-block h3 { font-size: 1.1rem; } .feature-block p { font-size: 0.95rem; } /* Témoignages */ .testimonial-slide { gap: 1rem; } .testimonial-img-large { width: 180px; max-width: 80vw; } .testimonial-quote-box { padding: 1.2rem 1rem 1rem 1.2rem; min-height: 150px; } .testimonial-quote-mark { font-size: 2.5rem; margin-bottom: 0.8rem; } .testimonial-quote-text { font-size: 1.1rem; margin-bottom: 0.8rem; } .testimonial-name { font-size: 0.9rem; } /* About */ .about-grid { gap: 1.5rem; } .about-text h2 { font-size: 1.5rem; } .about-list li { font-size: 1rem; margin-bottom: 0.8rem; } .about-image img { max-width: 280px; } /* Partenaires */ .partners-section { padding: 1.5rem 0; } .partners-list { gap: 0.8rem; flex-wrap: wrap; } .partner-item { padding: 0.6rem 1rem; font-size: 0.95rem; } /* Store buttons */ .store-buttons { flex-direction: column; align-items: center; gap: 1rem; } .store-buttons img { height: 44px; } /* Footer */ .footer { padding: 2rem 0 0.5rem 0; } .footer-content { gap: 1.5rem; padding-bottom: 1rem; } .footer-links { flex-direction: column; gap: 0.8rem; align-items: center; } .footer-social { gap: 1.2rem; } .footer-social a { font-size: 1.8rem; } .footer-bottom { font-size: 0.85rem; margin-top: 1rem; } /* Vidéos et images */ .small-video { max-width: 100%; border-radius: 1rem; } .main-visual { max-width: 180px; border-radius: 1.8rem; } /* Social */ .social-list { gap: 1.5rem; } .social-list a { font-size: 2rem; } /* Pages légales */ .faq-container, .privacy-container { max-width: 95%; padding: 1.5rem 1rem 1rem 1rem; margin: 1.5rem auto; border-radius: 12px; } .faq-container .app-name, .privacy-container .app-name { font-size: 1.6rem; margin-bottom: 0.5rem; } .faq-container h1, .privacy-container h1 { font-size: 1.1rem; margin-bottom: 1rem; } .faq-container h2, .privacy-container h2, .faq-container h3, .privacy-container h3 { font-size: 0.95rem; margin-top: 1.5rem; margin-bottom: 0.5rem; } .faq-container p, .privacy-container p, .faq-container ul, .privacy-container ul { font-size: 0.9rem; margin-bottom: 0.8rem; } .faq-container ul, .privacy-container ul { margin-left: 1rem; } .faq-container li, .privacy-container li { margin-bottom: 0.3rem; } .faq-container .icon, .privacy-container .icon { font-size: 1.1rem; min-width: 1.5rem; } .faq-container .footer, .privacy-container .footer { font-size: 0.85rem; margin-top: 1.5rem; }}/* Très petits écrans */@media (max-width: 400px) { .container { width: 95%; } .hero-text h1 { font-size: 1.6rem; } .section-title, .about-text h2, .demo-text h2, .download-content h2, .partners-title { font-size: 1.3rem; } .feature-block { padding: 1.2rem 0.8rem 1rem 0.8rem; min-height: 200px; } .testimonial-img-large { width: 150px; } .testimonial-quote-box { padding: 1rem 0.8rem 0.8rem 1rem; } .testimonial-quote-text { font-size: 1rem; } .store-buttons img { height: 40px; } .nav { width: 90%; padding: 80px 1.5rem 1.5rem 1.5rem; } /* Pages légales */ .faq-container, .privacy-container { padding: 1.2rem 0.8rem 0.8rem 0.8rem; margin: 1rem auto; } .faq-container .app-name, .privacy-container .app-name { font-size: 1.4rem; } .faq-container h1, .privacy-container h1 { font-size: 1rem; } .faq-container h2, .privacy-container h2, .faq-container h3, .privacy-container h3 { font-size: 0.9rem; } .faq-container p, .privacy-container p, .faq-container ul, .privacy-container ul { font-size: 0.85rem; }}