/* ===================================================================== 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 : dégradé bleu royal vers bleu profond, sans teinte rose --- */ .section-hero .hero-image { background-color: #25317a; background-image: linear-gradient(145deg, #6373ee 0%, #4553c7 32%, #2d3a96 65%, #1b2868 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 (MapLibre + OpenFreeMap, dark mode) --- */ .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.maplibregl-map { position: absolute; inset: 0; width: 100%; height: 100%; background: #14141a; font: inherit; } /* Éclaircit les tuiles (dark_all est très sombre) */ .about-map .maplibregl-canvas { filter: none; } .about-map .maplibregl-ctrl-attrib { z-index: 450; background: rgba(18, 18, 22, 0.64); color: rgba(255, 255, 255, 0.72); font-size: 9px; } .about-map .maplibregl-ctrl-attrib a { color: #fff; } .up2-pin { position: relative; width: 16px; height: 16px; pointer-events: none; } .about-map .maplibregl-ctrl-top-right { top: 18px; right: 18px; z-index: 510; } .about-map .maplibregl-ctrl-group { overflow: hidden; border: 1px solid rgba(255,255,255,.22); border-radius: 11px; background: rgba(18,18,24,.82); box-shadow: 0 8px 22px rgba(0,0,0,.18); } .about-map .maplibregl-ctrl-group button { width: 38px; height: 38px; } .about-map .maplibregl-ctrl-group button + button { border-top-color: rgba(255,255,255,.16); } .about-map .maplibregl-ctrl-icon { filter: invert(1); } .up2-map-city { display: grid; width: 26px; height: 26px; place-items: center; border: 0; border-radius: 50%; cursor: pointer; } .up2-map-city > span { display: block; width: 12px; height: 12px; border: 3px solid #fff; border-radius: 50%; background: #bdfb38; box-shadow: 0 0 0 4px rgba(189,251,56,.2), 0 3px 14px rgba(189,251,56,.65); transition: transform .18s ease, box-shadow .18s ease; } .up2-map-city:hover > span, .up2-map-city:focus-visible > span { transform: scale(1.28); box-shadow: 0 0 0 6px rgba(189,251,56,.2), 0 4px 18px rgba(189,251,56,.8); } .up2-map-city:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .up2-map-city-popup .maplibregl-popup-content { min-width: 190px; padding: 12px 15px; border: 1px solid rgba(41,40,92,.12); border-radius: 12px; background: #fff; color: #29285c; box-shadow: 0 12px 32px rgba(10,10,25,.24); font-size: 12px; line-height: 1.3; text-align: left; } .up2-map-city-popup .maplibregl-popup-content span, .up2-map-city-popup .maplibregl-popup-content strong { display: block; } .up2-map-city-popup .maplibregl-popup-content strong { margin-top: 2px; color: #ff2e7e; font-size: 14px; } .up2-map-city-popup .maplibregl-popup-tip { border-top-color: #fff; } /* 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.38) 0%, rgba(18, 18, 27, 0.16) 28%, rgba(18, 18, 27, 0.02) 56%, rgba(18, 18, 27, 0.08) 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; } .up2-map-city { width: 34px; height: 34px; } .up2-map-city > span { width: 14px; height: 14px; } } /* --- 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); }