/* ===================================================================== UP2TECH — Thème couleurs commutable (démo équipe) Le ROSE (#FF2E7E) est la couleur PRIMAIRE de marque : il reste CONSTANT dans tous les thèmes (halo du hero, hover des boutons, 1re teinte des titres, sparkles). Seule la couleur SECONDAIRE change (fond du hero, boutons, header, footer) — pilotée par data-up2-theme sur . Un sélecteur flottant (bas-gauche) permet de switcher. Chargé APRÈS styles.css. ===================================================================== */ :root { --brand: #FF2E7E; /* rose de marque — CONSTANT */ --brand-lime: #C6F542; /* accent vert fluo — constant */ } /* ---------- Couleur SECONDAIRE par thème (le rose ne change jamais) ---------- */ /* VIOLET (défaut) */ :root, [data-up2-theme="violet"] { --t-base-rgb: 58, 29, 120; --t-g1: #9a63e6; --t-g2: #7c4cd2; --t-g3: #4e2aa0; --t-fade: 124, 76, 210; --t-btn-1: #8B3FE8; --t-btn-2: #5B2A9E; --t-header: #2c1560; --t-footer: #281552; --t-title-2: #8B3FE8; --t-title-3: #5B2A9E; } /* CYAN CLAIR */ [data-up2-theme="cyan"] { --t-base-rgb: 21, 74, 110; --t-g1: #2fa8d6; --t-g2: #2588bf; --t-g3: #175a8e; --t-fade: 47, 136, 191; --t-btn-1: #22b6e0; --t-btn-2: #1f7fb8; --t-header: #123f5c; --t-footer: #103850; --t-title-2: #2f9fd0; --t-title-3: #175a8e; } /* BLEU (indigo / royal) */ [data-up2-theme="blue"] { --t-base-rgb: 30, 32, 90; --t-g1: #6a7bf0; --t-g2: #4a53d8; --t-g3: #262a86; --t-fade: 74, 83, 216; --t-btn-1: #5b6ef0; --t-btn-2: #3a3fb0; --t-header: #1a1c58; --t-footer: #17194e; --t-title-2: #4a53d8; --t-title-3: #262a86; } /* ===================================================================== Application — le ROSE (#ff4d91/#e01e68) est écrit en dur => constant ===================================================================== */ /* --- Hero : halo ROSE (constant) qui se fond dans la SECONDAIRE + pointe fluo --- */ .section-hero .hero-image { background-color: rgb(var(--t-base-rgb)); background-image: radial-gradient(70% 62% at 90% 114%, rgba(198, 245, 66, 0.30) 0%, rgba(198, 245, 66, 0) 46%), radial-gradient(120% 110% at 16% 108%, #ffffff 0%, #ffd2e7 12%, #ff4d91 24%, #e01e68 36%, rgba(var(--t-fade), 0.32) 56%, rgba(var(--t-base-rgb), 0) 74%), linear-gradient(158deg, var(--t-g1) 0%, var(--t-g2) 44%, var(--t-g3) 100%); transition: background-color .5s ease; } /* Badge "Agence digital" */ .section-hero .content-wrap .sub { box-shadow: 0px -3px 0px 0px #E9E9E9 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.7) inset, 0px 0px 0px 1px rgba(255, 255, 255, 0.22), 0px 2.77px 2.21px 0px rgba(0, 0, 0, 0.12); } /* --- Boutons : fond SECONDAIRE, survol ROSE -> secondaire (le rose reste présent) --- */ .tf-btn { background: radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(180deg, var(--t-btn-1) 0%, var(--t-btn-2) 100%); } .tf-btn:hover { background: radial-gradient(62.56% 62.56% at 50% -13%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(120deg, #FF2E7E 0%, var(--t-btn-1) 100%); } /* --- Bouton vert lime moderne (flat, échappe au thème) --- */ .tf-btn.tf-btn--fluo { color: #10210a; font-weight: 600; background: #c6f24f; box-shadow: 0 6px 18px -4px rgba(150, 210, 40, 0.55); transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; } .tf-btn.tf-btn--fluo:hover { color: #10210a; background: #d2fb63; transform: translateY(-2px); box-shadow: 0 12px 26px -6px rgba(150, 210, 40, 0.65); } .tf-btn.tf-btn--fluo .tf-btn__spark { width: 18px; height: 18px; flex: none; } /* --- Bouton CTA header moderne (flat, dégradé de marque) --- */ .tf-btn.tf-btn--modern { color: #fff; font-weight: 600; background: linear-gradient(120deg, #FF2E7E 0%, #b23cff 100%); box-shadow: 0 8px 22px -6px rgba(178, 60, 255, 0.6); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; } .tf-btn.tf-btn--modern:hover { color: #fff; background: linear-gradient(120deg, #ff4c90 0%, #bd54ff 100%); transform: translateY(-2px); box-shadow: 0 14px 30px -8px rgba(178, 60, 255, 0.7); } /* --- Section À propos : espacement titre / module noir --- */ .section-about-us .heading-section { margin-bottom: 34px; } .section-about-us .col-left { position: relative; min-height: 540px; padding-bottom: 40px; overflow: hidden; } /* Le contenu (badge, titre, bouton) passe au-dessus de la carte */ .section-about-us .col-left .position-relative.z-5 { position: relative; z-index: 5; } /* --- Carte Vendée (Leaflet, dark mode) — remplit tout le module --- */ .about-map { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: 40px; } .about-map__canvas { position: absolute; inset: 0; z-index: 0; background: #14141a; } .about-map__canvas.leaflet-container { background: #14141a; font: inherit; } /* Éclaircit les tuiles (dark_all est très sombre) */ .about-map .leaflet-tile-pane { filter: brightness(1.85) contrast(1.04) saturate(1.15); } /* Assombrit le haut pour la lisibilité du titre/bouton + léger fondu bas */ .about-map::before { content: ""; position: absolute; inset: 0; z-index: 400; pointer-events: none; background: linear-gradient(180deg, rgba(18, 18, 27, 0.92) 0%, rgba(18, 18, 27, 0.55) 26%, rgba(18, 18, 27, 0.12) 50%, rgba(18, 18, 27, 0.42) 100%); } .about-map__badge { position: absolute; left: 22px; bottom: 22px; z-index: 500; display: flex; align-items: center; gap: 9px; padding: 8px 15px; border-radius: 99px; background: rgba(18, 18, 22, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; font-size: 13px; font-weight: 600; } .about-map__badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #FF2E7E; box-shadow: 0 0 10px 2px rgba(255, 46, 126, 0.85); } /* Marqueur lumineux rose */ .up2-pin__dot { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #FF2E7E; border: 2px solid #fff; box-shadow: 0 0 12px 3px rgba(255, 46, 126, 0.9); } .up2-pin__pulse { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: rgba(255, 46, 126, 0.5); animation: up2PinPulse 1.8s ease-out infinite; } @keyframes up2PinPulse { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(3.6); opacity: 0; } } @media (max-width: 991px) { .section-about-us .col-left { min-height: 460px; } } /* --- Module avis Google (remplace Trustpilot) --- */ .review-box--google { display: flex; flex-direction: column; gap: 26px; } .review-box--google .gr-head { display: flex; align-items: center; gap: 14px; } .review-box--google .gr-logo { width: 34px; height: 34px; flex: none; } .review-box--google .gr-title { font-size: 18px; line-height: 1.2; color: var(--neutral-900, #18181B); } .review-box--google .gr-sub { font-size: 14px; color: var(--neutral-500, #71717A); } .review-box--google .gr-score { display: flex; align-items: center; gap: 20px; } .review-box--google .gr-note { font-weight: 700; font-size: 72px; line-height: 1; letter-spacing: -0.02em; color: var(--neutral-900, #18181B); } .review-box--google .gr-note span { color: var(--neutral-900, #18181B); } .review-box--google .gr-stars { display: flex; gap: 3px; margin-bottom: 6px; } .review-box--google .gr-stars svg { width: 22px; height: 22px; } .review-box--google .gr-count { font-size: 14px; color: var(--neutral-500, #71717A); } .review-box--google .gr-link { display: inline-flex; align-items: center; gap: 8px; width: max-content; font-weight: 600; font-size: 15px; color: var(--brand); text-decoration: none; transition: gap .18s ease; } .review-box--google .gr-link:hover { gap: 12px; } /* --- Header sticky --- */ header.header-sticky { background-color: var(--t-header); transition: background-color .5s ease; } /* --- Grands titres : 1re teinte ROSE (constant) -> secondaire --- */ .text-gradient-2 { background: linear-gradient(120deg, #FF2E7E 0%, var(--t-title-2) 60%, var(--t-title-3) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* --- Footer (refonte UP2TECH — cohérent avec le thème sombre) --- */ footer.up2-footer { position: relative; overflow: hidden; padding-top: 80px; background-color: var(--t-footer); background-image: radial-gradient(120% 90% at 50% -20%, rgba(255, 46, 126, 0.16) 0%, rgba(255, 46, 126, 0) 55%), linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(0, 0, 0, 0.22) 100%); transition: background-color .5s ease; } /* Liseré lumineux rose→violet en haut du footer */ footer.up2-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(255, 46, 126, 0.6) 32%, rgba(139, 63, 232, 0.6) 68%, transparent 100%); } /* Halo doux qui remplace l'ancienne image filigrane (placeholder cassé) */ footer.up2-footer .up2-footer__glow { position: absolute; top: -160px; left: 50%; transform: translateX(-50%); width: min(760px, 90vw); height: 420px; pointer-events: none; background: radial-gradient(50% 50% at 50% 50%, rgba(139, 63, 232, 0.30) 0%, rgba(139, 63, 232, 0) 70%); filter: blur(8px); z-index: 0; } footer.up2-footer .container { position: relative; z-index: 1; } /* Contenu */ footer.up2-footer .footer-logo { color: #fff; letter-spacing: .4px; } footer.up2-footer .footer-content .title { color: #fff; } footer.up2-footer .footer-content .text { color: rgba(255, 255, 255, 0.62); } /* Pills contact — verre dépoli + icône dégradé de marque */ footer.up2-footer .tf-social-1 a { color: #fff; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.7); transition: transform .25s ease, border-color .25s ease, background-color .25s ease; } footer.up2-footer .tf-social-1 a:hover { color: #fff; transform: translateY(-3px); border-color: rgba(255, 46, 126, 0.5); background: rgba(255, 46, 126, 0.09); } footer.up2-footer .tf-social-1 a .social-item { background: radial-gradient(62% 62% at 30% -10%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(135deg, #FF2E7E 0%, #8B3FE8 100%); box-shadow: 0 6px 16px -6px rgba(255, 46, 126, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3); } footer.up2-footer .tf-social-1 a:hover .icon { color: #fff; } /* Barre du bas */ footer.up2-footer .footer-bottom::before { background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.16) 50%, transparent 100%); } footer.up2-footer .footer-bottom .link1, footer.up2-footer .footer-bottom .coppy-rights, footer.up2-footer .footer-bottom .action-go-top { color: rgba(255, 255, 255, 0.68); } footer.up2-footer .footer-bottom .link1:hover, footer.up2-footer .footer-bottom .action-go-top:hover { color: #fff; } footer.up2-footer .footer-bottom .action-go-top:hover .icon { color: var(--brand); } /* --- Accents vert fluo (constants) --- */ .section-about-us .col-left .sub .dot, .br-dot, .up2-ai-search__hint-dot { background-color: var(--brand-lime) !important; box-shadow: 0 0 8px rgba(198, 245, 66, 0.7); } /* ===================================================================== Sélecteur de thème flottant (démo) ===================================================================== */ .up2-theme-switch { position: fixed; left: 20px; bottom: 20px; z-index: 9999; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 999px; background: rgba(20, 16, 32, 0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45); font-family: 'Urbanist', sans-serif; } .up2-theme-switch__label { color: rgba(255, 255, 255, 0.75); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-right: 2px; } .up2-theme-switch__dot { width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; outline: none; } .up2-theme-switch__dot:hover { transform: scale(1.12); } .up2-theme-switch__dot.is-active { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22); transform: scale(1.12); } /* Chaque pastille = ROSE (constant) + la SECONDAIRE du thème */ .up2-theme-switch__dot[data-theme="violet"] { background: linear-gradient(135deg, #FF2E7E 0 48%, #7c4cd2 52% 100%); } .up2-theme-switch__dot[data-theme="cyan"] { background: linear-gradient(135deg, #FF2E7E 0 48%, #2f9fd0 52% 100%); } .up2-theme-switch__dot[data-theme="blue"] { background: linear-gradient(135deg, #FF2E7E 0 48%, #4a53d8 52% 100%); } @media (max-width: 575px) { .up2-theme-switch { left: 12px; bottom: 12px; padding: 8px 10px; gap: 8px; } .up2-theme-switch__label { display: none; } .up2-theme-switch__dot { width: 22px; height: 22px; } }