/* ElpisIA Apps — design system « Clair Vibrant » (v1, 2026-06-11) */ :root { --brand: #10b981; --brand-light: #34d399; --bg: #f8f9fc; --bg-elev: #ffffff; --bg-card: #ffffff; --glass: rgba(255, 255, 255, 0.75); --text: #0f172a; --text-muted: #5b6172; --text-subtle: #8a90a0; --border: rgba(15, 23, 42, 0.08); --border-strong: rgba(15, 23, 42, 0.14); --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-icon: 22.37%; --radius-pill: 999px; --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05); --shadow-md: 0 12px 32px rgba(15, 23, 42, 0.09); --shadow-lg: 0 28px 60px rgba(15, 23, 42, 0.13); --nav-h: 72px; --max: 1120px; --prose: 720px; --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Sora', 'Inter', -apple-system, sans-serif; --ease: cubic-bezier(0.4, 0, 0.2, 1); --app-accent: var(--brand); --app-accent-soft: color-mix(in srgb, var(--brand) 12%, transparent); --app-accent-medium: color-mix(in srgb, var(--brand) 22%, transparent); --app-accent-glow: color-mix(in srgb, var(--brand) 38%, transparent); color-scheme: light; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; } body.apple-site { min-height: 100vh; display: flex; flex-direction: column; margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.6; color: var(--text); background: var(--bg); } ::selection { background: var(--app-accent-medium); color: var(--text); } h1, h2, h3, .site-logo-name { font-family: var(--font-display); } /* Titres en dégradé sombre subtil */ .text-gradient, .hub-hero-title, .product-hero-name { background: linear-gradient(180deg, #0f172a 30%, #3d4456 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } a { color: color-mix(in srgb, var(--app-accent) 80%, #0f172a); } a:hover { color: var(--app-accent); } /* ── Logo / brand ── */ .site-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); transition: opacity 0.2s var(--ease); } .site-logo:hover { opacity: 0.85; color: var(--text); } .site-logo-img { width: 52px; height: 52px; object-fit: contain; flex-shrink: 0; border-radius: 50%; } .site-logo-text { display: flex; flex-direction: column; line-height: 1.15; } .site-logo-name { font-weight: 700; font-size: 1.2rem; letter-spacing: -0.01em; } .site-logo-name em { font-style: normal; background: linear-gradient(120deg, var(--brand), #059669); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .site-logo-tag { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-subtle); } /* ── Navigation (verre clair) ── */ .apple-nav { position: sticky; top: 0; z-index: 1030; height: var(--nav-h); background: transparent; border-bottom: 1px solid transparent; transition: background 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), height 0.28s var(--ease); } .apple-nav.is-scrolled { background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); border-bottom-color: var(--border); box-shadow: 0 2px 16px rgba(15, 23, 42, 0.05); } /* ── En-tête qui se réduit au défilement ── * * « is-scrolled » ci-dessus ne changeait que le fond, le flou, la bordure et * l'ombre : la hauteur restait clouée à --nav-h et la barre ne diminuait * jamais. La classe « elp-entete-reduite » est posée sur par * assets/js/public.js au-delà de 110 px de défilement. * * POURQUOI REDÉFINIR --nav-h SUR ET NON SUR .apple-nav * Trois règles lisent cette variable : la hauteur de la barre, le « top » du * sous-menu collant « .app-subnav », et celui du panneau mobile. Redéfinie sur * la barre, la variable n'aurait touché que sa descendance : la barre aurait * rétréci de 16 px sans que le sous-menu remonte, ouvrant entre les deux un * trou par lequel le contenu de la page aurait défilé. Sur , les trois * suivent d'un seul coup. * * Réduction limitée au-delà de 768 px : en dessous, la barre est déjà compacte * et tactile, et le panneau du menu mobile s'ancre sur --nav-h — le réduire * pendant que le menu est ouvert le ferait sauter. */ @media (min-width: 768px) { html.elp-entete-reduite { --nav-h: 56px; } html.elp-entete-reduite .site-logo-img { width: 40px; height: 40px; } html.elp-entete-reduite .site-logo-name { font-size: 1rem; } html.elp-entete-reduite .site-logo-tag { font-size: 0.62rem; } .site-logo-img, .site-logo-name, .site-logo-tag { transition: width 0.28s var(--ease), height 0.28s var(--ease), font-size 0.28s var(--ease); } } @media (prefers-reduced-motion: reduce) { .apple-nav, .site-logo-img, .site-logo-name, .site-logo-tag { transition: none; } } .apple-nav-inner { max-width: var(--max); height: 100%; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .apple-nav-toggle { display: none; background: none; border: none; color: var(--text); font-size: 1.6rem; padding: 4px 8px; } .apple-nav-collapse { display: flex; align-items: center; gap: 28px; } .apple-nav-links { display: flex; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; } .apple-nav-links a { display: inline-block; padding: 8px 14px; border-radius: var(--radius-pill); font-size: 0.92rem; font-weight: 500; color: var(--text-muted); text-decoration: none; transition: color 0.2s var(--ease), background 0.2s var(--ease); } .apple-nav-links a:hover { color: var(--text); background: rgba(15, 23, 42, 0.05); } /* Bouton principal « Toutes les applications », identique sur toutes les pages */ .apple-nav-links a.all-apps-button, .apple-nav-links a.all-apps-button.is-active { display: inline-flex; align-items: center; gap: 9px; color: #ffffff; background: linear-gradient(120deg, var(--brand-light), var(--brand) 55%, #059669); box-shadow: 0 6px 18px rgba(16, 185, 129, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.3); font-weight: 600; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); } .apple-nav-links a.all-apps-button:hover, .apple-nav-links a.all-apps-button.is-active:hover { color: #ffffff; background: linear-gradient(120deg, var(--brand-light), var(--brand) 55%, #059669); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(16, 185, 129, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.3); } .apple-lang-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--bg-elev); color: var(--text); font-size: 0.88rem; font-weight: 500; box-shadow: var(--shadow-sm); transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); } .apple-lang-btn:hover { border-color: var(--text-subtle); box-shadow: var(--shadow-md); color: var(--text); } .apple-lang-menu { --bs-dropdown-bg: var(--bg-elev); --bs-dropdown-color: var(--text); --bs-dropdown-link-color: var(--text-muted); --bs-dropdown-link-hover-color: var(--text); --bs-dropdown-link-hover-bg: rgba(15, 23, 42, 0.05); --bs-dropdown-link-active-bg: var(--app-accent-soft); --bs-dropdown-link-active-color: var(--text); --bs-dropdown-border-color: var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); overflow: hidden; } /* Menu mobile */ @media (max-width: 767.98px) { .apple-nav-toggle { display: block; } .apple-nav-collapse { display: none; position: absolute; top: var(--nav-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 12px; padding: 16px 24px 24px; background: var(--glass); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); border-bottom: 1px solid var(--border); box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08); } .apple-nav-collapse.is-open { display: flex; } .apple-nav-links { flex-direction: column; align-items: stretch; } .apple-nav-links a { display: block; } .apple-nav-links a.all-apps-button { display: flex; justify-content: center; } } /* ── App sub-nav ── */ .app-subnav { position: sticky; top: var(--nav-h); z-index: 1020; background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); border-bottom: 1px solid var(--border); } .app-subnav-inner { max-width: var(--max); margin: 0 auto; padding: 0 24px; display: flex; gap: 6px; } .app-subnav a { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: 0.88rem; font-weight: 500; color: var(--text-muted); text-decoration: none; border-bottom: 2px solid transparent; transition: color 0.2s var(--ease), border-color 0.2s var(--ease); } .app-subnav a:hover { color: var(--text); } .app-subnav a.is-active { color: var(--app-accent); border-bottom-color: var(--app-accent); } /* ── Hub hero ── */ .hub-hero { position: relative; overflow: hidden; padding: 110px 24px 90px; text-align: center; background: linear-gradient(180deg, #dcf7ec 0%, #e8f1ff 45%, var(--bg) 100%); border-bottom: 1px solid var(--border); } .hub-hero-glow { position: absolute; inset: -40% -20% auto; height: 140%; background: radial-gradient(ellipse 55% 55% at 50% 15%, color-mix(in srgb, var(--brand) 26%, transparent), transparent 70%), radial-gradient(ellipse 45% 45% at 18% 40%, rgba(99, 102, 241, 0.18), transparent 70%), radial-gradient(ellipse 45% 45% at 82% 38%, rgba(244, 114, 182, 0.14), transparent 70%); animation: hub-glow-drift 26s ease-in-out infinite alternate; pointer-events: none; } @keyframes hub-glow-drift { from { transform: translateX(-4%) scale(1); opacity: 0.85; } to { transform: translateX(4%) scale(1.08); opacity: 1; } } /* Effet de fond : trame de points estompée */ .hub-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(15, 23, 42, 0.1) 1.2px, transparent 1.2px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 35%, #000 25%, transparent 75%); mask-image: radial-gradient(ellipse 75% 65% at 50% 35%, #000 25%, transparent 75%); pointer-events: none; } /* Effet de fond : bulles de couleur flottantes */ .hub-hero::after { content: ''; position: absolute; width: 520px; height: 520px; left: -140px; top: 12%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--brand) 30%, transparent), transparent 65%); filter: blur(46px); animation: blob-float 16s ease-in-out infinite alternate; pointer-events: none; } .hub-hero-content::before { content: ''; position: absolute; width: 460px; height: 460px; right: -380px; top: -60px; border-radius: 50%; background: radial-gradient(circle, rgba(99, 102, 241, 0.25), transparent 65%); filter: blur(46px); animation: blob-float 20s ease-in-out infinite alternate-reverse; pointer-events: none; z-index: -1; } @keyframes blob-float { from { transform: translate(0, 0) scale(1); } to { transform: translate(60px, -40px) scale(1.12); } } .hub-hero-content { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; } .hub-hero-logo { width: 170px; height: 170px; margin-bottom: 28px; border-radius: 50%; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.85), 0 0 0 7px color-mix(in srgb, var(--brand) 30%, transparent), 0 24px 56px var(--app-accent-glow); } @media (max-width: 600px) { .hub-hero-logo { width: 120px; height: 120px; } } .hub-hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 18px; margin-bottom: 22px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--bg-elev); box-shadow: var(--shadow-sm); font-size: 0.84rem; font-weight: 600; letter-spacing: 0.02em; color: var(--text-muted); } .hub-hero-badge .bi { color: var(--app-accent); } .hub-hero-title { margin: 0 0 18px; font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; } .hub-hero-subtitle { margin: 0 auto; max-width: 560px; font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--text-muted); } /* ── Hub : cartes d'apps ── */ .hub-apps { padding: 24px 24px 100px; } .hub-apps-grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 360px)); justify-content: center; gap: 28px; } .app-showcase-card { position: relative; display: block; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--bg-card); box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; overflow: hidden; transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease); } .app-showcase-card:hover { transform: translateY(-6px); color: inherit; border-color: color-mix(in srgb, var(--card-accent, var(--brand)) 35%, transparent); box-shadow: 0 24px 56px rgba(15, 23, 42, 0.12), 0 14px 44px color-mix(in srgb, var(--card-accent, var(--brand)) 18%, transparent); } .app-showcase-glow { position: absolute; inset: 0 0 auto; height: 55%; background: radial-gradient(ellipse 75% 90% at 50% -25%, color-mix(in srgb, var(--card-accent, var(--brand)) 14%, transparent), transparent 75%); opacity: 0.7; transition: opacity 0.35s var(--ease); pointer-events: none; } .app-showcase-card:hover .app-showcase-glow { opacity: 1; } /* Reflet traversant au survol */ .app-showcase-card::after { content: ''; position: absolute; top: 0; bottom: 0; left: -80%; width: 50%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.5), transparent); transform: skewX(-18deg); transition: left 0.7s var(--ease); pointer-events: none; } .app-showcase-card:hover::after { left: 130%; } .app-showcase-card-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 44px 30px 38px; gap: 14px; } .app-icon-squircle { border-radius: var(--radius-icon); overflow: hidden; background: var(--bg-elev); box-shadow: var(--shadow-md); } .app-icon-squircle img { display: block; width: 100%; height: 100%; object-fit: cover; } .app-icon-squircle-card { width: 96px; height: 96px; } .app-icon-fallback { width: 100%; height: 100%; display: grid; place-items: center; font-size: 2rem; color: var(--text-subtle); background: var(--bg); } .app-showcase-name { margin: 4px 0 0; font-size: 1.45rem; font-weight: 700; letter-spacing: -0.02em; } .app-showcase-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--card-accent, var(--brand)) 12%, transparent); color: color-mix(in srgb, var(--card-accent, var(--brand)) 75%, #0f172a); font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; } .app-showcase-tagline { margin: 0; color: var(--text-muted); font-size: 0.95rem; } .app-showcase-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 10px 22px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--card-accent, var(--brand)) 88%, #0f172a); color: #ffffff; font-size: 0.9rem; font-weight: 600; box-shadow: 0 8px 24px color-mix(in srgb, var(--card-accent, var(--brand)) 30%, transparent); transition: gap 0.25s var(--ease), box-shadow 0.25s var(--ease); } .app-showcase-card:hover .app-showcase-cta { gap: 12px; box-shadow: 0 12px 32px color-mix(in srgb, var(--card-accent, var(--brand)) 40%, transparent); } .hub-empty { max-width: var(--max); margin: 0 auto; padding: 60px 24px; text-align: center; color: var(--text-subtle); font-size: 1.05rem; } /* ── Product hero ── */ .product-hero { position: relative; overflow: hidden; padding: 72px 24px 64px; background: linear-gradient(180deg, color-mix(in srgb, var(--hero-accent, var(--app-accent)) 14%, #ffffff) 0%, color-mix(in srgb, var(--hero-accent, var(--app-accent)) 5%, var(--bg)) 70%, var(--bg) 100%); border-bottom: 1px solid var(--border); } .product-hero::before { content: ''; position: absolute; inset: -30% -10% auto; height: 120%; background: radial-gradient(ellipse 55% 55% at 30% 10%, color-mix(in srgb, var(--hero-accent, var(--app-accent)) 18%, transparent), transparent 72%), radial-gradient(ellipse 45% 50% at 80% 30%, rgba(99, 102, 241, 0.1), transparent 70%); animation: hub-glow-drift 30s ease-in-out infinite alternate; pointer-events: none; } /* Trame de points estompée */ .product-hero::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(15, 23, 42, 0.09) 1.2px, transparent 1.2px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse 70% 80% at 35% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 80% at 35% 40%, #000 20%, transparent 75%); pointer-events: none; } .product-hero-inner { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; display: flex; align-items: center; gap: 72px; } .product-hero-name { margin-top: 6px; } .product-hero-actions .store-badge-img img { height: 60px; } .product-hero-visual { display: flex; flex-direction: column; align-items: center; gap: 18px; flex-shrink: 0; } .app-icon-ring { padding: 24px; border-radius: 40px; background: rgba(255, 255, 255, 0.65); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.95); box-shadow: var(--shadow-lg), 0 20px 50px var(--app-accent-medium); } .app-icon-squircle-xl { width: 156px; height: 156px; box-shadow: var(--shadow-md); } .product-hero-category { margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: var(--radius-pill); background: var(--bg-elev); border: 1px solid var(--border); box-shadow: var(--shadow-sm); font-size: 0.84rem; font-weight: 600; letter-spacing: 0.04em; color: var(--text-muted); } .product-hero-category .bi { color: var(--app-accent); } .product-hero-copy { flex: 1; min-width: 0; } .product-hero-name { margin: 0 0 12px; font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; } .product-hero-tagline { margin: 0 0 28px; font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--text-muted); max-width: 520px; } .product-hero-actions { margin-bottom: 26px; } /* ── Badges stores (multi-plateformes) ── */ .store-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } .store-badge { text-decoration: none; } .store-badge-img { display: inline-block; border-radius: 10px; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); } .store-badge-img img { display: block; height: 54px; width: auto; } .store-badge-img:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(15, 23, 42, 0.18); } /* Le badge Google Play officiel a de larges marges transparentes */ .store-badge-play img { height: 80px; margin: -13px -11px; } .store-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 12px; background: color-mix(in srgb, var(--app-accent) 90%, #0f172a); color: #ffffff; font-weight: 600; font-size: 0.98rem; box-shadow: 0 10px 28px var(--app-accent-glow); transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); } .store-btn:hover { transform: translateY(-2px); color: #ffffff; box-shadow: 0 14px 36px var(--app-accent-glow); } .product-meta-grid { display: grid; grid-template-columns: repeat(4, minmax(112px, 1fr)); gap: 12px; max-width: 680px; } .meta-card { min-width: 0; display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.82); box-shadow: 0 8px 22px rgba(15, 23, 42, 0.07); color: var(--text-muted); transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); } .meta-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--meta-color, var(--app-accent)) 28%, transparent); box-shadow: 0 12px 28px color-mix(in srgb, var(--meta-color, var(--app-accent)) 14%, rgba(15, 23, 42, 0.08)); } .meta-card-icon { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 13px; background: color-mix(in srgb, var(--meta-color, var(--app-accent)) 14%, #ffffff); color: var(--meta-color, var(--app-accent)); font-size: 1.05rem; } .meta-card-copy { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; } .meta-card-label { margin-bottom: 3px; color: var(--text-subtle); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .meta-card strong { overflow-wrap: anywhere; color: var(--text); font-size: 0.86rem; font-weight: 700; } .meta-card-rating { --meta-color: #f59e0b; } .meta-card-free { --meta-color: #10b981; } .meta-card-platform { --meta-color: #6366f1; } .meta-card-languages { --meta-color: #ec4899; } @media (max-width: 860px) { .product-hero-inner { flex-direction: column; text-align: center; gap: 36px; } .product-hero-tagline { margin-inline: auto; } .product-meta-grid { margin-inline: auto; } .store-badges { justify-content: center; } .meta-card { text-align: left; } } @media (max-width: 620px) { .product-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 380px) { .product-meta-grid { grid-template-columns: 1fr; } } /* ── Feature strip ── */ .feature-strip { padding: 56px 24px 64px; } .feature-strip-header { max-width: var(--max); margin: 0 auto 36px; text-align: center; display: flex; flex-direction: column-reverse; gap: 6px; } .feature-strip-header h2 { margin: 0; font-size: clamp(1.7rem, 3.5vw, 2.4rem); font-weight: 700; letter-spacing: -0.02em; } .feature-strip-header p { margin: 0; color: color-mix(in srgb, var(--app-accent) 75%, #0f172a); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem; } .feature-strip-inner { max-width: var(--max); margin: 0 auto; } .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; } .feature-card { padding: 28px 24px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-card); box-shadow: var(--shadow-sm); transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease); } .feature-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--app-accent) 30%, transparent); box-shadow: 0 16px 40px rgba(15, 23, 42, 0.1), 0 8px 30px var(--app-accent-soft); } .feature-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 16px; border-radius: 14px; background: var(--app-accent-soft); color: color-mix(in srgb, var(--app-accent) 80%, #0f172a); font-size: 1.4rem; } .feature-title { margin: 0 0 8px; font-size: 1.05rem; font-weight: 700; } .feature-desc { margin: 0; font-size: 0.92rem; color: var(--text-muted); } /* ── Screenshots ── */ .screenshots-section { padding: 48px 0 64px; } .screenshots-section-header { text-align: center; margin-bottom: 40px; padding: 0 24px; } .screenshots-title { margin: 0; font-size: clamp(1.7rem, 3.5vw, 2.4rem); font-weight: 700; letter-spacing: -0.02em; } .screenshots-carousel-wrap { position: relative; max-width: var(--max); margin: 0 auto; padding: 0 24px; } .screenshots-carousel { display: flex; gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 16px 8px 28px; scrollbar-width: none; } .screenshots-carousel::-webkit-scrollbar { display: none; } .screenshot-slide { flex: 0 0 auto; scroll-snap-align: center; } /* Cadre iPhone sombre — contraste élégant sur fond clair */ .screenshot-device { padding: 12px; border-radius: 44px; background: linear-gradient(160deg, #2a2a32, #16161c); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: var(--shadow-lg), 0 10px 40px var(--app-accent-soft); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); } .screenshot-device:hover { transform: translateY(-6px) scale(1.015); box-shadow: var(--shadow-lg), 0 18px 56px var(--app-accent-medium); } .screenshot-device img { display: block; width: 280px; height: auto; border-radius: 32px; } .screenshots-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--bg-elev); box-shadow: var(--shadow-md); color: var(--text); transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease); } .screenshots-nav:hover { box-shadow: var(--shadow-lg); transform: translateY(-50%) scale(1.05); } .screenshots-nav-prev { left: 8px; } .screenshots-nav-next { right: 8px; } .screenshots-dots { display: flex; justify-content: center; gap: 8px; margin-top: 4px; } .screenshots-dot { width: 8px; height: 8px; border: none; border-radius: 50%; background: var(--border-strong); padding: 0; transition: background 0.2s var(--ease), transform 0.2s var(--ease); } .screenshots-dot.is-active { background: var(--app-accent); transform: scale(1.3); } /* ── Compact page hero (pages légales / support / FAQ) ── */ .page-hero-compact { position: relative; overflow: hidden; padding: 56px 24px 36px; border-bottom: 1px solid var(--border); background: radial-gradient(ellipse 60% 100% at 50% -30%, var(--app-accent-soft), transparent 75%); } .page-hero-compact-inner { max-width: var(--max); margin: 0 auto; } .page-hero-app { display: flex; align-items: center; gap: 18px; } .page-hero-mini-icon { width: 88px; height: 88px; border-radius: var(--radius-icon); box-shadow: var(--shadow-md); } @media (max-width: 600px) { .page-hero-mini-icon { width: 64px; height: 64px; } } .page-breadcrumb { display: flex; gap: 8px; list-style: none; margin: 0 0 4px; padding: 0; font-size: 0.82rem; color: var(--text-subtle); } .page-breadcrumb li + li::before { content: '/'; margin-right: 8px; color: var(--text-subtle); } .page-breadcrumb a { text-decoration: none; } .page-hero-app h1 { margin: 0; font-size: clamp(1.5rem, 3.5vw, 2.1rem); font-weight: 700; letter-spacing: -0.02em; } /* ── Contenu / prose ── */ .content-section { padding: 56px 24px 80px; } .content-section-inner { max-width: var(--max); margin: 0 auto; } .content-section-inner.is-prose { max-width: var(--prose); } .content-body { color: #2a3142; font-size: 1rem; } .content-body > .lead + .row.g-3 { --bs-gutter-x: 14px; margin-top: 24px; margin-bottom: 36px !important; } .content-body > .lead + .row.g-3 > [class*="col-"] > div { position: relative; min-height: 132px; padding: 26px 18px 20px !important; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, var(--stat-color) 22%, transparent); border-radius: 20px !important; background: linear-gradient(145deg, color-mix(in srgb, var(--stat-color) 11%, #ffffff), #ffffff 72%) !important; box-shadow: 0 12px 30px color-mix(in srgb, var(--stat-color) 13%, rgba(15, 23, 42, 0.08)); overflow: hidden; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); } .content-body > .lead + .row.g-3 > [class*="col-"] > div:hover { transform: translateY(-3px); box-shadow: 0 18px 38px color-mix(in srgb, var(--stat-color) 19%, rgba(15, 23, 42, 0.1)); } .content-body > .lead + .row.g-3 > [class*="col-"] > div::before { width: 40px; height: 40px; margin-bottom: 10px; display: grid; place-items: center; border-radius: 13px; background: color-mix(in srgb, var(--stat-color) 16%, #ffffff); color: var(--stat-color); font-size: 1.15rem; font-weight: 800; line-height: 1; } .content-body > .lead + .row.g-3 > :nth-child(1) { --stat-color: #f59e0b; } .content-body > .lead + .row.g-3 > :nth-child(2) { --stat-color: #10b981; } .content-body > .lead + .row.g-3 > :nth-child(3) { --stat-color: #ec4899; } .content-body > .lead + .row.g-3 > :nth-child(1) > div::before { content: '★'; } .content-body > .lead + .row.g-3 > :nth-child(2) > div::before { content: '€'; } .content-body > .lead + .row.g-3 > :nth-child(3) > div::before { content: '文'; } .content-body > .lead + .row.g-3 strong { color: var(--text); font-family: var(--font-display); font-size: 1.25rem; line-height: 1.2; } .content-body > .lead + .row.g-3 small { margin-top: 5px; color: var(--text-muted) !important; font-size: 0.78rem; font-weight: 600; } .content-body h2 { margin: 2.2em 0 0.7em; font-size: 1.45rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; } .content-body h3 { margin: 1.8em 0 0.6em; font-size: 1.15rem; font-weight: 700; color: var(--text); } .content-body ul, .content-body ol { padding-left: 1.4em; } .content-body li { margin-bottom: 0.4em; } .content-body table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 0.92rem; background: var(--bg-elev); border-radius: var(--radius-sm); overflow: hidden; } .content-body th, .content-body td { padding: 10px 14px; border: 1px solid var(--border); text-align: left; } .content-body th { background: var(--bg); color: var(--text); } .content-body blockquote { margin: 1.5em 0; padding: 14px 20px; border-left: 3px solid var(--app-accent); background: var(--bg-elev); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; box-shadow: var(--shadow-sm); color: var(--text-muted); } .content-updated { margin-top: 40px; display: inline-flex; align-items: center; gap: 8px; font-size: 0.84rem; color: var(--text-subtle); } /* ── FAQ (override accordéon Bootstrap) ── */ .faq-accordion { --bs-accordion-bg: var(--bg-elev); --bs-accordion-color: #2a3142; --bs-accordion-border-color: var(--border); --bs-accordion-btn-color: var(--text); --bs-accordion-btn-bg: var(--bg-elev); --bs-accordion-active-bg: var(--app-accent-soft); --bs-accordion-active-color: var(--text); --bs-accordion-btn-focus-box-shadow: 0 0 0 2px var(--app-accent-medium); } .faq-item { border-radius: var(--radius-md) !important; overflow: hidden; margin-bottom: 12px; border: 1px solid var(--border); box-shadow: var(--shadow-sm); } .faq-item .accordion-button { font-weight: 600; gap: 12px; } .faq-q-icon { color: var(--app-accent); flex-shrink: 0; } /* ── CTA banner ── */ .cta-banner { padding: 30px 24px 96px; } .cta-banner-inner { position: relative; overflow: hidden; max-width: var(--max); margin: 0 auto; display: flex; align-items: center; gap: 28px; padding: 40px 44px; border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, var(--app-accent) 25%, transparent); background: radial-gradient(ellipse 70% 130% at 18% -30%, color-mix(in srgb, var(--app-accent) 14%, transparent), transparent 70%), var(--bg-elev); box-shadow: var(--shadow-lg); } .cta-banner-icon img { border-radius: var(--radius-icon); box-shadow: var(--shadow-md); } .cta-banner-text { flex: 1; min-width: 0; } .cta-banner-text h2 { margin: 0 0 4px; font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; } .cta-banner-text p { margin: 0; color: var(--text-muted); } @media (max-width: 700px) { .cta-banner-inner { flex-direction: column; text-align: center; padding: 36px 24px; } .cta-banner-action .store-badges { justify-content: center; } } /* ── Footer ── */ .apple-footer { margin-top: auto; border-top: 1px solid var(--border); background: #eef1f6; padding: 56px 24px 36px; } .apple-footer-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.2fr 2fr; gap: 48px; } .apple-footer-tagline { margin: 14px 0 0; font-size: 0.88rem; color: var(--text-subtle); max-width: 280px; } .apple-footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 28px; } .apple-footer-title { margin: 0 0 14px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-subtle); } .apple-footer-links { list-style: none; margin: 0; padding: 0; } .apple-footer-links li { margin-bottom: 9px; } .apple-footer-links a { color: var(--text-muted); text-decoration: none; font-size: 0.9rem; transition: color 0.2s var(--ease); } .apple-footer-links a:hover { color: var(--text); } .apple-footer-legal { grid-column: 1 / -1; margin: 28px 0 0; padding-top: 24px; border-top: 1px solid var(--border); font-size: 0.8rem; color: var(--text-subtle); } @media (max-width: 760px) { .apple-footer-inner { grid-template-columns: 1fr; gap: 36px; } } /* ── 404 (template pages/404.php : .page-empty) & boutons ── */ .page-empty { position: relative; overflow: hidden; padding: 120px 24px; text-align: center; background: radial-gradient(ellipse 50% 60% at 50% 0%, var(--app-accent-soft), transparent 75%); } .page-empty-icon { width: 80px; height: 80px; margin: 0 auto 24px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--bg-elev); box-shadow: var(--shadow-md); font-size: 2rem; color: var(--text-subtle); } .page-empty h1 { margin: 0 0 10px; font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -0.02em; } .page-empty p { margin: 0 0 28px; color: var(--text-muted); } .apple-btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 28px; border: none; border-radius: var(--radius-pill); background: var(--app-accent); color: #ffffff; font-weight: 600; text-decoration: none; box-shadow: 0 8px 26px var(--app-accent-glow); transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); } .apple-btn:hover { transform: translateY(-2px); color: #ffffff; box-shadow: 0 14px 36px var(--app-accent-glow); } /* ── Apparition au scroll (classes posées par public.js) ── */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } /* ── Accessibilité : réduction des animations ── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hub-hero-glow, .hub-hero::after, .hub-hero-content::before, .product-hero::before, .product-hero::after { animation: none; } .reveal { opacity: 1; transform: none; transition: none; } *, *::before, *::after { transition-duration: 0.01ms !important; } } /* ===== ELP-APPS-HEADER : logo gauche / menu centré + footer premium ===== */ @media (min-width: 992px) { .apple-nav-inner { max-width: 100%; padding: 0 2rem; position: relative; } .apple-nav-collapse { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .site-logo { margin-right: auto; } } .apple-footer-legal { color: rgba(255,255,255,.92); } .ftr-heart { display: inline-block; filter: brightness(1.12) saturate(1.15) drop-shadow(0 0 7px rgba(255,60,90,.85)) drop-shadow(0 0 16px rgba(255,60,90,.5)); animation: ftrHeartPulse 1.6s ease-in-out infinite; } @keyframes ftrHeartPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } } @media (prefers-reduced-motion: reduce) { .ftr-heart { animation: none; } } .ftr-link { color: inherit; text-decoration: none; font-weight: 700; } .ftr-link:hover { text-decoration: underline; } /* /ELP-APPS-HEADER */ /* ===== ELP-NEWS : section Actualités (flux du blog) ===== */ .news { padding: 4.2rem 0; } .news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.8rem; margin-top: 2.4rem; } .news-grid:empty { min-height: 120px; } .news-card { display: flex; flex-direction: column; text-decoration: none; background: #fff; border: 1px solid rgba(30,41,59,.08); border-radius: 18px; overflow: hidden; box-shadow: 0 4px 12px rgba(30,27,70,.06), 0 18px 40px rgba(30,27,70,.10); transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; } .news-card:hover { transform: translateY(-6px); box-shadow: 0 10px 20px rgba(30,27,70,.10), 0 26px 54px rgba(30,27,70,.18); } .news-img { display: block; width: 100%; aspect-ratio: 16/9; background-size: cover; background-position: center; } .news-img--ph { background: linear-gradient(140deg, #37246e, #7c3aed); } .news-body { display: flex; flex-direction: column; gap: .45rem; padding: 1.2rem 1.3rem 1.4rem; } .news-body time { font-size: .8rem; font-weight: 700; color: var(--primary, #6a4cf0); text-transform: uppercase; letter-spacing: .04em; } .news-body strong { font-size: 1.08rem; font-weight: 800; color: #1e2340; line-height: 1.35; } .news-body em { font-style: normal; color: #5b6472; font-size: .92rem; line-height: 1.55; } .news-read { margin-top: .4rem; font-weight: 700; font-size: .92rem; color: var(--primary, #6a4cf0); } .news-cta { text-align: center; margin-top: 2.2rem; } /* /ELP-NEWS */ /* ===== ELP-ECO : écosystème ElpisIA (cartes dark premium) ===== */ .ecosystem { padding: 4.5rem 0; background: #f6f7ff; } .eco-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin-top: 2.4rem; } .eco-card { position: relative; overflow: hidden; display: block; text-decoration: none; padding: 1.7rem 1.5rem; border-radius: 20px; color: #fff; border: 1px solid rgba(255,255,255,.09); box-shadow: 0 16px 40px rgba(20,16,50,.38), 0 5px 14px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.12); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; } .eco-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 46%; background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0)); pointer-events: none; } .eco-card > * { position: relative; z-index: 1; } .eco-card:hover { transform: translateY(-8px); } .eco-web { background: linear-gradient(150deg, #06291f 0%, #0b543b 55%, #139163 100%); } .eco-form { background: linear-gradient(150deg, #12213f 0%, #1e3e75 55%, #3060b8 100%); } .eco-shop { background: linear-gradient(150deg, #241663 0%, #4a2aa6 55%, #6d3bd6 100%); } .eco-apple { background: linear-gradient(150deg, #17171a 0%, #29292e 55%, #3c3c42 100%); } .eco-apps { background: linear-gradient(150deg, #1a1147 0%, #37277f 55%, #5b6cf0 100%); } .eco-blog { background: linear-gradient(150deg, #3a230a 0%, #7a480f 55%, #c47d1a 100%); } .eco-forum { background: linear-gradient(150deg, #072a3d 0%, #0c4d68 55%, #1690b8 100%); } .eco-help { background: linear-gradient(150deg, #351130 0%, #75205c 55%, #c33489 100%); } .eco-dep { background: linear-gradient(150deg, #3a0f18 0%, #7c1d2e 55%, #e11d48 100%); } .eco-web:hover { box-shadow: 0 26px 56px rgba(19,145,99,.5); } .eco-form:hover { box-shadow: 0 26px 56px rgba(48,96,184,.5); } .eco-shop:hover { box-shadow: 0 26px 56px rgba(109,59,214,.5); } .eco-apple:hover { box-shadow: 0 26px 56px rgba(0,0,0,.5); } .eco-apps:hover { box-shadow: 0 26px 56px rgba(91,108,240,.5); } .eco-blog:hover { box-shadow: 0 26px 56px rgba(196,125,26,.5); } .eco-forum:hover { box-shadow: 0 26px 56px rgba(22,144,184,.5); } .eco-help:hover { box-shadow: 0 26px 56px rgba(195,52,137,.5); } .eco-dep:hover { box-shadow: 0 26px 56px rgba(225,29,72,.5); } .eco-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; font-size: 24px; border-radius: 14px; margin-bottom: 1rem; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 18px rgba(0,0,0,.32); } .eco-card h3 { font-size: 1.12rem; font-weight: 800; margin-bottom: .4rem; color: #fff; } .eco-card p { color: rgba(255,255,255,.82); font-size: .89rem; margin: 0; } /* /ELP-ECO */ /* ===== ELP-ECO-HDR : titre écosystème + sections alternées (hub) ===== */ .ecosystem .section-header{text-align:center;margin-bottom:1.4rem} .ecosystem .section-label{display:inline-block;background:#ece9ff;color:#6a4cf0;font-weight:800;font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;padding:.45rem 1rem;border-radius:999px} .ecosystem .section-title{font-size:clamp(1.7rem,3.6vw,2.4rem);font-weight:900;margin:.8rem 0 .4rem;color:#1a1440;line-height:1.12} .ecosystem .section-description{color:#5b6472;max-width:640px;margin:0 auto;font-size:1.05rem} .ecosystem .container{max-width:1180px;margin:0 auto;padding:0 24px} /* une section sur deux en fond blanc / teinté */ .hub-apps{background:#ffffff} .news{background:#f6f7ff} .elp-contact{background:#ffffff} .ecosystem{background:#f6f7ff} /* réseaux sociaux du footer */ .apple-footer-social{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem} .apple-footer-social a{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:11px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.85);font-size:1.1rem;text-decoration:none;transition:transform .2s,background .2s,color .2s} .apple-footer-social a:hover{transform:translateY(-3px);background:rgba(255,255,255,.16);color:#fff} /* /ELP-ECO-HDR */ /* === ELP-ECO-ICON-BRIGHT === */ .eco-icon{background:rgba(255,255,255,.34) !important;border:1px solid rgba(255,255,255,.42) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 4px 12px rgba(0,0,0,.20) !important;} .eco-card:hover .eco-icon{background:rgba(255,255,255,.46) !important;} .eco-icon svg{width:26px;height:26px;display:block} /* ===== ELP-FOOTER-PREMIUM (12 août 2026) ===== Le pied de page portait du texte blanc — .apple-footer-legal et .apple-footer-social l'imposaient — sur un fond clair #eef1f6 : la ligne de copyright et les icônes sociales étaient illisibles. Ces règles avaient été écrites pour un pied de page sombre puis reprises telles quelles dans la feuille claire. Plutôt que de repeindre le texte en gris, on assume la bande sombre : le contraste est alors garanti, et le pied de page ferme la page au lieu de se fondre dedans. Même parti que les cartes premium du reste de l'écosystème — dégradé profond, texte clair, pastilles de verre, relief léger. */ .apple-footer { position: relative; margin-top: auto; border-top: 0; padding: 72px 24px 32px; background: radial-gradient(1200px 380px at 12% -10%, rgba(16,185,129,.16), transparent 60%), radial-gradient(900px 320px at 88% 0%, rgba(99,102,241,.14), transparent 62%), linear-gradient(180deg, #10141c 0%, #0b0e14 100%); color: #e8ecf4; } /* filet lumineux : sépare sans trait dur */ .apple-footer::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.22) 20%, rgba(255,255,255,.22) 80%, transparent); } .apple-footer-tagline { color: rgba(232,236,244,.62); } .apple-footer-title { color: rgba(232,236,244,.52); font-size: .74rem; letter-spacing: .16em; } .apple-footer-links a { color: rgba(232,236,244,.80); font-size: .92rem; position: relative; padding-left: 0; transition: color .18s ease, padding-left .18s ease; } .apple-footer-links a::before { content: ""; position: absolute; left: -10px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: #10b981; opacity: 0; transform: scale(.6); transition: opacity .18s ease, transform .18s ease; } .apple-footer-links a:hover { color: #fff; padding-left: 6px; } .apple-footer-links a:hover::before { opacity: 1; transform: scale(1); } .apple-footer-links a:focus-visible { outline: 2px solid #10b981; outline-offset: 3px; border-radius: 4px; } .apple-footer-legal { color: rgba(232,236,244,.58); border-top: 1px solid rgba(255,255,255,.10); margin-top: 40px; padding-top: 22px; } .ftr-link { color: rgba(232,236,244,.92); } .ftr-link:hover { color: #fff; } /* pastilles de verre : le blanc translucide reprend enfin son sens */ .apple-footer-social a { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.10); color: rgba(232,236,244,.86); } .apple-footer-social a:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.24); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 18px rgba(0,0,0,.35); } .apple-footer-social a:focus-visible { outline: 2px solid #10b981; outline-offset: 3px; } /* le logo se détachait mal sur clair, il respire sur sombre */ .apple-footer-brand img, .apple-footer-brand svg { filter: drop-shadow(0 6px 18px rgba(0,0,0,.45)); } @media (prefers-reduced-motion: reduce) { .apple-footer-links a, .apple-footer-social a { transition: none; } } /* /ELP-FOOTER-PREMIUM */ /* ===== ELP-FOOTER-PREMIUM-2 (12 août 2026) ===== Deux oublis du passage en bande sombre. */ /* 1. « Elpis » n'a aucune couleur déclarée : il hérite de --text, sombre, et disparaissait sur le fond noir. Seul le « IA » portait le dégradé vert. On ne colore QUE dans le pied de page : ailleurs le logo reste sur clair. */ .apple-footer .site-logo-name { color: #f2f5fa; } .apple-footer .site-logo-name em { background: linear-gradient(120deg, #34d399, #10b981); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .apple-footer .site-logo-tag { color: rgba(232,236,244,.66); } /* 2. Le cœur : sur elpisia.com la luminosité est animée DANS les images-clés, ici l'animation ne jouait que sur la taille — d'où l'aspect terne. On reprend la même mécanique, en propres images-clés pour ne pas dépendre de celles définies plus haut, et un halo un peu plus large : sur fond sombre la même lueur paraît plus faible. */ .apple-footer .ftr-heart { display: inline-block; filter: brightness(1.18) saturate(1.25) drop-shadow(0 0 8px rgba(255,60,90,.95)) drop-shadow(0 0 20px rgba(255,60,90,.55)); animation: ftrHeartGlow 1.6s ease-in-out infinite; } @keyframes ftrHeartGlow { 0%, 100% { transform: scale(1); filter: brightness(1.18) saturate(1.25) drop-shadow(0 0 8px rgba(255,60,90,.95)) drop-shadow(0 0 18px rgba(255,60,90,.5)); } 50% { transform: scale(1.16); filter: brightness(1.42) saturate(1.5) drop-shadow(0 0 12px rgba(255,80,110,1)) drop-shadow(0 0 28px rgba(255,60,90,.72)); } } @media (prefers-reduced-motion: reduce) { .apple-footer .ftr-heart { animation: none; } } /* /ELP-FOOTER-PREMIUM-2 */ /* ===== ELP-FOOTER-LEGAL-CENTRE (12 août 2026) ===== La ligne était calée à gauche, alors que tout l'écosystème la centre. `grid-column: 1 / -1` la fait déjà courir sur toute la largeur : il suffit de centrer le texte, et de garder l'ensemble insécable autour du cœur pour que « Créé avec ❤️ par » ne se coupe pas en fin de ligne sur mobile. */ .apple-footer-legal { text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35em; } .apple-footer-legal .ftr-heart { margin: 0 .05em; } /* /ELP-FOOTER-LEGAL-CENTRE */ /* ===== ELP-HUB-FILTER (28/08/2026) : 3 cartes par ligne + barre de filtrage ===== */ .hub-apps-grid { grid-template-columns: repeat(3, minmax(0, 360px)); } @media (max-width: 1023px) { .hub-apps-grid { grid-template-columns: repeat(2, minmax(0, 360px)); } } @media (max-width: 659px) { .hub-apps-grid { grid-template-columns: minmax(0, 360px); } } .app-showcase-card.est-cachee { display: none; } .hub-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: max-content; max-width: calc(100% - 2rem); margin: 0 auto 30px; padding: 6px; background: linear-gradient(160deg, #ffffff 0%, #f7f6ff 100%); border: 1px solid rgba(122, 110, 240, .14); border-radius: 999px; box-shadow: 0 2px 8px rgba(90, 62, 166, .06), 0 14px 34px rgba(90, 62, 166, .10), inset 0 1px 0 rgba(255, 255, 255, .9); } .hub-filter__btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border: 0; border-radius: 999px; background: transparent; color: #4a4463; font: inherit; font-size: .95rem; font-weight: 700; cursor: pointer; transition: background .25s, color .25s, transform .2s, box-shadow .25s; } .hub-filter__btn i { font-size: 1rem; opacity: .75; } .hub-filter__btn:hover { background: rgba(106, 76, 240, .08); transform: translateY(-1px); } .hub-filter__btn.is-active { background: linear-gradient(135deg, #6a4cf0, #9b3ce0); color: #fff; box-shadow: 0 8px 20px rgba(106, 76, 240, .35); } .hub-filter__btn.is-active i { opacity: 1; } .hub-filter__count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: rgba(106, 76, 240, .10); font-size: .78rem; font-weight: 800; } .hub-filter__btn.is-active .hub-filter__count { background: rgba(255, 255, 255, .22); } @media (max-width: 480px) { .hub-filter__btn { padding: 8px 12px; font-size: .88rem; } } /* ===== /ELP-HUB-FILTER ===== */ /* ===== Infolettre : largeur du contenu, boîte compacte (2 sept. 2026) ===== Le widget commun se limite à 640 px ; sur ce site elle s'aligne sur la largeur des autres blocs. La ligne vide réservée au message d'état n'apparaît que remplie. */ /* Le widget pose sa classe SUR ce div : c'est le même élément, et il est enfant direct d'un body en disposition flexible — sans largeur, il se réduit à son contenu (549 px au lieu de 640). On lui rend la largeur de référence de web.elpisia.com. */ [data-elp-newsletter] { width: 100%; max-width: 640px; align-self: center; margin: 1.6rem auto; } /* Mêmes dimensions que web.elpisia.com, la référence (3 sept. 2026) : on laisse au widget sa largeur propre (640 px, centrée) et on ne garde que le resserrage. */ /* Le widget pose « elp-news » SUR ce div : c'est le même élément, un descendant ne le désigne donc jamais — le resserrage restait sans effet. */ [data-elp-newsletter].elp-news { padding-top: 1.1rem !important; padding-bottom: 1.05rem !important; } [data-elp-newsletter] .elp-news__t { margin-bottom: .3rem !important; } [data-elp-newsletter] .elp-news__s { margin-bottom: .85rem !important; } [data-elp-newsletter] .elp-news__m:empty { display: none !important; } [data-elp-newsletter] .elp-news__m { margin-top: .5rem !important; min-height: 0 !important; } [data-elp-newsletter] .elp-news__l { margin-top: .55rem !important; }