/*
Theme Name: Web Generation
Theme URI: https://webgeneration.agency
Author: Web Generation
Author URI: https://webgeneration.agency
Description: Thème WordPress moderne et optimisé SEO 2026 (336 critères) pour Web Generation - Agence Web #1 en Tunisie. Multilingue FR/EN/AR avec SEO Local, Hub Métiers (22 secteurs), et pages dédiées par profession.
Version: 5.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: webgeneration
*/
/* ========== VARIABLES ========== */
:root {
--wg-black: #0a0a0f;
--wg-dark: #12121a;
--wg-darker: #0d0d12;
--wg-white: #ffffff;
--wg-gray-100: #f8f9fa;
--wg-gray-200: #e9ecef;
--wg-gray-400: #ced4da;
--wg-gray-600: #6c757d;
--wg-gray-800: #343a40;
--wg-red: #ff3b3b;
--wg-coral: #ff6b6b;
--wg-gradient: linear-gradient(135deg, #ff3b3b 0%, #ff6b6b 50%, #ff8585 100%);
--wg-gradient-dark: linear-gradient(135deg, #0a0a0f 0%, #12121a 50%, #1a1a2e 100%);
--wg-glow: 0 0 40px rgba(255, 59, 59, 0.4);
--wg-glass: rgba(255, 255, 255, 0.05);
--wg-glass-border: rgba(255, 255, 255, 0.1);
--wg-radius: 20px;
--wg-radius-sm: 12px;
--wg-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ========== RESET & BASE ========== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Screen Reader Only - Accessibilité (O2) */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 16px;
line-height: 1.7;
color: var(--wg-gray-800);
background: var(--wg-white);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; transition: var(--wg-transition); }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul, ol { list-style: none; }
/* ========== MOBILE NAV DEFAULT (HIDDEN ON DESKTOP) ========== */
.wg-mobile-toggle {
display: none;
}
.wg-mobile-nav {
display: none;
}
.wg-mobile-overlay {
display: none;
}
.wg-mobile-close {
display: none;
}
/* ========== TOPBAR ========== */
.wg-topbar {
background: var(--wg-black);
padding: 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.wg-topbar-inner {
display: flex;
justify-content: space-between;
align-items: center;
}
.wg-topbar-left {
display: flex;
gap: 25px;
}
.wg-topbar-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
}
.wg-topbar-item i {
color: var(--wg-coral);
font-size: 12px;
}
.wg-topbar-item a {
color: rgba(255, 255, 255, 0.7);
}
.wg-topbar-item a:hover {
color: var(--wg-white);
}
.wg-badge {
display: flex;
align-items: center;
gap: 8px;
background: rgba(255, 59, 59, 0.15);
color: var(--wg-coral);
padding: 6px 16px;
border-radius: 50px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
/* ========== HEADER ========== */
.wg-header {
background: transparent;
padding: 15px 0;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
transition: var(--wg-transition);
}
.wg-header.scrolled {
background: rgba(18, 18, 26, 0.98);
backdrop-filter: blur(20px);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
.wg-header-inner {
display: flex;
justify-content: space-between;
align-items: center;
}
.wg-logo img {
height: 50px;
width: auto;
filter: brightness(0) invert(1);
}
.wg-nav {
display: flex;
align-items: center;
gap: 40px;
}
.wg-nav-list {
display: flex;
align-items: center;
gap: 5px;
}
.wg-nav-list > li {
position: relative;
}
.wg-nav-link {
display: flex;
align-items: center;
gap: 5px;
padding: 12px 18px;
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
font-weight: 500;
border-radius: 8px;
transition: var(--wg-transition);
}
.wg-nav-link:hover {
color: var(--wg-white);
background: rgba(255, 255, 255, 0.05);
}
/* Dropdown */
.wg-nav-dropdown {
position: relative;
}
.wg-nav-submenu {
position: absolute;
top: 100%; /* Collé au parent */
left: 0;
min-width: 240px;
background: var(--wg-dark);
border: 1px solid var(--wg-glass-border);
border-radius: var(--wg-radius-sm);
padding: 15px 10px 10px 10px; /* Padding-top pour créer l'espace visuel */
margin-top: 0; /* Pas de gap */
opacity: 0;
visibility: hidden;
transform: translateY(5px);
transition: var(--wg-transition);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
z-index: 9999;
}
/* Zone de hover étendue - couvre le lien parent ET le sous-menu */
.wg-nav-dropdown::before {
content: '';
position: absolute;
top: 0;
left: -20px;
right: -20px;
bottom: -10px; /* Étend la zone sous le lien */
background: transparent;
z-index: -1;
}
/* Maintenir le sous-menu visible quand on le survole */
.wg-nav-submenu:hover {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) !important;
}
.wg-nav-dropdown:hover .wg-nav-submenu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.wg-nav-submenu li a {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
border-radius: 8px;
transition: var(--wg-transition);
}
.wg-nav-submenu li a:hover {
background: rgba(255, 59, 59, 0.1);
color: var(--wg-coral);
}
.wg-nav-submenu li a i {
width: 20px;
text-align: center;
color: var(--wg-coral);
}
/* Mega Menu Services - Single Column */
.wg-nav-mega-menu.wg-nav-mega-single {
min-width: 280px !important;
max-width: 320px !important;
width: 320px !important;
display: block !important;
padding: 15px !important;
z-index: 9999;
}
/* Force single column layout for mega menu */
.wg-nav-mega-menu.wg-nav-mega-single .wg-submenu-group {
display: block !important;
width: 100% !important;
float: none !important;
margin-bottom: 10px !important;
}
.wg-nav-mega-menu.wg-nav-mega-single .wg-submenu-group:last-child {
margin-bottom: 0 !important;
}
/* Force single column - override any flex row */
.wg-nav-mega-menu.wg-nav-mega-single > li.wg-submenu-group {
width: 100% !important;
flex: none !important;
display: block !important;
}
/* Submenu group styling */
.wg-nav-mega-menu .wg-submenu-group {
width: 100%;
margin-bottom: 15px;
}
.wg-nav-mega-menu .wg-submenu-group:last-child {
margin-bottom: 0;
}
/* Clickable submenu titles */
.wg-nav-mega-menu a.wg-submenu-title {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--wg-coral) !important;
padding: 10px 12px;
margin-bottom: 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
background: rgba(255, 59, 59, 0.08);
border-radius: 6px;
text-decoration: none;
transition: all 0.3s ease;
}
.wg-nav-mega-menu a.wg-submenu-title:hover {
background: rgba(255, 59, 59, 0.2);
color: var(--wg-white) !important;
transform: translateX(3px);
}
.wg-submenu-group {
flex: 1;
}
.wg-submenu-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--wg-coral);
padding: 8px 12px;
margin-bottom: 8px;
border-bottom: 1px solid var(--wg-glass-border);
}
.wg-submenu-title i {
font-size: 14px;
}
.wg-submenu-items {
list-style: none;
padding: 0;
margin: 0;
}
.wg-submenu-items li a {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
color: rgba(255, 255, 255, 0.8);
font-size: 13px;
border-radius: 6px;
transition: var(--wg-transition);
}
.wg-submenu-items li a:hover {
background: rgba(255, 59, 59, 0.15);
color: var(--wg-white);
transform: translateX(4px);
}
.wg-submenu-items li a i {
width: 18px;
text-align: center;
color: var(--wg-coral);
font-size: 12px;
}
@media (max-width: 992px) {
.wg-nav-mega-menu {
flex-direction: column;
min-width: 280px;
gap: 10px;
}
}
/* Nav Social */
.wg-nav-social {
display: flex;
gap: 5px;
}
.wg-nav-social a {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
color: rgba(255, 255, 255, 0.6);
font-size: 14px;
transition: var(--wg-transition);
}
.wg-nav-social a:hover {
background: var(--wg-gradient);
color: var(--wg-white);
}
/* ========== TYPOGRAPHY ========== */
.wg-title-xl {
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(36px, 5vw, 56px);
font-weight: 700;
line-height: 1.1;
letter-spacing: -1px;
}
.wg-title-lg {
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(28px, 4vw, 42px);
font-weight: 700;
line-height: 1.2;
}
.wg-text-lg {
font-size: 18px;
line-height: 1.8;
color: var(--wg-gray-600);
}
.wg-gradient-text {
background: var(--wg-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ========== ANIMATIONS ========== */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(40px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-20px) rotate(5deg); }
}
@keyframes pulse-glow {
0%, 100% { box-shadow: var(--wg-glow); }
50% { box-shadow: 0 0 60px rgba(255, 59, 59, 0.6); }
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
@keyframes scroll-wheel {
0% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(10px); }
}
.animate-on-scroll {
opacity: 0;
transform: translateY(40px);
transition: var(--wg-transition);
transition-duration: 0.8s;
}
.animate-on-scroll.visible {
opacity: 1;
transform: translateY(0);
}
.animate-fade-in { animation: fadeInUp 1s ease forwards; opacity: 0; }
.delay-1 { animation-delay: 0.1s; transition-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; transition-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; transition-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; transition-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; transition-delay: 0.5s; }
/* ========== LAYOUT ========== */
.wg-container {
max-width: 1300px;
margin: 0 auto;
padding: 0 30px;
}
.wg-section {
padding: 120px 0;
position: relative;
}
.wg-section-dark {
background: var(--wg-gradient-dark);
color: var(--wg-white);
}
.wg-section-header {
text-align: center;
max-width: 700px;
margin: 0 auto 80px;
}
.wg-section-cta {
text-align: center;
margin-top: 60px;
}
/* ========== TAG ========== */
.wg-tag {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 59, 59, 0.1);
color: var(--wg-red);
padding: 10px 20px;
border-radius: 50px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 20px;
}
.wg-section-dark .wg-tag {
background: var(--wg-glass);
color: var(--wg-coral);
}
/* ========== BUTTONS ========== */
.wg-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 18px 36px;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
border-radius: var(--wg-radius-sm);
transition: var(--wg-transition);
position: relative;
overflow: hidden;
}
.wg-btn-glow {
background: var(--wg-gradient);
color: var(--wg-white);
box-shadow: var(--wg-glow);
}
.wg-btn-glow:hover {
transform: translateY(-3px);
box-shadow: 0 0 60px rgba(255, 59, 59, 0.5);
}
.wg-btn-glass {
background: var(--wg-glass);
color: var(--wg-white);
border: 1px solid var(--wg-glass-border);
backdrop-filter: blur(10px);
}
.wg-btn-glass:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
}
.wg-btn-dark {
background: var(--wg-black);
color: var(--wg-white);
}
.wg-btn-dark:hover {
background: var(--wg-gradient);
transform: translateY(-3px);
}
.wg-btn-white {
background: var(--wg-white);
color: var(--wg-black);
}
.wg-btn-white:hover {
background: var(--wg-gray-100);
transform: translateY(-3px);
}
.wg-btn-whatsapp {
background: #25d366;
color: var(--wg-white);
}
.wg-btn-whatsapp:hover {
background: #128c7e;
transform: translateY(-3px);
}
.wg-btn-lg {
padding: 22px 44px;
font-size: 15px;
}
.wg-btn-full {
width: 100%;
}
/* ========== HERO ========== */
.wg-hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
background: var(--wg-black);
}
.wg-hero-video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translate(-50%, -50%);
object-fit: cover;
z-index: 0;
opacity: 0.6;
}
.wg-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(10, 10, 15, 0.3) 0%,
rgba(10, 10, 15, 0.5) 50%,
rgba(10, 10, 15, 0.85) 100%
);
z-index: 1;
}
.wg-hero-content {
position: relative;
z-index: 2;
max-width: 900px;
padding: 40px;
}
.wg-hero-badge {
display: inline-flex;
align-items: center;
gap: 12px;
background: var(--wg-glass);
backdrop-filter: blur(20px);
padding: 12px 28px;
border-radius: 50px;
font-size: 13px;
font-weight: 500;
letter-spacing: 1px;
color: var(--wg-white);
margin-bottom: 30px;
border: 1px solid var(--wg-glass-border);
}
.wg-badge-dot {
width: 8px;
height: 8px;
background: var(--wg-red);
border-radius: 50%;
animation: pulse-glow 2s infinite;
}
.wg-hero-title {
margin-bottom: 20px;
}
.wg-title-line {
display: block;
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(60px, 12vw, 120px);
font-weight: 700;
letter-spacing: -3px;
line-height: 1;
color: var(--wg-white);
}
.wg-hero-slogan {
font-size: clamp(16px, 2.5vw, 22px);
font-weight: 500;
letter-spacing: 6px;
text-transform: uppercase;
color: var(--wg-coral);
margin-bottom: 25px;
}
.wg-hero-desc {
font-size: 17px;
line-height: 1.8;
color: rgba(255, 255, 255, 0.7);
max-width: 600px;
margin: 0 auto 40px;
}
.wg-hero-desc strong {
color: var(--wg-white);
}
.wg-hero-cta {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 40px;
}
.wg-hero-contact {
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
}
.wg-contact-pill {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 24px;
background: var(--wg-glass);
border: 1px solid var(--wg-glass-border);
border-radius: 50px;
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
backdrop-filter: blur(10px);
}
.wg-contact-pill:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--wg-white);
}
.wg-whatsapp-pill {
background: rgba(37, 211, 102, 0.2);
border-color: rgba(37, 211, 102, 0.3);
}
.wg-whatsapp-pill:hover {
background: rgba(37, 211, 102, 0.3);
}
.wg-flag {
font-size: 18px;
}
/* Hero Scroll Indicator */
.wg-hero-scroll {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
color: rgba(255, 255, 255, 0.5);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 3px;
}
.wg-scroll-mouse {
width: 26px;
height: 40px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 20px;
position: relative;
}
.wg-scroll-wheel {
width: 4px;
height: 8px;
background: var(--wg-coral);
border-radius: 2px;
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
animation: scroll-wheel 1.5s infinite;
}
/* Hero Floating Elements */
.wg-hero-float {
position: absolute;
border-radius: 50%;
background: var(--wg-gradient);
opacity: 0.1;
filter: blur(60px);
z-index: 0;
animation: float 8s ease-in-out infinite;
}
.wg-float-1 {
width: 400px;
height: 400px;
top: 10%;
left: -10%;
animation-delay: 0s;
}
.wg-float-2 {
width: 300px;
height: 300px;
bottom: 20%;
right: -5%;
animation-delay: 2s;
}
.wg-float-3 {
width: 200px;
height: 200px;
top: 50%;
right: 20%;
animation-delay: 4s;
}
/* ========== MARQUEE ========== */
.wg-marquee-section {
background: var(--wg-dark);
padding: 25px 0;
overflow: hidden;
border-top: 1px solid var(--wg-glass-border);
border-bottom: 1px solid var(--wg-glass-border);
}
.wg-marquee {
display: flex;
overflow: hidden;
}
.wg-marquee-content {
display: flex;
align-items: center;
gap: 40px;
animation: marquee 30s linear infinite;
white-space: nowrap;
}
.wg-marquee-item {
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 3px;
color: rgba(255, 255, 255, 0.4);
}
.wg-marquee-separator {
color: var(--wg-coral);
font-size: 10px;
}
/* ========== BENTO GRID SERVICES ========== */
.wg-bento-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px;
}
.wg-bento-card {
position: relative;
background: var(--wg-glass);
border: 1px solid var(--wg-glass-border);
border-radius: var(--wg-radius);
overflow: hidden;
transition: var(--wg-transition);
display: flex;
flex-direction: column;
}
.wg-bento-card:hover {
transform: translateY(-8px);
border-color: rgba(255, 59, 59, 0.3);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
}
.wg-bento-large {
grid-column: span 1;
}
.wg-bento-image {
height: 220px;
overflow: hidden;
position: relative;
background: var(--wg-darker);
}
.wg-bento-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--wg-transition);
}
.wg-bento-card:hover .wg-bento-image img {
transform: scale(1.1);
}
.wg-bento-content {
padding: 30px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.wg-bento-number {
font-family: 'Space Grotesk', sans-serif;
font-size: 12px;
font-weight: 700;
color: var(--wg-coral);
margin-bottom: 10px;
}
.wg-bento-title {
font-family: 'Space Grotesk', sans-serif;
font-size: 22px;
font-weight: 700;
margin-bottom: 12px;
color: var(--wg-white);
}
.wg-bento-desc {
font-size: 14px;
line-height: 1.7;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 20px;
flex-grow: 1;
}
.wg-bento-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 20px;
}
.wg-bento-tags span {
padding: 6px 14px;
background: rgba(255, 59, 59, 0.1);
border-radius: 50px;
font-size: 11px;
font-weight: 500;
color: var(--wg-coral);
}
.wg-bento-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
color: var(--wg-coral);
text-transform: uppercase;
letter-spacing: 1px;
}
.wg-bento-link i {
transition: var(--wg-transition);
}
.wg-bento-card:hover .wg-bento-link i {
transform: translateX(5px);
}
/* ========== STATS ========== */
.wg-stats-section {
background: var(--wg-gradient);
padding: 80px 0;
position: relative;
overflow: hidden;
}
.wg-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
}
.wg-stat-card {
text-align: center;
color: var(--wg-white);
}
.wg-stat-icon {
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.2);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 24px;
}
.wg-stat-number {
font-family: 'Space Grotesk', sans-serif;
font-size: 56px;
font-weight: 700;
line-height: 1;
margin-bottom: 10px;
}
.wg-stat-number::after {
content: '+';
font-size: 40px;
}
.wg-stat-card:last-child .wg-stat-number::after {
content: '';
}
.wg-stat-label {
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
opacity: 0.8;
}
/* ========== ABOUT ========== */
.wg-about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.wg-about-content p {
margin-bottom: 20px;
}
.wg-features-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin: 30px 0;
}
.wg-feature-item {
display: flex;
align-items: center;
gap: 12px;
}
.wg-feature-icon {
width: 28px;
height: 28px;
background: rgba(255, 59, 59, 0.1);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: var(--wg-red);
font-size: 12px;
}
.wg-feature-item span {
font-size: 14px;
font-weight: 500;
}
.wg-about-visual {
display: flex;
flex-direction: column;
gap: 20px;
}
.wg-about-card {
background: var(--wg-white);
border-radius: var(--wg-radius);
padding: 25px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
transition: var(--wg-transition);
}
.wg-about-card:hover {
transform: translateY(-5px);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
}
.wg-about-card-icon {
width: 50px;
height: 50px;
background: var(--wg-gradient);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
color: var(--wg-white);
font-size: 20px;
margin-bottom: 15px;
}
.wg-about-card h4 {
font-size: 16px;
font-weight: 600;
margin-bottom: 8px;
}
.wg-about-card p {
font-size: 13px;
color: var(--wg-gray-600);
margin: 0;
}
.wg-about-card-1,
.wg-about-card-2,
.wg-about-card-3 {
width: 100%;
}
/* ========== PORTFOLIO ========== */
.wg-portfolio-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
}
.wg-portfolio-card {
position: relative;
border-radius: var(--wg-radius);
overflow: hidden;
background: var(--wg-glass);
border: 1px solid var(--wg-glass-border);
transition: var(--wg-transition);
}
.wg-portfolio-card:hover {
transform: translateY(-8px);
border-color: rgba(255, 59, 59, 0.3);
}
.wg-portfolio-image {
height: 220px;
overflow: hidden;
background: var(--wg-darker);
}
.wg-portfolio-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--wg-transition);
}
.wg-portfolio-card:hover .wg-portfolio-image img {
transform: scale(1.1);
}
.wg-portfolio-info {
padding: 25px;
}
.wg-portfolio-country {
font-size: 20px;
margin-right: 10px;
}
.wg-portfolio-type {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--wg-coral);
}
.wg-portfolio-title {
font-size: 18px;
font-weight: 600;
color: var(--wg-white);
margin: 10px 0 5px;
}
.wg-portfolio-url {
font-size: 13px;
color: rgba(255, 255, 255, 0.5);
}
.wg-portfolio-hover {
position: absolute;
inset: 0;
background: rgba(255, 59, 59, 0.9);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: var(--wg-transition);
}
.wg-portfolio-hover span {
color: var(--wg-white);
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
}
.wg-portfolio-card:hover .wg-portfolio-hover {
opacity: 1;
}
/* ========== TESTIMONIALS ========== */
.wg-testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.wg-testimonial-card {
background: var(--wg-gray-100);
border-radius: var(--wg-radius);
padding: 35px;
transition: var(--wg-transition);
}
.wg-testimonial-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}
.wg-testimonial-featured {
background: var(--wg-gradient);
color: var(--wg-white);
}
.wg-testimonial-stars {
color: #ffc107;
font-size: 16px;
margin-bottom: 20px;
letter-spacing: 3px;
}
.wg-testimonial-featured .wg-testimonial-stars {
color: var(--wg-white);
}
.wg-testimonial-text {
font-size: 15px;
line-height: 1.8;
margin-bottom: 25px;
font-style: italic;
}
.wg-testimonial-author {
display: flex;
align-items: center;
gap: 15px;
}
.wg-testimonial-avatar {
width: 50px;
height: 50px;
background: var(--wg-gradient);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 14px;
color: var(--wg-white);
}
.wg-testimonial-featured .wg-testimonial-avatar {
background: rgba(255, 255, 255, 0.2);
}
.wg-testimonial-author strong {
display: block;
font-size: 15px;
margin-bottom: 3px;
}
.wg-testimonial-author span {
font-size: 13px;
color: var(--wg-gray-600);
}
.wg-testimonial-featured .wg-testimonial-author span {
color: rgba(255, 255, 255, 0.8);
}
/* ========== CTA SECTION ========== */
.wg-cta-section {
position: relative;
padding: 120px 0;
background: linear-gradient(135deg, #ff3b3b 0%, #ff6b6b 50%, #ff8585 100%);
overflow: hidden;
}
.wg-cta-bg {
position: absolute;
inset: 0;
background: url('data:image/svg+xml,');
background-size: 100px 100px;
opacity: 0.5;
}
.wg-cta-content {
position: relative;
text-align: center;
color: var(--wg-white);
}
.wg-cta-content .wg-title-xl {
margin-bottom: 20px;
color: var(--wg-white);
}
.wg-cta-content .wg-title-xl .wg-gradient-text {
background: linear-gradient(135deg, #ffffff 0%, #feca57 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.wg-cta-content .wg-text-lg {
color: rgba(255, 255, 255, 0.9);
margin-bottom: 40px;
}
.wg-cta-buttons {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
/* ========== CONTACT ========== */
.wg-contact-section {
position: relative;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.wg-contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
}
.wg-contact-cards {
display: flex;
flex-direction: column;
gap: 15px;
margin-top: 30px;
}
.wg-contact-card {
display: flex;
align-items: center;
gap: 20px;
padding: 20px 25px;
background: var(--wg-glass);
border: 1px solid var(--wg-glass-border);
border-radius: var(--wg-radius-sm);
transition: var(--wg-transition);
}
.wg-contact-card:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateX(10px);
}
.wg-contact-card-icon {
width: 50px;
height: 50px;
background: var(--wg-gradient);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: var(--wg-white);
}
.wg-contact-whatsapp .wg-contact-card-icon {
background: #25d366;
}
.wg-contact-card strong {
display: block;
font-size: 14px;
margin-bottom: 3px;
}
.wg-contact-card span {
font-size: 13px;
color: rgba(255, 255, 255, 0.6);
}
/* ========== FORM ========== */
.wg-form {
background: var(--wg-glass);
border: 1px solid var(--wg-glass-border);
border-radius: var(--wg-radius);
padding: 40px;
}
.wg-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.wg-form-group {
margin-bottom: 15px;
}
.wg-form input,
.wg-form select,
.wg-form textarea {
width: 100%;
padding: 18px 20px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--wg-glass-border);
border-radius: var(--wg-radius-sm);
color: var(--wg-white);
font-size: 14px;
font-family: inherit;
transition: var(--wg-transition);
}
.wg-form input::placeholder,
.wg-form textarea::placeholder {
color: rgba(255, 255, 255, 0.4);
}
.wg-form input:focus,
.wg-form select:focus,
.wg-form textarea:focus {
outline: none;
border-color: var(--wg-coral);
background: rgba(255, 255, 255, 0.08);
}
.wg-form select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 20px center;
cursor: pointer;
}
.wg-form select option {
background: var(--wg-dark);
color: var(--wg-white);
}
.wg-form textarea {
resize: vertical;
min-height: 120px;
}
/* ========== FOOTER ========== */
.wg-footer {
background: var(--wg-black);
color: var(--wg-white);
padding-top: 80px;
}
.wg-footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1.2fr 1.2fr;
gap: 24px;
padding-bottom: 60px;
border-bottom: 1px solid var(--wg-glass-border);
}
.wg-footer-col .wg-footer-links a,
.wg-footer-col .wg-footer-title {
font-size: 13px;
}
.wg-footer-col .wg-footer-title {
font-size: 15px;
}
.wg-footer-links-metiers {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px 12px;
}
.wg-footer-brand p {
color: rgba(255, 255, 255, 0.6);
font-size: 14px;
line-height: 1.8;
margin: 20px 0;
}
.wg-footer-social {
display: flex;
gap: 10px;
}
.wg-footer-social a {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
background: var(--wg-glass);
border: 1px solid var(--wg-glass-border);
border-radius: 12px;
color: rgba(255, 255, 255, 0.7);
font-size: 16px;
transition: var(--wg-transition);
}
.wg-footer-social a:hover {
background: var(--wg-gradient);
border-color: transparent;
color: var(--wg-white);
}
.wg-footer-title {
font-family: 'Space Grotesk', sans-serif;
font-size: 16px;
font-weight: 600;
margin-bottom: 25px;
color: var(--wg-white);
}
.wg-footer-links {
display: flex;
flex-direction: column;
gap: 12px;
}
.wg-footer-links a {
color: rgba(255, 255, 255, 0.6);
font-size: 14px;
transition: var(--wg-transition);
}
.wg-footer-links a:hover {
color: var(--wg-coral);
padding-left: 5px;
}
.wg-footer-contact-item {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 15px;
color: rgba(255, 255, 255, 0.6);
font-size: 14px;
}
.wg-footer-contact-item i {
color: var(--wg-coral);
width: 20px;
}
.wg-footer-contact-item a {
color: rgba(255, 255, 255, 0.6);
}
.wg-footer-contact-item a:hover {
color: var(--wg-white);
}
.wg-footer-bottom {
padding: 25px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.wg-footer-copyright {
color: rgba(255, 255, 255, 0.5);
font-size: 13px;
}
.wg-footer-copyright a {
color: var(--wg-coral);
}
/* ========== RESPONSIVE ========== */
@media (max-width: 1200px) {
.wg-bento-grid {
grid-template-columns: 1fr 1fr;
}
.wg-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.wg-portfolio-grid {
grid-template-columns: repeat(2, 1fr);
}
.wg-footer-grid {
grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr 1fr 1fr;
gap: 16px;
}
.wg-footer-col .wg-footer-links a { font-size: 12px; }
.wg-footer-col .wg-footer-title { font-size: 14px; }
.wg-footer-brand p { font-size: 12px; }
}
@media (max-width: 1200px) {
.wg-footer-grid {
grid-template-columns: repeat(4, 1fr);
gap: 25px;
}
.wg-footer-brand {
grid-column: 1 / -1;
}
}
@media (max-width: 900px) {
.wg-footer-grid {
grid-template-columns: repeat(3, 1fr);
gap: 25px;
}
.wg-footer-brand {
grid-column: 1 / -1;
}
}
@media (max-width: 992px) {
.wg-topbar {
display: none;
}
.wg-nav {
display: none;
}
.wg-mobile-toggle {
display: flex !important;
flex-direction: column;
gap: 5px;
cursor: pointer;
padding: 10px;
}
.wg-mobile-toggle span {
width: 25px;
height: 2px;
background: var(--wg-white);
transition: var(--wg-transition);
}
.wg-mobile-nav {
display: block !important;
position: fixed;
top: 0;
right: -100%;
width: 80%;
max-width: 320px;
height: 100vh;
background: var(--wg-dark);
padding: 30px;
transition: var(--wg-transition);
z-index: 9999;
overflow-y: auto;
}
.wg-mobile-nav.active {
right: 0;
}
.wg-mobile-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 25px;
margin-bottom: 25px;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.wg-mobile-logo img {
height: 40px;
width: auto;
}
.wg-mobile-nav-list {
list-style: none;
}
.wg-mobile-nav-list li a {
display: block;
padding: 15px 0;
color: var(--wg-white);
font-size: 16px;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.wg-mobile-close {
display: flex !important;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: rgba(255,255,255,0.1);
border-radius: 10px;
font-size: 20px;
color: var(--wg-white);
cursor: pointer;
border: none;
transition: var(--wg-transition);
}
.wg-mobile-close:hover {
background: rgba(255,107,107,0.3);
}
.wg-mobile-overlay {
display: block !important;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
opacity: 0;
visibility: hidden;
transition: var(--wg-transition);
z-index: 9998;
}
.wg-mobile-overlay.active {
opacity: 1;
visibility: visible;
}
.wg-about-grid,
.wg-contact-grid {
grid-template-columns: 1fr;
gap: 50px;
}
.wg-about-visual {
height: 400px;
}
.wg-testimonials-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.wg-section {
padding: 80px 0;
}
.wg-bento-grid {
grid-template-columns: 1fr;
}
.wg-stats-grid {
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.wg-stat-number {
font-size: 42px;
}
.wg-portfolio-grid {
grid-template-columns: 1fr;
}
.wg-hero-cta {
flex-direction: column;
align-items: center;
}
.wg-hero-contact {
flex-direction: column;
}
.wg-cta-buttons {
flex-direction: column;
align-items: center;
}
.wg-form-row {
grid-template-columns: 1fr;
}
.wg-features-list {
grid-template-columns: 1fr;
}
.wg-about-visual {
display: none;
}
.wg-footer-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.wg-footer-brand,
.wg-footer-col {
text-align: center;
}
.wg-footer-brand {
display: flex;
flex-direction: column;
align-items: center;
}
.wg-footer-social {
justify-content: center;
}
.wg-footer-links {
display: flex;
flex-direction: column;
align-items: center;
}
.wg-footer-links-metiers {
justify-items: center;
}
.wg-footer-address {
display: flex;
flex-direction: column;
align-items: center;
}
.wg-footer-bottom {
flex-direction: column;
gap: 15px;
text-align: center;
}
}
/* Mobile toggle hidden on desktop */
.wg-mobile-toggle {
display: none;
}
/* Hero responsive */
@media (max-width: 576px) {
.wg-hero-title {
font-size: 48px;
}
.wg-hero-slogan {
font-size: 14px;
}
.wg-hero-desc {
font-size: 14px;
}
.wg-title-xl {
font-size: 32px;
}
.wg-title-lg {
font-size: 28px;
}
.wg-section {
padding: 60px 0;
}
.wg-stats-grid {
grid-template-columns: 1fr;
}
.wg-stat-number {
font-size: 36px;
}
.wg-btn {
padding: 14px 24px;
font-size: 13px;
}
}
/* ========== SERVICE PAGES ========== */
.wg-service-hero {
padding: 150px 0 100px;
background: linear-gradient(135deg, rgba(10, 10, 15, 0.95) 0%, rgba(26, 26, 46, 0.95) 100%), url('assets/images/hero-bg-new.png');
background-size: cover;
background-position: center;
text-align: center;
position: relative;
}
.wg-service-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(ellipse at center, rgba(255, 59, 59, 0.1) 0%, transparent 70%);
pointer-events: none;
}
.wg-service-hero-content {
max-width: 800px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.wg-service-hero-content h1 {
color: var(--wg-white);
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}
.wg-service-hero-content p {
color: rgba(255, 255, 255, 0.9);
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}
.wg-service-hero-cta {
display: flex;
gap: 20px;
justify-content: center;
margin-top: 40px;
}
/* Services Grid */
.wg-services-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
.wg-service-card {
background: var(--wg-glass);
border: 1px solid var(--wg-glass-border);
border-radius: var(--wg-radius);
padding: 40px 30px;
transition: var(--wg-transition);
}
.wg-service-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}
.wg-service-card-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--wg-coral) 0%, #ff8585 100%);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
color: var(--wg-white);
margin-bottom: 25px;
}
.wg-service-card h3 {
font-size: 22px;
margin-bottom: 15px;
color: var(--wg-white);
}
.wg-service-card p {
color: rgba(255, 255, 255, 0.7);
margin-bottom: 20px;
line-height: 1.6;
}
.wg-service-features {
list-style: none;
}
.wg-service-features li {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
}
.wg-service-features li i {
color: #4ade80;
font-size: 12px;
}
/* Process Grid */
.wg-process-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
.wg-process-step {
text-align: center;
padding: 40px 20px;
}
.wg-process-number {
font-size: 48px;
font-weight: 800;
color: var(--wg-coral);
margin-bottom: 20px;
font-family: var(--wg-font-heading);
}
.wg-process-step h3 {
font-size: 20px;
margin-bottom: 15px;
color: var(--wg-white);
}
.wg-process-step p {
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
line-height: 1.6;
}
/* Pricing Grid */
.wg-pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.wg-pricing-card {
background: var(--wg-glass);
border: 1px solid var(--wg-glass-border);
border-radius: var(--wg-radius);
padding: 40px 30px;
text-align: center;
position: relative;
transition: var(--wg-transition);
}
.wg-pricing-card:hover {
transform: translateY(-10px);
}
.wg-pricing-featured {
border-color: var(--wg-coral);
transform: scale(1.05);
}
.wg-pricing-featured:hover {
transform: scale(1.05) translateY(-10px);
}
.wg-pricing-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--wg-coral);
color: var(--wg-white);
padding: 6px 20px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
}
.wg-pricing-card h3 {
font-size: 24px;
margin-bottom: 20px;
color: var(--wg-white);
}
.wg-pricing-price {
font-size: 16px;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 30px;
}
.wg-pricing-price strong {
font-size: 32px;
color: var(--wg-coral);
display: block;
margin-top: 5px;
}
.wg-pricing-features {
list-style: none;
margin-bottom: 30px;
}
.wg-pricing-features li {
padding: 12px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
}
.wg-pricing-features li i {
color: #4ade80;
margin-right: 10px;
}
/* FAQ Grid */
.wg-faq-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.wg-faq-item {
background: var(--wg-glass);
border: 1px solid var(--wg-glass-border);
border-radius: var(--wg-radius);
padding: 30px;
}
.wg-faq-item h3 {
font-size: 18px;
margin-bottom: 15px;
color: var(--wg-white);
}
.wg-faq-item p {
color: rgba(255, 255, 255, 0.7);
line-height: 1.7;
font-size: 14px;
}
/* Tech Grid */
.wg-tech-grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 20px;
}
.wg-tech-item {
background: var(--wg-glass);
border: 1px solid var(--wg-glass-border);
border-radius: var(--wg-radius-sm);
padding: 30px 20px;
text-align: center;
transition: var(--wg-transition);
}
.wg-tech-item:hover {
transform: translateY(-5px);
border-color: var(--wg-coral);
}
.wg-tech-item i {
font-size: 36px;
color: var(--wg-coral);
margin-bottom: 15px;
display: block;
}
.wg-tech-item span {
color: var(--wg-white);
font-size: 14px;
font-weight: 500;
}
/* Features Grid */
.wg-features-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
.wg-feature-item {
text-align: center;
padding: 40px 20px;
}
.wg-feature-item i {
font-size: 48px;
color: var(--wg-coral);
margin-bottom: 20px;
}
.wg-feature-item h3 {
font-size: 18px;
margin-bottom: 10px;
color: var(--wg-white);
}
.wg-feature-item p {
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
}
/* Button Variants */
.wg-btn-white {
background: var(--wg-white);
color: var(--wg-dark);
}
.wg-btn-white:hover {
background: rgba(255, 255, 255, 0.9);
}
.wg-btn-whatsapp {
background: #25d366;
color: var(--wg-white);
}
.wg-btn-whatsapp:hover {
background: #20bd5a;
}
/* Service Pages Responsive */
@media (max-width: 1200px) {
.wg-services-grid {
grid-template-columns: repeat(2, 1fr);
}
.wg-process-grid {
grid-template-columns: repeat(2, 1fr);
}
.wg-tech-grid {
grid-template-columns: repeat(4, 1fr);
}
.wg-features-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.wg-service-hero {
padding: 120px 0 80px;
}
.wg-service-hero-cta {
flex-direction: column;
align-items: center;
}
.wg-services-grid,
.wg-process-grid,
.wg-pricing-grid,
.wg-faq-grid,
.wg-features-grid {
grid-template-columns: 1fr;
}
.wg-tech-grid {
grid-template-columns: repeat(2, 1fr);
}
.wg-pricing-featured {
transform: scale(1);
}
.wg-pricing-featured:hover {
transform: translateY(-10px);
}
}
/* ========== SERVICE PAGES - UNIQUE DESIGNS ========== */
/* Service Hero Grid Layout */
.wg-service-hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
text-align: left;
}
.wg-service-hero-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
z-index: 0;
}
.wg-service-hero-bg .wg-hero-video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translate(-50%, -50%);
object-fit: cover;
z-index: 0;
}
.wg-service-hero-bg .wg-hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(10, 10, 15, 0.75) 0%, rgba(26, 26, 46, 0.70) 100%);
z-index: 1;
}
.wg-service-hero-content {
position: relative;
z-index: 2;
max-width: none;
margin: 0;
}
.wg-service-hero-visual {
position: relative;
z-index: 2;
}
/* Hero Stats */
.wg-hero-stats {
display: flex;
gap: 40px;
margin: 30px 0;
}
.wg-hero-stat {
text-align: center;
}
.wg-stat-num {
display: block;
font-size: 36px;
font-weight: 800;
color: var(--wg-coral);
font-family: 'Space Grotesk', sans-serif;
line-height: 1;
}
.wg-stat-label {
display: block;
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
text-transform: uppercase;
letter-spacing: 1px;
margin-top: 5px;
}
/* Mockup Stack - Creation Site Web */
.wg-mockup-stack {
position: relative;
height: 400px;
}
.wg-mockup {
position: absolute;
background: #1a1a2e;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.wg-mockup-desktop {
animation: mockupFloat 3s ease-in-out infinite;
}
.wg-mockup-phone {
animation: mockupFloat 3s ease-in-out infinite 0.5s;
}
@keyframes mockupFloat {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-15px);
}
}
.wg-mockup-desktop {
width: 100%;
height: 280px;
top: 0;
left: 0;
}
.wg-mockup-bar {
display: flex;
gap: 6px;
padding: 10px 15px;
background: #0d0d12;
}
.wg-dot {
width: 10px;
height: 10px;
border-radius: 50%;
}
.wg-dot.red { background: #ff5f56; }
.wg-dot.yellow { background: #ffbd2e; }
.wg-dot.green { background: #27c93f; }
.wg-mockup-screen {
padding: 15px;
height: calc(100% - 30px);
}
.wg-mockup-header {
height: 20px;
background: linear-gradient(90deg, var(--wg-coral) 0%, #ff8585 100%);
border-radius: 4px;
margin-bottom: 15px;
}
.wg-mockup-hero {
height: 80px;
background: linear-gradient(135deg, #2a2a4a 0%, #1a1a2e 100%);
border-radius: 8px;
margin-bottom: 15px;
}
.wg-mockup-cards {
display: flex;
gap: 10px;
}
.wg-mockup-card {
flex: 1;
height: 60px;
background: rgba(255, 255, 255, 0.05);
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.wg-mockup-phone {
width: 120px;
height: 220px;
bottom: 0;
right: 20px;
border-radius: 20px;
border: 3px solid #2a2a4a;
}
.wg-mockup-phone .wg-mockup-screen {
padding: 10px;
}
.wg-mockup-content {
height: 100%;
background: linear-gradient(180deg, var(--wg-coral) 0%, #ff8585 30%, #2a2a4a 30%);
border-radius: 4px;
}
/* SEO Chart Visual */
.wg-seo-chart {
background: #1a1a2e;
border-radius: 20px;
padding: 30px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.wg-chart-header {
display: flex;
justify-content: space-between;
margin-bottom: 30px;
}
.wg-chart-title {
color: var(--wg-white);
font-weight: 600;
font-size: 16px;
}
.wg-chart-period {
color: rgba(255, 255, 255, 0.5);
font-size: 13px;
}
.wg-chart-graph {
display: flex;
align-items: flex-end;
gap: 15px;
height: 200px;
padding-bottom: 30px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.wg-chart-bar {
flex: 1;
background: linear-gradient(180deg, var(--wg-coral) 0%, rgba(255, 107, 107, 0.3) 100%);
border-radius: 8px 8px 0 0;
position: relative;
transition: all 0.3s ease;
animation: barGrow 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
transform-origin: bottom;
opacity: 0;
}
.wg-chart-bar:nth-child(1) { animation-delay: 0.5s; }
.wg-chart-bar:nth-child(2) { animation-delay: 1.2s; }
.wg-chart-bar:nth-child(3) { animation-delay: 1.9s; }
.wg-chart-bar:nth-child(4) { animation-delay: 2.6s; }
.wg-chart-bar:nth-child(5) { animation-delay: 3.3s; }
.wg-chart-bar:nth-child(6) { animation-delay: 4s; }
@keyframes barGrow {
0% {
transform: scaleY(0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: scaleY(1);
opacity: 1;
}
}
.wg-chart-bar:hover {
background: linear-gradient(180deg, var(--wg-red) 0%, var(--wg-coral) 100%);
}
.wg-chart-bar span {
position: absolute;
bottom: -25px;
left: 50%;
transform: translateX(-50%);
font-size: 11px;
color: rgba(255, 255, 255, 0.5);
}
.wg-bar-highlight {
background: linear-gradient(180deg, var(--wg-red) 0%, var(--wg-coral) 100%);
box-shadow: 0 0 20px rgba(255, 59, 59, 0.4);
}
.wg-chart-stats {
display: flex;
gap: 30px;
margin-top: 20px;
}
.wg-chart-stat {
display: flex;
align-items: center;
gap: 8px;
color: #4ade80;
font-size: 14px;
font-weight: 500;
}
.wg-chart-stat i {
font-size: 12px;
}
/* Google Ads Dashboard Visual */
.wg-ads-dashboard {
background: #1a1a2e;
border-radius: 20px;
padding: 25px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.wg-dashboard-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.wg-dashboard-title {
color: var(--wg-white);
font-weight: 600;
font-size: 16px;
}
.wg-dashboard-badge {
background: #4ade80;
color: #0a0a0f;
padding: 4px 12px;
border-radius: 20px;
font-size: 11px;
font-weight: 600;
}
.wg-dashboard-metrics {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin-bottom: 20px;
}
.wg-metric-card {
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 20px;
text-align: center;
animation: metricPop 0.6s ease-out forwards;
opacity: 0;
}
.wg-metric-card:nth-child(1) { animation-delay: 0.2s; }
.wg-metric-card:nth-child(2) { animation-delay: 0.4s; }
.wg-metric-card:nth-child(3) { animation-delay: 0.6s; }
.wg-metric-card:nth-child(4) { animation-delay: 0.8s; }
@keyframes metricPop {
0% {
transform: scale(0.8);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.wg-metric-value {
font-size: 28px;
font-weight: 700;
color: var(--wg-coral);
font-family: 'Space Grotesk', sans-serif;
}
.wg-metric-label {
font-size: 12px;
color: rgba(255, 255, 255, 0.6);
margin-top: 5px;
}
.wg-metric-change {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
color: #4ade80;
margin-top: 8px;
}
.wg-dashboard-chart {
height: 80px;
background: linear-gradient(180deg, rgba(255, 107, 107, 0.2) 0%, transparent 100%);
border-radius: 8px;
position: relative;
overflow: hidden;
}
.wg-dashboard-chart::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: var(--wg-coral);
}
/* Apps Interface Visual */
.wg-apps-interface {
background: #1a1a2e;
border-radius: 20px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.wg-apps-sidebar {
width: 60px;
background: #0d0d12;
padding: 15px 10px;
display: flex;
flex-direction: column;
gap: 15px;
float: left;
height: 350px;
}
.wg-apps-icon {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.5);
font-size: 16px;
transition: all 0.3s ease;
animation: iconPulse 2s ease-in-out infinite;
}
.wg-apps-icon:nth-child(1) { animation-delay: 0s; }
.wg-apps-icon:nth-child(2) { animation-delay: 0.2s; }
.wg-apps-icon:nth-child(3) { animation-delay: 0.4s; }
.wg-apps-icon:nth-child(4) { animation-delay: 0.6s; }
.wg-apps-icon:nth-child(5) { animation-delay: 0.8s; }
@keyframes iconPulse {
0%, 100% {
opacity: 0.5;
}
50% {
opacity: 1;
}
}
.wg-apps-icon.active {
background: var(--wg-coral);
color: var(--wg-white);
}
.wg-apps-main {
margin-left: 60px;
padding: 20px;
}
.wg-apps-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.wg-apps-title {
color: var(--wg-white);
font-size: 18px;
font-weight: 600;
}
.wg-apps-search {
background: rgba(255, 255, 255, 0.05);
border: none;
border-radius: 8px;
padding: 8px 15px;
color: var(--wg-white);
font-size: 13px;
width: 200px;
}
.wg-apps-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}
.wg-app-card {
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 20px;
text-align: center;
animation: cardSlideIn 0.8s ease-out forwards;
opacity: 0;
}
.wg-app-card:nth-child(1) { animation-delay: 0.1s; }
.wg-app-card:nth-child(2) { animation-delay: 0.2s; }
.wg-app-card:nth-child(3) { animation-delay: 0.3s; }
.wg-app-card:nth-child(4) { animation-delay: 0.4s; }
.wg-app-card:nth-child(5) { animation-delay: 0.5s; }
.wg-app-card:nth-child(6) { animation-delay: 0.6s; }
@keyframes cardSlideIn {
0% {
transform: translateY(20px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
.wg-app-card-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--wg-coral) 0%, #ff8585 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 12px;
font-size: 20px;
color: var(--wg-white);
}
.wg-app-card h4 {
color: var(--wg-white);
font-size: 14px;
margin-bottom: 5px;
}
.wg-app-card span {
color: rgba(255, 255, 255, 0.5);
font-size: 11px;
}
/* Section Light Background */
.wg-section-light {
background: var(--wg-gray-100);
}
.wg-section-light .wg-section-header h2,
.wg-section-light .wg-section-header .wg-title-lg {
color: var(--wg-dark);
}
.wg-section-light .wg-section-desc {
color: var(--wg-gray-600);
}
.wg-section-desc {
font-size: 18px;
max-width: 600px;
margin: 0 auto;
line-height: 1.7;
}
/* Types Grid - Creation Site Web */
.wg-types-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 25px;
}
.wg-type-card {
background: var(--wg-white);
border-radius: var(--wg-radius);
padding: 35px 25px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
transition: var(--wg-transition);
position: relative;
border: 2px solid transparent;
}
.wg-type-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}
.wg-type-featured {
border-color: var(--wg-coral);
transform: scale(1.02);
}
.wg-type-featured:hover {
transform: scale(1.02) translateY(-10px);
}
.wg-type-badge {
position: absolute;
top: -12px;
right: 20px;
background: var(--wg-coral);
color: var(--wg-white);
padding: 5px 15px;
border-radius: 20px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
}
.wg-type-icon {
width: 70px;
height: 70px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
margin-bottom: 20px;
}
.wg-icon-blue {
background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
color: var(--wg-white);
}
.wg-icon-red {
background: linear-gradient(135deg, var(--wg-red) 0%, var(--wg-coral) 100%);
color: var(--wg-white);
}
.wg-icon-purple {
background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
color: var(--wg-white);
}
.wg-icon-green {
background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
color: var(--wg-white);
}
.wg-type-title {
font-size: 20px;
font-weight: 700;
color: var(--wg-dark);
margin-bottom: 12px;
}
.wg-type-desc {
color: var(--wg-gray-600);
font-size: 14px;
line-height: 1.6;
margin-bottom: 20px;
}
.wg-type-features {
list-style: none;
margin-bottom: 20px;
}
.wg-type-features li {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
font-size: 13px;
color: var(--wg-gray-800);
}
.wg-type-features li i {
color: #10b981;
font-size: 11px;
}
.wg-type-price {
font-size: 14px;
color: var(--wg-gray-600);
padding-top: 15px;
border-top: 1px solid var(--wg-gray-200);
}
.wg-type-price strong {
color: var(--wg-coral);
font-size: 20px;
}
/* Process Timeline */
.wg-process-timeline {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
position: relative;
}
.wg-process-timeline::before {
content: '';
position: absolute;
top: 40px;
left: 10%;
right: 10%;
height: 2px;
background: linear-gradient(90deg, transparent, var(--wg-coral), transparent);
opacity: 0.3;
}
.wg-step-number {
font-size: 60px;
font-weight: 800;
color: var(--wg-coral);
opacity: 0.3;
font-family: 'Space Grotesk', sans-serif;
line-height: 1;
margin-bottom: 15px;
}
.wg-step-content {
background: rgba(255, 255, 255, 0.05);
border-radius: var(--wg-radius);
padding: 30px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.wg-step-icon {
width: 50px;
height: 50px;
background: var(--wg-coral);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: var(--wg-white);
margin-bottom: 15px;
}
.wg-step-title {
font-size: 18px;
font-weight: 600;
color: var(--wg-white);
margin-bottom: 10px;
}
.wg-step-desc {
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
line-height: 1.6;
}
/* Tech Grid Light */
.wg-section-light .wg-tech-grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 20px;
}
.wg-section-light .wg-tech-item {
background: var(--wg-white);
border: 1px solid var(--wg-gray-200);
border-radius: var(--wg-radius-sm);
padding: 25px 15px;
text-align: center;
transition: var(--wg-transition);
}
.wg-section-light .wg-tech-item:hover {
transform: translateY(-5px);
border-color: var(--wg-coral);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.wg-section-light .wg-tech-item i {
font-size: 32px;
color: var(--wg-coral);
margin-bottom: 10px;
display: block;
}
.wg-section-light .wg-tech-item span {
color: var(--wg-dark);
font-size: 13px;
font-weight: 500;
}
/* Portfolio Grid */
.wg-portfolio-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
}
.wg-portfolio-item {
position: relative;
border-radius: var(--wg-radius);
overflow: hidden;
background: #1a1a2e;
}
.wg-portfolio-image {
height: 250px;
overflow: hidden;
}
.wg-portfolio-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--wg-transition);
}
.wg-portfolio-item:hover .wg-portfolio-image img {
transform: scale(1.1);
}
.wg-portfolio-info {
padding: 20px;
text-align: center;
}
.wg-portfolio-info h4 {
color: var(--wg-white);
font-size: 18px;
margin-bottom: 5px;
}
.wg-portfolio-info span {
color: var(--wg-coral);
font-size: 13px;
}
.wg-portfolio-cta {
text-align: center;
margin-top: 40px;
}
/* FAQ Light */
.wg-section-light .wg-faq-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px;
}
.wg-section-light .wg-faq-item {
background: var(--wg-white);
border: 1px solid var(--wg-gray-200);
border-radius: var(--wg-radius);
padding: 30px;
transition: var(--wg-transition);
}
.wg-section-light .wg-faq-item:hover {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.wg-faq-question {
font-size: 17px;
font-weight: 600;
color: var(--wg-dark);
margin-bottom: 12px;
}
.wg-faq-answer {
font-size: 14px;
color: var(--wg-gray-600);
line-height: 1.7;
}
/* CTA Section */
.wg-cta-section {
background: linear-gradient(135deg, var(--wg-dark) 0%, #1a1a2e 100%);
padding: 100px 0;
text-align: center;
position: relative;
overflow: hidden;
}
.wg-cta-section::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(ellipse at center, rgba(255, 59, 59, 0.15) 0%, transparent 50%);
animation: pulse 10s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 0.5; }
50% { transform: scale(1.2); opacity: 1; }
}
.wg-cta-content {
position: relative;
z-index: 1;
}
.wg-cta-content h2 {
color: var(--wg-white);
margin-bottom: 20px;
}
.wg-cta-content p {
color: rgba(255, 255, 255, 0.8);
margin-bottom: 30px;
}
.wg-cta-buttons {
display: flex;
gap: 20px;
justify-content: center;
}
/* Links Section */
.wg-links-section {
padding: 60px 0;
border-top: 1px solid var(--wg-gray-200);
}
.wg-links-title {
text-align: center;
font-size: 20px;
color: var(--wg-dark);
margin-bottom: 30px;
}
.wg-links-grid {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
.wg-link-card {
display: flex;
align-items: center;
gap: 12px;
background: var(--wg-white);
border: 1px solid var(--wg-gray-200);
border-radius: 50px;
padding: 15px 25px;
transition: var(--wg-transition);
}
.wg-link-card:hover {
border-color: var(--wg-coral);
box-shadow: 0 5px 20px rgba(255, 59, 59, 0.15);
transform: translateY(-3px);
}
.wg-link-card i {
font-size: 20px;
color: var(--wg-coral);
}
.wg-link-card span {
font-size: 14px;
font-weight: 600;
color: var(--wg-dark);
}
/* SEO Services Grid */
.wg-seo-services-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 25px;
}
.wg-seo-service {
background: var(--wg-white);
border-radius: var(--wg-radius);
padding: 35px 25px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
transition: var(--wg-transition);
border-left: 4px solid transparent;
}
.wg-seo-service:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
border-left-color: var(--wg-coral);
}
.wg-seo-icon {
width: 60px;
height: 60px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
margin-bottom: 20px;
}
.wg-seo-title {
font-size: 18px;
font-weight: 700;
color: var(--wg-dark);
margin-bottom: 12px;
}
.wg-seo-desc {
color: var(--wg-gray-600);
font-size: 14px;
line-height: 1.6;
margin-bottom: 20px;
}
.wg-seo-features {
list-style: none;
}
.wg-seo-features li {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 0;
font-size: 13px;
color: var(--wg-gray-800);
}
.wg-seo-features li i {
color: #10b981;
font-size: 11px;
}
/* Results Grid */
.wg-results-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
.wg-result-card {
text-align: center;
padding: 40px 20px;
background: rgba(255, 255, 255, 0.05);
border-radius: var(--wg-radius);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.wg-result-icon {
font-size: 40px;
color: var(--wg-coral);
margin-bottom: 20px;
}
.wg-result-number {
font-size: 48px;
font-weight: 800;
color: var(--wg-white);
font-family: 'Space Grotesk', sans-serif;
line-height: 1;
margin-bottom: 10px;
}
.wg-result-label {
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
}
/* Pricing Light */
.wg-section-light .wg-pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.wg-section-light .wg-pricing-card {
background: var(--wg-white);
border: 2px solid var(--wg-gray-200);
border-radius: var(--wg-radius);
padding: 40px 30px;
text-align: center;
position: relative;
transition: var(--wg-transition);
}
.wg-section-light .wg-pricing-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}
.wg-section-light .wg-pricing-featured {
border-color: var(--wg-coral);
transform: scale(1.05);
}
.wg-section-light .wg-pricing-featured:hover {
transform: scale(1.05) translateY(-10px);
}
.wg-pricing-name {
font-size: 22px;
font-weight: 700;
color: var(--wg-dark);
margin-bottom: 10px;
}
.wg-pricing-desc {
font-size: 14px;
color: var(--wg-gray-600);
margin-bottom: 20px;
}
.wg-section-light .wg-pricing-price {
font-size: 14px;
color: var(--wg-gray-600);
margin-bottom: 25px;
}
.wg-section-light .wg-pricing-price strong {
font-size: 36px;
color: var(--wg-coral);
display: block;
margin-top: 5px;
}
.wg-section-light .wg-pricing-features {
list-style: none;
margin-bottom: 30px;
text-align: left;
}
.wg-section-light .wg-pricing-features li {
padding: 10px 0;
border-bottom: 1px solid var(--wg-gray-200);
color: var(--wg-gray-800);
font-size: 14px;
}
.wg-section-light .wg-pricing-features li i {
color: #10b981;
margin-right: 10px;
}
/* Header Light */
.wg-header-light h2,
.wg-header-light .wg-title-lg {
color: var(--wg-white);
}
.wg-header-light .wg-section-desc {
color: rgba(255, 255, 255, 0.7);
}
/* Ads Services Grid */
.wg-ads-services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.wg-ads-service {
background: var(--wg-white);
border-radius: var(--wg-radius);
padding: 40px 30px;
text-align: center;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
transition: var(--wg-transition);
}
.wg-ads-service:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}
.wg-ads-icon {
width: 80px;
height: 80px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
margin: 0 auto 25px;
}
.wg-ads-title {
font-size: 20px;
font-weight: 700;
color: var(--wg-dark);
margin-bottom: 15px;
}
.wg-ads-desc {
color: var(--wg-gray-600);
font-size: 14px;
line-height: 1.6;
}
/* Apps Features Grid */
.wg-apps-features-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 25px;
}
.wg-apps-feature {
background: var(--wg-white);
border-radius: var(--wg-radius);
padding: 35px 25px;
text-align: center;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
transition: var(--wg-transition);
}
.wg-apps-feature:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}
.wg-apps-feature-icon {
width: 70px;
height: 70px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
margin: 0 auto 20px;
}
.wg-apps-feature h3 {
font-size: 18px;
font-weight: 700;
color: var(--wg-dark);
margin-bottom: 12px;
}
.wg-apps-feature p {
color: var(--wg-gray-600);
font-size: 14px;
line-height: 1.6;
}
/* Responsive Service Pages */
@media (max-width: 1200px) {
.wg-service-hero-grid {
grid-template-columns: 1fr;
text-align: center;
}
/* GARDER LES ANIMATIONS VISIBLES SUR MOBILE */
.wg-service-hero-visual {
display: block !important;
width: 100%;
max-width: 400px;
margin: 30px auto 0;
}
.wg-hero-stats {
justify-content: center;
}
.wg-types-grid,
.wg-seo-services-grid,
.wg-apps-features-grid {
grid-template-columns: repeat(2, 1fr);
}
.wg-process-timeline {
grid-template-columns: repeat(2, 1fr);
}
.wg-process-timeline::before {
display: none;
}
.wg-results-grid {
grid-template-columns: repeat(2, 1fr);
}
.wg-ads-services-grid {
grid-template-columns: repeat(2, 1fr);
}
.wg-section-light .wg-tech-grid {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 768px) {
.wg-types-grid,
.wg-seo-services-grid,
.wg-process-timeline,
.wg-results-grid,
.wg-ads-services-grid,
.wg-apps-features-grid,
.wg-portfolio-grid,
.wg-section-light .wg-pricing-grid,
.wg-section-light .wg-faq-grid {
grid-template-columns: 1fr;
}
.wg-section-light .wg-tech-grid {
grid-template-columns: repeat(2, 1fr);
}
.wg-hero-stats {
flex-direction: column;
gap: 20px;
}
.wg-cta-buttons {
flex-direction: column;
align-items: center;
}
.wg-links-grid {
flex-direction: column;
align-items: center;
}
.wg-type-featured {
transform: none;
}
.wg-section-light .wg-pricing-featured {
transform: none;
}
}
/* ========== ADDITIONAL VISIBILITY FIXES ========== */
/* Ensure all text is visible in light sections */
.wg-section-light {
background: var(--wg-gray-100) !important;
}
.wg-section-light h2,
.wg-section-light h3,
.wg-section-light h4 {
color: var(--wg-dark) !important;
}
.wg-section-light p {
color: var(--wg-gray-600) !important;
}
.wg-section-light .wg-section-header h2 {
color: var(--wg-dark) !important;
}
.wg-section-light .wg-section-header .wg-section-desc {
color: var(--wg-gray-600) !important;
}
/* Ensure dark section text is white */
/* Note: background removed to allow custom backgrounds like Dada Café */
.wg-section-dark h2,
.wg-section-dark h3,
.wg-section-dark h4 {
color: var(--wg-white) !important;
}
.wg-section-dark p {
color: rgba(255, 255, 255, 0.7) !important;
}
/* Fix FAQ items in dark sections */
.wg-section-dark .wg-faq-item {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.wg-section-dark .wg-faq-item h3 {
color: var(--wg-white) !important;
}
.wg-section-dark .wg-faq-item p {
color: rgba(255, 255, 255, 0.7) !important;
}
/* Fix pricing cards in light sections */
.wg-section-light .wg-pricing-card {
background: var(--wg-white);
border: 2px solid var(--wg-gray-200);
}
.wg-section-light .wg-pricing-card h3 {
color: var(--wg-dark) !important;
}
.wg-section-light .wg-pricing-card .wg-pricing-price {
color: var(--wg-gray-600) !important;
}
.wg-section-light .wg-pricing-card .wg-pricing-price strong {
color: var(--wg-coral) !important;
}
.wg-section-light .wg-pricing-card .wg-pricing-features li {
color: var(--wg-gray-800) !important;
border-bottom-color: var(--wg-gray-200) !important;
}
/* Fix pricing cards in dark sections */
.wg-section-dark .wg-pricing-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.wg-section-dark .wg-pricing-card h3 {
color: var(--wg-white) !important;
}
.wg-section-dark .wg-pricing-card .wg-pricing-price {
color: rgba(255, 255, 255, 0.7) !important;
}
.wg-section-dark .wg-pricing-card .wg-pricing-price strong {
color: var(--wg-coral) !important;
}
.wg-section-dark .wg-pricing-card .wg-pricing-features li {
color: rgba(255, 255, 255, 0.8) !important;
border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}
/* Fix result cards */
.wg-result-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.wg-section-light .wg-result-card {
background: var(--wg-white);
border: 1px solid var(--wg-gray-200);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}
.wg-section-light .wg-result-card .wg-result-number {
color: var(--wg-coral) !important;
}
.wg-section-light .wg-result-card .wg-result-label {
color: var(--wg-gray-600) !important;
}
/* Fix tech grid in light sections */
.wg-section-light .wg-tech-item {
background: var(--wg-white);
border: 1px solid var(--wg-gray-200);
}
.wg-section-light .wg-tech-item span {
color: var(--wg-dark) !important;
}
/* Fix links section */
.wg-links-section {
background: var(--wg-gray-100) !important;
}
.wg-links-title {
color: var(--wg-dark) !important;
}
.wg-link-card {
background: var(--wg-white) !important;
border: 1px solid var(--wg-gray-200) !important;
}
.wg-link-card span {
color: var(--wg-dark) !important;
}
/* Fix CTA section */
.wg-cta-section {
background: linear-gradient(135deg, var(--wg-dark) 0%, #1a1a2e 100%) !important;
}
.wg-cta-content h2 {
color: var(--wg-white) !important;
}
.wg-cta-content p {
color: rgba(255, 255, 255, 0.8) !important;
}
/* Fix service hero text */
.wg-service-hero h1 {
color: var(--wg-white) !important;
}
.wg-service-hero p {
color: rgba(255, 255, 255, 0.9) !important;
}
/* Fix type cards */
.wg-type-card {
background: var(--wg-white) !important;
}
.wg-type-title {
color: var(--wg-dark) !important;
}
.wg-type-desc {
color: var(--wg-gray-600) !important;
}
.wg-type-features li {
color: var(--wg-gray-800) !important;
}
.wg-type-price {
color: var(--wg-gray-600) !important;
}
/* Fix SEO services */
.wg-seo-service {
background: var(--wg-white) !important;
}
.wg-seo-title {
color: var(--wg-dark) !important;
}
.wg-seo-desc {
color: var(--wg-gray-600) !important;
}
.wg-seo-features li {
color: var(--wg-gray-800) !important;
}
/* Fix Ads services */
.wg-ads-service {
background: var(--wg-white) !important;
}
.wg-ads-title {
color: var(--wg-dark) !important;
}
.wg-ads-desc {
color: var(--wg-gray-600) !important;
}
/* Fix Apps features */
.wg-apps-feature {
background: var(--wg-white) !important;
}
.wg-apps-feature h3 {
color: var(--wg-dark) !important;
}
.wg-apps-feature p {
color: var(--wg-gray-600) !important;
}
/* Fix portfolio items */
.wg-portfolio-item {
background: #1a1a2e !important;
}
.wg-portfolio-info h4 {
color: var(--wg-white) !important;
}
.wg-portfolio-info span {
color: var(--wg-coral) !important;
}
/* Fix FAQ in light sections */
.wg-section-light .wg-faq-item {
background: var(--wg-white);
border: 1px solid var(--wg-gray-200);
}
.wg-section-light .wg-faq-item h3,
.wg-section-light .wg-faq-question {
color: var(--wg-dark) !important;
}
.wg-section-light .wg-faq-item p,
.wg-section-light .wg-faq-answer {
color: var(--wg-gray-600) !important;
}
/* Fix step content in dark sections */
.wg-step-content {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.wg-step-title {
color: var(--wg-white) !important;
}
.wg-step-desc {
color: rgba(255, 255, 255, 0.7) !important;
}
/* Button fixes */
.wg-btn-outline {
border: 2px solid var(--wg-coral);
color: var(--wg-coral);
background: transparent;
}
.wg-btn-outline:hover {
background: var(--wg-coral);
color: var(--wg-white);
}
.wg-section-light .wg-btn-outline {
border-color: var(--wg-coral);
color: var(--wg-coral);
}
.wg-section-light .wg-btn-outline:hover {
background: var(--wg-coral);
color: var(--wg-white);
}
/* Ensure gradient text is always visible */
.wg-gradient-text {
background: var(--wg-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Fix stat cards in light sections - IMPORTANT */
.wg-section-light .wg-stat-card,
.wg-section-light .wg-stats-grid .wg-stat-card {
color: var(--wg-dark) !important;
background: var(--wg-white) !important;
border-radius: var(--wg-radius) !important;
padding: 30px !important;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
text-align: center !important;
}
.wg-section-light .wg-stat-number,
.wg-section-light .wg-stats-grid .wg-stat-number {
color: var(--wg-coral) !important;
font-family: 'Space Grotesk', sans-serif !important;
font-size: 48px !important;
font-weight: 700 !important;
line-height: 1 !important;
margin-bottom: 15px !important;
display: block !important;
}
.wg-section-light .wg-stat-text,
.wg-section-light .wg-stat-label,
.wg-section-light .wg-stats-grid .wg-stat-text,
.wg-section-light .wg-stats-grid .wg-stat-label {
color: var(--wg-gray-600) !important;
font-size: 14px !important;
line-height: 1.5 !important;
display: block !important;
}
/* Fix stats grid in light sections */
.wg-section-light .wg-stats-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 30px !important;
}
@media (max-width: 992px) {
.wg-section-light .wg-stats-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 20px !important;
}
}
@media (max-width: 576px) {
.wg-section-light .wg-stats-grid {
grid-template-columns: 1fr !important;
}
.wg-section-light .wg-stat-number {
font-size: 36px !important;
}
}
/* Fix tag visibility */
.wg-tag {
display: inline-block;
padding: 8px 20px;
background: rgba(255, 59, 59, 0.1);
border-radius: 50px;
font-size: 13px;
font-weight: 600;
color: var(--wg-coral);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 20px;
}
/* Fix section header */
.wg-section-header {
text-align: center;
margin-bottom: 60px;
}
.wg-section-header .wg-tag {
margin-bottom: 15px;
}
.wg-section-header h2 {
margin-bottom: 20px;
}
/* ========== HERO VIDEO BACKGROUND ========== */
.wg-service-hero-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
z-index: 0;
}
.wg-hero-video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translate(-50%, -50%);
object-fit: cover;
z-index: 0;
}
.wg-hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(10, 10, 15, 0.85) 0%, rgba(26, 26, 46, 0.80) 100%);
z-index: 1;
}
/* Ensure content is above video */
.wg-service-hero .wg-container {
position: relative;
z-index: 2;
}
/* Responsive video adjustments */
@media (max-width: 768px) {
.wg-hero-video {
display: none; /* Hide video on mobile for performance */
}
.wg-hero-overlay {
background: linear-gradient(135deg, rgba(10, 10, 15, 0.95) 0%, rgba(26, 26, 46, 0.95) 100%);
}
}
/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
.wg-hero-video {
display: none;
}
}
/* ========== PAGE À PROPOS ========== */
.wg-hero-centered {
text-align: center;
max-width: 800px;
margin: 0 auto;
}
.wg-about-grid {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 60px;
align-items: start;
}
.wg-about-content p {
margin-bottom: 20px;
line-height: 1.8;
}
.wg-about-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.wg-about-stat {
background: var(--wg-white);
padding: 30px;
border-radius: 16px;
text-align: center;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
border: 1px solid var(--wg-gray-200);
}
.wg-about-stat .wg-stat-num {
font-size: 42px;
color: var(--wg-coral);
}
.wg-about-stat .wg-stat-label {
color: var(--wg-gray-600);
font-size: 14px;
}
/* Values */
.wg-values-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
.wg-value-card {
background: rgba(255, 255, 255, 0.05);
padding: 40px 30px;
border-radius: 16px;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.wg-value-card:hover {
transform: translateY(-10px);
border-color: var(--wg-coral);
}
.wg-value-icon {
width: 70px;
height: 70px;
background: var(--wg-gradient);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 28px;
color: var(--wg-white);
}
.wg-value-card h3 {
color: var(--wg-white);
margin-bottom: 15px;
}
.wg-value-card p {
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
line-height: 1.7;
}
/* Team */
.wg-team-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
.wg-team-card {
background: var(--wg-white);
padding: 40px 30px;
border-radius: 16px;
text-align: center;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
border: 1px solid var(--wg-gray-200);
transition: all 0.3s ease;
}
.wg-team-card:hover {
transform: translateY(-10px);
}
.wg-team-avatar {
width: 80px;
height: 80px;
background: var(--wg-gradient);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 32px;
color: var(--wg-white);
}
.wg-team-card h3 {
color: var(--wg-dark);
margin-bottom: 10px;
}
.wg-team-card p {
color: var(--wg-gray-600);
font-size: 14px;
}
/* Advantages */
.wg-advantages-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.wg-advantage-item {
display: flex;
gap: 20px;
background: rgba(255, 255, 255, 0.05);
padding: 30px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.wg-advantage-icon {
width: 60px;
height: 60px;
min-width: 60px;
background: var(--wg-gradient);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: var(--wg-white);
}
.wg-advantage-item h3 {
color: var(--wg-white);
margin-bottom: 10px;
}
.wg-advantage-item p {
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
line-height: 1.7;
}
/* ========== PAGE CONTACT ========== */
.wg-contact-grid {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 60px;
}
.wg-contact-info h2,
.wg-contact-form-wrapper h2 {
margin-bottom: 30px;
}
.wg-contact-items {
display: flex;
flex-direction: column;
gap: 25px;
}
.wg-contact-item {
display: flex;
gap: 20px;
align-items: flex-start;
}
.wg-contact-icon {
width: 50px;
height: 50px;
min-width: 50px;
background: var(--wg-gradient);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: var(--wg-white);
}
.wg-contact-text h4 {
color: var(--wg-dark);
margin-bottom: 5px;
font-size: 16px;
}
.wg-contact-text a,
.wg-contact-text p {
color: var(--wg-gray-600);
font-size: 15px;
text-decoration: none;
}
.wg-contact-text a:hover {
color: var(--wg-coral);
}
.wg-contact-social {
margin-top: 40px;
padding-top: 30px;
border-top: 1px solid var(--wg-gray-200);
}
.wg-contact-social h4 {
color: var(--wg-dark);
margin-bottom: 15px;
}
.wg-social-links {
display: flex;
gap: 15px;
}
.wg-social-links a {
width: 45px;
height: 45px;
background: var(--wg-gray-100);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--wg-dark);
font-size: 18px;
transition: all 0.3s ease;
}
.wg-social-links a:hover {
background: var(--wg-coral);
color: var(--wg-white);
}
/* Contact Form */
.wg-contact-form-wrapper {
background: var(--wg-white);
padding: 40px;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}
.wg-contact-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.wg-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.wg-form-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.wg-form-group label {
font-weight: 600;
color: var(--wg-dark);
font-size: 14px;
}
.wg-form-group input,
.wg-form-group select,
.wg-form-group textarea {
padding: 14px 18px;
border: 2px solid var(--wg-gray-200);
border-radius: 10px;
font-size: 15px;
font-family: inherit;
transition: all 0.3s ease;
background: var(--wg-white);
}
.wg-form-group input:focus,
.wg-form-group select:focus,
.wg-form-group textarea:focus {
outline: none;
border-color: var(--wg-coral);
}
.wg-form-group textarea {
resize: vertical;
min-height: 120px;
}
.wg-btn-full {
width: 100%;
}
/* Map */
.wg-map-section {
width: 100%;
height: 400px;
}
.wg-map-section iframe {
width: 100%;
height: 100%;
}
/* ========== PAGE PORTFOLIO ========== */
.wg-portfolio-filters {
background: var(--wg-gray-100);
padding: 30px 0;
}
.wg-filter-buttons {
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
}
.wg-filter-btn {
padding: 12px 25px;
background: var(--wg-white);
border: 2px solid var(--wg-gray-200);
border-radius: 50px;
font-size: 14px;
font-weight: 600;
color: var(--wg-dark);
cursor: pointer;
transition: all 0.3s ease;
}
.wg-filter-btn:hover,
.wg-filter-btn.active {
background: var(--wg-coral);
border-color: var(--wg-coral);
color: var(--wg-white);
}
.wg-portfolio-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.wg-portfolio-item {
background: var(--wg-white);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.wg-portfolio-item:hover {
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.wg-portfolio-image {
position: relative;
height: 220px;
overflow: hidden;
}
.wg-portfolio-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--wg-dark) 0%, #1a1a2e 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 60px;
color: var(--wg-coral);
}
.wg-portfolio-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 59, 59, 0.9);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: all 0.3s ease;
}
.wg-portfolio-item:hover .wg-portfolio-overlay {
opacity: 1;
}
.wg-portfolio-link {
width: 60px;
height: 60px;
background: var(--wg-white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--wg-coral);
font-size: 24px;
transform: scale(0);
transition: all 0.3s ease;
}
.wg-portfolio-item:hover .wg-portfolio-link {
transform: scale(1);
}
.wg-portfolio-info {
padding: 25px;
}
.wg-portfolio-category {
display: inline-block;
padding: 5px 12px;
background: rgba(255, 59, 59, 0.1);
color: var(--wg-coral);
border-radius: 20px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 10px;
}
.wg-portfolio-info h3 {
color: var(--wg-dark);
margin-bottom: 10px;
font-size: 20px;
}
.wg-portfolio-info p {
color: var(--wg-gray-600);
font-size: 14px;
line-height: 1.6;
margin-bottom: 15px;
}
.wg-portfolio-tags {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.wg-portfolio-tags span {
padding: 5px 12px;
background: var(--wg-gray-100);
color: var(--wg-gray-600);
border-radius: 20px;
font-size: 12px;
}
.wg-portfolio-more {
text-align: center;
margin-top: 50px;
}
/* ========== PAGE FAQ ========== */
.wg-faq-accordion {
max-width: 900px;
margin: 0 auto;
}
.wg-faq-accordion .wg-faq-item {
margin-bottom: 20px;
}
/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
.wg-about-grid {
grid-template-columns: 1fr;
}
.wg-about-stats {
grid-template-columns: repeat(4, 1fr);
}
.wg-values-grid,
.wg-team-grid {
grid-template-columns: repeat(2, 1fr);
}
.wg-advantages-grid {
grid-template-columns: 1fr;
}
.wg-contact-grid {
grid-template-columns: 1fr;
}
.wg-portfolio-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.wg-about-stats {
grid-template-columns: repeat(2, 1fr);
}
.wg-values-grid,
.wg-team-grid {
grid-template-columns: 1fr;
}
.wg-form-row {
grid-template-columns: 1fr;
}
.wg-portfolio-grid {
grid-template-columns: 1fr;
}
.wg-filter-buttons {
gap: 10px;
}
.wg-filter-btn {
padding: 10px 18px;
font-size: 13px;
}
}
/* ========== CODE EDITOR ANIMATION - Création Site Web ========== */
.wg-code-editor {
background: #1e1e2e;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.wg-code-header {
display: flex;
align-items: center;
gap: 15px;
padding: 12px 20px;
background: #0d0d12;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.wg-code-dots {
display: flex;
gap: 8px;
}
.wg-code-filename {
color: rgba(255, 255, 255, 0.5);
font-size: 13px;
font-family: 'Fira Code', 'Monaco', monospace;
}
.wg-code-body {
display: flex;
padding: 20px;
position: relative;
}
.wg-code-lines {
display: flex;
flex-direction: column;
padding-right: 20px;
border-right: 1px solid rgba(255, 255, 255, 0.1);
margin-right: 20px;
}
.wg-code-lines span {
color: rgba(255, 255, 255, 0.3);
font-size: 13px;
line-height: 1.8;
font-family: 'Fira Code', 'Monaco', monospace;
text-align: right;
min-width: 20px;
}
.wg-code-content {
margin: 0;
font-size: 13px;
line-height: 1.8;
font-family: 'Fira Code', 'Monaco', monospace;
color: #f8f8f2;
overflow: hidden;
}
.wg-code-tag { color: #ff79c6; }
.wg-code-attr { color: #50fa7b; }
.wg-code-string { color: #f1fa8c; }
.wg-code-comment { color: #6272a4; }
/* Typewriter animation */
.wg-typewriter {
display: inline-block;
overflow: hidden;
white-space: pre;
animation: typing 8s steps(400, end) infinite;
}
@keyframes typing {
0% { max-height: 0; }
10% { max-height: 30px; }
20% { max-height: 60px; }
30% { max-height: 90px; }
40% { max-height: 120px; }
50% { max-height: 150px; }
60% { max-height: 180px; }
70% { max-height: 210px; }
80% { max-height: 240px; }
90% { max-height: 270px; }
100% { max-height: 300px; }
}
.wg-code-cursor {
position: absolute;
bottom: 25px;
width: 10px;
height: 20px;
background: var(--wg-coral);
animation: blink 1s infinite;
}
@keyframes blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
/* ========== GOOGLE ADS COUNTER ANIMATIONS ========== */
.wg-pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.wg-metric-change.wg-positive {
color: #4ade80;
}
.wg-metric-change.wg-negative {
color: var(--wg-coral);
}
.wg-chart-line {
position: absolute;
bottom: 10px;
left: 10px;
right: 10px;
height: 60px;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 107, 107, 0.3) 20%,
rgba(255, 107, 107, 0.5) 40%,
rgba(74, 222, 128, 0.5) 60%,
rgba(74, 222, 128, 0.7) 80%,
rgba(74, 222, 128, 0.9) 100%
);
clip-path: polygon(0% 100%, 5% 80%, 15% 85%, 25% 60%, 35% 65%, 45% 40%, 55% 45%, 65% 25%, 75% 30%, 85% 15%, 95% 20%, 100% 10%, 100% 100%);
animation: chartGrow 3s ease-out forwards;
transform-origin: left;
}
@keyframes chartGrow {
0% {
transform: scaleX(0);
opacity: 0;
}
100% {
transform: scaleX(1);
opacity: 1;
}
}
/* ========== ERP DEMO ANIMATION - Applications ========== */
.wg-erp-demo {
background: #1a1a2e;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
min-height: 380px;
}
.wg-erp-sidebar {
width: 60px;
background: #0d0d12;
padding: 15px 10px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.wg-erp-logo {
background: var(--wg-coral);
color: white;
font-size: 10px;
font-weight: 700;
padding: 8px 6px;
border-radius: 8px;
margin-bottom: 10px;
}
.wg-erp-menu {
display: flex;
flex-direction: column;
gap: 8px;
}
.wg-erp-menu-item {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.4);
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
}
.wg-erp-menu-item.active {
background: var(--wg-coral);
color: white;
box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
}
/* Menu click animation */
.wg-erp-menu-item {
animation: menuClick 8s infinite;
}
.wg-erp-menu-item:nth-child(1) { animation-delay: 0s; }
.wg-erp-menu-item:nth-child(2) { animation-delay: 2s; }
.wg-erp-menu-item:nth-child(3) { animation-delay: 4s; }
.wg-erp-menu-item:nth-child(4) { animation-delay: 6s; }
@keyframes menuClick {
0%, 20% {
background: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.4);
transform: scale(1);
}
5% {
background: var(--wg-coral);
color: white;
transform: scale(0.95);
}
10% {
background: var(--wg-coral);
color: white;
transform: scale(1);
}
15% {
background: var(--wg-coral);
color: white;
}
}
.wg-erp-main {
flex: 1;
padding: 20px;
}
.wg-erp-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.wg-erp-title {
color: white;
font-size: 18px;
font-weight: 600;
}
.wg-erp-search {
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
padding: 8px 15px;
display: flex;
align-items: center;
gap: 10px;
min-width: 180px;
}
.wg-erp-search i {
color: rgba(255, 255, 255, 0.4);
font-size: 12px;
}
.wg-erp-search-text {
color: white;
font-size: 13px;
font-family: monospace;
}
.wg-erp-search-text::after {
content: 'Rechercher client...';
animation: searchTyping 6s infinite;
}
@keyframes searchTyping {
0%, 10% { content: ''; }
15% { content: 'R'; }
20% { content: 'Re'; }
25% { content: 'Rec'; }
30% { content: 'Rech'; }
35% { content: 'Reche'; }
40% { content: 'Recher'; }
45% { content: 'Recherc'; }
50% { content: 'Recherch'; }
55% { content: 'Recherche'; }
60% { content: 'Rechercher'; }
65%, 75% { content: 'Rechercher client'; }
80%, 100% { content: ''; }
}
.wg-erp-search-cursor {
width: 2px;
height: 14px;
background: var(--wg-coral);
animation: blink 0.8s infinite;
}
.wg-erp-stats-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
margin-bottom: 20px;
}
.wg-erp-stat-card {
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 15px;
display: flex;
align-items: center;
gap: 12px;
animation: statCardPop 0.6s ease-out forwards;
opacity: 0;
}
.wg-erp-stat-card:nth-child(1) { animation-delay: 0.5s; }
.wg-erp-stat-card:nth-child(2) { animation-delay: 0.8s; }
.wg-erp-stat-card:nth-child(3) { animation-delay: 1.1s; }
@keyframes statCardPop {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.wg-erp-stat-icon {
width: 40px;
height: 40px;
background: linear-gradient(135deg, var(--wg-coral) 0%, #ff8585 100%);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 16px;
}
.wg-erp-stat-info {
display: flex;
flex-direction: column;
}
.wg-erp-stat-value {
color: white;
font-size: 20px;
font-weight: 700;
font-family: 'Space Grotesk', sans-serif;
}
.wg-erp-stat-label {
color: rgba(255, 255, 255, 0.5);
font-size: 11px;
}
.wg-erp-table {
background: rgba(255, 255, 255, 0.03);
border-radius: 12px;
overflow: hidden;
}
.wg-erp-table-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.wg-erp-table-header span:first-child {
color: white;
font-size: 13px;
font-weight: 600;
}
.wg-erp-badge {
background: #4ade80;
color: #0a0a0f;
padding: 3px 10px;
border-radius: 20px;
font-size: 10px;
font-weight: 600;
animation: pulse 2s infinite;
}
.wg-erp-table-rows {
padding: 10px 0;
}
.wg-erp-row {
display: grid;
grid-template-columns: 60px 1fr 80px;
padding: 10px 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
animation: rowSlideIn 0.5s ease-out forwards;
opacity: 0;
}
.wg-erp-row:nth-child(1) { animation-delay: 1.5s; }
.wg-erp-row:nth-child(2) { animation-delay: 2s; }
.wg-erp-row:nth-child(3) { animation-delay: 2.5s; }
@keyframes rowSlideIn {
0% { transform: translateX(-20px); opacity: 0; }
100% { transform: translateX(0); opacity: 1; }
}
.wg-erp-row span:first-child {
color: var(--wg-coral);
font-size: 12px;
font-weight: 600;
}
.wg-erp-row span:nth-child(2) {
color: rgba(255, 255, 255, 0.8);
font-size: 13px;
}
.wg-erp-amount {
color: #4ade80;
font-size: 13px;
font-weight: 600;
text-align: right;
}
/* ========== DEV STUDIO - Animation Évolutive Création Site Web ========== */
.wg-dev-studio {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
height: 400px;
}
.wg-ide {
background: #1e1e2e;
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.wg-ide-header {
display: flex;
align-items: center;
background: #0d0d12;
padding: 8px 12px;
gap: 15px;
}
.wg-ide-dots {
display: flex;
gap: 6px;
}
.wg-ide-tabs {
display: flex;
gap: 2px;
}
.wg-ide-tab {
padding: 6px 12px;
font-size: 11px;
color: rgba(255, 255, 255, 0.5);
background: transparent;
border-radius: 6px 6px 0 0;
cursor: pointer;
transition: all 0.3s ease;
font-family: 'Fira Code', monospace;
}
.wg-ide-tab.active {
background: #1e1e2e;
color: white;
}
.wg-ide-body {
flex: 1;
display: flex;
padding: 15px;
position: relative;
overflow: hidden;
}
.wg-ide-lines {
display: flex;
flex-direction: column;
padding-right: 15px;
border-right: 1px solid rgba(255, 255, 255, 0.1);
margin-right: 15px;
color: rgba(255, 255, 255, 0.3);
font-size: 11px;
line-height: 1.6;
font-family: 'Fira Code', monospace;
}
.wg-ide-code {
flex: 1;
font-size: 11px;
line-height: 1.6;
font-family: 'Fira Code', monospace;
color: #f8f8f2;
white-space: pre;
overflow: hidden;
}
.wg-ide-cursor {
position: absolute;
width: 8px;
height: 16px;
background: var(--wg-coral);
animation: blink 0.8s infinite;
}
.wg-ide-status {
display: flex;
justify-content: space-between;
padding: 6px 12px;
background: #0d0d12;
font-size: 10px;
}
.wg-ide-status-text {
color: #4ade80;
}
.wg-ide-status-lang {
color: rgba(255, 255, 255, 0.5);
}
/* Preview */
.wg-preview {
background: #1e1e2e;
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.wg-preview-header {
display: flex;
align-items: center;
background: #0d0d12;
padding: 8px 12px;
gap: 15px;
}
.wg-preview-dots {
display: flex;
gap: 6px;
}
.wg-preview-url {
flex: 1;
display: flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.05);
padding: 5px 12px;
border-radius: 6px;
font-size: 11px;
color: rgba(255, 255, 255, 0.7);
}
.wg-preview-url i {
color: #4ade80;
font-size: 10px;
}
.wg-preview-body {
flex: 1;
background: white;
overflow: hidden;
position: relative;
}
.wg-preview-loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
color: #666;
}
.wg-preview-loading i {
font-size: 30px;
color: var(--wg-coral);
animation: pulse 1.5s infinite;
}
.wg-preview-loading span {
font-size: 12px;
}
/* Preview Site Content */
.wg-preview-site {
height: 100%;
opacity: 0;
transition: opacity 0.5s ease;
}
.wg-preview-site.visible {
opacity: 1;
}
.wg-preview-nav {
background: linear-gradient(135deg, var(--wg-coral) 0%, #ff8585 100%);
padding: 10px 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
.wg-preview-logo {
color: white;
font-weight: 700;
font-size: 12px;
}
.wg-preview-menu {
display: flex;
gap: 15px;
}
.wg-preview-menu span {
color: rgba(255, 255, 255, 0.8);
font-size: 10px;
}
.wg-preview-hero {
background: linear-gradient(135deg, #1a1a2e 0%, #2a2a4a 100%);
padding: 25px 15px;
text-align: center;
color: white;
}
.wg-preview-hero h2 {
font-size: 16px;
margin-bottom: 8px;
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.5s ease forwards;
}
.wg-preview-hero p {
font-size: 10px;
color: rgba(255, 255, 255, 0.7);
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.5s ease 0.2s forwards;
}
.wg-preview-hero button {
margin-top: 12px;
background: var(--wg-coral);
color: white;
border: none;
padding: 8px 16px;
border-radius: 6px;
font-size: 10px;
cursor: pointer;
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.5s ease 0.4s forwards;
}
.wg-preview-services {
padding: 15px;
background: #f8f9fa;
}
.wg-preview-services h3 {
font-size: 12px;
color: #1a1a2e;
margin-bottom: 10px;
text-align: center;
}
.wg-preview-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.wg-preview-card {
background: white;
padding: 12px 8px;
border-radius: 8px;
text-align: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
opacity: 0;
transform: translateY(20px);
}
.wg-preview-card:nth-child(1) { animation: fadeInUp 0.4s ease 0.6s forwards; }
.wg-preview-card:nth-child(2) { animation: fadeInUp 0.4s ease 0.8s forwards; }
.wg-preview-card:nth-child(3) { animation: fadeInUp 0.4s ease 1s forwards; }
.wg-preview-card i {
font-size: 16px;
color: var(--wg-coral);
margin-bottom: 6px;
}
.wg-preview-card span {
display: block;
font-size: 9px;
color: #666;
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Code syntax colors */
.wg-code-tag { color: #ff79c6; }
.wg-code-attr { color: #50fa7b; }
.wg-code-string { color: #f1fa8c; }
.wg-code-comment { color: #6272a4; }
.wg-code-property { color: #8be9fd; }
.wg-code-value { color: #bd93f9; }
.wg-code-function { color: #ffb86c; }
.wg-code-keyword { color: #ff79c6; }
@media (max-width: 768px) {
.wg-dev-studio {
grid-template-columns: 1fr;
height: auto;
}
.wg-ide, .wg-preview {
height: 250px;
}
}
/* ========== SEO DASHBOARD - Animation Évolutive ========== */
.wg-seo-dashboard {
background: #1a1a2e;
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
min-height: 380px;
}
.wg-seo-phase {
padding: 20px;
animation: fadeIn 0.5s ease;
}
.wg-seo-phase.hidden {
display: none;
}
.wg-seo-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.wg-seo-title {
color: white;
font-size: 16px;
font-weight: 600;
}
.wg-seo-badge {
padding: 5px 12px;
border-radius: 20px;
font-size: 11px;
font-weight: 600;
}
.wg-seo-badge.wg-scanning {
background: rgba(251, 191, 36, 0.2);
color: #fbbf24;
animation: pulse 1.5s infinite;
}
.wg-seo-badge.wg-live {
background: rgba(74, 222, 128, 0.2);
color: #4ade80;
animation: pulse 2s infinite;
}
.wg-seo-badge.wg-working {
background: rgba(96, 165, 250, 0.2);
color: #60a5fa;
}
.wg-seo-badge.wg-success {
background: rgba(74, 222, 128, 0.2);
color: #4ade80;
}
/* Phase 1: Scan */
.wg-scan-progress {
height: 8px;
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
overflow: hidden;
margin-bottom: 20px;
}
.wg-scan-bar {
height: 100%;
background: linear-gradient(90deg, var(--wg-coral), #4ade80);
border-radius: 4px;
width: 0%;
animation: scanProgress 5s ease-out forwards;
}
@keyframes scanProgress {
0% { width: 0%; }
100% { width: 100%; }
}
.wg-scan-items {
display: flex;
flex-direction: column;
gap: 12px;
}
.wg-scan-item {
display: flex;
align-items: center;
gap: 12px;
color: rgba(255, 255, 255, 0.5);
font-size: 13px;
opacity: 0;
}
.wg-scan-item i {
color: #4ade80;
width: 20px;
}
.wg-scan-item:nth-child(1) { animation: scanItemAppear 0.3s ease 1s forwards; }
.wg-scan-item:nth-child(2) { animation: scanItemAppear 0.3s ease 2s forwards; }
.wg-scan-item:nth-child(3) { animation: scanItemAppear 0.3s ease 3s forwards; }
.wg-scan-item:nth-child(4) { animation: scanItemAppear 0.3s ease 4s forwards; }
.wg-scan-item:nth-child(5) { animation: scanItemAppear 0.3s ease 5s forwards; }
@keyframes scanItemAppear {
to { opacity: 1; color: white; }
}
/* Phase 2: Positions */
.wg-positions-list, .wg-positions-final {
display: flex;
flex-direction: column;
gap: 12px;
}
.wg-position-item {
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(255, 255, 255, 0.05);
padding: 12px 15px;
border-radius: 10px;
}
.wg-keyword {
color: white;
font-size: 13px;
}
.wg-position {
padding: 4px 12px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
}
.wg-pos-bad {
background: rgba(239, 68, 68, 0.2);
color: #ef4444;
}
.wg-pos-top {
background: rgba(74, 222, 128, 0.2);
color: #4ade80;
}
/* Phase 3: Optimisation */
.wg-optim-list {
display: flex;
flex-direction: column;
gap: 15px;
}
.wg-optim-item {
display: flex;
align-items: center;
gap: 12px;
color: rgba(255, 255, 255, 0.8);
font-size: 13px;
}
.wg-optim-item i {
color: #60a5fa;
width: 20px;
}
/* Phase 4: Résultats */
.wg-results-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
margin-bottom: 20px;
}
.wg-result-card {
background: rgba(255, 255, 255, 0.05);
padding: 20px 15px;
border-radius: 12px;
text-align: center;
}
.wg-result-icon {
width: 40px;
height: 40px;
background: linear-gradient(135deg, var(--wg-coral), #ff8585);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 10px;
color: white;
}
.wg-result-value {
color: white;
font-size: 24px;
font-weight: 700;
font-family: 'Space Grotesk', sans-serif;
}
.wg-result-label {
color: rgba(255, 255, 255, 0.5);
font-size: 11px;
margin-top: 5px;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* ========== GOOGLE ADS CAMPAIGN - Animation Évolutive ========== */
.wg-ads-campaign {
background: #1a1a2e;
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
min-height: 380px;
}
.wg-ads-phase {
padding: 20px;
animation: fadeIn 0.5s ease;
}
.wg-ads-phase.hidden {
display: none;
}
.wg-ads-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.wg-ads-title {
color: white;
font-size: 16px;
font-weight: 600;
display: flex;
align-items: center;
gap: 10px;
}
.wg-ads-title i {
color: var(--wg-coral);
}
.wg-ads-badge {
padding: 5px 12px;
border-radius: 20px;
font-size: 11px;
font-weight: 600;
}
.wg-ads-badge.wg-creating {
background: rgba(251, 191, 36, 0.2);
color: #fbbf24;
}
.wg-ads-badge.wg-running {
background: rgba(74, 222, 128, 0.2);
color: #4ade80;
animation: pulse 1.5s infinite;
}
.wg-ads-badge.wg-optimizing {
background: rgba(96, 165, 250, 0.2);
color: #60a5fa;
}
.wg-ads-badge.wg-success {
background: rgba(74, 222, 128, 0.2);
color: #4ade80;
}
/* Phase 1: Form */
.wg-campaign-form {
display: flex;
flex-direction: column;
gap: 15px;
}
.wg-form-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.wg-form-group label {
color: rgba(255, 255, 255, 0.5);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.wg-form-input {
background: rgba(255, 255, 255, 0.05);
padding: 12px 15px;
border-radius: 8px;
color: white;
font-size: 14px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.wg-form-input.wg-typing {
border-color: var(--wg-coral);
position: relative;
}
.wg-form-input.wg-typing::after {
content: '|';
color: var(--wg-coral);
animation: blink 0.8s infinite;
}
.wg-form-tags {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.wg-tag-item {
background: rgba(255, 107, 107, 0.2);
color: var(--wg-coral);
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
}
.wg-form-btn {
background: linear-gradient(135deg, var(--wg-coral), #ff8585);
color: white;
padding: 12px 20px;
border-radius: 8px;
text-align: center;
font-weight: 600;
font-size: 14px;
cursor: pointer;
margin-top: 10px;
}
/* Phase 2: Live Metrics */
.wg-live-metrics {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin-bottom: 20px;
}
.wg-live-metric {
background: rgba(255, 255, 255, 0.05);
padding: 15px;
border-radius: 10px;
text-align: center;
}
.wg-live-label {
display: block;
color: rgba(255, 255, 255, 0.5);
font-size: 11px;
margin-bottom: 5px;
}
.wg-live-value {
color: white;
font-size: 22px;
font-weight: 700;
font-family: 'Space Grotesk', sans-serif;
}
.wg-ads-notifications {
display: flex;
flex-direction: column;
gap: 8px;
max-height: 120px;
overflow: hidden;
}
.wg-ads-notif {
display: flex;
align-items: center;
gap: 10px;
background: rgba(74, 222, 128, 0.1);
padding: 8px 12px;
border-radius: 8px;
font-size: 12px;
color: #4ade80;
animation: slideInNotif 0.3s ease;
}
.wg-ads-notif i {
font-size: 14px;
}
@keyframes slideInNotif {
from { transform: translateX(-20px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
/* Phase 3: Optimisation */
.wg-optim-actions {
display: flex;
flex-direction: column;
gap: 15px;
}
.wg-optim-action {
display: flex;
align-items: center;
gap: 15px;
background: rgba(255, 255, 255, 0.05);
padding: 15px;
border-radius: 10px;
color: white;
font-size: 13px;
}
.wg-optim-action i {
color: #60a5fa;
font-size: 18px;
width: 25px;
}
/* Phase 4: ROI */
.wg-roi-display {
text-align: center;
}
.wg-roi-main {
margin-bottom: 25px;
}
.wg-roi-label {
display: block;
color: rgba(255, 255, 255, 0.5);
font-size: 12px;
margin-bottom: 10px;
}
.wg-roi-value {
color: #4ade80;
font-size: 48px;
font-weight: 700;
font-family: 'Space Grotesk', sans-serif;
}
.wg-roi-details {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.wg-roi-item {
background: rgba(255, 255, 255, 0.05);
padding: 12px;
border-radius: 10px;
}
.wg-roi-item-label {
display: block;
color: rgba(255, 255, 255, 0.5);
font-size: 10px;
margin-bottom: 4px;
}
.wg-roi-item-value {
color: white;
font-size: 16px;
font-weight: 600;
}
.wg-roi-item-value.wg-green {
color: #4ade80;
}
/* ========== ERP APP - Animation Évolutive ========== */
.wg-erp-app {
background: #1a1a2e;
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
min-height: 380px;
}
.wg-erp-sidebar {
width: 60px;
background: rgba(0, 0, 0, 0.3);
padding: 15px 10px;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.wg-erp-logo {
background: linear-gradient(135deg, var(--wg-coral), #ff8585);
color: white;
font-size: 10px;
font-weight: 700;
padding: 8px;
border-radius: 8px;
}
.wg-erp-menu {
display: flex;
flex-direction: column;
gap: 10px;
}
.wg-erp-menu-item {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
color: rgba(255, 255, 255, 0.4);
cursor: pointer;
transition: all 0.3s ease;
}
.wg-erp-menu-item.active {
background: rgba(255, 107, 107, 0.2);
color: var(--wg-coral);
}
.wg-erp-main {
flex: 1;
padding: 20px;
}
.wg-erp-view {
animation: fadeIn 0.5s ease;
}
.wg-erp-view.hidden {
display: none;
}
.wg-erp-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.wg-erp-title {
color: white;
font-size: 16px;
font-weight: 600;
}
.wg-erp-time {
color: rgba(255, 255, 255, 0.5);
font-size: 14px;
font-family: 'Space Grotesk', monospace;
}
.wg-erp-badge {
padding: 5px 12px;
border-radius: 20px;
font-size: 11px;
font-weight: 600;
}
.wg-erp-badge.wg-creating {
background: rgba(251, 191, 36, 0.2);
color: #fbbf24;
}
.wg-erp-badge.wg-alert {
background: rgba(239, 68, 68, 0.2);
color: #ef4444;
}
.wg-erp-badge.wg-success {
background: rgba(74, 222, 128, 0.2);
color: #4ade80;
}
/* Login */
.wg-erp-login-box {
background: rgba(255, 255, 255, 0.05);
padding: 25px;
border-radius: 12px;
max-width: 280px;
margin: 30px auto;
}
.wg-erp-login-title {
color: white;
font-size: 16px;
font-weight: 600;
text-align: center;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.wg-erp-login-title i {
color: var(--wg-coral);
}
.wg-erp-login-field {
margin-bottom: 15px;
}
.wg-erp-login-field label {
display: block;
color: rgba(255, 255, 255, 0.5);
font-size: 11px;
margin-bottom: 6px;
}
.wg-erp-input {
background: rgba(255, 255, 255, 0.05);
padding: 12px 15px;
border-radius: 8px;
color: white;
font-size: 13px;
border: 1px solid rgba(255, 255, 255, 0.1);
min-height: 42px;
}
.wg-erp-input.wg-typing::after {
content: '|';
color: var(--wg-coral);
animation: blink 0.8s infinite;
}
.wg-erp-input.wg-password {
letter-spacing: 3px;
}
.wg-erp-login-btn {
background: linear-gradient(135deg, var(--wg-coral), #ff8585);
color: white;
padding: 12px 20px;
border-radius: 8px;
text-align: center;
font-weight: 600;
font-size: 13px;
cursor: pointer;
margin-top: 10px;
}
/* Stats */
.wg-erp-stats-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 15px;
}
.wg-erp-stat-card {
background: rgba(255, 255, 255, 0.05);
padding: 15px;
border-radius: 10px;
display: flex;
align-items: center;
gap: 12px;
}
.wg-erp-stat-icon {
width: 36px;
height: 36px;
background: linear-gradient(135deg, var(--wg-coral), #ff8585);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 14px;
}
.wg-erp-stat-value {
color: white;
font-size: 18px;
font-weight: 700;
font-family: 'Space Grotesk', sans-serif;
}
.wg-erp-stat-label {
display: block;
color: rgba(255, 255, 255, 0.5);
font-size: 10px;
}
.wg-erp-notif-box {
background: rgba(251, 191, 36, 0.1);
border: 1px solid rgba(251, 191, 36, 0.3);
padding: 12px 15px;
border-radius: 10px;
display: flex;
align-items: center;
gap: 10px;
color: #fbbf24;
font-size: 13px;
}
/* Invoice */
.wg-erp-invoice-form {
display: flex;
flex-direction: column;
gap: 12px;
}
.wg-erp-invoice-row {
display: flex;
flex-direction: column;
gap: 6px;
}
.wg-erp-invoice-row label {
color: rgba(255, 255, 255, 0.5);
font-size: 11px;
}
.wg-erp-select {
background: rgba(255, 255, 255, 0.05);
padding: 10px 15px;
border-radius: 8px;
color: white;
font-size: 13px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.wg-erp-invoice-items {
display: flex;
flex-direction: column;
gap: 8px;
}
.wg-erp-invoice-item {
display: flex;
justify-content: space-between;
background: rgba(255, 255, 255, 0.05);
padding: 10px 15px;
border-radius: 8px;
font-size: 12px;
color: white;
animation: slideInNotif 0.3s ease;
}
.wg-erp-invoice-item-price {
color: #4ade80;
font-weight: 600;
}
.wg-erp-invoice-total {
display: flex;
justify-content: space-between;
padding: 15px;
background: rgba(74, 222, 128, 0.1);
border-radius: 10px;
color: white;
font-weight: 600;
}
.wg-erp-total-value {
color: #4ade80;
font-size: 18px;
font-family: 'Space Grotesk', sans-serif;
}
.wg-erp-invoice-btn {
background: linear-gradient(135deg, var(--wg-coral), #ff8585);
color: white;
padding: 12px 20px;
border-radius: 8px;
text-align: center;
font-weight: 600;
font-size: 13px;
cursor: pointer;
}
/* Stock */
.wg-erp-stock-alert {
display: flex;
align-items: center;
gap: 15px;
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.3);
padding: 15px;
border-radius: 10px;
margin-bottom: 15px;
}
.wg-erp-alert-icon {
width: 40px;
height: 40px;
background: rgba(239, 68, 68, 0.2);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: #ef4444;
font-size: 18px;
}
.wg-erp-alert-text strong {
display: block;
color: #ef4444;
font-size: 13px;
margin-bottom: 3px;
}
.wg-erp-alert-text span {
color: rgba(255, 255, 255, 0.6);
font-size: 12px;
}
.wg-erp-stock-btn {
background: linear-gradient(135deg, #60a5fa, #3b82f6);
color: white;
padding: 12px 20px;
border-radius: 8px;
text-align: center;
font-weight: 600;
font-size: 13px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.wg-erp-stock-confirm {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
background: rgba(74, 222, 128, 0.1);
border: 1px solid rgba(74, 222, 128, 0.3);
padding: 15px;
border-radius: 10px;
color: #4ade80;
font-size: 13px;
margin-top: 15px;
}
.wg-erp-stock-confirm i {
font-size: 18px;
}
/* Report */
.wg-erp-report-preview {
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
overflow: hidden;
}
.wg-erp-report-header {
background: rgba(239, 68, 68, 0.2);
padding: 15px;
display: flex;
align-items: center;
gap: 10px;
color: white;
font-size: 13px;
}
.wg-erp-report-header i {
color: #ef4444;
font-size: 20px;
}
.wg-erp-report-stats {
padding: 15px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.wg-erp-report-stat {
text-align: center;
}
.wg-erp-report-label {
display: block;
color: rgba(255, 255, 255, 0.5);
font-size: 10px;
margin-bottom: 5px;
}
.wg-erp-report-value {
color: #4ade80;
font-size: 16px;
font-weight: 700;
font-family: 'Space Grotesk', sans-serif;
}
.wg-erp-report-btn {
background: linear-gradient(135deg, var(--wg-coral), #ff8585);
color: white;
padding: 12px 20px;
margin: 15px;
border-radius: 8px;
text-align: center;
font-weight: 600;
font-size: 13px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
/* ========== CORRECTIONS TITRES EN BLANC ========== */
.wg-seo-title,
.wg-ads-title,
.wg-seo-header span,
.wg-ads-header span,
.wg-seo-dashboard h3,
.wg-ads-dashboard h3 {
color: white !important;
}
/* ========== RESPONSIVE MOBILE - AFFICHER LES ANIMATIONS ========== */
@media (max-width: 991px) {
.wg-service-hero-visual {
display: block !important;
margin-top: 30px;
}
.wg-dev-studio,
.wg-seo-dashboard,
.wg-ads-dashboard,
.wg-erp-app {
display: flex !important;
flex-direction: column;
max-width: 100%;
overflow: hidden;
}
.wg-ide,
.wg-preview {
width: 100% !important;
min-width: 0;
}
.wg-dev-studio {
flex-direction: column;
gap: 15px;
}
.wg-preview {
margin-top: 15px;
}
}
@media (max-width: 768px) {
.wg-service-hero-visual {
display: block !important;
}
.wg-dev-studio,
.wg-seo-dashboard,
.wg-ads-dashboard,
.wg-erp-app {
transform: scale(0.85);
transform-origin: top center;
}
.wg-ide,
.wg-preview,
.wg-seo-dashboard,
.wg-ads-dashboard,
.wg-erp-app {
font-size: 11px;
}
.wg-ide-tabs {
flex-wrap: wrap;
}
.wg-ide-tab {
font-size: 10px;
padding: 4px 8px;
}
.wg-seo-stats-row,
.wg-ads-metrics,
.wg-erp-stats-row {
grid-template-columns: 1fr 1fr !important;
gap: 8px;
}
.wg-seo-positions,
.wg-ads-graph {
flex-wrap: wrap;
}
.wg-seo-position-item,
.wg-ads-metric-card {
min-width: 80px;
}
}
@media (max-width: 480px) {
.wg-service-hero-visual {
display: block !important;
padding: 0 10px;
}
.wg-dev-studio,
.wg-seo-dashboard,
.wg-ads-dashboard,
.wg-erp-app {
transform: scale(0.75);
transform-origin: top center;
margin-bottom: -50px;
}
.wg-ide-code,
.wg-seo-scan-item,
.wg-ads-form-row {
font-size: 10px;
}
.wg-preview-body {
min-height: 150px;
}
.wg-seo-stats-row,
.wg-ads-metrics,
.wg-erp-stats-row {
grid-template-columns: 1fr !important;
}
}
/* ========== ANIMATION BOUTON PULSE POUR PREVIEW ========== */
.wg-btn-pulse {
animation: btnPulse 1.5s infinite;
}
@keyframes btnPulse {
0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.4); }
50% { transform: scale(1.05); box-shadow: 0 0 15px 5px rgba(255, 107, 107, 0.2); }
}
/* ========== PREVIEW HTML BRUT ========== */
.wg-preview-html {
background: white;
color: black;
height: 100%;
min-height: 200px;
}
.wg-preview-animated .wg-preview-card {
animation: cardPop 0.5s ease forwards;
opacity: 0;
}
.wg-preview-animated .wg-preview-card:nth-child(1) { animation-delay: 0.2s; }
.wg-preview-animated .wg-preview-card:nth-child(2) { animation-delay: 0.4s; }
.wg-preview-animated .wg-preview-card:nth-child(3) { animation-delay: 0.6s; }
@keyframes cardPop {
0% { opacity: 0; transform: translateY(10px); }
100% { opacity: 1; transform: translateY(0); }
}
/* ========== APERÇU HTML BRUT (Phase 1) ========== */
.wg-preview-raw {
background: #ffffff;
height: 100%;
font-family: 'Times New Roman', serif;
color: #000000;
padding: 0;
}
.wg-raw-nav {
background: none;
border-bottom: 1px solid #000;
padding: 8px 10px;
font-size: 12px;
color: #0000EE;
text-decoration: underline;
}
.wg-raw-content {
padding: 15px 10px;
}
.wg-raw-title {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
.wg-raw-text {
font-size: 14px;
margin-bottom: 15px;
}
.wg-raw-btn {
display: inline-block;
padding: 5px 10px;
border: 2px outset #ccc;
background: #e0e0e0;
font-size: 12px;
cursor: pointer;
}
.wg-raw-label {
position: absolute;
bottom: 10px;
left: 10px;
background: rgba(0, 0, 0, 0.7);
color: #ff6b6b;
padding: 5px 10px;
border-radius: 4px;
font-size: 10px;
font-family: 'Space Grotesk', sans-serif;
}
/* ========== APERÇU CSS STYLÉ (Phase 2) ========== */
.wg-preview-styled {
background: #1a1a2e;
height: 100%;
position: relative;
}
.wg-styled-nav {
background: linear-gradient(135deg, #ff6b6b, #ff8585);
padding: 10px 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
.wg-styled-logo {
color: white;
font-weight: 700;
font-size: 14px;
}
.wg-styled-menu {
display: flex;
gap: 15px;
}
.wg-styled-menu span {
color: rgba(255, 255, 255, 0.9);
font-size: 11px;
}
.wg-styled-hero {
padding: 30px 15px;
text-align: center;
background: linear-gradient(135deg, #1a1a2e, #2a2a4a);
}
.wg-styled-hero h2 {
color: white;
font-size: 18px;
margin-bottom: 8px;
}
.wg-styled-hero p {
color: rgba(255, 255, 255, 0.7);
font-size: 11px;
margin-bottom: 15px;
}
.wg-styled-hero button {
background: linear-gradient(135deg, #ff6b6b, #ff8585);
color: white;
border: none;
padding: 10px 20px;
border-radius: 8px;
font-size: 11px;
font-weight: 600;
}
.wg-styled-label {
position: absolute;
bottom: 10px;
left: 10px;
background: rgba(74, 222, 128, 0.2);
color: #4ade80;
padding: 5px 10px;
border-radius: 4px;
font-size: 10px;
font-family: 'Space Grotesk', sans-serif;
}
/* ========== APERÇU JS ANIMÉ (Phase 3) ========== */
.wg-preview-final {
background: #1a1a2e;
height: 100%;
position: relative;
overflow: hidden;
}
.wg-final-nav {
background: linear-gradient(135deg, #ff6b6b, #ff8585);
padding: 10px 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
.wg-final-logo {
color: white;
font-weight: 700;
font-size: 14px;
}
.wg-final-menu {
display: flex;
gap: 15px;
}
.wg-final-menu span {
color: rgba(255, 255, 255, 0.9);
font-size: 11px;
}
.wg-final-hero {
padding: 20px 15px;
text-align: center;
background: linear-gradient(135deg, #1a1a2e, #2a2a4a);
}
.wg-final-hero h2 {
color: white;
font-size: 18px;
margin-bottom: 8px;
}
.wg-final-hero p {
color: rgba(255, 255, 255, 0.7);
font-size: 11px;
margin-bottom: 12px;
}
.wg-final-hero button {
background: linear-gradient(135deg, #ff6b6b, #ff8585);
color: white;
border: none;
padding: 10px 20px;
border-radius: 8px;
font-size: 11px;
font-weight: 600;
}
/* Animations pour Phase JS */
.wg-animate-title {
animation: bounceIn 0.6s ease forwards;
}
.wg-animate-text {
animation: fadeInUp 0.6s ease 0.2s forwards;
opacity: 0;
}
.wg-animate-btn {
animation: pulse 1.5s infinite, fadeInUp 0.6s ease 0.4s forwards;
opacity: 0;
}
@keyframes bounceIn {
0% { transform: scale(0.5); opacity: 0; }
60% { transform: scale(1.1); opacity: 1; }
100% { transform: scale(1); }
}
.wg-final-cards {
display: flex;
justify-content: center;
gap: 10px;
padding: 10px;
background: #0f0f1a;
}
.wg-final-card {
background: rgba(255, 255, 255, 0.05);
padding: 10px 15px;
border-radius: 8px;
color: white;
font-size: 10px;
display: flex;
align-items: center;
gap: 6px;
opacity: 0;
transform: translateY(20px);
}
.wg-final-card i {
color: #ff6b6b;
}
.wg-card-1 { animation: cardSlide 0.4s ease 0.5s forwards; }
.wg-card-2 { animation: cardSlide 0.4s ease 0.7s forwards; }
.wg-card-3 { animation: cardSlide 0.4s ease 0.9s forwards; }
@keyframes cardSlide {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0); }
}
.wg-final-label {
position: absolute;
bottom: 10px;
left: 10px;
background: rgba(96, 165, 250, 0.2);
color: #60a5fa;
padding: 5px 10px;
border-radius: 4px;
font-size: 10px;
font-family: 'Space Grotesk', sans-serif;
animation: pulse 2s infinite;
}
/* Position relative pour les labels */
.wg-preview-body {
position: relative;
}
/* ========== TRANSFORMATION AVANT/APRÈS - CRÉATION SITE WEB ========== */
.wg-transformation {
background: #1a1a2e;
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
min-height: 350px;
position: relative;
}
.wg-transform-phase {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
animation: fadeIn 0.5s ease;
}
.wg-transform-phase.hidden {
display: none;
}
.wg-phase-label {
position: absolute;
top: 10px;
left: 10px;
padding: 5px 15px;
border-radius: 20px;
font-size: 11px;
font-weight: 700;
z-index: 10;
letter-spacing: 1px;
}
.wg-label-before {
background: rgba(239, 68, 68, 0.2);
color: #ef4444;
}
.wg-label-after {
background: rgba(74, 222, 128, 0.2);
color: #4ade80;
}
/* Site AVANT (moche) */
.wg-old-site {
background: #f0f0f0;
height: 100%;
font-family: 'Times New Roman', serif;
}
.wg-old-header {
background: linear-gradient(to bottom, #000080, #0000aa);
padding: 8px 15px;
}
.wg-old-logo {
color: yellow;
font-size: 14px;
font-weight: bold;
text-shadow: 2px 2px #000;
}
.wg-old-content {
padding: 20px 15px;
background: white;
margin: 10px;
border: 2px inset #ccc;
}
.wg-old-title {
font-size: 18px;
color: #000080;
text-decoration: underline;
margin-bottom: 10px;
}
.wg-old-text {
font-size: 12px;
color: #333;
margin-bottom: 15px;
}
.wg-old-image {
background: #ddd;
padding: 30px;
text-align: center;
color: #999;
font-size: 12px;
border: 1px dashed #999;
margin-bottom: 15px;
}
.wg-old-counter {
background: #000;
color: #0f0;
padding: 5px 10px;
font-family: 'Courier New', monospace;
font-size: 11px;
display: inline-block;
}
.wg-old-footer {
background: #000080;
color: #ccc;
text-align: center;
padding: 8px;
font-size: 10px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
/* Transition WG */
.wg-wg-takes-over {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
background: linear-gradient(135deg, #1a1a2e 0%, #2a2a4a 100%);
padding: 30px;
}
.wg-wg-logo {
font-size: 48px;
font-weight: 900;
color: white;
margin-bottom: 10px;
}
.wg-wg-logo span {
color: var(--wg-coral);
}
.wg-wg-text {
font-size: 18px;
color: white;
font-weight: 600;
margin-bottom: 5px;
}
.wg-wg-action {
color: rgba(255, 255, 255, 0.6);
font-size: 13px;
margin-bottom: 25px;
}
.wg-wg-loader {
width: 200px;
height: 6px;
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
overflow: hidden;
margin-bottom: 25px;
}
.wg-loader-bar {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--wg-coral), #ff8585);
border-radius: 3px;
transition: width 0.3s ease;
}
.wg-wg-steps {
display: flex;
gap: 20px;
}
.wg-step {
display: flex;
align-items: center;
gap: 8px;
color: rgba(255, 255, 255, 0.4);
font-size: 12px;
transition: all 0.3s ease;
}
.wg-step i {
width: 30px;
height: 30px;
background: rgba(255, 255, 255, 0.05);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.wg-step.active {
color: white;
}
.wg-step.active i {
background: var(--wg-coral);
color: white;
}
.wg-step.done {
color: #4ade80;
}
.wg-step.done i {
background: rgba(74, 222, 128, 0.2);
color: #4ade80;
}
/* Site APRÈS (moderne) */
.wg-new-site {
height: 100%;
display: flex;
flex-direction: column;
}
.wg-new-header {
background: linear-gradient(135deg, var(--wg-coral), #ff8585);
padding: 12px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.wg-new-logo {
color: white;
font-weight: 700;
font-size: 16px;
}
.wg-new-menu {
display: flex;
gap: 20px;
}
.wg-new-menu span {
color: rgba(255, 255, 255, 0.9);
font-size: 12px;
}
.wg-new-hero {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 20px;
background: linear-gradient(135deg, #1a1a2e, #2a2a4a);
}
.wg-new-hero h2 {
color: white;
font-size: 18px;
margin-bottom: 8px;
animation: fadeInUp 0.6s ease forwards;
}
.wg-new-hero p {
color: rgba(255, 255, 255, 0.7);
font-size: 12px;
margin-bottom: 15px;
animation: fadeInUp 0.6s ease 0.2s forwards;
opacity: 0;
}
.wg-new-hero button {
background: linear-gradient(135deg, var(--wg-coral), #ff8585);
color: white;
border: none;
padding: 12px 25px;
border-radius: 8px;
font-weight: 600;
font-size: 12px;
animation: fadeInUp 0.6s ease 0.4s forwards, pulse 2s infinite 1s;
opacity: 0;
}
.wg-new-stats {
display: flex;
justify-content: space-around;
padding: 15px;
background: rgba(0, 0, 0, 0.3);
}
.wg-new-stat {
text-align: center;
animation: fadeInUp 0.5s ease forwards;
opacity: 0;
}
.wg-new-stat:nth-child(1) { animation-delay: 0.6s; }
.wg-new-stat:nth-child(2) { animation-delay: 0.8s; }
.wg-new-stat:nth-child(3) { animation-delay: 1s; }
.wg-stat-num {
display: block;
color: #4ade80;
font-size: 18px;
font-weight: 700;
}
.wg-new-stat span:last-child {
color: rgba(255, 255, 255, 0.6);
font-size: 10px;
}
.wg-new-footer {
background: #0f0f1a;
color: rgba(255, 255, 255, 0.5);
text-align: center;
padding: 10px;
font-size: 11px;
}
.wg-new-footer strong {
color: var(--wg-coral);
}
.wg-new-footer i {
color: #ef4444;
animation: heartbeat 1.5s infinite;
}
@keyframes heartbeat {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.2); }
}
/* ========== TRANSFORMATION AVANT/APRÈS - SEO ========== */
.wg-seo-transform {
background: #1a1a2e;
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
min-height: 350px;
position: relative;
}
.wg-seo-phase {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
animation: fadeIn 0.5s ease;
}
.wg-seo-phase.hidden {
display: none;
}
/* Google Search Style */
.wg-google-search {
background: white;
padding: 15px;
text-align: center;
}
.wg-google-logo {
font-size: 28px;
font-weight: 500;
color: #4285f4;
margin-bottom: 10px;
font-family: 'Product Sans', Arial, sans-serif;
}
.wg-google-bar {
background: white;
border: 1px solid #dfe1e5;
border-radius: 24px;
padding: 10px 20px;
font-size: 14px;
color: #202124;
display: inline-block;
box-shadow: 0 1px 6px rgba(32,33,36,0.1);
}
/* Search Results */
.wg-search-results {
background: white;
padding: 15px;
}
.wg-result-bad,
.wg-result-other {
padding: 10px 0;
border-bottom: 1px solid #eee;
}
.wg-result-url {
font-size: 12px;
color: #202124;
}
.wg-result-title {
font-size: 16px;
color: #1a0dab;
margin: 3px 0;
}
.wg-pagination {
text-align: center;
padding: 10px;
color: #70757a;
font-size: 12px;
}
.wg-your-site {
padding: 10px;
background: rgba(239, 68, 68, 0.1);
border-radius: 8px;
margin-top: 10px;
}
.wg-url-you {
color: #ea4335;
}
.wg-invisible {
color: #ea4335;
font-size: 12px;
margin-left: 10px;
}
/* APRÈS - Résultats top */
.wg-result-top {
padding: 15px;
background: linear-gradient(135deg, rgba(74, 222, 128, 0.1), rgba(74, 222, 128, 0.05));
border-radius: 8px;
border-left: 4px solid #4ade80;
margin-bottom: 10px;
}
.wg-url-top {
color: #4ade80 !important;
font-weight: 600;
}
.wg-result-desc {
font-size: 13px;
color: #4d5156;
margin-top: 5px;
}
.wg-top-badge {
background: linear-gradient(135deg, #fbbf24, #f59e0b);
color: white;
padding: 3px 10px;
border-radius: 12px;
font-size: 11px;
margin-left: 10px;
}
.wg-pos-down {
color: #ea4335;
font-size: 11px;
margin-left: 10px;
}
/* Stats après */
.wg-seo-stats-after {
display: flex;
justify-content: space-around;
padding: 15px;
background: #f8f9fa;
}
.wg-stat-after {
text-align: center;
}
.wg-stat-value {
display: block;
font-size: 20px;
font-weight: 700;
color: #4ade80;
}
.wg-stat-after span:last-child {
font-size: 11px;
color: #70757a;
}
.wg-wg-credit {
background: #1a1a2e;
color: rgba(255, 255, 255, 0.6);
text-align: center;
padding: 10px;
font-size: 11px;
}
.wg-wg-credit strong {
color: var(--wg-coral);
}
.wg-wg-credit i {
color: #4ade80;
}
.wg-seo-takeover {
background: linear-gradient(135deg, #1a1a2e 0%, #2a2a4a 100%);
}
/* ========== TRANSFORMATION AVANT/APRÈS - GOOGLE ADS ========== */
.wg-ads-transform {
background: #1a1a2e;
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
min-height: 350px;
position: relative;
}
.wg-ads-phase {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
animation: fadeIn 0.5s ease;
}
.wg-ads-phase.hidden {
display: none;
}
/* AVANT - Mauvaises performances */
.wg-ads-before {
height: 100%;
background: linear-gradient(135deg, #1a1a2e, #2a2a4a);
}
.wg-ads-bad-header {
background: rgba(239, 68, 68, 0.1);
padding: 15px 20px;
display: flex;
justify-content: space-between;
align-items: center;
color: white;
font-weight: 600;
}
.wg-ads-bad-header i {
color: #4285f4;
margin-right: 10px;
}
.wg-ads-bad-status {
background: rgba(239, 68, 68, 0.2);
color: #ef4444;
padding: 5px 12px;
border-radius: 20px;
font-size: 11px;
}
.wg-ads-bad-metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
padding: 20px;
}
.wg-bad-metric {
background: rgba(239, 68, 68, 0.1);
padding: 15px;
border-radius: 8px;
text-align: center;
border: 1px solid rgba(239, 68, 68, 0.2);
}
.wg-bad-value {
display: block;
font-size: 20px;
font-weight: 700;
color: #ef4444;
}
.wg-bad-label {
display: block;
font-size: 11px;
color: rgba(255, 255, 255, 0.6);
margin: 5px 0;
}
.wg-bad-metric i.wg-red {
color: #ef4444;
}
/* Money burning animation */
.wg-money-burn {
padding: 20px;
text-align: center;
}
.wg-burn-icon {
font-size: 40px;
color: #f97316;
animation: flicker 0.5s infinite;
}
@keyframes flicker {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.wg-burn-text {
color: rgba(255, 255, 255, 0.8);
margin: 10px 0;
}
.wg-burn-text span {
color: #ef4444;
font-weight: 700;
}
.wg-burn-bar {
background: rgba(255, 255, 255, 0.1);
height: 8px;
border-radius: 4px;
overflow: hidden;
margin-top: 10px;
}
.wg-burn-progress {
height: 100%;
width: 70%;
background: linear-gradient(90deg, #ef4444, #f97316);
animation: burnProgress 2s infinite;
}
@keyframes burnProgress {
0% { width: 70%; }
50% { width: 90%; }
100% { width: 70%; }
}
/* APRÈS - Bonnes performances */
.wg-ads-after {
height: 100%;
background: linear-gradient(135deg, #1a1a2e, #2a2a4a);
}
.wg-ads-good-header {
background: rgba(74, 222, 128, 0.1);
padding: 15px 20px;
display: flex;
justify-content: space-between;
align-items: center;
color: white;
font-weight: 600;
}
.wg-ads-good-header i {
color: #4285f4;
margin-right: 10px;
}
.wg-ads-good-status {
background: rgba(74, 222, 128, 0.2);
color: #4ade80;
padding: 5px 12px;
border-radius: 20px;
font-size: 11px;
}
.wg-ads-good-metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
padding: 20px;
}
.wg-good-metric {
background: rgba(74, 222, 128, 0.1);
padding: 15px;
border-radius: 8px;
text-align: center;
border: 1px solid rgba(74, 222, 128, 0.2);
}
.wg-good-value {
display: block;
font-size: 20px;
font-weight: 700;
color: #4ade80;
}
.wg-good-label {
display: block;
font-size: 11px;
color: rgba(255, 255, 255, 0.6);
margin: 5px 0;
}
.wg-good-change {
display: inline-block;
background: rgba(74, 222, 128, 0.2);
color: #4ade80;
padding: 2px 8px;
border-radius: 10px;
font-size: 10px;
font-weight: 600;
}
/* ROI Explosion */
.wg-roi-explosion {
padding: 20px;
text-align: center;
background: linear-gradient(135deg, rgba(74, 222, 128, 0.1), rgba(74, 222, 128, 0.05));
}
.wg-roi-icon {
font-size: 40px;
color: #4ade80;
animation: rocketShake 0.5s infinite;
}
@keyframes rocketShake {
0%, 100% { transform: translateY(0); }
25% { transform: translateY(-3px) rotate(-5deg); }
75% { transform: translateY(-3px) rotate(5deg); }
}
.wg-roi-big {
font-size: 32px;
font-weight: 900;
color: #4ade80;
margin: 10px 0;
text-shadow: 0 0 20px rgba(74, 222, 128, 0.5);
}
.wg-roi-detail {
color: rgba(255, 255, 255, 0.7);
font-size: 13px;
}
.wg-ads-takeover {
background: linear-gradient(135deg, #1a1a2e 0%, #2a2a4a 100%);
}
/* ========== TRANSFORMATION AVANT/APRÈS - ERP ========== */
.wg-erp-transform {
background: #1a1a2e;
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
min-height: 350px;
position: relative;
}
.wg-erp-phase {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
animation: fadeIn 0.5s ease;
}
.wg-erp-phase.hidden {
display: none;
}
/* AVANT - Bureau en bordel */
.wg-erp-chaos {
height: 100%;
background: linear-gradient(135deg, #f5f5dc, #e8e4c9);
padding: 20px;
}
.wg-chaos-desk {
height: 100%;
}
.wg-chaos-title {
color: #8b4513;
font-weight: 600;
margin-bottom: 15px;
font-size: 14px;
}
.wg-chaos-title i {
color: #d2691e;
margin-right: 8px;
}
.wg-chaos-items {
position: relative;
height: 120px;
margin-bottom: 15px;
}
.wg-chaos-paper,
.wg-chaos-excel,
.wg-chaos-calculator,
.wg-chaos-pen {
position: absolute;
padding: 8px 12px;
border-radius: 4px;
font-size: 11px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}
.wg-chaos-paper {
background: white;
color: #333;
border: 1px solid #ddd;
}
.wg-paper-1 { top: 0; left: 0; transform: rotate(-5deg); animation: paperShake 2s infinite; }
.wg-paper-2 { top: 20px; left: 80px; transform: rotate(3deg); animation: paperShake 2.5s infinite; }
.wg-paper-3 { top: 5px; right: 20px; background: #fff740; transform: rotate(-8deg); animation: paperShake 1.8s infinite; }
.wg-paper-4 { top: 60px; left: 30px; transform: rotate(7deg); animation: paperShake 2.2s infinite; }
.wg-chaos-excel {
background: #217346;
color: white;
top: 50px;
right: 40px;
transform: rotate(-3deg);
}
.wg-chaos-calculator {
background: #333;
color: white;
top: 80px;
left: 150px;
font-size: 16px;
}
.wg-chaos-pen {
background: #1a1a2e;
color: white;
top: 90px;
right: 80px;
font-size: 14px;
}
@keyframes paperShake {
0%, 100% { transform: rotate(-5deg); }
50% { transform: rotate(-3deg) translateY(-2px); }
}
.wg-chaos-problems {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 15px;
}
.wg-problem {
background: rgba(239, 68, 68, 0.1);
color: #ef4444;
padding: 5px 10px;
border-radius: 15px;
font-size: 10px;
border: 1px solid rgba(239, 68, 68, 0.2);
}
.wg-problem i {
margin-right: 5px;
}
.wg-chaos-time {
background: rgba(239, 68, 68, 0.2);
color: #b91c1c;
padding: 10px;
border-radius: 8px;
text-align: center;
font-weight: 600;
font-size: 12px;
}
/* APRÈS - ERP moderne */
.wg-erp-modern {
display: flex;
height: calc(100% - 35px);
background: #1a1a2e;
}
.wg-modern-sidebar {
width: 50px;
background: #0f0f1a;
padding: 10px 0;
display: flex;
flex-direction: column;
align-items: center;
}
.wg-modern-logo {
color: var(--wg-coral);
font-weight: 700;
font-size: 12px;
margin-bottom: 15px;
}
.wg-modern-menu {
display: flex;
flex-direction: column;
gap: 10px;
}
.wg-modern-menu-item {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
color: rgba(255, 255, 255, 0.5);
font-size: 12px;
transition: all 0.3s ease;
}
.wg-modern-menu-item.active {
background: var(--wg-coral);
color: white;
}
.wg-modern-main {
flex: 1;
padding: 15px;
}
.wg-modern-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
color: white;
font-weight: 600;
font-size: 14px;
}
.wg-modern-user {
color: rgba(255, 255, 255, 0.6);
font-size: 11px;
}
.wg-modern-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 15px;
}
.wg-modern-stat {
background: rgba(255, 255, 255, 0.05);
padding: 12px;
border-radius: 8px;
text-align: center;
}
.wg-modern-stat-value {
display: block;
font-size: 16px;
font-weight: 700;
color: #4ade80;
}
.wg-modern-stat-label {
display: block;
font-size: 9px;
color: rgba(255, 255, 255, 0.5);
margin-top: 3px;
}
.wg-modern-benefits {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 15px;
}
.wg-benefit {
background: rgba(74, 222, 128, 0.1);
color: #4ade80;
padding: 5px 10px;
border-radius: 15px;
font-size: 10px;
border: 1px solid rgba(74, 222, 128, 0.2);
}
.wg-benefit i {
margin-right: 5px;
}
.wg-modern-time {
background: rgba(74, 222, 128, 0.2);
color: #22c55e;
padding: 10px;
border-radius: 8px;
text-align: center;
font-weight: 600;
font-size: 12px;
}
.wg-erp-takeover {
background: linear-gradient(135deg, #1a1a2e 0%, #2a2a4a 100%);
}
/* ========== HERO CARROUSEL TRANSFORMATIONS ========== */
.wg-hero-bg-gradient {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #0f0f1a 100%);
z-index: -2;
}
.wg-hero-split {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1400px;
margin: 0 auto;
padding: 0 40px;
gap: 60px;
min-height: 100vh;
}
.wg-hero-split .wg-hero-content {
flex: 1;
max-width: 600px;
}
.wg-hero-carousel {
flex: 1;
max-width: 500px;
position: relative;
min-height: 400px;
}
.wg-carousel-slide {
display: none;
animation: fadeIn 0.5s ease;
}
.wg-carousel-slide.active {
display: block;
}
/* Mini transformations */
.wg-mini-transform {
display: flex;
align-items: center;
gap: 20px;
padding: 20px;
background: rgba(255, 255, 255, 0.03);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.wg-mini-before,
.wg-mini-after {
flex: 1;
text-align: center;
}
.wg-mini-label {
font-size: 10px;
font-weight: 700;
color: #ef4444;
margin-bottom: 10px;
letter-spacing: 1px;
}
.wg-mini-label.wg-label-good {
color: #4ade80;
}
.wg-mini-arrow {
color: var(--wg-coral);
font-size: 20px;
animation: arrowPulse 1.5s infinite;
}
@keyframes arrowPulse {
0%, 100% { transform: translateX(0); opacity: 1; }
50% { transform: translateX(5px); opacity: 0.7; }
}
/* Slide 1: Site Web */
.wg-mini-site-bad {
background: #f5f5dc;
border-radius: 8px;
padding: 10px;
height: 120px;
}
.wg-mini-header-bad {
height: 15px;
background: #999;
margin-bottom: 10px;
}
.wg-mini-content-bad {
padding: 5px;
}
.wg-mini-text-bad {
height: 8px;
background: #ccc;
margin-bottom: 5px;
border-radius: 2px;
}
.wg-mini-text-bad.short {
width: 60%;
}
.wg-mini-site-good {
background: #1a1a2e;
border-radius: 8px;
padding: 8px;
height: 120px;
overflow: hidden;
}
.wg-mini-header-good {
height: 12px;
background: linear-gradient(90deg, var(--wg-coral), var(--wg-coral-light));
border-radius: 4px;
margin-bottom: 8px;
}
.wg-mini-hero-good {
height: 40px;
background: linear-gradient(135deg, rgba(255,107,107,0.3), rgba(255,142,83,0.3));
border-radius: 4px;
margin-bottom: 8px;
}
.wg-mini-cards-good {
display: flex;
gap: 5px;
}
.wg-mini-card {
flex: 1;
height: 30px;
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
}
/* Slide 2: SEO */
.wg-mini-google {
background: white;
border-radius: 8px;
padding: 10px;
text-align: left;
}
.wg-mini-google-bar {
background: #f1f3f4;
border-radius: 20px;
padding: 6px 12px;
font-size: 10px;
color: #333;
margin-bottom: 8px;
}
.wg-mini-result {
font-size: 9px;
color: #1a0dab;
padding: 4px 0;
border-bottom: 1px solid #eee;
}
.wg-mini-result span {
float: right;
color: #666;
font-size: 8px;
}
.wg-mini-you {
color: #999;
opacity: 0.6;
}
.wg-mini-top {
color: #1a0dab;
font-weight: 700;
background: rgba(74, 222, 128, 0.1);
padding: 6px !important;
border-radius: 4px;
}
.wg-mini-top span {
color: #4ade80;
font-weight: 700;
}
/* Slide 3: Google Ads */
.wg-mini-ads-bad,
.wg-mini-ads-good {
background: #1a1a2e;
border-radius: 8px;
padding: 12px;
}
.wg-mini-metric-bad,
.wg-mini-metric-good {
display: flex;
justify-content: space-between;
font-size: 11px;
color: white;
padding: 6px 0;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.wg-red { color: #ef4444; font-weight: 700; }
.wg-green { color: #4ade80; font-weight: 700; }
.wg-mini-burn {
text-align: center;
color: #ef4444;
font-size: 14px;
font-weight: 700;
margin-top: 10px;
animation: burnPulse 1s infinite;
}
@keyframes burnPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.wg-mini-roi {
text-align: center;
color: #4ade80;
font-size: 14px;
font-weight: 700;
margin-top: 10px;
animation: roiGlow 1.5s infinite;
}
@keyframes roiGlow {
0%, 100% { text-shadow: 0 0 5px rgba(74, 222, 128, 0.5); }
50% { text-shadow: 0 0 20px rgba(74, 222, 128, 0.8); }
}
/* Slide 4: ERP */
.wg-mini-chaos {
background: #f5f5dc;
border-radius: 8px;
padding: 12px;
position: relative;
height: 100px;
}
.wg-mini-paper {
position: absolute;
background: white;
padding: 8px;
border-radius: 2px;
box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
font-size: 12px;
color: #666;
}
.wg-mini-paper:nth-child(1) { top: 10px; left: 10px; transform: rotate(-5deg); }
.wg-mini-paper:nth-child(2) { top: 20px; left: 50px; transform: rotate(3deg); }
.wg-mini-paper:nth-child(3) { top: 5px; right: 20px; background: #fff740; transform: rotate(-8deg); }
.wg-mini-excel {
position: absolute;
bottom: 30px;
right: 10px;
background: #217346;
color: white;
padding: 6px 10px;
border-radius: 4px;
font-size: 10px;
}
.wg-mini-time {
position: absolute;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
background: rgba(239, 68, 68, 0.2);
color: #ef4444;
padding: 4px 10px;
border-radius: 10px;
font-size: 10px;
font-weight: 600;
}
.wg-mini-time.wg-time-good {
background: rgba(74, 222, 128, 0.2);
color: #4ade80;
}
.wg-mini-erp {
background: #1a1a2e;
border-radius: 8px;
padding: 8px;
display: flex;
gap: 8px;
height: 100px;
position: relative;
}
.wg-mini-erp-sidebar {
width: 25px;
background: #0f0f1a;
border-radius: 4px;
}
.wg-mini-erp-main {
flex: 1;
display: flex;
flex-direction: column;
gap: 5px;
}
.wg-mini-erp-stat {
flex: 1;
background: rgba(255, 255, 255, 0.05);
border-radius: 4px;
}
/* Caption et dots */
.wg-carousel-caption {
text-align: center;
margin-top: 20px;
color: white;
font-size: 14px;
font-weight: 600;
}
.wg-carousel-caption i {
color: var(--wg-coral);
margin-right: 8px;
}
.wg-carousel-dots {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 20px;
}
.wg-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
cursor: pointer;
transition: all 0.3s ease;
}
.wg-dot.active {
background: var(--wg-coral);
transform: scale(1.2);
}
/* Responsive */
@media (max-width: 1024px) {
.wg-hero-split {
flex-direction: column;
padding: 100px 20px 40px;
gap: 40px;
}
.wg-hero-split .wg-hero-content {
max-width: 100%;
text-align: center;
}
.wg-hero-carousel {
max-width: 100%;
width: 100%;
}
}
@media (max-width: 768px) {
.wg-mini-transform {
flex-direction: column;
gap: 15px;
}
.wg-mini-arrow {
transform: rotate(90deg);
}
.wg-hero-carousel {
min-height: 350px;
}
}
/* ========== BANDEAU SERVICES DANS HERO ========== */
.wg-hero-services {
display: flex;
gap: 15px;
margin: 25px 0;
flex-wrap: wrap;
justify-content: center;
}
.wg-hero-service-item {
display: flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
padding: 12px 20px;
border-radius: 30px;
color: white;
text-decoration: none;
font-size: 14px;
font-weight: 500;
border: 1px solid rgba(255, 255, 255, 0.15);
transition: all 0.3s ease;
}
.wg-hero-service-item:hover {
background: var(--wg-coral);
border-color: var(--wg-coral);
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(255, 107, 107, 0.3);
}
.wg-hero-service-item i {
font-size: 16px;
color: var(--wg-coral);
transition: color 0.3s ease;
}
.wg-hero-service-item:hover i {
color: white;
}
@media (max-width: 768px) {
.wg-hero-services {
gap: 10px;
}
.wg-hero-service-item {
padding: 10px 15px;
font-size: 12px;
}
.wg-hero-service-item i {
font-size: 14px;
}
}
/* ========== MENTIONS WEB GENERATION DANS LES TEMPLATES ========== */
.wg-preview-footer {
background: linear-gradient(135deg, var(--wg-coral), var(--wg-coral-dark));
color: white;
padding: 8px 15px;
font-size: 11px;
text-align: center;
border-radius: 0 0 8px 8px;
}
.wg-preview-footer strong {
font-weight: 700;
}
.wg-seo-credit,
.wg-ads-credit,
.wg-erp-credit {
background: linear-gradient(135deg, rgba(255, 107, 107, 0.15), rgba(255, 107, 107, 0.25));
border: 1px solid rgba(255, 107, 107, 0.4);
color: white;
padding: 12px 20px;
font-size: 13px;
text-align: center;
border-radius: 0 0 12px 12px;
margin-top: 0;
position: relative;
z-index: 10;
}
.wg-seo-credit strong,
.wg-ads-credit strong,
.wg-erp-credit strong {
color: var(--wg-coral);
font-weight: 700;
}
.wg-seo-credit i,
.wg-ads-credit i {
margin-left: 5px;
color: var(--wg-coral);
}
/* ========== CORRECTIONS DASHBOARDS SEO ET ADS ========== */
.wg-seo-dashboard,
.wg-ads-campaign {
overflow: visible !important;
border-radius: 12px;
min-height: 500px !important;
height: auto !important;
position: relative;
padding-bottom: 20px;
}
.wg-erp-app {
overflow: visible !important;
border-radius: 12px;
min-height: 480px !important;
height: auto !important;
position: relative;
padding-bottom: 20px;
}
.wg-seo-phase,
.wg-ads-phase,
.wg-erp-view {
overflow: visible !important;
height: auto !important;
}
.wg-positions-list,
.wg-positions-final {
overflow: visible !important;
height: auto !important;
}
.wg-ads-notifications {
overflow: visible !important;
height: auto !important;
}
.wg-position-item {
overflow: hidden !important;
text-overflow: ellipsis;
white-space: nowrap;
}
.wg-results-grid {
overflow: hidden !important;
}
.wg-seo-header,
.wg-ads-header {
position: relative !important;
z-index: 5;
}
.wg-seo-badge,
.wg-ads-badge {
position: relative !important;
z-index: 5;
}
/* ========== RESPONSIVE AMÉLIORÉ DASHBOARDS SEO ET ADS ========== */
/* Desktop Large (1400px+) */
@media (min-width: 1400px) {
.wg-seo-dashboard,
.wg-ads-campaign {
min-height: 520px !important;
}
}
/* Desktop (1200px - 1399px) */
@media (min-width: 1200px) and (max-width: 1399px) {
.wg-seo-dashboard,
.wg-ads-campaign {
min-height: 500px !important;
}
}
/* Tablette Large (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
.wg-seo-dashboard,
.wg-ads-campaign {
min-height: 480px !important;
transform: scale(0.95);
transform-origin: top center;
}
.wg-service-hero-visual {
display: block !important;
}
}
/* Tablette (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
.wg-seo-dashboard,
.wg-ads-campaign,
.wg-erp-app {
min-height: 450px !important;
transform: scale(0.9);
transform-origin: top center;
margin-bottom: 0;
}
.wg-service-hero-visual {
display: block !important;
margin-top: 30px;
}
.wg-seo-stats-row,
.wg-ads-metrics {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px;
}
.wg-results-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
.wg-positions-list,
.wg-positions-final {
max-height: none !important;
}
.wg-ads-notifications {
max-height: none !important;
}
}
/* Mobile Large (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
.wg-seo-dashboard,
.wg-ads-campaign,
.wg-erp-app {
min-height: 420px !important;
transform: scale(0.85);
transform-origin: top center;
margin-bottom: -30px;
}
.wg-service-hero-visual {
display: block !important;
margin-top: 25px;
}
.wg-seo-header,
.wg-ads-header {
padding: 12px 15px;
}
.wg-seo-header h3,
.wg-ads-header h3 {
font-size: 14px;
}
.wg-seo-stats-row,
.wg-ads-metrics {
grid-template-columns: repeat(2, 1fr) !important;
gap: 8px;
}
.wg-results-grid {
grid-template-columns: repeat(3, 1fr) !important;
gap: 10px;
}
.wg-result-card {
padding: 15px 10px;
}
.wg-result-value {
font-size: 20px;
}
}
/* Mobile (max-width: 575px) */
@media (max-width: 575px) {
.wg-seo-dashboard,
.wg-ads-campaign,
.wg-erp-app {
min-height: 380px !important;
transform: scale(0.78);
transform-origin: top center;
margin-bottom: -60px;
}
.wg-service-hero-visual {
display: block !important;
margin-top: 20px;
padding: 0 5px;
}
.wg-seo-phase,
.wg-ads-phase {
padding: 12px;
}
.wg-seo-header,
.wg-ads-header {
padding: 10px 12px;
}
.wg-seo-header h3,
.wg-ads-header h3 {
font-size: 13px;
}
.wg-seo-badge,
.wg-ads-badge {
font-size: 9px;
padding: 3px 8px;
}
.wg-seo-stats-row,
.wg-ads-metrics {
grid-template-columns: 1fr 1fr !important;
gap: 6px;
}
.wg-results-grid {
grid-template-columns: 1fr 1fr 1fr !important;
gap: 6px;
}
.wg-result-card {
padding: 10px 5px;
}
.wg-result-icon {
font-size: 20px;
}
.wg-result-value {
font-size: 16px;
}
.wg-result-label {
font-size: 9px;
}
.wg-position-item {
padding: 8px 10px;
font-size: 11px;
}
.wg-ads-notification {
padding: 6px 10px;
font-size: 10px;
}
}
/* Mobile très petit (max-width: 380px) */
@media (max-width: 380px) {
.wg-seo-dashboard,
.wg-ads-campaign,
.wg-erp-app {
transform: scale(0.7);
margin-bottom: -80px;
}
.wg-results-grid {
grid-template-columns: 1fr !important;
}
.wg-seo-stats-row,
.wg-ads-metrics {
grid-template-columns: 1fr !important;
}
}
/* ========== HEADER 100% TRANSPARENT - INTÉGRÉ AU HERO ========== */
/* SUPPRIMER COMPLÈTEMENT LA TOPBAR */
.wg-topbar,
.wg-topbar * {
display: none !important;
visibility: hidden !important;
height: 0 !important;
padding: 0 !important;
margin: 0 !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* HEADER TRANSPARENT SUR TOUTES LES PAGES */
.wg-header {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
border: none !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 1000 !important;
}
/* Header devient opaque UNIQUEMENT au scroll */
.wg-header.scrolled {
background: rgba(18, 18, 26, 0.95) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
}
/* Ajuster le padding du hero pour compenser le header fixed */
.wg-hero,
.wg-service-hero {
padding-top: 100px !important;
}
/* Header transparent sur mobile aussi */
@media (max-width: 992px) {
.wg-header {
background: transparent !important;
background-color: transparent !important;
padding: 10px 0;
}
.wg-header.scrolled {
background: rgba(18, 18, 26, 0.95) !important;
}
}
/* ========== VIDÉOS SUR MOBILE ========== */
/* Réactiver les vidéos sur mobile */
@media (max-width: 768px) {
.wg-hero-video {
display: block !important;
opacity: 0.5; /* Légèrement plus transparent pour performance perçue */
}
.wg-service-hero .wg-hero-video {
display: block !important;
}
}
/* ========== ANIMATIONS MOBILE AMÉLIORÉES ========== */
/* Reset des transforms problématiques sur mobile */
@media (max-width: 991px) {
.wg-dev-studio,
.wg-seo-dashboard,
.wg-ads-campaign,
.wg-erp-app {
transform: none !important;
margin-bottom: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
.wg-service-hero-visual {
display: block !important;
width: 100%;
padding: 0 15px;
margin-top: 30px;
}
}
/* Tablette (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
.wg-dev-studio {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 20px;
height: auto !important;
}
.wg-ide,
.wg-preview {
width: 100% !important;
height: 280px !important;
}
.wg-seo-dashboard,
.wg-ads-campaign {
min-height: auto !important;
height: auto !important;
}
.wg-seo-phase,
.wg-ads-phase {
padding: 15px;
}
.wg-results-grid {
grid-template-columns: repeat(3, 1fr) !important;
gap: 10px;
}
.wg-result-card {
padding: 12px 8px;
}
.wg-result-icon {
font-size: 24px;
}
.wg-result-value {
font-size: 18px;
}
.wg-result-label {
font-size: 10px;
}
.wg-positions-list,
.wg-positions-final {
max-height: none !important;
}
.wg-position-item {
padding: 10px 12px;
font-size: 12px;
}
.wg-ads-metrics {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px;
}
.wg-ads-notifications {
max-height: none !important;
}
.wg-erp-app {
min-height: auto !important;
height: auto !important;
}
.wg-erp-sidebar {
width: 50px;
}
.wg-erp-main {
padding: 15px;
}
}
/* Mobile (max-width: 767px) */
@media (max-width: 767px) {
.wg-service-hero-visual {
padding: 0 10px;
margin-top: 20px;
}
.wg-dev-studio {
display: flex !important;
flex-direction: column !important;
gap: 15px;
height: auto !important;
}
.wg-ide,
.wg-preview {
width: 100% !important;
height: 220px !important;
min-height: 220px !important;
}
.wg-ide-header,
.wg-preview-header {
padding: 8px 10px;
}
.wg-ide-tabs {
gap: 5px;
}
.wg-ide-tab {
font-size: 9px;
padding: 4px 8px;
}
.wg-ide-code {
font-size: 9px;
padding: 10px;
}
.wg-code-line {
padding: 1px 0;
}
.wg-seo-dashboard,
.wg-ads-campaign {
min-height: auto !important;
height: auto !important;
border-radius: 12px;
}
.wg-seo-header,
.wg-ads-header {
padding: 10px 12px;
}
.wg-seo-header h3,
.wg-ads-header h3 {
font-size: 12px;
}
.wg-seo-badge,
.wg-ads-badge {
font-size: 8px;
padding: 3px 6px;
}
.wg-seo-phase,
.wg-ads-phase {
padding: 12px;
}
.wg-results-grid {
grid-template-columns: repeat(3, 1fr) !important;
gap: 6px;
}
.wg-result-card {
padding: 10px 5px;
border-radius: 8px;
}
.wg-result-icon {
font-size: 20px;
margin-bottom: 5px;
}
.wg-result-value {
font-size: 14px;
}
.wg-result-label {
font-size: 8px;
}
.wg-positions-list,
.wg-positions-final {
margin-top: 10px;
}
.wg-position-item {
padding: 8px 10px;
font-size: 11px;
margin-bottom: 5px;
}
.wg-position-rank {
font-size: 10px;
padding: 2px 6px;
}
.wg-ads-metrics {
grid-template-columns: repeat(2, 1fr) !important;
gap: 8px;
}
.wg-ads-metric {
padding: 10px 8px;
}
.wg-ads-metric-value {
font-size: 16px;
}
.wg-ads-metric-label {
font-size: 9px;
}
.wg-ads-notifications {
margin-top: 10px;
}
.wg-ads-notification {
padding: 6px 10px;
font-size: 10px;
margin-bottom: 5px;
}
.wg-erp-app {
min-height: auto !important;
height: auto !important;
flex-direction: column !important;
}
.wg-erp-sidebar {
width: 100% !important;
flex-direction: row !important;
padding: 10px;
gap: 10px;
}
.wg-erp-sidebar-icon {
width: 35px;
height: 35px;
font-size: 14px;
}
.wg-erp-main {
padding: 12px;
}
.wg-erp-header h3 {
font-size: 12px;
}
.wg-erp-stats-row {
grid-template-columns: repeat(2, 1fr) !important;
gap: 8px;
}
.wg-erp-stat {
padding: 10px;
}
.wg-erp-stat-value {
font-size: 16px;
}
.wg-erp-stat-label {
font-size: 9px;
}
}
/* Mobile très petit (max-width: 480px) */
@media (max-width: 480px) {
.wg-ide,
.wg-preview {
height: 180px !important;
min-height: 180px !important;
}
.wg-ide-code {
font-size: 8px;
}
.wg-preview-body {
font-size: 8px;
}
.wg-results-grid {
grid-template-columns: 1fr 1fr 1fr !important;
gap: 4px;
}
.wg-result-card {
padding: 8px 4px;
}
.wg-result-icon {
font-size: 16px;
}
.wg-result-value {
font-size: 12px;
}
.wg-result-label {
font-size: 7px;
}
.wg-position-item {
font-size: 10px;
padding: 6px 8px;
}
.wg-ads-metrics {
grid-template-columns: 1fr 1fr !important;
gap: 6px;
}
.wg-ads-metric-value {
font-size: 14px;
}
.wg-erp-stats-row {
grid-template-columns: 1fr 1fr !important;
}
}
/* ========== CORRECTIONS MOBILE V28 - ANIMATIONS RESPONSIVE ========== */
/* Une colonne, complet, sans débordement, ERP menu horizontal en haut */
/* ===== RESET MOBILE ===== */
@media (max-width: 1200px) {
.wg-service-hero-visual {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 20px auto 0 !important;
}
.wg-service-hero {
overflow: hidden !important;
padding-bottom: 30px !important;
}
.wg-service-hero-grid {
overflow: hidden !important;
}
}
/* ===== MOBILE (max 768px) ===== */
@media (max-width: 768px) {
/* ===== CRÉATION WEB - IDE et Preview en UNE COLONNE ===== */
.wg-dev-studio {
display: flex !important;
flex-direction: column !important;
gap: 15px !important;
width: 100% !important;
max-width: 320px !important;
margin: 0 auto !important;
height: auto !important;
}
.wg-ide {
width: 100% !important;
height: 180px !important;
min-height: 180px !important;
max-height: 180px !important;
border-radius: 12px !important;
overflow: hidden !important;
}
.wg-preview {
width: 100% !important;
height: 200px !important;
min-height: 200px !important;
max-height: 200px !important;
border-radius: 12px !important;
overflow: hidden !important;
}
.wg-ide-code {
font-size: 10px !important;
line-height: 1.4 !important;
}
.wg-preview-body {
padding: 10px !important;
}
.wg-preview-body h1 {
font-size: 16px !important;
}
.wg-preview-body p {
font-size: 11px !important;
}
.wg-preview-btn {
font-size: 10px !important;
padding: 6px 12px !important;
}
/* ===== SEO DASHBOARD - Adapté mobile ===== */
.wg-seo-dashboard {
width: 100% !important;
max-width: 320px !important;
margin: 0 auto !important;
height: auto !important;
max-height: 400px !important;
overflow: hidden !important;
border-radius: 12px !important;
}
.wg-seo-phase {
padding: 15px !important;
}
.wg-seo-header h3 {
font-size: 14px !important;
}
.wg-scan-item {
font-size: 11px !important;
padding: 8px 10px !important;
}
.wg-position-item {
font-size: 11px !important;
padding: 8px 10px !important;
}
.wg-seo-score-circle {
width: 60px !important;
height: 60px !important;
}
.wg-seo-score-value {
font-size: 16px !important;
}
/* ===== GOOGLE ADS - Adapté mobile ===== */
.wg-ads-campaign,
.wg-ads-dashboard {
width: 100% !important;
max-width: 320px !important;
margin: 0 auto !important;
height: auto !important;
max-height: 420px !important;
overflow: hidden !important;
border-radius: 12px !important;
}
.wg-ads-phase {
padding: 15px !important;
}
.wg-ads-header h3 {
font-size: 14px !important;
}
.wg-campaign-metrics {
gap: 10px !important;
}
.wg-metric-card {
padding: 10px !important;
}
.wg-metric-value {
font-size: 18px !important;
}
.wg-metric-label {
font-size: 9px !important;
}
.wg-live-metric {
font-size: 10px !important;
padding: 6px 8px !important;
}
/* ===== ERP - MENU HORIZONTAL EN HAUT ===== */
.wg-erp-app {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
max-width: 320px !important;
margin: 0 auto !important;
height: auto !important;
max-height: 420px !important;
overflow: hidden !important;
border-radius: 12px !important;
}
.wg-erp-sidebar {
width: 100% !important;
height: auto !important;
flex-direction: row !important;
justify-content: center !important;
padding: 10px !important;
gap: 8px !important;
order: -1 !important;
border-right: none !important;
border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}
.wg-erp-sidebar-icon {
width: 36px !important;
height: 36px !important;
font-size: 14px !important;
}
.wg-erp-main {
width: 100% !important;
flex: 1 !important;
overflow: hidden !important;
}
.wg-erp-header {
padding: 12px !important;
}
.wg-erp-greeting {
font-size: 14px !important;
}
.wg-erp-stats {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
padding: 12px !important;
}
.wg-erp-stat-card {
padding: 12px !important;
}
.wg-erp-stat-value {
font-size: 20px !important;
}
.wg-erp-stat-label {
font-size: 10px !important;
}
.wg-erp-notification {
margin: 10px !important;
padding: 10px !important;
font-size: 11px !important;
}
}
/* ===== PETIT MOBILE (max 480px) ===== */
@media (max-width: 480px) {
.wg-dev-studio,
.wg-seo-dashboard,
.wg-ads-campaign,
.wg-ads-dashboard,
.wg-erp-app {
max-width: 290px !important;
}
.wg-ide {
height: 160px !important;
min-height: 160px !important;
max-height: 160px !important;
}
.wg-preview {
height: 180px !important;
min-height: 180px !important;
max-height: 180px !important;
}
.wg-ide-code {
font-size: 9px !important;
}
.wg-seo-dashboard,
.wg-ads-campaign,
.wg-ads-dashboard {
max-height: 380px !important;
}
.wg-erp-app {
max-height: 400px !important;
}
.wg-erp-sidebar-icon {
width: 32px !important;
height: 32px !important;
font-size: 12px !important;
}
.wg-erp-stat-value {
font-size: 18px !important;
}
}
/* ===== TRÈS PETIT MOBILE (max 375px - iPhone SE) ===== */
@media (max-width: 375px) {
.wg-dev-studio,
.wg-seo-dashboard,
.wg-ads-campaign,
.wg-ads-dashboard,
.wg-erp-app {
max-width: 260px !important;
}
.wg-ide {
height: 140px !important;
min-height: 140px !important;
max-height: 140px !important;
}
.wg-preview {
height: 160px !important;
min-height: 160px !important;
max-height: 160px !important;
}
.wg-ide-code {
font-size: 8px !important;
}
.wg-preview-body h1 {
font-size: 14px !important;
}
.wg-preview-body p {
font-size: 10px !important;
}
.wg-seo-dashboard,
.wg-ads-campaign,
.wg-ads-dashboard {
max-height: 350px !important;
}
.wg-erp-app {
max-height: 380px !important;
}
.wg-erp-sidebar-icon {
width: 28px !important;
height: 28px !important;
font-size: 11px !important;
}
.wg-erp-stats {
gap: 8px !important;
padding: 10px !important;
}
.wg-erp-stat-value {
font-size: 16px !important;
}
.wg-erp-stat-label {
font-size: 9px !important;
}
}
/* ========== V29 CORRECTIONS ========== */
/* ===== 1. HOMEPAGE HERO - Éviter chevauchement CTA + Scroll ===== */
.wg-hero-content {
padding-bottom: 120px !important; /* Espace pour le scroll indicator */
}
.wg-hero-scroll {
bottom: 20px !important; /* Remonter légèrement */
}
/* Mobile homepage hero */
@media (max-width: 768px) {
.wg-hero-content {
padding-bottom: 100px !important;
}
.wg-hero-scroll {
bottom: 15px !important;
}
.wg-hero-contact {
flex-direction: column !important;
gap: 10px !important;
}
.wg-contact-pill {
width: 100% !important;
justify-content: center !important;
}
}
/* ===== 2. SERVICE HERO - Hauteur suffisante pour animations mobile ===== */
@media (max-width: 768px) {
/* Hero des pages service - HAUTEUR AUTO pour contenir les animations */
.wg-service-hero {
min-height: auto !important;
height: auto !important;
padding: 100px 20px 40px !important;
}
.wg-service-hero-grid {
display: flex !important;
flex-direction: column !important;
gap: 30px !important;
}
.wg-service-hero-content {
text-align: center !important;
}
.wg-service-hero-visual {
display: block !important;
width: 100% !important;
overflow: visible !important;
}
/* ===== CRÉATION WEB - IDE + Preview COMPLETS ===== */
.wg-dev-studio {
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
width: 100% !important;
max-width: 340px !important;
margin: 0 auto !important;
height: auto !important;
min-height: auto !important;
}
.wg-ide {
width: 100% !important;
height: 220px !important;
min-height: 220px !important;
max-height: none !important;
border-radius: 12px !important;
overflow: hidden !important;
}
.wg-preview {
width: 100% !important;
height: 280px !important;
min-height: 280px !important;
max-height: none !important;
border-radius: 12px !important;
overflow: hidden !important;
}
.wg-ide-code {
font-size: 11px !important;
line-height: 1.5 !important;
padding: 15px !important;
}
.wg-preview-body {
padding: 20px !important;
height: 100% !important;
}
.wg-preview-body h1 {
font-size: 20px !important;
margin-bottom: 10px !important;
}
.wg-preview-body p {
font-size: 13px !important;
}
/* ===== SEO DASHBOARD - COMPLET ===== */
.wg-seo-dashboard {
width: 100% !important;
max-width: 340px !important;
margin: 0 auto !important;
height: auto !important;
min-height: 450px !important;
max-height: none !important;
overflow: visible !important;
border-radius: 12px !important;
}
.wg-seo-phase {
padding: 20px !important;
}
/* ===== GOOGLE ADS - COMPLET ===== */
.wg-ads-campaign,
.wg-ads-dashboard {
width: 100% !important;
max-width: 340px !important;
margin: 0 auto !important;
height: auto !important;
min-height: 450px !important;
max-height: none !important;
overflow: visible !important;
border-radius: 12px !important;
}
.wg-ads-phase {
padding: 20px !important;
}
/* ===== ERP - MENU HORIZONTAL EN HAUT, COMPLET ===== */
.wg-erp-app {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
max-width: 340px !important;
margin: 0 auto !important;
height: auto !important;
min-height: 480px !important;
max-height: none !important;
overflow: visible !important;
border-radius: 12px !important;
}
.wg-erp-sidebar {
width: 100% !important;
height: auto !important;
flex-direction: row !important;
justify-content: center !important;
flex-wrap: wrap !important;
padding: 15px !important;
gap: 10px !important;
order: -1 !important;
border-right: none !important;
border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}
.wg-erp-sidebar-icon {
width: 40px !important;
height: 40px !important;
font-size: 16px !important;
}
.wg-erp-main {
width: 100% !important;
flex: 1 !important;
padding: 15px !important;
}
.wg-erp-stats {
grid-template-columns: repeat(2, 1fr) !important;
gap: 15px !important;
}
.wg-erp-stat-card {
padding: 15px !important;
}
.wg-erp-stat-value {
font-size: 24px !important;
}
.wg-erp-stat-label {
font-size: 11px !important;
}
/* ===== SUPPRIMER les transform scale qui causent des problèmes ===== */
.wg-dev-studio,
.wg-seo-dashboard,
.wg-ads-dashboard,
.wg-ads-campaign,
.wg-erp-app {
transform: none !important;
transform-origin: unset !important;
margin-bottom: 0 !important;
}
}
/* ===== PETIT MOBILE (max 480px) ===== */
@media (max-width: 480px) {
.wg-service-hero {
padding: 90px 15px 30px !important;
}
.wg-dev-studio,
.wg-seo-dashboard,
.wg-ads-campaign,
.wg-ads-dashboard,
.wg-erp-app {
max-width: 300px !important;
}
.wg-ide {
height: 200px !important;
min-height: 200px !important;
}
.wg-preview {
height: 250px !important;
min-height: 250px !important;
}
.wg-ide-code {
font-size: 10px !important;
}
.wg-preview-body h1 {
font-size: 18px !important;
}
.wg-preview-body p {
font-size: 12px !important;
}
.wg-seo-dashboard,
.wg-ads-campaign,
.wg-ads-dashboard {
min-height: 420px !important;
}
.wg-erp-app {
min-height: 450px !important;
}
.wg-erp-sidebar-icon {
width: 36px !important;
height: 36px !important;
font-size: 14px !important;
}
.wg-erp-stat-value {
font-size: 20px !important;
}
}
/* ===== TRÈS PETIT MOBILE (max 375px - iPhone SE) ===== */
@media (max-width: 375px) {
.wg-dev-studio,
.wg-seo-dashboard,
.wg-ads-campaign,
.wg-ads-dashboard,
.wg-erp-app {
max-width: 280px !important;
}
.wg-ide {
height: 180px !important;
min-height: 180px !important;
}
.wg-preview {
height: 220px !important;
min-height: 220px !important;
}
.wg-ide-code {
font-size: 9px !important;
}
.wg-preview-body h1 {
font-size: 16px !important;
}
.wg-preview-body p {
font-size: 11px !important;
}
.wg-seo-dashboard,
.wg-ads-campaign,
.wg-ads-dashboard {
min-height: 380px !important;
}
.wg-erp-app {
min-height: 420px !important;
}
.wg-erp-sidebar-icon {
width: 32px !important;
height: 32px !important;
font-size: 12px !important;
}
.wg-erp-stats {
gap: 10px !important;
}
.wg-erp-stat-value {
font-size: 18px !important;
}
.wg-erp-stat-label {
font-size: 10px !important;
}
}
/* ========== V30 - CORRECTIONS ANIMATIONS MOBILE COMPLÈTES ========== */
/* ===== MOBILE (max 768px) - CRÉATION WEB ===== */
@media (max-width: 768px) {
/* Service Hero - Hauteur auto pour contenir tout */
.wg-service-hero {
min-height: auto !important;
height: auto !important;
padding: 100px 15px 50px !important;
}
.wg-service-hero-grid {
display: flex !important;
flex-direction: column !important;
gap: 40px !important;
}
.wg-service-hero-content {
text-align: center !important;
}
.wg-service-hero-visual {
display: block !important;
width: 100% !important;
padding: 0 !important;
}
/* DEV STUDIO - Conteneur principal */
.wg-dev-studio {
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 auto !important;
height: auto !important;
min-height: auto !important;
transform: none !important;
}
/* IDE - Card Code COMPLÈTE */
.wg-ide {
width: 100% !important;
height: auto !important;
min-height: 280px !important;
max-height: none !important;
border-radius: 12px !important;
overflow: visible !important;
display: flex !important;
flex-direction: column !important;
}
.wg-ide-header {
flex-shrink: 0 !important;
padding: 10px 12px !important;
}
.wg-ide-body {
flex: 1 !important;
min-height: 180px !important;
padding: 15px !important;
overflow: visible !important;
}
.wg-ide-code {
font-size: 11px !important;
line-height: 1.5 !important;
white-space: pre-wrap !important;
word-break: break-word !important;
overflow: visible !important;
}
.wg-ide-lines {
font-size: 10px !important;
line-height: 1.5 !important;
}
.wg-ide-status {
flex-shrink: 0 !important;
padding: 8px 12px !important;
}
.wg-ide-tabs {
flex-wrap: wrap !important;
gap: 5px !important;
}
.wg-ide-tab {
font-size: 10px !important;
padding: 5px 10px !important;
}
/* PREVIEW - Card Site COMPLÈTE */
.wg-preview {
width: 100% !important;
height: auto !important;
min-height: 320px !important;
max-height: none !important;
border-radius: 12px !important;
overflow: visible !important;
display: flex !important;
flex-direction: column !important;
}
.wg-preview-header {
flex-shrink: 0 !important;
padding: 10px 12px !important;
}
.wg-preview-body {
flex: 1 !important;
min-height: 220px !important;
overflow: visible !important;
position: relative !important;
}
.wg-preview-footer {
flex-shrink: 0 !important;
padding: 10px 15px !important;
}
/* Styles des previews internes */
.wg-preview-raw,
.wg-preview-styled,
.wg-preview-final {
height: auto !important;
min-height: 200px !important;
overflow: visible !important;
}
.wg-raw-content,
.wg-styled-hero,
.wg-final-hero {
padding: 20px 15px !important;
}
.wg-raw-title,
.wg-styled-hero h2,
.wg-final-hero h2 {
font-size: 20px !important;
}
.wg-raw-text,
.wg-styled-hero p,
.wg-final-hero p {
font-size: 13px !important;
}
.wg-raw-label,
.wg-styled-label,
.wg-final-label {
position: relative !important;
bottom: auto !important;
left: auto !important;
margin: 10px !important;
display: inline-block !important;
}
.wg-final-cards {
flex-wrap: wrap !important;
gap: 8px !important;
padding: 15px !important;
}
.wg-final-card {
font-size: 10px !important;
padding: 8px 12px !important;
}
/* Loading state */
.wg-preview-loading {
position: relative !important;
top: auto !important;
left: auto !important;
transform: none !important;
padding: 40px 20px !important;
}
.wg-preview-loading i {
font-size: 24px !important;
}
.wg-preview-loading span {
font-size: 12px !important;
}
}
/* ===== PETIT MOBILE (max 480px) ===== */
@media (max-width: 480px) {
.wg-service-hero {
padding: 90px 10px 40px !important;
}
.wg-ide {
min-height: 260px !important;
}
.wg-ide-body {
min-height: 160px !important;
padding: 12px !important;
}
.wg-ide-code {
font-size: 10px !important;
}
.wg-preview {
min-height: 300px !important;
}
.wg-preview-body {
min-height: 200px !important;
}
.wg-raw-title,
.wg-styled-hero h2,
.wg-final-hero h2 {
font-size: 18px !important;
}
.wg-final-cards {
gap: 6px !important;
padding: 12px !important;
}
.wg-final-card {
font-size: 9px !important;
padding: 6px 10px !important;
}
}
/* ===== TRÈS PETIT MOBILE (max 375px) ===== */
@media (max-width: 375px) {
.wg-ide {
min-height: 240px !important;
}
.wg-ide-body {
min-height: 140px !important;
padding: 10px !important;
}
.wg-ide-code {
font-size: 9px !important;
}
.wg-ide-tab {
font-size: 9px !important;
padding: 4px 8px !important;
}
.wg-preview {
min-height: 280px !important;
}
.wg-preview-body {
min-height: 180px !important;
}
.wg-raw-title,
.wg-styled-hero h2,
.wg-final-hero h2 {
font-size: 16px !important;
}
.wg-raw-text,
.wg-styled-hero p,
.wg-final-hero p {
font-size: 12px !important;
}
}
/* ========== V31 - CORRECTIONS FINALES MOBILE CRÉATION WEB ========== */
@media (max-width: 768px) {
/* ===== IDE - CODE COMPLET VISIBLE ===== */
.wg-ide {
height: auto !important;
min-height: 300px !important;
max-height: none !important;
overflow: visible !important;
}
.wg-ide-body {
flex: 1 !important;
min-height: 200px !important;
height: auto !important;
padding: 15px !important;
overflow: visible !important;
display: flex !important;
}
.wg-ide-code {
flex: 1 !important;
font-size: 10px !important;
line-height: 1.4 !important;
white-space: pre-wrap !important;
word-wrap: break-word !important;
overflow: visible !important;
height: auto !important;
min-height: 150px !important;
}
.wg-ide-lines {
flex-shrink: 0 !important;
font-size: 10px !important;
line-height: 1.4 !important;
min-height: 150px !important;
}
/* ===== PREVIEW - SANS SUPERPOSITION ===== */
.wg-preview {
height: auto !important;
min-height: 350px !important;
max-height: none !important;
overflow: visible !important;
}
.wg-preview-body {
flex: 1 !important;
min-height: 250px !important;
height: auto !important;
overflow: visible !important;
position: relative !important;
}
/* Previews internes - hauteur auto */
.wg-preview-raw,
.wg-preview-styled,
.wg-preview-final {
height: auto !important;
min-height: 230px !important;
overflow: visible !important;
display: flex !important;
flex-direction: column !important;
position: relative !important;
}
/* Labels en bas SANS superposition */
.wg-raw-label,
.wg-styled-label,
.wg-final-label {
position: static !important;
display: block !important;
margin: 15px 10px 10px 10px !important;
text-align: center !important;
background: rgba(74, 222, 128, 0.2) !important;
padding: 8px 12px !important;
border-radius: 6px !important;
}
.wg-raw-label {
background: rgba(0, 0, 0, 0.7) !important;
color: #ff6b6b !important;
}
/* Hero sections avec plus d'espace */
.wg-styled-hero,
.wg-final-hero {
padding: 25px 15px 20px !important;
flex: 1 !important;
}
.wg-raw-content {
padding: 20px 15px !important;
flex: 1 !important;
}
/* Cards finales */
.wg-final-cards {
padding: 12px !important;
gap: 8px !important;
flex-wrap: wrap !important;
justify-content: center !important;
}
.wg-final-card {
font-size: 9px !important;
padding: 6px 10px !important;
}
/* Loading centré */
.wg-preview-loading {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
min-height: 200px !important;
position: static !important;
transform: none !important;
}
}
@media (max-width: 480px) {
.wg-ide {
min-height: 280px !important;
}
.wg-ide-body {
min-height: 180px !important;
padding: 12px !important;
}
.wg-ide-code {
font-size: 9px !important;
min-height: 130px !important;
}
.wg-preview {
min-height: 320px !important;
}
.wg-preview-body {
min-height: 220px !important;
}
.wg-preview-raw,
.wg-preview-styled,
.wg-preview-final {
min-height: 200px !important;
}
.wg-styled-hero h2,
.wg-final-hero h2,
.wg-raw-title {
font-size: 16px !important;
}
.wg-styled-hero p,
.wg-final-hero p,
.wg-raw-text {
font-size: 11px !important;
}
}
@media (max-width: 375px) {
.wg-ide {
min-height: 260px !important;
}
.wg-ide-code {
font-size: 8px !important;
}
.wg-preview {
min-height: 300px !important;
}
.wg-styled-hero h2,
.wg-final-hero h2,
.wg-raw-title {
font-size: 14px !important;
}
.wg-final-cards {
gap: 5px !important;
}
.wg-final-card {
font-size: 8px !important;
padding: 5px 8px !important;
}
}
/* ========== V32 - ERP MENU HORIZONTAL MOBILE ========== */
@media (max-width: 768px) {
/* ERP App - Layout en colonne */
.wg-erp-app {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
height: auto !important;
min-height: auto !important;
max-height: none !important;
overflow: visible !important;
}
/* Sidebar devient barre horizontale EN HAUT */
.wg-erp-sidebar {
width: 100% !important;
height: auto !important;
flex-direction: row !important;
justify-content: center !important;
align-items: center !important;
padding: 12px 15px !important;
gap: 12px !important;
order: -1 !important;
border-right: none !important;
border-bottom: 1px solid rgba(255,255,255,0.1) !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
}
/* Logo ERP */
.wg-erp-logo {
padding: 6px 10px !important;
font-size: 9px !important;
border-radius: 6px !important;
flex-shrink: 0 !important;
}
/* Icônes du menu */
.wg-erp-sidebar-icon {
width: 38px !important;
height: 38px !important;
font-size: 14px !important;
border-radius: 8px !important;
flex-shrink: 0 !important;
}
/* Contenu principal */
.wg-erp-main {
width: 100% !important;
flex: 1 !important;
padding: 15px !important;
overflow: visible !important;
}
/* Header */
.wg-erp-header {
padding: 12px 15px !important;
}
.wg-erp-header h3 {
font-size: 14px !important;
}
/* Stats en grille 3 colonnes */
.wg-erp-stats {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 12px !important;
padding: 15px !important;
}
.wg-erp-stat {
text-align: center !important;
}
.wg-erp-stat-value {
font-size: 18px !important;
}
.wg-erp-stat-label {
font-size: 10px !important;
}
/* Rapport */
.wg-erp-report {
padding: 15px !important;
}
.wg-erp-report-file {
padding: 10px 12px !important;
font-size: 11px !important;
}
.wg-erp-download-btn {
padding: 10px 20px !important;
font-size: 12px !important;
}
}
@media (max-width: 480px) {
.wg-erp-sidebar {
padding: 10px 12px !important;
gap: 10px !important;
}
.wg-erp-sidebar-icon {
width: 34px !important;
height: 34px !important;
font-size: 13px !important;
}
.wg-erp-stats {
grid-template-columns: repeat(3, 1fr) !important;
gap: 10px !important;
}
.wg-erp-stat-value {
font-size: 16px !important;
}
}
@media (max-width: 375px) {
.wg-erp-sidebar {
padding: 8px 10px !important;
gap: 8px !important;
}
.wg-erp-logo {
padding: 5px 8px !important;
font-size: 8px !important;
}
.wg-erp-sidebar-icon {
width: 30px !important;
height: 30px !important;
font-size: 12px !important;
}
.wg-erp-stat-value {
font-size: 14px !important;
}
.wg-erp-stat-label {
font-size: 9px !important;
}
}
/* ========== V33 - ERP MENU HORIZONTAL FORCÉ ========== */
/* MOBILE - Forcer menu horizontal */
@media screen and (max-width: 768px) {
/* Container ERP en colonne */
.wg-service-hero-visual .wg-erp-app,
.wg-erp-app,
div.wg-erp-app {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: auto !important;
max-height: none !important;
}
/* SIDEBAR EN HORIZONTAL - FORCÉ */
.wg-service-hero-visual .wg-erp-app .wg-erp-sidebar,
.wg-erp-app .wg-erp-sidebar,
.wg-erp-app > .wg-erp-sidebar,
div.wg-erp-sidebar,
.wg-erp-sidebar {
display: flex !important;
flex-direction: row !important;
width: 100% !important;
height: auto !important;
min-height: auto !important;
max-height: 70px !important;
padding: 12px 15px !important;
gap: 10px !important;
justify-content: center !important;
align-items: center !important;
order: -1 !important;
border-right: none !important;
border-bottom: 1px solid rgba(255,255,255,0.15) !important;
background: rgba(0, 0, 0, 0.4) !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
}
/* Logo ERP */
.wg-erp-sidebar .wg-erp-logo,
.wg-erp-logo {
padding: 6px 10px !important;
font-size: 9px !important;
border-radius: 6px !important;
flex-shrink: 0 !important;
order: 0 !important;
}
/* Icônes menu - toutes en ligne */
.wg-erp-sidebar .wg-erp-sidebar-icon,
.wg-erp-sidebar-icon {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
min-height: 36px !important;
font-size: 14px !important;
border-radius: 8px !important;
flex-shrink: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Main content prend toute la largeur */
.wg-erp-app .wg-erp-main,
.wg-erp-main {
width: 100% !important;
flex: 1 !important;
padding: 15px !important;
order: 1 !important;
}
}
/* PETIT MOBILE */
@media screen and (max-width: 480px) {
.wg-erp-sidebar {
padding: 10px 12px !important;
gap: 8px !important;
max-height: 60px !important;
}
.wg-erp-sidebar-icon {
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
min-height: 32px !important;
font-size: 12px !important;
}
.wg-erp-logo {
padding: 5px 8px !important;
font-size: 8px !important;
}
}
/* TRÈS PETIT MOBILE */
@media screen and (max-width: 375px) {
.wg-erp-sidebar {
padding: 8px 10px !important;
gap: 6px !important;
max-height: 55px !important;
}
.wg-erp-sidebar-icon {
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
min-height: 28px !important;
font-size: 11px !important;
}
.wg-erp-logo {
padding: 4px 6px !important;
font-size: 7px !important;
}
}
/* ========== V34 - ERP MENU HORIZONTAL COMPLET ========== */
@media screen and (max-width: 768px) {
/* ERP App en colonne */
.wg-erp-app {
display: flex !important;
flex-direction: column !important;
}
/* Sidebar horizontal en haut */
.wg-erp-sidebar {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: auto !important;
padding: 12px 10px !important;
gap: 10px !important;
order: -1 !important;
border-bottom: 1px solid rgba(255,255,255,0.1) !important;
border-right: none !important;
}
/* Logo ERP inline */
.wg-erp-logo {
flex-shrink: 0 !important;
}
/* MENU - HORIZONTAL avec toutes les icônes */
.wg-erp-menu {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 8px !important;
align-items: center !important;
justify-content: center !important;
}
/* Icônes du menu */
.wg-erp-menu-item {
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
min-height: 34px !important;
font-size: 13px !important;
flex-shrink: 0 !important;
}
/* Main content */
.wg-erp-main {
width: 100% !important;
order: 1 !important;
}
}
@media screen and (max-width: 480px) {
.wg-erp-sidebar {
padding: 10px 8px !important;
gap: 8px !important;
}
.wg-erp-menu {
gap: 6px !important;
}
.wg-erp-menu-item {
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
min-height: 30px !important;
font-size: 12px !important;
}
.wg-erp-logo {
padding: 5px 8px !important;
font-size: 8px !important;
}
}
@media screen and (max-width: 375px) {
.wg-erp-sidebar {
padding: 8px 6px !important;
gap: 6px !important;
}
.wg-erp-menu {
gap: 5px !important;
}
.wg-erp-menu-item {
width: 26px !important;
height: 26px !important;
min-width: 26px !important;
min-height: 26px !important;
font-size: 10px !important;
border-radius: 6px !important;
}
.wg-erp-logo {
padding: 4px 6px !important;
font-size: 7px !important;
}
}
/* ========== SECTION SEO ANALYZER ========== */
.wg-analyzer-section {
background: var(--wg-dark);
padding: 100px 0;
}
.wg-analyzer-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-top: 60px;
}
.wg-analyzer-card {
background: var(--wg-glass);
border: 1px solid var(--wg-glass-border);
border-radius: var(--wg-radius);
padding: 40px 30px;
text-align: center;
text-decoration: none;
transition: var(--wg-transition);
display: block;
}
.wg-analyzer-card:hover {
transform: translateY(-10px);
border-color: var(--wg-coral);
box-shadow: var(--wg-glow);
}
.wg-analyzer-icon {
width: 80px;
height: 80px;
background: var(--wg-gradient);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 25px;
font-size: 32px;
color: white;
}
.wg-analyzer-card h3 {
font-family: 'Space Grotesk', sans-serif;
font-size: 24px;
font-weight: 700;
color: white;
margin-bottom: 15px;
}
.wg-analyzer-card p {
color: rgba(255, 255, 255, 0.7);
font-size: 15px;
line-height: 1.6;
margin-bottom: 25px;
}
/* ========== SECTION PAYS DESSERVIS ========== */
.wg-countries-section {
background: var(--wg-black);
padding: 100px 0;
}
.wg-countries-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
margin-top: 60px;
}
.wg-country-group {
background: var(--wg-glass);
border: 1px solid var(--wg-glass-border);
border-radius: var(--wg-radius);
padding: 40px;
}
.wg-country-group h3 {
font-family: 'Space Grotesk', sans-serif;
font-size: 22px;
font-weight: 700;
color: white;
margin-bottom: 25px;
display: flex;
align-items: center;
gap: 12px;
}
.wg-country-group h3 i {
color: var(--wg-coral);
}
.wg-country-list {
display: flex;
flex-direction: column;
gap: 15px;
}
.wg-country-item {
display: flex;
align-items: center;
gap: 15px;
padding: 12px 20px;
background: rgba(255, 255, 255, 0.03);
border-radius: var(--wg-radius-sm);
transition: var(--wg-transition);
}
.wg-country-item:hover {
background: rgba(255, 107, 107, 0.1);
}
.wg-country-item .wg-flag {
font-size: 24px;
}
.wg-country-item span:nth-child(2) {
color: white;
font-weight: 500;
flex: 1;
}
.wg-country-badge {
background: var(--wg-gradient);
color: white;
font-size: 11px;
font-weight: 700;
padding: 4px 12px;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: 1px;
}
.wg-countries-note {
text-align: center;
color: rgba(255, 255, 255, 0.6);
font-size: 16px;
margin-top: 50px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.wg-countries-note i {
color: var(--wg-coral);
font-size: 20px;
}
/* Responsive pour les nouvelles sections */
@media (max-width: 992px) {
.wg-analyzer-grid {
grid-template-columns: 1fr;
}
.wg-countries-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.wg-analyzer-section,
.wg-countries-section {
padding: 60px 0;
}
.wg-analyzer-card,
.wg-country-group {
padding: 30px 20px;
}
}
/* ========== SECTION SEO ANALYZER HERO (Après le Hero) ========== */
.wg-analyzer-hero {
background: linear-gradient(135deg, var(--wg-dark) 0%, var(--wg-black) 100%);
padding: 100px 0;
position: relative;
overflow: hidden;
}
.wg-analyzer-hero::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(255, 107, 107, 0.15) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.wg-analyzer-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.wg-analyzer-content .wg-title-lg {
color: white;
margin-bottom: 20px;
}
.wg-analyzer-content .wg-text-lg {
color: rgba(255, 255, 255, 0.7);
margin-bottom: 30px;
}
.wg-analyzer-features {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 30px;
}
.wg-analyzer-feature {
display: flex;
align-items: center;
gap: 10px;
background: var(--wg-glass);
border: 1px solid var(--wg-glass-border);
padding: 12px 20px;
border-radius: var(--wg-radius-sm);
color: white;
font-size: 14px;
font-weight: 500;
}
.wg-analyzer-feature i {
color: var(--wg-coral);
font-size: 16px;
}
.wg-analyzer-visual {
position: relative;
}
.wg-analyzer-mockup {
background: var(--wg-glass);
border: 1px solid var(--wg-glass-border);
border-radius: var(--wg-radius);
overflow: hidden;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
}
.wg-mockup-header {
background: rgba(0, 0, 0, 0.3);
padding: 15px 20px;
display: flex;
gap: 8px;
}
.wg-mockup-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
}
.wg-mockup-dot:first-child { background: #ff5f57; }
.wg-mockup-dot:nth-child(2) { background: #febc2e; }
.wg-mockup-dot:nth-child(3) { background: #28c840; }
.wg-mockup-content {
padding: 40px;
display: flex;
gap: 40px;
align-items: center;
}
.wg-score-circle {
width: 140px;
height: 140px;
border-radius: 50%;
background: conic-gradient(var(--wg-coral) 0deg 310deg, rgba(255, 255, 255, 0.1) 310deg 360deg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
flex-shrink: 0;
}
.wg-score-circle::before {
content: '';
position: absolute;
width: 110px;
height: 110px;
background: var(--wg-dark);
border-radius: 50%;
}
.wg-score-number {
position: relative;
z-index: 1;
font-family: 'Space Grotesk', sans-serif;
font-size: 42px;
font-weight: 800;
color: white;
line-height: 1;
}
.wg-score-label {
position: relative;
z-index: 1;
font-size: 12px;
color: rgba(255, 255, 255, 0.6);
text-transform: uppercase;
letter-spacing: 1px;
}
.wg-score-bars {
flex: 1;
display: flex;
flex-direction: column;
gap: 15px;
}
.wg-score-bar {
display: flex;
flex-direction: column;
gap: 6px;
}
.wg-score-bar span {
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
}
.wg-bar-fill {
height: 8px;
background: var(--wg-gradient);
border-radius: 4px;
position: relative;
}
.wg-bar-fill::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
width: 100%;
transform: scaleX(1.2);
transform-origin: left;
z-index: -1;
}
/* ========== SECTION EBOOK ========== */
.wg-ebook-section {
background: var(--wg-black);
padding: 100px 0;
position: relative;
overflow: hidden;
}
.wg-ebook-section::before {
content: '';
position: absolute;
top: 50%;
left: -10%;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(255, 107, 107, 0.1) 0%, transparent 70%);
border-radius: 50%;
transform: translateY(-50%);
}
.wg-ebook-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.wg-ebook-covers {
position: relative;
height: 500px;
}
.wg-covers-stack {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.wg-cover-img {
position: absolute;
max-width: 280px;
height: auto;
border-radius: 12px;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
transition: var(--wg-transition);
}
.wg-cover-1 {
z-index: 5;
transform: rotate(-2deg);
}
.wg-cover-2 {
z-index: 4;
transform: translateX(-40px) translateY(20px) rotate(-8deg);
opacity: 0.9;
}
.wg-cover-3 {
z-index: 3;
transform: translateX(40px) translateY(20px) rotate(8deg);
opacity: 0.8;
}
.wg-cover-4 {
z-index: 2;
transform: translateX(-70px) translateY(40px) rotate(-12deg);
opacity: 0.6;
}
.wg-cover-5 {
z-index: 1;
transform: translateX(70px) translateY(40px) rotate(12deg);
opacity: 0.5;
}
.wg-ebook-covers:hover .wg-cover-1 {
transform: rotate(0deg) scale(1.05);
}
.wg-ebook-covers:hover .wg-cover-2 {
transform: translateX(-80px) translateY(10px) rotate(-15deg);
}
.wg-ebook-covers:hover .wg-cover-3 {
transform: translateX(80px) translateY(10px) rotate(15deg);
}
.wg-ebook-content .wg-title-lg {
color: white;
margin-bottom: 20px;
}
.wg-ebook-content .wg-text-lg {
color: rgba(255, 255, 255, 0.7);
margin-bottom: 30px;
}
.wg-ebook-features {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin-bottom: 30px;
}
.wg-ebook-feature {
display: flex;
align-items: center;
gap: 12px;
background: var(--wg-glass);
border: 1px solid var(--wg-glass-border);
padding: 15px 20px;
border-radius: var(--wg-radius-sm);
color: white;
font-size: 14px;
font-weight: 500;
}
.wg-ebook-feature i {
color: var(--wg-coral);
font-size: 18px;
width: 24px;
text-align: center;
}
.wg-ebook-cta {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
/* ========== SECTION PAYS PREMIUM ========== */
.wg-countries-premium {
background: var(--wg-dark);
padding: 100px 0;
}
.wg-countries-premium-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
margin-top: 60px;
}
.wg-country-card {
background: var(--wg-glass);
border: 1px solid var(--wg-glass-border);
border-radius: var(--wg-radius);
padding: 40px;
transition: var(--wg-transition);
}
.wg-country-card:hover {
border-color: var(--wg-coral);
transform: translateY(-5px);
}
.wg-country-card-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 30px;
}
.wg-country-card-header i {
font-size: 28px;
color: var(--wg-coral);
}
.wg-country-card-header h3 {
font-family: 'Space Grotesk', sans-serif;
font-size: 22px;
font-weight: 700;
color: white;
margin: 0;
}
.wg-country-flags {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.wg-flag-item {
display: flex;
align-items: center;
gap: 10px;
background: rgba(255, 255, 255, 0.03);
padding: 12px 18px;
border-radius: var(--wg-radius-sm);
transition: var(--wg-transition);
}
.wg-flag-item:hover {
background: rgba(255, 107, 107, 0.1);
}
.wg-flag-emoji {
font-size: 24px;
}
.wg-flag-name {
color: white;
font-weight: 500;
font-size: 14px;
}
.wg-flag-badge {
background: var(--wg-gradient);
color: white;
font-size: 10px;
font-weight: 700;
padding: 4px 10px;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: 1px;
}
.wg-countries-tagline {
text-align: center;
color: rgba(255, 255, 255, 0.6);
font-size: 16px;
margin-top: 50px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.wg-countries-tagline i {
color: var(--wg-coral);
font-size: 20px;
}
/* ========== RESPONSIVE POUR NOUVELLES SECTIONS ========== */
@media (max-width: 992px) {
.wg-analyzer-wrapper,
.wg-ebook-wrapper {
grid-template-columns: 1fr;
gap: 50px;
}
.wg-analyzer-visual {
order: -1;
}
.wg-ebook-covers {
height: 400px;
order: -1;
}
.wg-cover-img {
max-width: 220px;
}
.wg-countries-premium-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.wg-analyzer-hero,
.wg-ebook-section,
.wg-countries-premium {
padding: 60px 0;
}
.wg-mockup-content {
flex-direction: column;
padding: 30px 20px;
}
.wg-score-circle {
width: 120px;
height: 120px;
}
.wg-score-circle::before {
width: 90px;
height: 90px;
}
.wg-score-number {
font-size: 32px;
}
.wg-ebook-covers {
height: 300px;
}
.wg-cover-img {
max-width: 180px;
}
.wg-cover-2, .wg-cover-3 {
transform: translateX(-30px) translateY(15px) rotate(-6deg);
}
.wg-cover-3 {
transform: translateX(30px) translateY(15px) rotate(6deg);
}
.wg-cover-4, .wg-cover-5 {
display: none;
}
.wg-ebook-features {
grid-template-columns: 1fr;
}
.wg-ebook-cta {
flex-direction: column;
}
.wg-ebook-cta .wg-btn {
width: 100%;
text-align: center;
justify-content: center;
}
.wg-country-card {
padding: 30px 20px;
}
.wg-flag-item {
padding: 10px 14px;
}
.wg-analyzer-features {
flex-direction: column;
}
}
@media (max-width: 480px) {
.wg-ebook-covers {
height: 250px;
}
.wg-cover-img {
max-width: 150px;
}
.wg-flag-name {
font-size: 13px;
}
.wg-flag-emoji {
font-size: 20px;
}
}
/* ========== SÉLECTEUR DE LANGUE - DESKTOP ========== */
.wg-lang-switcher {
position: relative;
display: inline-flex;
align-items: center;
margin-left: 15px;
}
.wg-lang-current {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: rgba(255, 107, 107, 0.1);
border: 1px solid rgba(255, 107, 107, 0.3);
border-radius: 10px;
color: #ffffff;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
}
.wg-lang-current:hover {
background: rgba(255, 107, 107, 0.2);
border-color: rgba(255, 107, 107, 0.5);
}
.wg-lang-flag {
font-size: 18px;
line-height: 1;
}
.wg-lang-code {
font-weight: 600;
letter-spacing: 0.5px;
}
.wg-lang-current i {
font-size: 10px;
margin-left: 4px;
transition: transform 0.3s ease;
}
.wg-lang-switcher:hover .wg-lang-current i,
.wg-lang-switcher.active .wg-lang-current i {
transform: rotate(180deg);
}
.wg-lang-dropdown {
position: absolute;
top: calc(100% + 10px);
right: 0;
min-width: 160px;
background: #12121a;
border: 1px solid rgba(255, 107, 107, 0.2);
border-radius: 12px;
padding: 8px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 1000;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
.wg-lang-switcher:hover .wg-lang-dropdown,
.wg-lang-switcher.active .wg-lang-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.wg-lang-dropdown li {
margin: 0;
}
.wg-lang-dropdown li a {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
border-radius: 8px;
transition: all 0.2s ease;
}
.wg-lang-dropdown li a:hover {
background: rgba(255, 107, 107, 0.15);
color: #ffffff;
}
.wg-lang-dropdown li.active a {
background: rgba(255, 107, 107, 0.2);
color: #ff6b6b;
}
.wg-lang-dropdown .wg-lang-flag {
font-size: 20px;
}
.wg-lang-dropdown .wg-lang-name {
font-weight: 500;
}
/* ========== SÉLECTEUR DE LANGUE - INLINE (FOOTER) ========== */
.wg-lang-inline {
display: flex;
gap: 15px;
align-items: center;
}
.wg-lang-inline a {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
color: rgba(255, 255, 255, 0.7);
font-size: 13px;
font-weight: 500;
transition: all 0.3s ease;
}
.wg-lang-inline a:hover {
background: rgba(255, 107, 107, 0.15);
border-color: rgba(255, 107, 107, 0.3);
color: #ffffff;
}
.wg-lang-inline a.active {
background: rgba(255, 107, 107, 0.2);
border-color: rgba(255, 107, 107, 0.4);
color: #ff6b6b;
}
/* ========== SÉLECTEUR DE LANGUE - MOBILE ========== */
.wg-mobile-lang-switcher {
display: flex;
gap: 10px;
padding: 15px 20px;
background: rgba(255, 107, 107, 0.05);
border-top: 1px solid rgba(255, 107, 107, 0.1);
margin-top: auto;
}
.wg-mobile-lang-switcher a {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 15px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease;
}
.wg-mobile-lang-switcher a:hover {
background: rgba(255, 107, 107, 0.15);
border-color: rgba(255, 107, 107, 0.3);
color: #ffffff;
}
.wg-mobile-lang-switcher a.active {
background: rgba(255, 107, 107, 0.2);
border-color: rgba(255, 107, 107, 0.4);
color: #ff6b6b;
}
.wg-mobile-lang-switcher .wg-lang-flag {
font-size: 18px;
}
/* ========== RESPONSIVE - MOBILE ========== */
@media (max-width: 991px) {
.wg-lang-switcher {
display: none;
}
.wg-mobile-lang-switcher {
display: flex;
}
}
@media (min-width: 992px) {
.wg-mobile-lang-switcher {
display: none;
}
}
/* ========================================
SÉLECTEUR DE LANGUE - DESKTOP & MOBILE
Version 2.0 - Styles Complets
======================================== */
/* Container du sélecteur de langue */
.wg-lang-switcher {
position: relative;
display: inline-flex;
align-items: center;
margin-left: 15px;
}
/* Bouton actuel (langue sélectionnée) */
.wg-lang-current {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: linear-gradient(135deg, rgba(255,107,107,0.15) 0%, rgba(78,205,196,0.15) 100%);
border: 1px solid rgba(255,107,107,0.3);
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
color: #ffffff;
font-size: 14px;
font-weight: 600;
}
.wg-lang-current:hover {
background: linear-gradient(135deg, rgba(255,107,107,0.25) 0%, rgba(78,205,196,0.25) 100%);
border-color: rgba(255,107,107,0.5);
transform: translateY(-2px);
}
.wg-lang-current .wg-lang-flag {
font-size: 18px;
line-height: 1;
}
.wg-lang-current .wg-lang-code {
font-weight: 700;
letter-spacing: 0.5px;
}
.wg-lang-current i {
font-size: 10px;
transition: transform 0.3s ease;
color: #ff6b6b;
}
.wg-lang-switcher:hover .wg-lang-current i,
.wg-lang-switcher.open .wg-lang-current i {
transform: rotate(180deg);
}
/* Dropdown des langues */
.wg-lang-dropdown {
position: absolute;
top: calc(100% + 10px);
right: 0;
min-width: 160px;
background: linear-gradient(180deg, #1a1a2e 0%, #16162a 100%);
border: 1px solid rgba(255,107,107,0.2);
border-radius: 12px;
box-shadow: 0 15px 40px rgba(0,0,0,0.4);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 9999;
list-style: none;
padding: 8px;
margin: 0;
overflow: hidden;
}
.wg-lang-switcher:hover .wg-lang-dropdown,
.wg-lang-switcher.open .wg-lang-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Items du dropdown */
.wg-lang-dropdown li {
margin: 0;
padding: 0;
list-style: none;
}
.wg-lang-dropdown li a {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
color: rgba(255,255,255,0.8);
text-decoration: none;
border-radius: 8px;
transition: all 0.2s ease;
font-size: 14px;
}
.wg-lang-dropdown li a:hover {
background: linear-gradient(135deg, rgba(255,107,107,0.15) 0%, rgba(78,205,196,0.15) 100%);
color: #ffffff;
transform: translateX(5px);
}
.wg-lang-dropdown li.active a {
background: linear-gradient(135deg, rgba(255,107,107,0.2) 0%, rgba(78,205,196,0.2) 100%);
color: #ff6b6b;
font-weight: 600;
}
.wg-lang-dropdown .wg-lang-flag {
font-size: 20px;
line-height: 1;
}
.wg-lang-dropdown .wg-lang-name {
font-weight: 500;
}
/* ========================================
SÉLECTEUR DE LANGUE - MOBILE
======================================== */
.wg-mobile-lang-switcher {
display: flex;
justify-content: center;
gap: 10px;
padding: 20px;
background: linear-gradient(90deg, rgba(255,107,107,0.05) 0%, rgba(78,205,196,0.05) 100%);
border-top: 1px solid rgba(255,107,107,0.15);
margin-top: auto;
}
.wg-mobile-lang-switcher a {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 10px;
color: rgba(255,255,255,0.7);
text-decoration: none;
font-size: 14px;
font-weight: 600;
transition: all 0.3s ease;
}
.wg-mobile-lang-switcher a:hover {
background: rgba(255,107,107,0.15);
border-color: rgba(255,107,107,0.3);
color: #ffffff;
transform: translateY(-2px);
}
.wg-mobile-lang-switcher a.active {
background: linear-gradient(135deg, rgba(255,107,107,0.2) 0%, rgba(78,205,196,0.2) 100%);
border-color: rgba(255,107,107,0.4);
color: #ff6b6b;
}
.wg-mobile-lang-switcher .wg-lang-flag {
font-size: 18px;
line-height: 1;
}
/* ========================================
RESPONSIVE ADJUSTMENTS
======================================== */
@media (max-width: 991px) {
.wg-lang-switcher {
display: none !important;
}
.wg-mobile-lang-switcher {
display: flex !important;
}
}
@media (min-width: 992px) {
.wg-mobile-lang-switcher {
display: none !important;
}
}
/* ========================================
INLINE LANGUAGE SWITCHER (Footer)
======================================== */
.wg-lang-inline {
display: flex;
gap: 15px;
align-items: center;
}
.wg-lang-inline a {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px;
color: rgba(255,255,255,0.7);
text-decoration: none;
font-size: 13px;
font-weight: 600;
transition: all 0.3s ease;
}
.wg-lang-inline a:hover {
background: rgba(255,107,107,0.15);
border-color: rgba(255,107,107,0.3);
color: #ffffff;
}
.wg-lang-inline a.active {
background: linear-gradient(135deg, rgba(255,107,107,0.2) 0%, rgba(78,205,196,0.2) 100%);
border-color: rgba(255,107,107,0.4);
color: #ff6b6b;
}
/* ========================================
FIX DRAPEAUX EMOJI - SÉLECTEUR DE LANGUE
======================================== */
/* Force l'affichage des emoji drapeaux avec une police système */
.wg-lang-flag {
font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Android Emoji", "EmojiSymbols", sans-serif !important;
font-size: 20px !important;
line-height: 1 !important;
display: inline-block !important;
vertical-align: middle !important;
margin-right: 2px !important;
}
/* Bouton langue actuelle - Desktop */
.wg-lang-current {
display: flex !important;
align-items: center !important;
gap: 8px !important;
padding: 8px 14px !important;
background: linear-gradient(135deg, rgba(255,107,107,0.15) 0%, rgba(78,205,196,0.15) 100%) !important;
border: 1px solid rgba(255,107,107,0.3) !important;
border-radius: 10px !important;
color: #ffffff !important;
font-size: 14px !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
}
.wg-lang-current:hover {
background: linear-gradient(135deg, rgba(255,107,107,0.25) 0%, rgba(78,205,196,0.25) 100%) !important;
border-color: rgba(255,107,107,0.5) !important;
}
.wg-lang-current .wg-lang-flag {
font-size: 18px !important;
}
.wg-lang-current .wg-lang-code {
font-weight: 700 !important;
letter-spacing: 0.5px !important;
}
/* Dropdown des langues */
.wg-lang-dropdown {
position: absolute !important;
top: calc(100% + 10px) !important;
right: 0 !important;
min-width: 160px !important;
background: linear-gradient(180deg, #1a1a2e 0%, #16162a 100%) !important;
border: 1px solid rgba(255,107,107,0.2) !important;
border-radius: 12px !important;
box-shadow: 0 20px 40px rgba(0,0,0,0.5), 0 0 30px rgba(255,107,107,0.1) !important;
padding: 8px 0 !important;
opacity: 0 !important;
visibility: hidden !important;
transform: translateY(-10px) !important;
transition: all 0.3s ease !important;
z-index: 10000 !important;
list-style: none !important;
margin: 0 !important;
}
.wg-lang-switcher:hover .wg-lang-dropdown,
.wg-lang-switcher.open .wg-lang-dropdown,
.wg-lang-switcher:focus-within .wg-lang-dropdown {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) !important;
}
/* Items du dropdown */
.wg-lang-dropdown li {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.wg-lang-dropdown li a {
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 12px 16px !important;
color: rgba(255,255,255,0.8) !important;
font-size: 14px !important;
transition: all 0.3s ease !important;
text-decoration: none !important;
}
.wg-lang-dropdown li a:hover {
background: linear-gradient(135deg, rgba(255,107,107,0.15) 0%, rgba(78,205,196,0.15) 100%) !important;
color: #ffffff !important;
}
.wg-lang-dropdown li.active a {
background: linear-gradient(135deg, rgba(255,107,107,0.2) 0%, rgba(78,205,196,0.2) 100%) !important;
color: #ff6b6b !important;
font-weight: 600 !important;
}
.wg-lang-dropdown .wg-lang-flag {
font-size: 22px !important;
}
.wg-lang-dropdown .wg-lang-name {
font-weight: 500 !important;
}
/* ========================================
SÉLECTEUR DE LANGUE - MOBILE
======================================== */
.wg-mobile-lang-switcher {
display: none;
justify-content: center;
gap: 12px;
padding: 20px;
margin-top: 20px;
border-top: 1px solid rgba(255,255,255,0.1);
}
.wg-mobile-lang-switcher a {
display: flex !important;
align-items: center !important;
gap: 8px !important;
padding: 12px 18px !important;
background: rgba(255,255,255,0.05) !important;
border: 1px solid rgba(255,255,255,0.1) !important;
border-radius: 10px !important;
color: rgba(255,255,255,0.8) !important;
font-size: 14px !important;
font-weight: 600 !important;
transition: all 0.3s ease !important;
text-decoration: none !important;
}
.wg-mobile-lang-switcher a:hover {
background: rgba(255,107,107,0.15) !important;
border-color: rgba(255,107,107,0.3) !important;
color: #ffffff !important;
}
.wg-mobile-lang-switcher a.active {
background: linear-gradient(135deg, rgba(255,107,107,0.2) 0%, rgba(78,205,196,0.2) 100%) !important;
border-color: rgba(255,107,107,0.4) !important;
color: #ff6b6b !important;
}
.wg-mobile-lang-switcher .wg-lang-flag {
font-size: 20px !important;
}
/* Responsive - Afficher mobile, cacher desktop */
@media (max-width: 991px) {
.wg-lang-switcher {
display: none !important;
}
.wg-mobile-lang-switcher {
display: flex !important;
}
}
@media (min-width: 992px) {
.wg-lang-switcher {
display: inline-flex !important;
}
.wg-mobile-lang-switcher {
display: none !important;
}
}
/* ========================================
FIX CRITIQUE - DRAPEAUX DANS DROPDOWN
Le problème: les liens ont une largeur calculée de 38px
alors que le contenu (drapeau + texte) nécessite ~120px
======================================== */
/* Forcer la largeur du dropdown et de ses éléments */
.wg-lang-dropdown {
min-width: 180px !important;
width: auto !important;
overflow: visible !important;
}
.wg-lang-dropdown li {
display: block !important;
width: 100% !important;
}
.wg-lang-dropdown li a {
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 12px 16px !important;
width: 100% !important;
min-width: 150px !important;
white-space: nowrap !important;
box-sizing: border-box !important;
}
/* Forcer l'affichage des drapeaux emoji */
.wg-lang-dropdown .wg-lang-flag {
display: inline-block !important;
flex-shrink: 0 !important;
width: 24px !important;
min-width: 24px !important;
font-size: 22px !important;
line-height: 1 !important;
text-align: center !important;
font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", "Android Emoji", "EmojiSymbols", sans-serif !important;
}
/* Forcer l'affichage du nom de langue */
.wg-lang-dropdown .wg-lang-name {
display: inline-block !important;
flex-shrink: 0 !important;
font-weight: 500 !important;
white-space: nowrap !important;
}
/* S'assurer que le bouton principal affiche bien le drapeau */
.wg-lang-current .wg-lang-flag {
display: inline-block !important;
flex-shrink: 0 !important;
font-size: 18px !important;
line-height: 1 !important;
font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", "Android Emoji", "EmojiSymbols", sans-serif !important;
}
/* Fix pour les navigateurs qui ne supportent pas bien les emoji flags */
.wg-lang-flag::before {
content: none !important;
}
/* Assurer que le dropdown ne soit pas coupé */
.wg-lang-switcher {
position: relative !important;
z-index: 9999 !important;
}
.wg-lang-dropdown {
z-index: 10001 !important;
}
/* Fix pour le footer - sélecteur inline */
.wg-lang-inline a {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
}
.wg-lang-inline .wg-lang-flag {
display: inline-block !important;
font-size: 18px !important;
font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", "Android Emoji", "EmojiSymbols", sans-serif !important;
}
/* Fix mobile */
.wg-mobile-lang-switcher a {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
}
.wg-mobile-lang-switcher .wg-lang-flag {
display: inline-block !important;
font-size: 20px !important;
font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", "Android Emoji", "EmojiSymbols", sans-serif !important;
}