/* ========================================================================== DIKISHA — Site vitrine public (marketing) ========================================================================== Feuille de style DEDIEE au site public (apps.site_public), volontairement independante de static/css/dikisha.css (l'ERP) : meme palette de marque (memes teintes que --dikisha-primary/etc., dupliquees ici sous prefixe "sp-") mais mise en page pensee "vitrine marketing" - fluide, aeree, orientee conversion - plutot que "productivite/donnees" comme l'ERP. ========================================================================== */ :root { --sp-primary: #4f46e5; --sp-primary-dark: #4338ca; --sp-accent: #06b6d4; --sp-success: #10b981; --sp-ink: #0f172a; --sp-body: #334155; --sp-muted: #64748b; --sp-border: #e2e8f0; --sp-surface: #ffffff; --sp-bg: #f6f7fb; --sp-radius: 16px; --sp-radius-lg: 28px; --sp-shadow: 0 4px 16px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08); --sp-shadow-lg: 0 24px 48px rgba(15, 23, 42, 0.12); } :root[data-theme="light"] { --sp-primary: #315cec; --sp-primary-dark: #2448c7; --sp-accent: #1ca884; --sp-success: #138a69; --sp-ink: #172235; --sp-body: #4a5869; --sp-muted: #718095; --sp-border: #e6e1d8; --sp-surface: #ffffff; --sp-bg: #f5f2eb; } :root[data-theme="dark"] { --sp-primary: #7795ff; --sp-primary-dark: #9bb0ff; --sp-accent: #52c9a6; --sp-success: #52c9a6; --sp-ink: #eef3f8; --sp-body: #b9c5d2; --sp-muted: #91a1b4; --sp-border: #314052; --sp-surface: #182231; --sp-bg: #101722; --sp-shadow: 0 4px 16px rgba(0, 0, 0, .2); --sp-shadow-lg: 0 24px 48px rgba(0, 0, 0, .34); } .sp-body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--sp-body); background: var(--sp-surface); } .sp-theme-button { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--sp-border); border-radius: 10px; color: var(--sp-body); background: var(--sp-surface); } .sp-theme-button:hover { color: var(--sp-primary); border-color: var(--sp-primary); } .sp-theme-option { display: flex; align-items: center; gap: 10px; } .sp-theme-option .theme-check { opacity: 0; } .sp-theme-option.active .theme-check { opacity: 1; } a { color: inherit; } /* --- En-tete / navigation ------------------------------------------------ */ .sp-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--sp-border); } .sp-nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 16px; } .sp-brand { display: flex; align-items: center; gap: 10px; } .sp-brand-mark { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--sp-primary), var(--sp-accent)); color: #fff; font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sp-brand-text { font-weight: 800; font-size: 18px; color: var(--sp-ink); letter-spacing: -0.02em; } .sp-nav-toggle { border: 1px solid var(--sp-border); background: #fff; border-radius: 10px; width: 40px; height: 40px; font-size: 18px; color: var(--sp-ink); } .sp-mobile-nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; } /* IMPORTANT : pas de `display: flex` ici sans condition de largeur - Bootstrap gere l'affichage/masquage de ce menu via sa classe `.collapse` (display: none par defaut, `.show` l'affiche - voir templates/site_public/base_public.html qui applique aussi `d-lg-flex` pour le forcer visible en desktop). Si on force `display:flex` ici SANS media query, cette regle (meme specificite qu'une classe Bootstrap, mais chargee APRES dans le ) l'emporte sur `.collapse` et annule le masquage mobile : le menu deroulant reste alors TOUJOURS visible, ecrase dans la meme ligne que le logo et le bouton hamburger au lieu de se deployer proprement en dessous (bug signale : "le menu principal deroule est mal aligne, desoriente" sur petits ecrans). Le comportement desktop (>=992px, meme sans .show) est gere plus bas via @media (min-width: 992px). */ .sp-nav-collapse { gap: 24px; } .sp-nav-links { display: flex; align-items: center; gap: 24px; margin-left: 32px; } .sp-nav-link { color: var(--sp-body); text-decoration: none; font-weight: 600; font-size: 14.5px; padding: 6px 2px; border-bottom: 2px solid transparent; } .sp-nav-link:hover, .sp-nav-link.active { color: var(--sp-primary); border-color: var(--sp-primary); } .sp-nav-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; } /* Mise en page "ligne" du menu (logo ... liens ... boutons) : uniquement a partir du breakpoint "lg" de Bootstrap (992px), la ou `d-lg-flex` force de toute facon l'affichage - voir la note detaillee sur .sp-nav-collapse plus haut. En dessous de 992px, c'est le bloc @media (max-width: 991px) plus bas qui prend le relai UNIQUEMENT quand `.show` est present. */ @media (min-width: 992px) { .sp-nav-collapse { display: flex; align-items: center; justify-content: space-between; flex: 1; } } /* --- Boutons -------------------------------------------------------------- */ .sp-btn-primary { background: linear-gradient(135deg, var(--sp-primary), var(--sp-primary-dark)); color: #fff; border: none; font-weight: 700; border-radius: 10px; padding: 10px 20px; box-shadow: var(--sp-shadow); } .sp-btn-primary:hover { color: #fff; filter: brightness(1.05); } .sp-btn-outline { background: #fff; color: var(--sp-ink); border: 1px solid var(--sp-border); font-weight: 700; border-radius: 10px; padding: 10px 20px; } .sp-btn-outline:hover { border-color: var(--sp-primary); color: var(--sp-primary); } /* --- Hero ------------------------------------------------------------------ */ .sp-hero { padding: 72px 0 88px; background: radial-gradient(circle at 85% 0%, #eef2ff 0%, var(--sp-surface) 55%); } .sp-hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; } .sp-eyebrow { display: inline-flex; align-items: center; gap: 6px; background: #eef2ff; color: var(--sp-primary); font-weight: 700; font-size: 13px; padding: 6px 14px; border-radius: 999px; margin-bottom: 20px; } .sp-hero-title { font-size: 44px; font-weight: 800; line-height: 1.15; color: var(--sp-ink); letter-spacing: -0.02em; margin-bottom: 20px; } .sp-highlight { color: var(--sp-primary); } .sp-hero-subtitle { font-size: 18px; color: var(--sp-muted); line-height: 1.6; margin-bottom: 28px; max-width: 520px; } .sp-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; } .sp-hero-trust { font-size: 13px; color: var(--sp-muted); display: flex; gap: 6px; flex-wrap: wrap; } .sp-hero-trust i { color: var(--sp-success); } .sp-hero-visual { position: relative; min-height: 380px; } .sp-hero-photo { border-radius: var(--sp-radius-lg); overflow: hidden; box-shadow: var(--sp-shadow-lg); aspect-ratio: 4 / 5; max-width: 420px; margin: 0 auto; } .sp-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Accueil Horizon : davantage de profondeur visuelle sans modifier les composants partages par les pages Tarifs, Contact et A propos. */ .sp-hero { position: relative; overflow: hidden; } .sp-hero::before { content: ""; position: absolute; width: 440px; height: 440px; right: -150px; top: -210px; border-radius: 50%; background: color-mix(in srgb, var(--sp-primary) 13%, transparent); filter: blur(4px); } .sp-hero-grid { position: relative; z-index: 1; } .sp-hero-title { font-size: clamp(42px, 5vw, 68px); line-height: 1.02; letter-spacing: -0.045em; } .sp-hero-photo { transform: rotate(1.5deg); } .sp-mock-float-a { animation: sp-float 6s ease-in-out infinite; } @keyframes sp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } .sp-home-pricing { background: var(--sp-bg); } .sp-home-pricing .sp-price-card { min-height: 100%; } .sp-home-pricing .sp-price-card-featured { background: linear-gradient(160deg, var(--sp-surface), color-mix(in srgb, var(--sp-primary) 9%, var(--sp-surface))); } .sp-photo-story { background: var(--sp-bg); } .sp-photo-story-grid { display: grid; grid-template-columns: 1.35fr .85fr; gap: 22px; } .sp-photo-story-main, .sp-photo-story-side { position: relative; min-height: 560px; overflow: hidden; border-radius: var(--sp-radius-lg); box-shadow: var(--sp-shadow-lg); background: var(--sp-ink); isolation: isolate; } .sp-photo-story-side { min-height: 560px; } .sp-photo-story img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; } .sp-photo-story article:hover img { transform: scale(1.035); } .sp-photo-story article::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(0deg, rgba(5, 15, 28, .94) 0%, rgba(5, 15, 28, .15) 72%); } .sp-photo-story-copy { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 36px; color: #eaf1f7; } .sp-photo-story-copy h2 { color: #fff; font-size: clamp(28px, 3vw, 44px); font-weight: 700; letter-spacing: -.035em; } .sp-photo-story-copy p { max-width: 620px; margin: 0; color: #cbd5e1; line-height: 1.65; } .sp-photo-story-copy .sp-eyebrow { background: rgba(255,255,255,.14); color: #fff; backdrop-filter: blur(8px); } @media (max-width: 767px) { .sp-photo-story-grid { grid-template-columns: 1fr; } .sp-photo-story-main, .sp-photo-story-side { min-height: 460px; } .sp-photo-story-copy { padding: 26px; } } @media (prefers-reduced-motion: reduce) { .sp-mock-float-a { animation: none; } } .sp-mock { background: var(--sp-surface); border-radius: var(--sp-radius-lg); box-shadow: var(--sp-shadow-lg); border: 1px solid var(--sp-border); overflow: hidden; } .sp-mock-desktop { padding: 0; width: 250px; } /* Badge "ordinateur" flottant, en overlay sur la photo (en plus du badge */ /* "vente mobile" existant) - demande explicite : montrer une vraie photo */ /* ET evoquer ordinateur + terminal mobile de vente dans la meme banniere. */ .sp-mock-float-a { position: absolute; left: -36px; top: 28px; transform: rotate(-3deg); } .sp-mock-float-a .sp-mock-body { grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px; } .sp-mock-float-a .sp-mock-kpi { padding: 10px; } .sp-mock-float-a .sp-mock-bars { height: 46px; } .sp-mock-topbar { display: flex; gap: 6px; padding: 12px 16px; background: var(--sp-bg); border-bottom: 1px solid var(--sp-border); } .sp-mock-topbar span { width: 10px; height: 10px; border-radius: 50%; background: var(--sp-border); } .sp-mock-body { padding: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .sp-mock-kpi { background: var(--sp-bg); border-radius: 12px; padding: 14px; } .sp-mock-kpi-label { font-size: 11px; color: var(--sp-muted); text-transform: uppercase; font-weight: 700; } .sp-mock-kpi-value { font-size: 18px; font-weight: 800; color: var(--sp-ink); margin-top: 4px; } .sp-mock-bars { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 8px; height: 90px; } .sp-mock-bars span { flex: 1; background: linear-gradient(180deg, var(--sp-accent), var(--sp-primary)); border-radius: 4px 4px 0 0; } .sp-mock-tablet { position: absolute; right: -24px; bottom: -24px; width: 190px; transform: rotate(-4deg); } .sp-mock-tablet .sp-mock-body { grid-template-columns: 1fr; gap: 10px; padding: 18px; } .sp-mock-line { height: 8px; background: var(--sp-border); border-radius: 4px; width: 100%; } .sp-mock-line.short { width: 60%; } .sp-mock-pill { margin-top: 6px; background: var(--sp-success); color: #fff; font-size: 11px; font-weight: 700; padding: 6px 10px; border-radius: 999px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 5px; } /* --- Sections generiques --------------------------------------------------- */ .sp-section { padding: 72px 0; } .sp-section-alt { background: var(--sp-bg); } .sp-section-title { font-size: 30px; font-weight: 800; color: var(--sp-ink); letter-spacing: -0.02em; margin-bottom: 10px; } .sp-section-subtitle { color: var(--sp-muted); font-size: 16px; margin-bottom: 44px; max-width: 640px; margin-left: auto; margin-right: auto; } /* --- Avant / Apres ---------------------------------------------------------- */ .sp-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .sp-compare-card { border-radius: var(--sp-radius-lg); padding: 32px; } .sp-compare-before { background: #fef2f2; border: 1px solid #fecaca; } .sp-compare-after { background: #ecfdf5; border: 1px solid #a7f3d0; } .sp-compare-heading { font-weight: 800; font-size: 17px; display: flex; align-items: center; gap: 8px; margin-bottom: 16px; } .sp-compare-before .sp-compare-heading { color: #b91c1c; } .sp-compare-after .sp-compare-heading { color: #047857; } .sp-compare-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .sp-compare-card li { font-size: 15px; line-height: 1.5; color: var(--sp-body); padding-left: 22px; position: relative; } .sp-compare-before li::before { content: "\2715"; position: absolute; left: 0; color: #ef4444; font-weight: 700; } .sp-compare-after li::before { content: "\2713"; position: absolute; left: 0; color: #10b981; font-weight: 700; } /* --- Modules ------------------------------------------------------------------ */ .sp-modules-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .sp-module-card { background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: var(--sp-radius); padding: 28px; box-shadow: var(--sp-shadow); } .sp-module-icon { width: 48px; height: 48px; border-radius: 12px; background: #eef2ff; color: var(--sp-primary); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px; } .sp-module-card h3 { font-size: 17px; font-weight: 700; color: var(--sp-ink); margin-bottom: 8px; } .sp-module-card p { font-size: 14.5px; color: var(--sp-muted); line-height: 1.55; margin: 0; } /* --- Temoignages ---------------------------------------------------------------- */ .sp-testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .sp-testimonial-card { background: var(--sp-bg); border-radius: var(--sp-radius); padding: 26px; border: 1px solid var(--sp-border); } .sp-testimonial-stars { color: #f59e0b; font-size: 13px; margin-bottom: 12px; } .sp-testimonial-card p { font-size: 14.5px; color: var(--sp-body); line-height: 1.6; font-style: italic; margin-bottom: 16px; } .sp-testimonial-author { font-size: 13px; font-weight: 700; color: var(--sp-ink); } /* --- CTA bande finale ------------------------------------------------------------- */ .sp-cta-band { background: linear-gradient(135deg, var(--sp-primary), var(--sp-primary-dark)); color: #fff; padding: 64px 0; text-align: center; } .sp-cta-band h2 { font-size: 28px; font-weight: 800; margin-bottom: 10px; } .sp-cta-band p { opacity: 0.85; margin-bottom: 24px; } .sp-cta-band .sp-btn-primary { background: #fff; color: var(--sp-primary); box-shadow: none; } .sp-cta-band .sp-btn-primary:hover { color: var(--sp-primary-dark); } /* --- En-tete de page (tarifs / contact) --------------------------------------------- */ .sp-page-header { padding: 56px 0 24px; text-align: center; } .sp-page-header h1 { font-size: 34px; font-weight: 800; color: var(--sp-ink); letter-spacing: -0.02em; margin-bottom: 10px; } .sp-page-header p { color: var(--sp-muted); font-size: 16px; } /* --- Grille tarifs --------------------------------------------------------------------- */ .sp-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; } .sp-price-card { background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-lg); padding: 32px; display: flex; flex-direction: column; position: relative; box-shadow: var(--sp-shadow); } .sp-price-card-featured { border-color: var(--sp-primary); box-shadow: var(--sp-shadow-lg); transform: translateY(-8px); } .sp-price-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--sp-primary); color: #fff; font-size: 11.5px; font-weight: 700; padding: 5px 14px; border-radius: 999px; } .sp-price-name { font-size: 19px; font-weight: 800; color: var(--sp-ink); margin-bottom: 12px; } .sp-price-amount { font-size: 36px; font-weight: 800; color: var(--sp-ink); } .sp-price-currency { font-size: 16px; font-weight: 700; color: var(--sp-muted); } .sp-price-period { font-size: 13px; color: var(--sp-muted); margin-bottom: 14px; } .sp-price-stores { font-size: 13.5px; color: var(--sp-body); background: var(--sp-bg); border-radius: 8px; padding: 8px 12px; margin-bottom: 20px; display: flex; align-items: center; gap: 6px; } .sp-price-features { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .sp-price-features li { font-size: 14px; color: var(--sp-body); display: flex; align-items: flex-start; gap: 8px; } .sp-price-features li i { color: var(--sp-success); margin-top: 3px; } .sp-empty-state { padding: 60px 20px; color: var(--sp-muted); } .sp-empty-state i { font-size: 40px; color: var(--sp-border); margin-bottom: 12px; display: block; } .sp-pricing-note { margin-top: 40px; color: var(--sp-muted); font-size: 14px; } .sp-pricing-note a { color: var(--sp-primary); font-weight: 700; text-decoration: none; } /* --- FAQ ------------------------------------------------------------------------------------ */ .sp-faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .sp-faq-item { background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: var(--sp-radius); padding: 18px 22px; } .sp-faq-item summary { cursor: pointer; font-weight: 700; color: var(--sp-ink); font-size: 15.5px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .sp-faq-item summary::-webkit-details-marker { display: none; } .sp-faq-item summary::after { content: "+"; font-size: 20px; color: var(--sp-primary); font-weight: 700; flex-shrink: 0; } .sp-faq-item[open] summary::after { content: "\2212"; } .sp-faq-item p { margin: 12px 0 0; color: var(--sp-muted); font-size: 14.5px; line-height: 1.6; } /* --- Contact ------------------------------------------------------------------------------ */ .sp-contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; } .sp-contact-info h2 { font-size: 20px; font-weight: 800; color: var(--sp-ink); margin-bottom: 20px; } .sp-contact-item { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--sp-body); margin-bottom: 14px; } .sp-contact-item i { color: var(--sp-primary); font-size: 18px; width: 20px; } .sp-contact-note { font-size: 13.5px; color: var(--sp-muted); margin-top: 20px; line-height: 1.5; } .sp-contact-form-wrap { background: var(--sp-bg); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-lg); padding: 32px; } .sp-field { margin-bottom: 18px; } .sp-field-label { display: block; font-size: 12.5px; font-weight: 700; text-transform: uppercase; color: var(--sp-muted); margin-bottom: 6px; } .sp-field-help { font-size: 12.5px; color: var(--sp-muted); margin-top: 4px; } .sp-field-error { font-size: 12.5px; color: #ef4444; margin-top: 4px; } .sp-input, .sp-contact-form input[type=text], .sp-contact-form input[type=email], .sp-contact-form textarea { width: 100%; border: 1px solid var(--sp-border); border-radius: 10px; padding: 11px 14px; font-size: 14.5px; background: #fff; font-family: inherit; } .sp-input:focus, .sp-contact-form input:focus, .sp-contact-form textarea:focus { outline: none; border-color: var(--sp-primary); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12); } /* --- Pages legales (CGU / confidentialite) -------------------------------------------------------- */ .sp-legal { max-width: 720px; margin: 0 auto; } .sp-legal-notice { background: var(--sp-bg); border: 1px solid var(--sp-border); border-radius: var(--sp-radius); padding: 16px 20px; font-size: 13.5px; color: var(--sp-muted); line-height: 1.6; margin-bottom: 36px; display: flex; gap: 10px; align-items: flex-start; } .sp-legal-notice i { color: var(--sp-primary); margin-top: 2px; flex-shrink: 0; } .sp-legal h2 { font-size: 18px; font-weight: 800; color: var(--sp-ink); margin: 32px 0 12px; } .sp-legal h2:first-of-type { margin-top: 0; } .sp-legal p { font-size: 15px; color: var(--sp-body); line-height: 1.7; margin-bottom: 0; } .sp-legal a { color: var(--sp-primary); font-weight: 600; } /* --- Plan du site -------------------------------------------------------------------------------- */ .sp-sitemap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } .sp-sitemap-col h3 { font-size: 14px; font-weight: 800; color: var(--sp-ink); text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } .sp-sitemap-col h3 i { color: var(--sp-primary); } .sp-sitemap-col a { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--sp-body); text-decoration: none; padding: 8px 0; border-bottom: 1px solid var(--sp-border); } .sp-sitemap-col a:last-child { border-bottom: none; } .sp-sitemap-col a:hover { color: var(--sp-primary); } .sp-sitemap-col a i { color: var(--sp-muted); flex-shrink: 0; } /* --- Pied de page ------------------------------------------------------------------------------ */ .sp-footer { background: var(--sp-ink); color: #cbd5e1; padding: 56px 0 24px; margin-top: 40px; } .sp-footer .sp-brand-text { color: #fff; } .sp-footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,0.1); } .sp-footer-tagline { font-size: 13.5px; color: #94a3b8; max-width: 240px; } .sp-footer-heading { font-size: 12px; font-weight: 700; text-transform: uppercase; color: #64748b; margin-bottom: 14px; } .sp-footer-grid a { display: block; font-size: 14px; color: #cbd5e1; text-decoration: none; margin-bottom: 10px; } .sp-footer-grid a:hover { color: #fff; } .sp-footer-bottom { padding-top: 20px; font-size: 12.5px; color: #64748b; text-align: center; } .sp-footer-version { margin-left: 8px; opacity: 0.7; } .sp-footer-legal { margin-left: 8px; } .sp-footer-legal a { color: #64748b; text-decoration: underline; margin: 0 6px; } .sp-footer-legal a:hover { color: #fff; } /* --- Personnages metiers (vente / stock / livraison) ------------------------------------------------ */ .sp-personas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .sp-persona-card { text-align: center; } .sp-illustration { display: block; width: 100%; max-width: 230px; height: auto; margin: 0 auto 20px; } .sp-persona-card h3 { font-size: 18px; font-weight: 800; color: var(--sp-ink); margin-bottom: 8px; } .sp-persona-card p { font-size: 14.5px; color: var(--sp-muted); line-height: 1.55; max-width: 300px; margin: 0 auto; } /* --- Sections a deux colonnes (illustration + texte), utilisees pour multi-devise et rapports ------- */ .sp-feature-split { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: center; } .sp-feature-split-reverse { grid-template-columns: 1.15fr 0.85fr; } .sp-feature-split-reverse .sp-feature-split-media { order: 2; } .sp-feature-split-media .sp-illustration { max-width: 300px; } .sp-feature-split-body .sp-section-title { text-align: left; margin-bottom: 14px; } .sp-text-left { text-align: left; margin-left: 0; margin-right: 0; } .sp-eyebrow-alt { margin-bottom: 14px; } .sp-feature-list { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 12px; } .sp-feature-list li { font-size: 15px; color: var(--sp-body); display: flex; align-items: flex-start; gap: 10px; } .sp-feature-list li i { color: var(--sp-success); margin-top: 3px; flex-shrink: 0; } /* --- Disponible partout : mockups Android + Web ------------------------------------------------------ */ .sp-devices-showcase { display: flex; align-items: center; justify-content: center; gap: 56px; flex-wrap: wrap; margin-top: 20px; } .sp-device-block { text-align: center; } .sp-device-caption { margin-top: 18px; font-size: 13.5px; font-weight: 700; color: var(--sp-muted); display: flex; align-items: center; gap: 6px; justify-content: center; } .sp-device-caption i { color: var(--sp-primary); } .sp-download-btn { margin-top: 14px; font-size: 13.5px; padding: 9px 18px; } .sp-phone-mock { width: 220px; border-radius: 32px; background: #0f172a; padding: 12px 10px; box-shadow: var(--sp-shadow-lg); position: relative; } .sp-phone-notch { width: 60px; height: 6px; background: #1e293b; border-radius: 4px; margin: 0 auto 8px; } .sp-phone-screen { background: #ffffff; border-radius: 20px; padding: 14px; text-align: left; } .sp-phone-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .sp-phone-header-title { font-size: 13px; font-weight: 800; color: var(--sp-ink); } .sp-phone-header i { color: var(--sp-muted); } .sp-phone-search { background: var(--sp-bg); border-radius: 8px; padding: 8px 10px; font-size: 11.5px; color: var(--sp-muted); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; } .sp-phone-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--sp-bg); font-size: 12px; } .sp-phone-row-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sp-accent); flex-shrink: 0; } .sp-phone-row-name { flex: 1; color: var(--sp-body); font-weight: 600; } .sp-phone-row-price { color: var(--sp-muted); } .sp-phone-total { display: flex; justify-content: space-between; font-size: 13px; font-weight: 800; color: var(--sp-ink); margin: 10px 0; padding-top: 8px; border-top: 1px dashed var(--sp-border); } .sp-phone-cta { background: var(--sp-primary); color: #fff; text-align: center; font-size: 12.5px; font-weight: 700; padding: 10px; border-radius: 10px; } .sp-browser-mock { width: 460px; max-width: 80vw; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: var(--sp-shadow-lg); border: 1px solid var(--sp-border); } .sp-browser-topbar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--sp-bg); border-bottom: 1px solid var(--sp-border); } .sp-browser-topbar span { width: 9px; height: 9px; border-radius: 50%; background: var(--sp-border); } .sp-browser-url { margin-left: 12px; background: #fff; border: 1px solid var(--sp-border); border-radius: 6px; padding: 3px 10px; font-size: 11px; color: var(--sp-muted); display: flex; align-items: center; gap: 5px; } .sp-browser-body { display: flex; min-height: 200px; } .sp-browser-sidebar { width: 44px; background: #0f172a; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 16px 0; } .sp-browser-sidebar span { color: #64748b; font-size: 15px; } .sp-browser-sidebar span.active { color: #fff; } .sp-browser-main { flex: 1; padding: 16px; text-align: left; } .sp-browser-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; } .sp-browser-kpi { background: var(--sp-bg); border-radius: 8px; padding: 8px 10px; } .sp-browser-kpi .label { display: block; font-size: 9.5px; color: var(--sp-muted); font-weight: 700; text-transform: uppercase; } .sp-browser-kpi .value { display: block; font-size: 13px; font-weight: 800; color: var(--sp-ink); margin-top: 2px; } .sp-browser-chart { display: flex; align-items: flex-end; gap: 5px; height: 70px; } .sp-browser-chart span { flex: 1; background: linear-gradient(180deg, var(--sp-accent), var(--sp-primary)); border-radius: 3px 3px 0 0; } /* --- Responsive --------------------------------------------------------------------------------- */ @media (max-width: 991px) { /* `.sp-nav` (logo + bouton hamburger + menu) est en `flex-wrap: nowrap` par defaut (regle desktop, ligne 46) - sans ce `flex-wrap: wrap` ici, le menu deplie (largeur 100%) ne peut PAS passer a la ligne suivante : il est comprime de force sur la MEME ligne que le logo et le bouton, d'ou le desalignement signale. Avec `wrap`, "DIKISHA" + le bouton restent fixes sur la 1ere ligne, et le menu ouvert forme un bloc pleine largeur juste en dessous. */ .sp-nav { flex-wrap: wrap; } /* `.show` : classe ajoutee par le JS de collapse Bootstrap une fois le menu deplie - c'est SEULEMENT a ce moment qu'on veut du flex/colonne pleine largeur ; le reste du temps `.collapse` (Bootstrap) garde `display: none`, comme prevu. */ .sp-nav-collapse.show { display: flex; } .sp-nav-collapse { width: 100%; flex-direction: column; align-items: stretch; margin-top: 14px; gap: 4px; } /* Liens en liste bloc pleine largeur (au lieu de simples lignes de texte alignees a gauche) - chaque lien occupe 100% de la largeur et se separe du suivant par un filet, pour une lecture verticale claire au doigt. */ .sp-nav-links { margin-left: 0; flex-direction: column; align-items: stretch; gap: 0; width: 100%; } .sp-nav-links .sp-nav-link { width: 100%; padding: 12px 4px; border-bottom: 1px solid var(--sp-border); } /* "Telecharger" (sous-menu "Application mobile", demande explicite) est enveloppe dans un
plutot qu'un direct - sans ces regles, il ne recevrait ni la largeur pleine ni le filet de separation appliques aux autres liens ci-dessus. */ .sp-nav-dropdown { width: 100%; } .sp-nav-dropdown .dropdown-toggle { display: block; width: 100%; } /* Boutons "Se connecter" / "Demarrer l'essai gratuit" : empiles en pleine largeur sous les liens, plutot que cote a cote et rognes. */ .sp-nav-actions { margin-left: 0; margin-top: 10px; flex-direction: column; align-items: stretch; width: 100%; gap: 10px; } .sp-nav-actions .btn { width: 100%; text-align: center; } .sp-hero-grid { grid-template-columns: 1fr; gap: 40px; } .sp-hero-title { font-size: 32px; } .sp-hero-visual { min-height: 0; margin-top: 20px; } .sp-mock-tablet, .sp-mock-float-a { display: none; } .sp-hero-photo { max-width: 320px; } .sp-compare-grid, .sp-modules-grid, .sp-testimonials-grid, .sp-pricing-grid, .sp-personas-grid { grid-template-columns: 1fr; } .sp-price-card-featured { transform: none; } .sp-contact-grid { grid-template-columns: 1fr; } .sp-sitemap-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; } .sp-footer-grid { grid-template-columns: 1fr 1fr; } .sp-feature-split, .sp-feature-split-reverse { grid-template-columns: 1fr; gap: 32px; } .sp-feature-split-reverse .sp-feature-split-media { order: 0; } .sp-feature-split-body .sp-section-title, .sp-text-left { text-align: center; } .sp-feature-split-body { text-align: center; } .sp-feature-list li { text-align: left; } .sp-devices-showcase { gap: 40px; } .sp-browser-mock { width: 100%; } } /* Theme sombre du site public --------------------------------------------- */ :root[data-theme="dark"] .sp-header { background: rgba(16, 23, 34, .9); } :root[data-theme="dark"] .sp-nav-toggle, :root[data-theme="dark"] .sp-btn-outline, :root[data-theme="dark"] .sp-theme-button { background: var(--sp-surface); color: var(--sp-ink); } :root[data-theme="dark"] .sp-hero { background: radial-gradient(circle at 85% 0%, #1c3154 0%, var(--sp-surface) 56%); } :root[data-theme="dark"] .sp-eyebrow, :root[data-theme="dark"] .sp-module-icon { background: #23375f; } :root[data-theme="dark"] .sp-compare-before { background: #41252a; border-color: #68373d; } :root[data-theme="dark"] .sp-compare-after { background: #173e37; border-color: #285c50; } :root[data-theme="dark"] .sp-compare-before .sp-compare-heading { color: #ffaaaa; } :root[data-theme="dark"] .sp-compare-after .sp-compare-heading { color: #78d7bb; } :root[data-theme="dark"] .sp-price-stores, :root[data-theme="dark"] .sp-testimonial-card, :root[data-theme="dark"] .sp-mock-kpi, :root[data-theme="dark"] .sp-mock-topbar { background: var(--sp-bg); } :root[data-theme="dark"] .sp-contact-form input, :root[data-theme="dark"] .sp-contact-form textarea, :root[data-theme="dark"] .sp-contact-form select { background: var(--sp-surface); color: var(--sp-ink); border-color: var(--sp-border); } :root[data-theme="dark"] .sp-phone-screen, :root[data-theme="dark"] .sp-browser, :root[data-theme="dark"] .sp-browser-url { background: var(--sp-surface); } :root[data-theme="dark"] .dropdown-menu { --bs-dropdown-bg: var(--sp-surface); --bs-dropdown-color: var(--sp-body); --bs-dropdown-link-color: var(--sp-body); --bs-dropdown-link-hover-color: var(--sp-ink); --bs-dropdown-link-hover-bg: var(--sp-bg); --bs-dropdown-link-active-color: var(--sp-ink); --bs-dropdown-link-active-bg: #23375f; border-color: var(--sp-border); } :root[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(180%); } /* ========================================================================== Accueil Horizon — composition fidele a la maquette validee ========================================================================== */ .hp-hero { position: relative; min-height: 760px; overflow: hidden; background: #071321; color: #fff; } .hp-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% center; } .hp-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,14,27,.97) 0%, rgba(4,14,27,.82) 42%, rgba(4,14,27,.15) 75%), linear-gradient(0deg, rgba(4,14,27,.62), transparent 45%); } .hp-hero-inner { position: relative; min-height: 760px; display: flex; align-items: center; padding-top: 44px; padding-bottom: 170px; } .hp-hero-copy { width: min(650px, 58%); position: relative; z-index: 2; } .hp-kicker,.hp-label { display: inline-flex; align-items: center; gap: 8px; color: #65d2b1; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .hp-hero h1 { margin: 20px 0; color: #fff; font-size: clamp(48px, 6vw, 78px); line-height: .98; letter-spacing: -.055em; font-weight: 700; } .hp-hero h1 em { color: #7e9cff; font-style: normal; } .hp-hero-copy > p { max-width: 590px; color: #c2cedb; font-size: 18px; line-height: 1.7; } .hp-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 28px; } .hp-video-link { color: #fff; text-decoration: none; font-weight: 700; } .hp-video-link:hover { color: #7e9cff; } .hp-trust { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 24px; color: #aab9c8; font-size: 13px; } .hp-trust i { color: #53caa7; } .hp-live-card { position: absolute; z-index: 3; right: 4%; bottom: 34px; width: min(620px, 55%); padding: 22px; color: var(--sp-ink); background: color-mix(in srgb, var(--sp-surface) 94%, transparent); backdrop-filter: blur(16px); border: 1px solid color-mix(in srgb, var(--sp-border) 75%, transparent); border-radius: 20px; box-shadow: var(--sp-shadow-lg); animation: hp-float 6s ease-in-out infinite; } .hp-live-head { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; } .hp-live-head span { color: var(--sp-success); font-weight: 700; } .hp-live-stats { display: grid; grid-template-columns: 1.6fr .8fr .8fr; gap: 10px; margin: 16px 0; } .hp-live-stats div { padding: 12px; background: var(--sp-bg); border-radius: 12px; } .hp-live-stats small,.hp-live-stats strong { display: block; } .hp-live-stats small { color: var(--sp-muted); margin-bottom: 5px; } .hp-bars { height: 62px; display: flex; align-items: end; gap: 9px; } .hp-bars i { flex: 1; border-radius: 5px 5px 2px 2px; background: linear-gradient(var(--sp-accent),var(--sp-primary)); } @keyframes hp-float { 50% { transform: translateY(-9px); } } .hp-proof { background: #071321; color: #d5dee7; border-top: 1px solid rgba(255,255,255,.1); } .hp-proof-grid { min-height: 78px; display: grid; grid-template-columns: repeat(5,1fr); align-items: center; gap: 18px; } .hp-proof span { display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 14px; } .hp-proof i { color: #53caa7; } .hp-section { padding: 96px 0; background: var(--sp-surface); } .hp-heading { max-width: 760px; margin-bottom: 44px; } .hp-heading > span { color: var(--sp-primary); font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: .05em; } .hp-heading h2,.hp-story h2,.hp-photo-content h2,.hp-final h2 { margin: 10px 0 14px; color: var(--sp-ink); font-size: clamp(36px,4.5vw,58px); line-height: 1.04; letter-spacing: -.045em; font-weight: 700; } .hp-heading p,.hp-story p { color: var(--sp-muted); font-size: 17px; line-height: 1.7; } .hp-heading-center { margin-left: auto; margin-right: auto; text-align: center; } .hp-compare { display: grid; grid-template-columns: 1fr 56px 1fr; align-items: center; } .hp-compare-card { padding: 34px; border: 1px solid var(--sp-border); border-radius: 20px; background: var(--sp-bg); } .hp-compare-card h3 { color: var(--sp-ink); font-size: 21px; } .hp-compare-card ul { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 16px; } .hp-compare-card li { position: relative; padding-left: 25px; } .hp-compare-card li::before { position: absolute; left: 0; font-weight: 800; } .hp-before li::before { content: "×"; color: #e05b65; }.hp-after li::before { content: "✓"; color: var(--sp-success); } .hp-before h3 i { color: #e05b65; }.hp-after h3 i { color: var(--sp-success); } .hp-arrow { width: 56px; height: 56px; display: grid; place-items: center; position: relative; z-index: 2; margin: 0 -1px; border-radius: 50%; color: #fff; background: var(--sp-primary); } .hp-story-section { background: var(--sp-bg); } .hp-story { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 70px; } .hp-story-image { min-height: 570px; overflow: hidden; border-radius: 24px; box-shadow: var(--sp-shadow-lg); } .hp-story-image img { width: 100%; height: 100%; min-height: 570px; object-fit: cover; } .hp-checks { display: grid; gap: 12px; margin-top: 24px; }.hp-checks span { color: var(--sp-ink); font-weight: 600; }.hp-checks i { color: var(--sp-success); margin-right: 7px; } .hp-photo-band { position: relative; min-height: 700px; display: flex; align-items: center; overflow: hidden; background: #071321; } .hp-photo-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hp-photo-overlay { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(4,14,27,.97),rgba(4,14,27,.72) 48%,rgba(4,14,27,.08)); } .hp-photo-content { position: relative; color: #fff; }.hp-photo-content > * { max-width: 610px; }.hp-photo-content h2 { color: #fff; }.hp-photo-content p { color: #c4d0dc; font-size: 18px; line-height: 1.7; } .hp-photo-points { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 28px; }.hp-photo-points span { padding: 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 12px; background: rgba(255,255,255,.08); backdrop-filter: blur(8px); }.hp-photo-points i { color: #65d2b1; margin-right: 6px; } .hp-modules { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; } .hp-modules article { padding: 28px; border: 1px solid var(--sp-border); border-radius: 18px; background: var(--sp-surface); transition: transform .25s ease,box-shadow .25s ease; }.hp-modules article:hover { transform: translateY(-5px); box-shadow: var(--sp-shadow-lg); }.hp-modules article > i { font-size: 26px; color: var(--sp-primary); }.hp-modules h3 { margin: 18px 0 8px; color: var(--sp-ink); }.hp-modules p { margin: 0; color: var(--sp-muted); } .hp-pricing { background: var(--sp-bg); } .hp-testimonials { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }.hp-testimonials blockquote { margin: 0; padding: 28px; color: var(--sp-ink); font-size: 17px; line-height: 1.65; border: 1px solid var(--sp-border); border-radius: 18px; background: var(--sp-bg); }.hp-testimonials cite { display: block; margin-top: 22px; color: var(--sp-muted); font-size: 13px; font-style: normal; } .hp-final { padding: 0 0 90px; background: var(--sp-surface); }.hp-final-inner { display: grid; grid-template-columns: 1fr .8fr; min-height: 430px; overflow: hidden; border-radius: 24px; color: #fff; background: #071321; box-shadow: var(--sp-shadow-lg); }.hp-final-inner > div { align-self: center; padding: 56px; }.hp-final h2 { color: #fff; }.hp-final p { color: #b9c7d4; }.hp-final img { width: 100%; height: 100%; min-height: 430px; object-fit: cover; mask-image: linear-gradient(90deg,transparent,#000 28%); } @media(max-width:991px){.hp-hero-copy{width:80%}.hp-live-card{width:88%;right:6%}.hp-proof-grid{grid-template-columns:repeat(3,1fr);padding:20px 0}.hp-story{grid-template-columns:1fr;gap:38px}.hp-modules,.hp-testimonials{grid-template-columns:repeat(2,1fr)}.hp-final-inner{grid-template-columns:1fr}.hp-final img{max-height:330px;mask-image:linear-gradient(0deg,#000,transparent)}} @media(max-width:767px){.hp-hero,.hp-hero-inner{min-height:820px}.hp-hero-inner{align-items:flex-start;padding-top:70px}.hp-hero-copy{width:100%}.hp-hero h1{font-size:46px}.hp-live-card{bottom:28px;width:92%;right:4%}.hp-live-stats{grid-template-columns:1fr 1fr}.hp-live-stats div:last-child{display:none}.hp-proof-grid{grid-template-columns:1fr 1fr}.hp-section{padding:68px 0}.hp-compare{grid-template-columns:1fr}.hp-arrow{margin:-1px auto;transform:rotate(90deg)}.hp-story-image,.hp-story-image img{min-height:420px}.hp-photo-band{min-height:760px;align-items:flex-end;padding-bottom:48px}.hp-photo-overlay{background:linear-gradient(0deg,rgba(4,14,27,.98),rgba(4,14,27,.16) 78%)}.hp-photo-points,.hp-modules,.hp-testimonials{grid-template-columns:1fr}.hp-final-inner>div{padding:38px 26px}} @media(prefers-reduced-motion:reduce){.hp-live-card{animation:none}.hp-modules article{transition:none}} @media (max-width: 991px) { :root[data-theme="dark"] .sp-nav-collapse.show { background: var(--sp-surface); border-color: var(--sp-border); } }