/* Fonts loaded via in each page's — no @import here */ /* ============================================= ROOT & RESET ============================================= */ :root { --primary-green: #329437; --primary-yellow: #ffdb00; --primary-blue: #249cd6; --dark-green: #167d3a; --dark-blue: #0173a9; --navy: #0f172a; --text-main: #1e293b; --text-light: #64748b; --white: #ffffff; --bg-light: #f8fafc; --bg-section: #f1f5f9; --glass-white: rgba(255,255,255,0.7); --glass-border: rgba(255,255,255,0.2); --shadow-sm: 0 2px 8px rgba(0,0,0,0.06); --shadow-md: 0 10px 30px -5px rgba(0,0,0,0.1),0 4px 12px rgba(0,0,0,0.06); --shadow-lg: 0 20px 50px -12px rgba(0,0,0,0.15); --shadow-premium: 0 30px 60px -12px rgba(15,23,42,0.12); /* Targeted transition — faster & cheaper than "all" */ --transition: color .22s ease, background-color .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease, opacity .22s ease, filter .22s ease; --radius-xl: 32px; --radius-lg: 24px; --radius-md: 16px; --radius-sm: 12px; --radius-xs: 8px; --header-height: 90px; } *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; } body { font-family: 'Outfit', sans-serif; color: var(--text-main); background-color: var(--bg-light); line-height: 1.6; overflow-x: hidden; } h1,h2,h3,h4 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; } a { text-decoration:none; transition:var(--transition); color:inherit; } ul { list-style:none; } img { display:block; max-width:100%; } .container { max-width:1280px; margin:0 auto; padding:0 2.5rem; } ::-webkit-scrollbar { width:8px; } ::-webkit-scrollbar-track { background:#f1f1f1; } ::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:10px; border:2px solid #f1f1f1; } ::-webkit-scrollbar-thumb:hover { background:#94a3b8; } /* ============================================= HEADER / NAVIGATION ============================================= */ header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; padding: 0.75rem 0; transition: var(--transition); background: rgba(255,255,255,0.97); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 2px 20px rgba(0,0,0,0.08); border: none; border-bottom: 1px solid rgba(0,0,0,0.07); border-radius: 0; } header.scrolled { padding:0.55rem 0; background:rgba(255,255,255,0.99); box-shadow: 0 4px 24px rgba(0,0,0,0.1); border-bottom: 3px solid var(--primary-green); } header .container { display:flex; justify-content:space-between; align-items:center; gap:1rem; } .logo img { height:22mm; width:auto; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.08)); } /* NAV */ nav ul { display:flex; gap:0.2rem; align-items:center; } nav ul li a { color: var(--text-main); font-weight: 600; font-size: 0.9rem; padding: 0.45rem 0.8rem; border-radius: var(--radius-xs); opacity: 0.85; display: flex; align-items: center; gap: 0.35rem; } nav ul li a:hover, nav ul li a.active { color: var(--primary-green); background: rgba(50,148,55,0.08); opacity: 1; } .nav-highlight { color: var(--primary-green) !important; font-weight: 800 !important; background: rgba(50,148,55,0.1) !important; opacity: 1 !important; } /* DROPDOWN */ .nav-dropdown { position:relative; } .nav-dropdown-trigger { cursor:pointer; } .nav-chevron { font-size:0.65rem; transition:transform 0.3s ease; } .nav-dropdown:hover .nav-chevron { transform:rotate(180deg); } .nav-dropdown-menu { position: absolute; top: calc(100% + 0.75rem); left: 50%; transform: translateX(-50%) translateY(10px); width: 340px; background: white; border-radius: var(--radius-md); box-shadow: var(--shadow-premium); border: 1px solid rgba(0,0,0,0.06); opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 100; } .nav-dropdown:hover .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .dropdown-inner { padding:0.75rem; } .dropdown-link { display: flex; align-items: center; gap: 0.85rem; padding: 0.75rem 0.85rem; border-radius: var(--radius-xs); color: var(--text-main) !important; background: none !important; opacity: 1 !important; font-weight: 400 !important; } .dropdown-link:hover { background:var(--bg-light) !important; } .dropdown-link i { width:34px; height:34px; background:rgba(50,148,55,0.1); color:var(--primary-green); border-radius:var(--radius-xs); display:flex; align-items:center; justify-content:center; font-size:0.85rem; flex-shrink:0; } .dropdown-link span { display:flex; flex-direction:column; } .dropdown-link strong { font-weight:700; font-size:0.88rem; color:var(--text-main); } .dropdown-link small { font-size:0.76rem; color:var(--text-light); } .dropdown-cta { padding:0.5rem 0; border-top:1px solid #f1f5f9; margin-top:0.5rem; } .dropdown-cta a { width:100%; justify-content:center; } /* HEADER ACTIONS */ .header-actions { display:flex; gap:0.75rem; align-items:center; } .btn-admin { background: #334155; color: white; padding: 0.6rem 1.1rem; border-radius: var(--radius-sm); font-weight: 700; font-size: 0.82rem; display: inline-flex; align-items: center; } .btn-admin:hover { background:var(--navy); color:white; } /* HAMBURGER */ .hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 0.5rem; border-radius: var(--radius-xs); } .hamburger span { display:block; width:24px; height:2px; background:var(--text-main); border-radius:4px; transition:var(--transition); } .hamburger.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); } .hamburger.active span:nth-child(2) { opacity:0; } .hamburger.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); } /* MOBILE NAV */ .mobile-nav-overlay { position: fixed; inset:0; background: rgba(15,23,42,0.6); z-index: 9998; opacity: 0; visibility: hidden; transition: all 0.35s ease; backdrop-filter: blur(4px); } .mobile-nav-overlay.active { opacity:1; visibility:visible; } .mobile-nav { position: absolute; top:0; right:0; width: 300px; height:100%; background: white; padding:2rem; display: flex; flex-direction:column; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.16,1,0.3,1); overflow-y: auto; } .mobile-nav-overlay.active .mobile-nav { transform:translateX(0); } .mobile-nav-header { display: flex; justify-content:space-between; align-items:center; margin-bottom:2rem; padding-bottom:1.5rem; border-bottom:1px solid #f1f5f9; } .mobile-nav-close { background:none; border:none; font-size:1.4rem; cursor:pointer; color:var(--text-light); padding:0.5rem; } .mobile-nav-list { flex:1; } .mobile-nav-list li a { display:flex; align-items:center; gap:0.85rem; padding:0.85rem 0; border-bottom:1px solid #f8fafc; color:var(--text-main); font-weight:600; font-size:0.95rem; } .mobile-nav-list li a i { width:20px; color:var(--primary-green); } .mobile-nav-list li a:hover { color:var(--primary-green); } .mobile-nav-footer { margin-top:2rem; padding-top:1.5rem; border-top:1px solid #f1f5f9; } /* ============================================= INNER PAGES — header offset (pages without transparent hero need padding) ============================================= */ .page-top-offset { padding-top: calc(var(--header-height) + 2rem); } /* ============================================= BUTTONS ============================================= */ .btn { padding: 0.85rem 2rem; border-radius: var(--radius-sm); font-weight: 700; font-size: 0.92rem; cursor: pointer; transition: var(--transition); display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border: none; text-transform: uppercase; letter-spacing: 0.04em; font-family: 'Outfit', sans-serif; } .btn-primary { background:linear-gradient(135deg,var(--primary-green),var(--dark-green)); color:var(--white); box-shadow:0 8px 24px -4px rgba(50,148,55,0.35); } .btn-primary:hover { transform:translateY(-3px) scale(1.02); box-shadow:0 16px 36px -8px rgba(50,148,55,0.45); filter:brightness(1.08); color:white; } .btn-lg { padding:1.1rem 2.5rem; font-size:1rem; } .btn-sm { padding:0.6rem 1.4rem; font-size:0.82rem; } .btn-full { width:100%; justify-content:center; } .btn-outline { background:transparent; border:2px solid var(--primary-green); color:var(--primary-green); } .btn-outline:hover { background:var(--primary-green); color:white; transform:translateY(-3px); } .btn-hero-ghost { background: rgba(255,255,255,0.12); backdrop-filter: blur(10px); border: 2px solid rgba(255,255,255,0.35); color: white; padding: 1.1rem 2.5rem; border-radius: var(--radius-sm); font-weight: 700; font-size: 1rem; display: inline-flex; align-items:center; gap:0.5rem; text-transform: uppercase; letter-spacing:0.04em; transition: var(--transition); font-family: 'Outfit', sans-serif; } .btn-hero-ghost:hover { background:white; color:var(--dark-blue); border-color:white; transform:translateY(-3px); } .btn-outline-green { display:inline-flex; align-items:center; gap:0.5rem; padding:0.9rem 2rem; border:2px solid var(--primary-green); border-radius:var(--radius-sm); color:var(--primary-green); font-weight:700; font-size:0.92rem; text-transform:uppercase; letter-spacing:0.04em; transition:var(--transition); background:transparent; font-family:'Outfit',sans-serif; } .btn-outline-green:hover { background:var(--primary-green); color:white; transform:translateY(-3px); box-shadow:0 8px 24px -4px rgba(50,148,55,0.35); } .btn-outline-blue { display:inline-flex; align-items:center; gap:0.5rem; padding:0.9rem 2rem; border:2px solid var(--primary-blue); border-radius:var(--radius-sm); color:var(--primary-blue); font-weight:700; font-size:0.92rem; text-transform:uppercase; letter-spacing:0.04em; transition:var(--transition); background:transparent; font-family:'Outfit',sans-serif; } .btn-outline-blue:hover { background:var(--primary-blue); color:white; transform:translateY(-3px); } .btn-text-link { background:none; border:none; color:var(--primary-green); font-weight:700; font-size:0.88rem; cursor:pointer; display:inline-flex; align-items:center; gap:0.4rem; text-transform:uppercase; letter-spacing:0.04em; font-family:'Outfit',sans-serif; transition:gap 0.3s ease,color 0.3s ease; padding:0; } .btn-text-link:hover { gap:0.8rem; color:var(--dark-green); } /* ============================================= SECTION UTILITIES ============================================= */ .section { padding:110px 0; position:relative; } .section-header { text-align:center; max-width:750px; margin:0 auto 65px; } .section-header h2 { font-size:2.8rem; margin-bottom:1.25rem; color:var(--navy); } .section-header p { font-size:1.1rem; color:var(--text-light); line-height:1.75; } .section-tag { display:inline-block; background:rgba(50,148,55,0.1); color:var(--primary-green); padding:0.38rem 1.1rem; border-radius:100px; font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:1.1rem; } .section-tag-light { background:rgba(255,255,255,0.15); color:rgba(255,255,255,0.95); } .section-cta { text-align:center; margin-top:3.5rem; } .empty-state { text-align:center; padding:5rem; color:var(--text-light); } .empty-state i { font-size:3rem; margin-bottom:1rem; opacity:0.4; display:block; } /* ============================================= HERO SLIDESHOW ============================================= */ .hero-slideshow { position: relative; width: 100%; height: calc(100vh - var(--header-height)); min-height: 500px; overflow: hidden; margin-top: var(--header-height); } .slides-wrapper { position:relative; width:100%; height:100%; } .slide { position: absolute; inset: 0; background-color: var(--dark-blue, #0f172a); display: flex; align-items: center; opacity: 0; transition: opacity 0.9s ease-in-out; z-index: 1; } .slide-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; } .slide-overlay { display: none; } .slide.active { opacity:1; z-index:2; } .static-hero { position: relative; width: 100%; height: 100%; display: flex; align-items: center; overflow: hidden; } .slide-content { position: relative; z-index: 10; max-width: 1280px; margin: 0 auto; padding: 0 2.5rem; padding-top: calc(var(--header-height) + 1rem); } .slide-title { font-size: 5rem; color: white; margin-bottom: 1.5rem; animation: revealText 1.1s cubic-bezier(0.77,0,0.175,1); line-height: 1.05; max-width: 720px; } .slide-title span { background: linear-gradient(90deg,var(--primary-yellow),#fff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .slide-subtitle { font-size: 1.25rem; color: rgba(255,255,255,0.88); margin-bottom: 2.5rem; max-width: 560px; line-height: 1.65; animation: fadeInUp 1s ease 0.3s both; } .slide-btns { display: flex; gap: 1.25rem; flex-wrap: wrap; animation: fadeInUp 1s ease 0.5s both; } /* HERO TAGLINES — bas gauche */ .hero-bottom-text { position: absolute; bottom: 2.5rem; left: 2.5rem; z-index: 20; display: flex; flex-direction: column; gap: 0.85rem; max-width: 480px; } .hero-tag-item { display: flex; align-items: flex-start; gap: 0.75rem; background: rgba(0,0,0,0.25); backdrop-filter: blur(8px); border-left: 3px solid var(--primary-yellow); padding: 0.55rem 0.9rem; border-radius: 0 var(--radius-xs) var(--radius-xs) 0; } .hero-tag-item i { color: var(--primary-yellow); font-size: 1rem; margin-top: 0.18rem; flex-shrink: 0; } .hero-tag-item div { display: flex; flex-direction: column; gap: 0.1rem; } .hero-tag-item strong { color: #ffffff; font-size: 0.88rem; font-weight: 700; letter-spacing: 0.01em; } .hero-tag-item span { color: rgba(255,255,255,0.78); font-size: 0.8rem; line-height: 1.5; } /* HERO TRUST PANEL — rectangle bas droite style OGAR */ .hero-trust-panel { position: absolute; bottom: 2.5rem; right: 2.5rem; z-index: 20; background: rgba(255,255,255,0.13); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.25); border-radius: 14px; padding: 1.1rem 1.4rem; min-width: 240px; max-width: 300px; box-shadow: 0 8px 32px rgba(0,0,0,0.18); } .hero-trust-title { display: flex; align-items: flex-start; gap: 0.5rem; color: white; font-size: 0.82rem; font-weight: 700; line-height: 1.35; margin-bottom: 0.85rem; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.2); letter-spacing: 0.01em; } .hero-trust-title i { color: var(--primary-yellow); font-size: 0.9rem; margin-top: 2px; flex-shrink: 0; } .hero-trust-items { display: flex; flex-direction: column; gap: 0.5rem; } .trust-item { display: flex; align-items: center; gap: 0.55rem; color: rgba(255,255,255,0.92); font-size: 0.85rem; font-weight: 600; } .trust-item i { color: var(--primary-yellow); font-size: 0.78rem; flex-shrink: 0; } /* SLIDE ARROWS */ .slide-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; background: rgba(255,255,255,0.15); backdrop-filter: blur(10px); border: 2px solid rgba(255,255,255,0.3); color: white; width: 52px; height:52px; border-radius: 50%; font-size: 1.1rem; cursor: pointer; display: flex; align-items:center; justify-content:center; transition: var(--transition); } .slide-arrow:hover { background:white; color:var(--dark-blue); border-color:white; } .slide-prev { left:2rem; } .slide-next { right:2rem; } /* SLIDE DOTS */ .slide-dots { position: absolute; bottom: 1.75rem; left: 50%; transform: translateX(-50%); z-index: 20; display: flex; gap: 0.6rem; } .slide-dot { width: 10px; height:10px; border-radius: 50%; background: rgba(255,255,255,0.4); border: 2px solid rgba(255,255,255,0.6); cursor: pointer; transition: all 0.3s ease; padding: 0; } .slide-dot.active { background:white; width:28px; border-radius:100px; border-color:white; } /* BLOB */ .blob { position:absolute; filter:blur(120px); opacity:0.2; border-radius:50%; z-index:1; animation:blobFloat 20s infinite alternate; pointer-events:none; width:500px; height:500px; } @keyframes blobFloat { from{transform:translate(0,0);} to{transform:translate(60px,30px);} } /* ============================================= OGAR-STYLE PRODUCT TABS ============================================= */ .ogar-tabs { display: flex; gap: 0; margin-bottom: 3rem; border: 2px solid #e2e8f0; border-radius: var(--radius-md); overflow: hidden; background: white; box-shadow: var(--shadow-sm); flex-wrap: wrap; } .ogar-tab { flex: 1; min-width: 120px; padding: 1rem 1.5rem; background: transparent; border: none; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.9rem; color: var(--text-light); cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 0.5rem; letter-spacing: 0.02em; border-right: 1px solid #e2e8f0; text-transform: uppercase; } .ogar-tab:last-child { border-right:none; } .ogar-tab:hover { background:rgba(50,148,55,0.05); color:var(--primary-green); } .ogar-tab.active { background: linear-gradient(135deg,var(--primary-green),var(--dark-green)); color: white; box-shadow: inset 0 -3px 0 rgba(0,0,0,0.1); } .ogar-tab i { font-size:1rem; } /* ============================================= WHY SECTION ============================================= */ .why-section { background:var(--bg-section); } .why-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.75rem; } .why-card { background:white; border-radius:var(--radius-lg); padding:2.25rem 1.75rem; text-align:center; box-shadow:var(--shadow-sm); border:1px solid rgba(0,0,0,0.04); transition:var(--transition); } .why-card:hover { transform:translateY(-10px); box-shadow:var(--shadow-md); } .why-icon { width:68px; height:68px; border-radius:20px; display:flex; align-items:center; justify-content:center; margin:0 auto 1.5rem; font-size:1.75rem; } .why-icon-green { background:linear-gradient(135deg,#e8f5e9,#c8e6c9); color:var(--primary-green); } .why-icon-yellow { background:linear-gradient(135deg,#fff8e1,#fff176); color:#f59e0b; } .why-icon-blue { background:linear-gradient(135deg,#e3f2fd,#bbdefb); color:var(--primary-blue); } .why-icon-pink { background:linear-gradient(135deg,#fce4ec,#f8bbd0); color:#e91e63; } .why-card h3 { font-size:1.15rem; color:var(--navy); margin-bottom:0.75rem; } .why-card p { color:var(--text-light); font-size:0.95rem; line-height:1.7; } /* ============================================= PRODUCTS ============================================= */ .products-section { background:white; } .products-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:2rem; } .product-card { background:var(--white); border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 4px 20px rgba(0,0,0,0.04); transition:var(--transition); border:1px solid rgba(0,0,0,0.03); display:flex; flex-direction:column; } .product-card:hover { transform:translateY(-10px); box-shadow:0 24px 50px rgba(50,148,55,0.1); border-color:rgba(50,148,55,0.1); } .product-card.hidden { display:none; } .product-img { height:260px; position:relative; overflow:hidden; background:#f8fafc; display:flex; align-items:center; justify-content:center; padding:1.5rem; } .product-img img { width:100%; height:100%; object-fit:contain; transition:transform 0.6s cubic-bezier(0.16,1,0.3,1); } .product-card:hover .product-img img { transform:scale(1.06); } .product-badge { position:absolute; top:14px; right:14px; background:linear-gradient(135deg,var(--primary-green),var(--dark-green)); color:white; padding:4px 13px; border-radius:100px; font-size:0.7rem; font-weight:800; text-transform:uppercase; letter-spacing:0.06em; box-shadow:0 4px 12px rgba(50,148,55,0.3); } .product-info { padding:1.5rem; flex:1; display:flex; flex-direction:column; } .product-info h3 { font-size:1.3rem; color:var(--navy); margin-bottom:0.65rem; } .product-info p { color:var(--text-light); font-size:0.93rem; line-height:1.7; flex:1; } .product-actions { display:flex; align-items:center; justify-content:space-between; margin-top:1.25rem; padding-top:1.1rem; border-top:1px solid #f1f5f9; gap:1rem; } /* ============================================= ABOUT ============================================= */ .about-section { background:var(--bg-light); } .about-split { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; } .about-split-text h2 { font-size:2.4rem; color:var(--navy); margin-bottom:1.5rem; } .about-split-text p { color:var(--text-light); font-size:1.05rem; line-height:1.8; margin-bottom:1rem; } .about-features { display:flex; flex-direction:column; gap:0.85rem; margin:2rem 0; } .about-feature { display:flex; align-items:flex-start; gap:0.85rem; font-size:0.97rem; color:var(--text-main); font-weight:500; line-height:1.5; } .about-feature i { color:var(--primary-green); font-size:1.1rem; margin-top:0.1rem; flex-shrink:0; } .video-wrapper { border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-premium); position:relative; padding-top:56.25%; } .video-wrapper iframe { position:absolute; top:0; left:0; width:100%; height:100%; } /* ============================================= CHIFFRES CLES ============================================= */ .chiffres-section { background: linear-gradient(135deg,#0d4726 0%,var(--primary-green) 50%,#1a6b3a 100%); padding:80px 0; position:relative; overflow:hidden; } .chiffres-overlay { position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E"); } .chiffres-header { text-align:center; margin-bottom:4rem; position:relative; z-index:1; } .chiffres-header h2 { color:white; font-size:2rem; margin-bottom:0.5rem; } .chiffres-header p { color:rgba(255,255,255,0.65); font-size:1rem; } .chiffres-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; position:relative; z-index:1; } .chiffre-item { text-align:center; padding:2.5rem 1.5rem; border-right:1px solid rgba(255,255,255,0.12); } .chiffre-item:last-child { border-right:none; } .chiffre-icon { width:56px; height:56px; background:rgba(255,255,255,0.12); border-radius:16px; display:flex; align-items:center; justify-content:center; margin:0 auto 1.25rem; font-size:1.4rem; color:var(--primary-yellow); } .chiffre-number { font-family:'Plus Jakarta Sans',sans-serif; font-size:3.5rem; font-weight:800; color:var(--primary-yellow); line-height:1; margin-bottom:0.75rem; letter-spacing:-0.02em; } .chiffre-label { color:rgba(255,255,255,0.8); font-size:0.9rem; font-weight:500; line-height:1.5; } /* ============================================= NEWS ============================================= */ .news-section { background:var(--bg-section); } .news-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:2rem; } .news-card .product-img { height:210px; padding:0; } .news-card .product-img img { object-fit:cover; width:100%; height:100%; } .news-category-badge { position:absolute; top:14px; left:14px; background:var(--primary-blue); color:white; padding:4px 11px; border-radius:100px; font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; } .news-date { display:flex; align-items:center; gap:0.4rem; color:var(--primary-blue); font-weight:600; font-size:0.82rem; margin-bottom:0.65rem; } .news-card .product-info h3 { font-size:1.05rem; margin-bottom:0.5rem; } .news-card .product-info p { font-size:0.82rem; line-height:1.65; } .news-card .learn-more { font-size:0.78rem; margin-top:1rem; } .news-card .product-img { height:200px; padding:0; } .news-card .product-img img { object-fit:cover; width:100%; height:100%; } .learn-more { color:var(--primary-green); font-weight:800; display:inline-flex; align-items:center; gap:0.65rem; font-size:0.88rem; text-transform:uppercase; letter-spacing:0.05em; margin-top:1.25rem; } .learn-more i { transition:transform 0.3s ease; } .product-card:hover .learn-more i { transform:translateX(6px); } /* ============================================= CALLBACK ============================================= */ .callback-section { background:var(--navy); padding:100px 0; position:relative; overflow:hidden; } .callback-bg-deco { position:absolute; top:-150px; right:-150px; width:600px; height:600px; background:radial-gradient(circle,rgba(50,148,55,0.12) 0%,transparent 70%); border-radius:50%; pointer-events:none; } .callback-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; } .callback-text h2 { color:white; font-size:2.6rem; margin-bottom:1.25rem; } .callback-text p { color:rgba(255,255,255,0.6); font-size:1.05rem; line-height:1.8; margin-bottom:2rem; } .callback-features { display:flex; flex-direction:column; gap:0.85rem; margin-bottom:2.5rem; } .callback-feature { display:flex; align-items:center; gap:0.75rem; color:rgba(255,255,255,0.8); font-size:0.95rem; font-weight:500; } .callback-feature i { width:22px; height:22px; background:var(--primary-green); color:white; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.65rem; flex-shrink:0; } .callback-contact-info { display:flex; gap:1rem; flex-wrap:wrap; } .contact-pill { display:inline-flex; align-items:center; gap:0.5rem; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); color:rgba(255,255,255,0.85); padding:0.6rem 1.2rem; border-radius:100px; font-size:0.88rem; font-weight:600; transition:var(--transition); } .contact-pill:hover { background:var(--primary-green); border-color:var(--primary-green); color:white; } .contact-pill i { color:var(--primary-yellow); } .callback-form { background:white; border-radius:var(--radius-lg); padding:2.5rem; box-shadow:0 24px 60px rgba(0,0,0,0.25); } .callback-form h3 { font-size:1.4rem; color:var(--navy); margin-bottom:1.75rem; padding-bottom:1.25rem; border-bottom:2px solid #f1f5f9; } .form-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; } .form-group { display:flex; flex-direction:column; gap:0.45rem; margin-bottom:0.85rem; } .form-group label { font-size:0.83rem; font-weight:700; color:var(--text-main); text-transform:uppercase; letter-spacing:0.05em; } .required { color:#ef4444; } .optional { color:var(--text-light); font-weight:400; text-transform:none; font-size:0.8rem; } .callback-form input, .callback-form select { width:100%; padding:0.8rem 1rem; border:2px solid #e2e8f0; border-radius:var(--radius-sm); font-family:'Outfit',sans-serif; font-size:0.95rem; color:var(--text-main); transition:border-color 0.3s ease,box-shadow 0.3s ease; outline:none; background:#f8fafc; } .callback-form input:focus, .callback-form select:focus { border-color:var(--primary-green); background:white; box-shadow:0 0 0 4px rgba(50,148,55,0.08); } .form-disclaimer { font-size:0.76rem; color:var(--text-light); text-align:center; margin-top:0.85rem; line-height:1.5; } /* ============================================= MOBILE PROMO SECTION (configurable) ============================================= */ .mobile-promo-section { color:var(--white); padding:110px 0; position:relative; overflow:hidden; } .mobile-promo-section::before { content:''; position:absolute; top:-100px; right:-100px; width:600px; height:600px; background:radial-gradient(circle,rgba(255,219,0,0.08) 0%,transparent 70%); border-radius:50%; pointer-events:none; } .mobile-promo-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:5rem; } .mobile-promo-img img { width:100%; border-radius:40px; box-shadow:var(--shadow-lg); display:block; } .mobile-promo-content h2 { color:var(--white); font-size:3.5rem; margin-bottom:1.5rem; } .mobile-promo-content h2 span { color:var(--primary-yellow); } .mobile-promo-content p { color:rgba(255,255,255,0.75); font-size:1.15rem; margin-bottom:2.5rem; line-height:1.8; } .mobile-promo-btns { display:flex; gap:1.25rem; flex-wrap:wrap; } .mobile-promo-btns .btn-primary { background:var(--primary-green); border:none; padding:.9rem 2rem; font-size:1rem; font-weight:700; border-radius:var(--radius-sm); display:inline-flex; align-items:center; gap:.6rem; } .mobile-promo-btns .btn-primary:hover { background:var(--dark-green); transform:translateY(-2px); } /* ============================================= MOBILE APP (legacy — keep for store buttons) ============================================= */ .mobile-app { background:var(--dark-blue); color:var(--white); padding:110px 0; position:relative; overflow:hidden; } .mobile-app::before { content:''; position:absolute; top:-100px; right:-100px; width:600px; height:600px; background:radial-gradient(circle,rgba(255,219,0,0.08) 0%,transparent 70%); border-radius:50%; } .mobile-app .container { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:5rem; } .mobile-app-img img { border-radius:40px; box-shadow:var(--shadow-lg); } .mobile-app-content h2 { color:var(--white); font-size:3.5rem; margin-bottom:1.5rem; } .mobile-app-content h2 span { color:var(--primary-yellow); } .mobile-app-content p { color:rgba(255,255,255,0.65); font-size:1.1rem; margin-bottom:3rem; line-height:1.8; } .app-store-btns { display:flex; gap:1.25rem; flex-wrap:wrap; } .store-btn { display:inline-flex; align-items:center; gap:0.85rem; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); color:white; padding:0.85rem 1.75rem; border-radius:var(--radius-sm); transition:var(--transition); font-family:'Outfit',sans-serif; } .store-btn i { font-size:1.75rem; } .store-btn span { display:flex; flex-direction:column; } .store-btn small { font-size:0.7rem; opacity:0.7; font-weight:400; } .store-btn:hover { background:white; color:var(--dark-blue); transform:translateY(-3px); border-color:white; } .store-btn-outline { background:transparent; border:2px solid rgba(255,255,255,0.3); } /* ============================================= PRESENCE ============================================= */ .presence-section { background:var(--bg-light); } .presence-split { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; } .presence-text h2 { font-size:2.2rem; color:var(--navy); margin-bottom:1.25rem; } .presence-text p { color:var(--text-light); font-size:1.05rem; line-height:1.8; margin-bottom:2rem; } .partner-tags { display:flex; flex-wrap:wrap; gap:0.55rem; } .partner-tags span, .partner-tag-link { background:rgba(50,148,55,0.08); color:var(--primary-green); padding:0.38rem 0.9rem; border-radius:100px; font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; border:1px solid rgba(50,148,55,0.15); transition:var(--transition); text-decoration:none; display:inline-flex; align-items:center; } .partner-tags span:hover, .partner-tag-link:hover { background:var(--primary-green); color:white; } /* ============================================= PARTNERS ============================================= */ .partners-section { background:white; } .partners-grid { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:2.5rem; padding:2rem 0; } .partner-logo-box { display:flex; align-items:center; justify-content:center; padding:1.25rem 2rem; border-radius:var(--radius-md); border:1px solid #f1f5f9; background:var(--bg-light); transition:var(--transition); } .partner-logo-box:hover { box-shadow:var(--shadow-md); transform:translateY(-4px); border-color:rgba(50,148,55,0.1); } .partner-logo-box img { height:60px; width:auto; object-fit:contain; filter:grayscale(30%); transition:filter 0.3s ease; } .partner-logo-box:hover img { filter:grayscale(0); } .empty-partners { color:var(--text-light); text-align:center; width:100%; } /* ============================================= FOOTER ============================================= */ footer { background:var(--navy); color:var(--white); padding:50px 0 28px; position:relative; } footer::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--primary-green),var(--primary-yellow),var(--primary-blue)); } .footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:3rem; margin-bottom:40px; } .footer-info p { color:rgba(255,255,255,0.5); margin:1rem 0; font-size:0.88rem; max-width:320px; line-height:1.7; } .footer-links h4 { color:var(--white); margin-bottom:1.25rem; font-size:1rem; position:relative; padding-bottom:0.65rem; } .footer-links h4::after { content:''; position:absolute; bottom:0; left:0; width:28px; height:3px; background:var(--primary-yellow); border-radius:10px; } .footer-links ul li { margin-bottom:0.6rem; } .footer-links ul li a { color:rgba(255,255,255,0.5); font-size:0.875rem; display:flex; align-items:center; gap:0.4rem; } .footer-links ul li a:hover { color:var(--white); padding-left:4px; } .social-links { display:flex; gap:0.75rem; margin-top:1rem; } .social-links a { width:36px; height:36px; background:rgba(255,255,255,0.08); border-radius:50%; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.7); font-size:0.85rem; transition:var(--transition); border:1px solid rgba(255,255,255,0.08); } .social-links a:hover { background:var(--primary-green); color:white; transform:translateY(-3px); } .footer-bottom { text-align:center; padding-top:22px; border-top:1px solid rgba(255,255,255,0.06); color:rgba(255,255,255,0.3); font-size:0.85rem; } /* ============================================= ANIMATIONS ============================================= */ @keyframes fadeInUp { from{opacity:0;transform:translateY(40px);} to{opacity:1;transform:translateY(0);} } @keyframes revealText { from{opacity:0;transform:skewY(4deg) translateY(80px);} to{opacity:1;transform:skewY(0) translateY(0);} } /* ============================================= INNER PAGES — force header offset on first block ============================================= */ .products-hero, .page-inner-hero, .faq-hero, .actualites-hero, .about-hero { padding-top: calc(var(--header-height) + 80px); } /* ============================================= RESPONSIVE — 1024px ============================================= */ @media (max-width:1024px) { .slide-title { font-size:3.2rem; } .why-grid { grid-template-columns:repeat(2,1fr); } .chiffres-grid { grid-template-columns:repeat(2,1fr); } .chiffre-item:nth-child(2) { border-right:none; } .chiffre-item:nth-child(3) { border-top:1px solid rgba(255,255,255,0.12); } .chiffre-item:nth-child(4) { border-top:1px solid rgba(255,255,255,0.12); border-right:none; } .about-split { grid-template-columns:1fr; gap:3rem; } .callback-grid { grid-template-columns:1fr; gap:3rem; } .presence-split { grid-template-columns:1fr; gap:3rem; } .mobile-promo-grid { grid-template-columns:1fr; gap:3rem; } .mobile-promo-img { order:-1; } .mobile-app .container { grid-template-columns:1fr; gap:3rem; } .footer-grid { grid-template-columns:1fr 1fr; gap:3rem; } .ogar-tabs { flex-wrap:wrap; } .ogar-tab { flex:auto; } } /* ============================================= RESPONSIVE — 768px ============================================= */ @media (max-width:768px) { :root { --header-height: 75px; } header { top:0; width:100%; border-radius:0; } nav, .header-actions { display:none; } .hamburger { display:flex; } .logo img { height:65px; } .container { padding:0 1.25rem; } .hero-slideshow { height:100vh; min-height:560px; } .slide-content { padding-top:calc(var(--header-height) + 0.5rem); } .slide-title { font-size:2.6rem; } .slide-subtitle { font-size:1rem; } .slide-btns { flex-direction:column; } .slide-btns .btn, .slide-btns .btn-hero-ghost { width:100%; justify-content:center; } .slide-arrow { display:none; } .section { padding:70px 0; } .section-header h2 { font-size:2.1rem; } .section-header { margin-bottom:45px; } .why-grid { grid-template-columns:1fr 1fr; gap:1rem; } .why-card { padding:1.6rem 1.2rem; } .chiffres-grid { grid-template-columns:repeat(2,1fr); } .chiffre-number { font-size:2.8rem; } .chiffre-item { border-right:none; border-bottom:1px solid rgba(255,255,255,0.1); padding:1.75rem 1rem; } .chiffre-item:last-child { border-bottom:none; } .form-row-2 { grid-template-columns:1fr; } .callback-form { padding:1.75rem 1.25rem; } .callback-text h2 { font-size:2rem; } .mobile-app-content h2 { font-size:2.5rem; } .mobile-promo-content h2 { font-size:2.5rem; } .footer-grid { grid-template-columns:1fr; gap:2.5rem; } .ogar-tabs { border-radius:var(--radius-sm); } .ogar-tab { min-width:calc(50% - 1px); font-size:0.8rem; padding:0.85rem 1rem; } } /* ============================================= RESPONSIVE — 480px ============================================= */ @media (max-width:480px) { .slide-title { font-size:2.1rem; } .why-grid { grid-template-columns:1fr; } .app-store-btns { flex-direction:column; } .ogar-tab { min-width:100%; } .hero-trust-panel { display:none; } .hero-bottom-text { display:none; } } /* ============================================= SCROLL REVEAL — CSS class based (no CLS) ============================================= */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease-out, transform .6s ease-out; } .reveal.revealed { opacity: 1; transform: translateY(0); } /* ============================================= WILL-CHANGE HINTS — promote GPU layers only on elements that animate on hover / scroll ============================================= */ .product-card, .why-card, .partner-logo-box, .store-btn, .contact-pill { will-change: transform; } .btn-primary, .btn-outline, .btn-outline-green, .btn-outline-blue { will-change: transform, box-shadow; } /* ============================================= BLOB — isolate on compositor layer ============================================= */ .blob { will-change: transform; contain: strict; } /* ============================================= FOCUS VISIBLE — keyboard accessibility ============================================= */ :focus-visible { outline: 3px solid var(--primary-green); outline-offset: 3px; border-radius: 4px; } /* ============================================= REDUCED MOTION — respect user preference ============================================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } .blob { animation: none; } } /* ============================================= FLUID TYPOGRAPHY — clamp() for all screens ============================================= */ .slide-title { font-size: clamp(1.9rem, 6vw, 5rem); } .slide-subtitle { font-size: clamp(.95rem, 2.5vw, 1.25rem); } .section-header h2 { font-size: clamp(1.75rem, 4vw, 2.8rem); } .callback-text h2 { font-size: clamp(1.75rem, 4vw, 2.6rem); } .mobile-promo-content h2 { font-size: clamp(1.75rem, 4vw, 3.5rem); } .presence-text h2 { font-size: clamp(1.5rem, 3.5vw, 2.2rem); } .chiffre-number { font-size: clamp(2.2rem, 5vw, 3.5rem); } /* ============================================= TOUCH TARGETS — slide dots + arrows ============================================= */ .slide-dot { position: relative; } .slide-dot::before { content: ''; position: absolute; inset: -10px; } /* ============================================= PRODUCTS GRID — better mobile fit ============================================= */ .products-grid { grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); } /* ============================================= RESPONSIVE — 640px (tablet portrait) ============================================= */ @media (max-width: 640px) { .container { padding: 0 1rem; } .section { padding: 60px 0; } .section-header { margin-bottom: 2.5rem; } .section-header p { font-size: 1rem; } /* Hero */ .slide-content { padding: calc(var(--header-height) + 1rem) 1.25rem 1.25rem; } .slide-btns .btn, .slide-btns .btn-hero-ghost { width: 100%; justify-content: center; } /* Products tabs */ .ogar-tab { min-width: calc(50% - 1px); font-size: .78rem; padding: .8rem .75rem; } .ogar-tab i { display: none; } /* Product grid — 1 column on very small, 2 on ≥480 */ .products-grid { grid-template-columns: 1fr; gap: 1.25rem; } /* Why grid */ .why-grid { grid-template-columns: 1fr 1fr; gap: 1rem; } .why-card { padding: 1.4rem 1rem; } .why-icon { width: 52px; height: 52px; font-size: 1.4rem; } /* Chiffres */ .chiffres-grid { grid-template-columns: repeat(2, 1fr); gap: 0; } .chiffre-item { padding: 1.5rem 1rem; border-right: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); } .chiffre-item:nth-child(even) { border-right: none; } .chiffre-item:nth-last-child(-n+2) { border-bottom: none; } /* Callback */ .callback-section { padding: 70px 0; } .callback-grid { gap: 2.5rem; } .callback-form { padding: 1.5rem 1rem; border-radius: var(--radius-md); } .form-row-2 { grid-template-columns: 1fr; gap: .75rem; } /* Mobile promo */ .mobile-promo-section { padding: 70px 0; } .mobile-promo-grid { gap: 2rem; } .mobile-promo-img img { border-radius: 20px; } /* Presence */ .presence-split { gap: 2rem; } .presence-img { display: none; } /* Partners */ .partners-grid { gap: 1.25rem; } .partner-logo-box { padding: .85rem 1.25rem; } .partner-logo-box img { height: 44px; } /* Footer */ .footer-grid { gap: 2rem; } .footer-info p { font-size: .82rem; } /* Testimonials */ .testimonials-carousel { gap: 1rem; } /* Logo header */ .logo img { height: 55px; } } /* ============================================= RESPONSIVE — 480px (large phones) ============================================= */ @media (max-width: 480px) { /* Products — 1 column strict */ .products-grid { grid-template-columns: 1fr; } .product-img { height: 200px; } /* Why — 1 column */ .why-grid { grid-template-columns: 1fr; } /* Section header */ .section-cta { margin-top: 2rem; } /* Tabs — 1 per row */ .ogar-tab { min-width: 100%; border-right: none !important; border-bottom: 1px solid #e2e8f0; } .ogar-tabs { border-radius: var(--radius-sm); } /* Chiffres — 1 column */ .chiffres-grid { grid-template-columns: 1fr; } .chiffre-item { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.12); } /* Trust panel */ .hero-trust-panel { display: none; } .hero-bottom-text { display: none; } /* Slide dots bigger for touch */ .slide-dot { width: 8px; height: 8px; } .slide-dot.active { width: 22px; } .slide-dots { bottom: 1rem; gap: .5rem; } /* Partner logos */ .partners-grid { gap: 1rem; } .partner-logo-box { padding: .7rem 1rem; } .partner-logo-box img { height: 36px; } /* Btn responsive */ .btn-outline-green, .btn-outline-blue { padding: .75rem 1.5rem; font-size: .85rem; } /* Footer bottom text */ .footer-bottom { font-size: .78rem; } footer { padding: 40px 0 22px; } /* Mobile nav panel */ .mobile-nav { width: 280px; padding: 1.5rem; } /* Product actions vertical */ .product-actions { flex-direction: column; align-items: flex-start; gap: .75rem; } } /* ============================================= RESPONSIVE — 360px (small phones) ============================================= */ @media (max-width: 360px) { :root { --header-height: 65px; } .container { padding: 0 .85rem; } .logo img { height: 48px; } .section { padding: 50px 0; } .slide-title { font-size: 1.7rem; } .slide-subtitle { font-size: .88rem; } .why-card h3 { font-size: 1rem; } .product-info h3 { font-size: 1.1rem; } .callback-form h3 { font-size: 1.1rem; } .mobile-nav { width: 260px; } } /* ============================================= OVERFLOW PROTECTION — global safety net ============================================= */ html, body { max-width: 100%; overflow-x: hidden; } table { overflow-x: auto; display: block; max-width: 100%; } table:not([class]) { display: table; } img { max-width: 100%; height: auto; } .yt-gallery { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } @media (max-width: 640px) { .yt-gallery { grid-template-columns: 1fr; } .news-grid { grid-template-columns: 1fr; gap: 1.25rem; } } @media (max-width: 480px) { .news-grid { gap: 1rem; } .partner-tags { gap: .4rem; } .partner-tag-link { font-size: .7rem; padding: .3rem .7rem; } .contact-pill { font-size: .82rem; padding: .5rem 1rem; } .callback-contact-info { flex-direction: column; } .mobile-promo-btns { flex-direction: column; } .mobile-promo-btns .btn-primary { justify-content: center; } } /* ============================================= ABOUT PAGE — responsive ============================================= */ @media (max-width: 768px) { .about-hero { padding-top: calc(var(--header-height) + 50px); } .products-hero, .faq-hero, .actualites-hero { padding-top: calc(var(--header-height) + 40px); } } /* ============================================= AVIS PAGE — responsive (inline styles fallback) ============================================= */ @media (max-width: 768px) { .avis-top-grid { grid-template-columns: 1fr !important; gap: 2rem !important; } } @media (max-width: 480px) { .avis-hero { padding: 3.5rem 0 2rem; } .avis-hero h1 { font-size: clamp(1.6rem, 7vw, 2.5rem); } } /* ============================================= PRINT — hide nav, footer, decorative ============================================= */ @media print { header, footer, .hamburger, .mobile-nav-overlay, .slide-arrows, .slide-dots, .hero-trust-panel, .hero-bottom-text, .blob { display: none !important; } .hero-slideshow { height: auto; min-height: 0; } .section { padding: 30px 0; } a[href]::after { content: " (" attr(href) ")"; font-size: .75rem; color: #666; } }