/* ========================================
PALETTE DE COULEURS - InitiativesAfrica
Palette harmonisée : Vert, Orange, Bleu, Rouge, Violet
======================================== */
:root {
/* 🔵 BLEU - Couleur principale (Professionnel, Confiance) */
--color-blue: #2563EB; /* Bleu vif professionnel */
--color-blue-dark: #1E40AF; /* Bleu foncé profond */
--color-blue-light: #3B82F6; /* Bleu clair lumineux */
--color-blue-soft: #DBEAFE; /* Bleu pastel pour fonds */
/* 🟢 VERT - Croissance, Nature, Succès */
--color-green: #10B981; /* Vert émeraude moderne */
--color-green-dark: #059669; /* Vert foncé profond */
--color-green-light: #34D399; /* Vert clair vibrant */
--color-green-soft: #D1FAE5; /* Vert pastel pour fonds */
/* 🟠 ORANGE - Énergie, Innovation, Chaleur */
--color-orange: #F97316; /* Orange vif dynamique */
--color-orange-dark: #EA580C; /* Orange foncé intense */
--color-orange-light: #FB923C; /* Orange clair chaleureux */
--color-orange-soft: #FFEDD5; /* Orange pastel pour fonds */
/* 🔴 ROUGE - Action, Urgence, Passion */
--color-red: #EF4444; /* Rouge vif énergique */
--color-red-dark: #DC2626; /* Rouge foncé profond */
--color-red-light: #F87171; /* Rouge clair doux */
--color-red-soft: #FEE2E2; /* Rouge pastel pour fonds */
/* 🟣 VIOLET - Créativité, Luxe, Sophistication */
--color-purple: #8B5CF6; /* Violet moderne élégant */
--color-purple-dark: #7C3AED; /* Violet foncé profond */
--color-purple-light: #A78BFA; /* Violet clair lumineux */
--color-purple-soft: #EDE9FE; /* Violet pastel pour fonds */
/* 🎨 COULEURS PRINCIPALES (Hiérarchie d'utilisation) */
--color-primary: var(--color-blue); /* Couleur principale */
--color-primary-dark: var(--color-blue-dark);
--color-primary-light: var(--color-blue-light);
--color-primary-soft: var(--color-blue-soft);
--color-secondary: var(--color-green); /* Couleur secondaire */
--color-secondary-dark: var(--color-green-dark);
--color-secondary-light: var(--color-green-light);
--color-accent: var(--color-orange); /* Couleur d'accent */
--color-accent-dark: var(--color-orange-dark);
--color-accent-light: var(--color-orange-light);
--color-tertiary: var(--color-purple); /* Couleur tertiaire */
--color-tertiary-dark: var(--color-purple-dark);
--color-tertiary-light: var(--color-purple-light);
/* 🎨 NEUTRES (Textes et arrière-plans) */
--color-white: #FFFFFF;
--color-gray-50: #F9FAFB;
--color-gray-100: #F3F4F6;
--color-gray-200: #E5E7EB;
--color-gray-300: #D1D5DB;
--color-gray-400: #9CA3AF;
--color-gray-500: #6B7280;
--color-gray-600: #4B5563;
--color-gray-700: #374151;
--color-gray-800: #1F2937;
--color-gray-900: #111827;
--color-black: #030712;
/* 📊 ÉTATS (Feedback utilisateur) */
--color-success: var(--color-green);
--color-success-light: var(--color-green-light);
--color-warning: var(--color-orange);
--color-warning-light: var(--color-orange-light);
--color-error: var(--color-red);
--color-error-light: var(--color-red-light);
--color-info: var(--color-blue);
--color-info-light: var(--color-blue-light);
/* 🌈 DÉGRADÉS HARMONIEUX */
--gradient-primary: linear-gradient(135deg, var(--color-blue) 0%, var(--color-purple) 100%);
--gradient-secondary: linear-gradient(135deg, var(--color-green) 0%, var(--color-blue) 100%);
--gradient-accent: linear-gradient(135deg, var(--color-orange) 0%, var(--color-red) 100%);
--gradient-vibrant: linear-gradient(135deg, var(--color-purple) 0%, var(--color-blue) 50%, var(--color-green) 100%);
--gradient-warm: linear-gradient(135deg, var(--color-orange) 0%, var(--color-red) 50%, var(--color-purple) 100%);
/* 🌑 OMBRES (Avec couleur primaire pour cohérence) */
--shadow-sm: 0 2px 4px rgba(37, 99, 235, 0.1);
--shadow-md: 0 4px 12px rgba(37, 99, 235, 0.15);
--shadow-lg: 0 8px 24px rgba(37, 99, 235, 0.2);
--shadow-xl: 0 16px 48px rgba(37, 99, 235, 0.25);
--shadow-colored: 0 8px 24px rgba(37, 99, 235, 0.3);
/* Transitions */
--transition-fast: 0.15s ease;
--transition-base: 0.3s ease;
--transition-slow: 0.5s ease;
/* Espacements */
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
--spacing-2xl: 3rem;
/* Typographie */
--font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
}
/* ========================================
RESET & BASE
======================================== */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: var(--font-family);
color: var(--color-gray-700);
background-color: var(--color-white);
line-height: 1.6;
overflow-x: hidden;
}
body.menu-open {
overflow: hidden;
}
a {
text-decoration: none;
color: inherit;
transition: color var(--transition-fast);
}
ul {
list-style: none;
}
button {
border: none;
background: none;
cursor: pointer;
font-family: inherit;
}
/* ========================================
HEADER PRINCIPAL
======================================== */
.main-header {
position: sticky;
top: 0;
z-index: 1000;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 0 2px 20px rgba(37, 99, 235, 0.08);
border-bottom: 1px solid rgba(37, 99, 235, 0.1);
transition: all var(--transition-base);
}
.main-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--gradient-primary);
opacity: 0;
transition: opacity var(--transition-base);
}
.main-header:hover::before {
opacity: 1;
}
.main-header.scrolled {
box-shadow: 0 4px 30px rgba(37, 99, 235, 0.12);
background: rgba(255, 255, 255, 0.98);
}
.header-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 var(--spacing-lg);
display: flex;
align-items: center;
justify-content: space-between;
height: 80px;
gap: var(--spacing-xl);
}
/* Logo */
.header-logo {
flex-shrink: 0;
}
.logo-link {
display: flex;
align-items: center;
text-decoration: none;
transition: transform var(--transition-fast);
}
.logo-link:hover {
transform: scale(1.02);
}
.logo-wrapper {
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.logo-icon {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
background: var(--gradient-primary);
color: var(--color-white);
font-weight: var(--font-weight-bold);
font-size: 1.3rem;
border-radius: 14px;
box-shadow: 0 4px 15px rgba(37, 99, 235, 0.25);
transition: all var(--transition-base);
position: relative;
overflow: hidden;
}
.logo-icon::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.logo-link:hover .logo-icon::before {
width: 200%;
height: 200%;
}
.logo-letter {
position: relative;
z-index: 1;
transition: transform var(--transition-base);
display: inline-block;
}
.logo-link:hover .logo-letter:first-child {
transform: translateX(-2px) rotate(-5deg);
animation: letterBounce 0.6s ease-in-out;
}
.logo-link:hover .logo-letter:last-child {
transform: translateX(2px) rotate(5deg);
animation: letterBounce 0.6s ease-in-out 0.1s;
}
.logo-link:hover .logo-icon {
box-shadow: 0 6px 25px rgba(37, 99, 235, 0.4);
transform: scale(1.05);
}
.logo-text {
font-size: 1.6rem;
font-weight: var(--font-weight-bold);
color: var(--color-primary);
letter-spacing: -0.5px;
transition: all var(--transition-base);
}
.logo-accent {
background: var(--gradient-accent);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
display: inline-block;
}
.logo-accent::after {
content: '';
position: absolute;
bottom: -3px;
left: 0;
right: 0;
height: 3px;
background: var(--gradient-accent);
opacity: 0;
border-radius: 2px;
transform: scaleX(0);
transition: all var(--transition-base);
}
.logo-link:hover .logo-accent::after {
opacity: 1;
transform: scaleX(1);
}
/* Navigation principale */
.main-nav {
flex: 1;
display: flex;
justify-content: center;
}
.nav-menu {
display: flex;
align-items: center;
gap: var(--spacing-xs);
}
.nav-item {
position: relative;
}
.nav-link {
display: flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-sm) var(--spacing-md);
color: var(--color-gray-700);
font-weight: var(--font-weight-medium);
font-size: 0.95rem;
border-radius: 10px;
transition: all var(--transition-base);
position: relative;
white-space: nowrap;
overflow: hidden;
}
.nav-link::before {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: var(--gradient-accent);
transform: translateX(-50%);
transition: width var(--transition-base);
border-radius: 2px;
}
.nav-link:hover {
color: var(--color-primary);
background: linear-gradient(to bottom, var(--color-gray-50), transparent);
transform: translateY(-1px);
}
.nav-link:hover::before {
width: 80%;
}
.nav-item.active > .nav-link {
color: var(--color-primary);
background: linear-gradient(to bottom, var(--color-primary-soft), transparent);
}
.nav-item.active > .nav-link::before {
width: 80%;
}
.dropdown-icon {
transition: all var(--transition-base);
color: var(--color-gray-500);
transform-origin: center;
}
.nav-link:hover .dropdown-icon {
color: var(--color-primary);
transform: translateY(2px);
}
.nav-item.active .dropdown-icon {
transform: rotate(180deg);
color: var(--color-primary);
}
.nav-item.active .nav-link:hover .dropdown-icon {
transform: rotate(180deg) translateY(-2px);
}
/* Dropdown menus */
.dropdown-menu {
position: absolute;
top: calc(100% + 12px);
left: 0;
min-width: 240px;
background: var(--color-white);
border-radius: 16px;
box-shadow: 0 10px 40px rgba(37, 99, 235, 0.15);
opacity: 0;
visibility: hidden;
transform: translateY(-15px) scale(0.95);
transition: all var(--transition-base);
z-index: 100;
border: 1px solid rgba(37, 99, 235, 0.1);
overflow: hidden;
}
.dropdown-menu::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--gradient-primary);
transform: scaleX(0);
transition: transform var(--transition-base);
}
.dropdown-menu.active {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
animation: dropdownSlide 0.3s ease-out;
}
.dropdown-menu.active::before {
transform: scaleX(1);
}
.dropdown-content {
padding: var(--spacing-sm);
}
.dropdown-link {
display: block;
padding: var(--spacing-md) var(--spacing-lg);
color: var(--color-gray-700);
font-size: 0.9rem;
border-radius: 10px;
transition: all var(--transition-base);
position: relative;
overflow: hidden;
margin-bottom: var(--spacing-xs);
}
.dropdown-link::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: var(--gradient-accent);
transform: scaleY(0);
transform-origin: bottom;
transition: transform var(--transition-base);
border-radius: 0 4px 4px 0;
}
.dropdown-link::after {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, var(--color-primary-soft), transparent);
opacity: 0;
transition: opacity var(--transition-base);
border-radius: 10px;
}
.dropdown-link:hover {
color: var(--color-primary);
transform: translateX(4px);
padding-left: calc(var(--spacing-lg) + 4px);
}
.dropdown-link:hover::before {
transform: scaleY(1);
}
.dropdown-link:hover::after {
opacity: 1;
}
.dropdown-link {
animation: dropdownItemSlide 0.3s ease-out backwards;
}
.dropdown-link:nth-child(1) { animation-delay: 0.05s; }
.dropdown-link:nth-child(2) { animation-delay: 0.1s; }
.dropdown-link:nth-child(3) { animation-delay: 0.15s; }
.dropdown-link:nth-child(4) { animation-delay: 0.2s; }
.dropdown-link:nth-child(5) { animation-delay: 0.25s; }
/* Actions header */
.header-actions {
display: flex;
align-items: center;
gap: var(--spacing-sm);
flex-shrink: 0;
}
.action-btn {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
color: var(--color-gray-700);
border-radius: 12px;
transition: all var(--transition-base);
position: relative;
overflow: hidden;
}
.action-btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: var(--color-primary-soft);
transform: translate(-50%, -50%);
transition: width 0.4s, height 0.4s;
}
.action-btn:hover::before {
width: 100%;
height: 100%;
}
.action-btn svg {
position: relative;
z-index: 1;
transition: transform var(--transition-base);
}
.action-btn:hover {
color: var(--color-primary);
transform: translateY(-2px) scale(1.05);
}
.action-btn:hover svg {
transform: rotate(10deg) scale(1.1);
}
.search-btn:hover svg {
transform: rotate(90deg) scale(1.1);
}
.language-selector {
position: relative;
}
.language-btn {
display: flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-sm) var(--spacing-md);
color: var(--color-gray-700);
border-radius: 10px;
transition: all var(--transition-base);
}
.language-btn:hover {
color: var(--color-primary);
background: var(--color-gray-50);
}
.language-code {
font-weight: var(--font-weight-semibold);
font-size: 0.875rem;
}
.language-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 160px;
background: var(--color-white);
border-radius: 12px;
box-shadow: var(--shadow-lg);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all var(--transition-base);
z-index: 100;
border: 1px solid var(--color-gray-100);
padding: var(--spacing-sm);
}
.language-dropdown.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.language-option {
display: block;
padding: var(--spacing-sm) var(--spacing-md);
color: var(--color-gray-700);
font-size: 0.9rem;
border-radius: 8px;
transition: all var(--transition-fast);
}
.language-option:hover,
.language-option.active {
color: var(--color-primary);
background: var(--color-gray-50);
}
/* Bouton Contact */
.btn-contact {
display: flex;
align-items: center;
gap: var(--spacing-sm);
padding: var(--spacing-md) var(--spacing-xl);
background: var(--gradient-primary);
color: var(--color-white);
font-weight: var(--font-weight-semibold);
font-size: 0.95rem;
border-radius: 12px;
transition: all var(--transition-base);
box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
position: relative;
overflow: hidden;
}
.btn-contact::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left var(--transition-slow);
}
.btn-contact::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.btn-contact:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 8px 25px rgba(37, 99, 235, 0.4);
}
.btn-contact:hover::before {
left: 100%;
}
.btn-contact:hover::after {
width: 300%;
height: 300%;
}
.btn-contact:active {
transform: translateY(-1px) scale(0.98);
}
.btn-contact svg {
transition: transform var(--transition-base);
position: relative;
z-index: 1;
}
.btn-contact:hover svg {
transform: translateX(4px) rotate(45deg);
}
/* Barre de recherche */
.search-bar {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--color-white);
border-top: 1px solid var(--color-gray-100);
box-shadow: var(--shadow-md);
max-height: 0;
overflow: hidden;
transition: max-height var(--transition-base);
}
.search-bar.active {
max-height: 200px;
}
.search-container {
max-width: 1400px;
margin: 0 auto;
padding: var(--spacing-lg);
display: flex;
align-items: center;
gap: var(--spacing-md);
}
.search-input {
flex: 1;
padding: var(--spacing-md) var(--spacing-lg);
border: 2px solid var(--color-gray-100);
border-radius: 12px;
font-size: 1rem;
font-family: inherit;
transition: all var(--transition-base);
outline: none;
}
.search-input:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.search-close {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-gray-700);
font-size: 1.5rem;
border-radius: 10px;
transition: all var(--transition-base);
}
.search-close:hover {
background: var(--color-gray-50);
color: var(--color-primary);
}
/* Menu mobile */
.mobile-menu-btn {
display: none;
flex-direction: column;
gap: 6px;
width: 36px;
height: 36px;
padding: 8px;
background: none;
border-radius: 8px;
position: relative;
transition: all var(--transition-base);
}
.mobile-menu-btn span {
width: 100%;
height: 3px;
background: var(--color-gray-700);
border-radius: 3px;
transition: all var(--transition-base);
transform-origin: center;
}
.mobile-menu-btn:hover {
background: var(--color-gray-50);
}
.mobile-menu-btn:hover span {
background: var(--color-primary);
}
.mobile-menu-btn.active span:nth-child(1) {
transform: rotate(45deg) translate(8px, 8px);
}
.mobile-menu-btn.active span:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.mobile-menu-btn.active span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -7px);
}
.mobile-menu {
display: none;
position: fixed;
top: 80px;
left: 0;
right: 0;
bottom: 0;
background: var(--color-white);
transform: translateX(100%);
transition: transform var(--transition-base);
overflow-y: auto;
z-index: 999;
box-shadow: var(--shadow-lg);
}
@media (min-width: 993px) {
.mobile-menu {
display: none !important;
}
}
.mobile-menu.active {
transform: translateX(0);
}
.mobile-nav {
padding: var(--spacing-lg);
}
.mobile-nav-menu {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.mobile-nav-item {
border-bottom: 1px solid var(--color-gray-100);
}
.mobile-nav-item:last-child {
border-bottom: none;
}
.mobile-nav-link {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-md);
color: var(--color-gray-700);
font-weight: var(--font-weight-medium);
font-size: 1rem;
text-align: left;
transition: all var(--transition-fast);
background: none;
border: none;
}
.mobile-nav-link:hover,
.mobile-nav-link:focus {
color: var(--color-primary);
background: var(--color-gray-50);
border-radius: 8px;
}
.mobile-dropdown-icon {
transition: transform var(--transition-base);
color: var(--color-gray-500);
}
.mobile-nav-item.active .mobile-dropdown-icon {
transform: rotate(180deg);
color: var(--color-primary);
}
.mobile-submenu {
max-height: 0;
overflow: hidden;
transition: max-height var(--transition-base);
padding-left: var(--spacing-md);
}
.mobile-submenu.active {
max-height: 500px;
padding-bottom: var(--spacing-sm);
}
.mobile-submenu-link {
display: block;
padding: var(--spacing-sm) var(--spacing-md);
color: var(--color-gray-500);
font-size: 0.9rem;
border-radius: 6px;
transition: all var(--transition-fast);
margin-bottom: var(--spacing-xs);
}
.mobile-submenu-link:hover {
color: var(--color-primary);
background: var(--color-gray-50);
padding-left: var(--spacing-lg);
}
.mobile-actions {
margin-top: var(--spacing-md);
padding-top: var(--spacing-md);
border-top: 2px solid var(--color-gray-100);
}
.mobile-actions .mobile-nav-link {
color: var(--color-primary);
font-weight: var(--font-weight-semibold);
}
.mobile-btn-contact {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-sm);
width: 100%;
padding: var(--spacing-md);
background: var(--gradient-primary);
color: var(--color-white);
font-weight: var(--font-weight-semibold);
border-radius: 10px;
transition: all var(--transition-base);
box-shadow: var(--shadow-sm);
margin-top: var(--spacing-sm);
}
.mobile-btn-contact:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* ========================================
RESPONSIVE
======================================== */
@media (max-width: 1200px) {
.header-container {
padding: 0 var(--spacing-md);
}
.nav-link {
font-size: 0.875rem;
padding: var(--spacing-sm);
}
}
@media (max-width: 992px) {
.main-nav {
display: none;
}
.mobile-menu-btn {
display: flex;
}
.mobile-menu {
display: block;
}
}
@media (max-width: 768px) {
.header-container {
height: 70px;
padding: 0 var(--spacing-md);
}
.logo-text {
font-size: 1.25rem;
}
.logo-icon {
width: 40px;
height: 40px;
font-size: 1rem;
}
.btn-contact span {
display: none;
}
.btn-contact {
padding: var(--spacing-sm);
min-width: 44px;
justify-content: center;
}
.language-code {
display: none;
}
.language-btn {
padding: var(--spacing-sm);
min-width: 44px;
justify-content: center;
}
.mobile-menu {
top: 70px;
}
}
/* ========================================
ANIMATIONS
======================================== */
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes shimmer {
0% {
background-position: -1000px 0;
}
100% {
background-position: 1000px 0;
}
}
@keyframes letterBounce {
0%, 100% {
transform: translateX(0) rotate(0deg);
}
25% {
transform: translateX(-3px) rotate(-8deg);
}
75% {
transform: translateX(3px) rotate(8deg);
}
}
@keyframes dropdownSlide {
0% {
opacity: 0;
transform: translateY(-15px) scale(0.95);
}
50% {
transform: translateY(-5px) scale(0.98);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes dropdownItemSlide {
0% {
opacity: 0;
transform: translateX(-10px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
/* ========================================
UTILITAIRES
======================================== */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* ========================================
HERO SECTION - Design Moderne & Élégant
======================================== */
.hero-section {
position: relative;
width: 100%;
height: 100vh;
min-height: 700px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: linear-gradient(135deg, var(--color-blue-dark) 0%, var(--color-purple-dark) 100%);
}
/* Conteneur vidéo */
.hero-video-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.hero-video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* Overlay moderne */
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
180deg,
rgba(37, 99, 235, 0.4) 0%,
rgba(139, 92, 246, 0.5) 50%,
rgba(30, 64, 175, 0.6) 100%
);
z-index: 2;
}
/* Formes géométriques animées */
.hero-shapes {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
pointer-events: none;
overflow: hidden;
}
.shape {
position: absolute;
border-radius: 50%;
opacity: 0.1;
filter: blur(60px);
}
.shape-1 {
width: 600px;
height: 600px;
background: var(--color-orange);
top: -200px;
right: -200px;
animation: floatShape 20s ease-in-out infinite;
}
.shape-2 {
width: 500px;
height: 500px;
background: var(--color-green);
bottom: -150px;
left: -150px;
animation: floatShape 25s ease-in-out infinite reverse;
}
.shape-3 {
width: 400px;
height: 400px;
background: var(--color-purple);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: floatShape 30s ease-in-out infinite;
}
/* Contenu */
.hero-content {
position: relative;
z-index: 10;
width: 100%;
max-width: 1200px;
padding: 0 var(--spacing-xl);
text-align: center;
margin: 0 auto;
}
.hero-container {
animation: heroFadeIn 1.2s ease-out;
}
/* Badge */
.hero-badge {
display: inline-flex;
align-items: center;
gap: var(--spacing-sm);
padding: var(--spacing-xs) var(--spacing-md);
margin: 0 auto var(--spacing-xl);
animation: slideInUp 0.8s ease-out;
}
.badge-dot {
width: 8px;
height: 8px;
background: var(--color-orange);
border-radius: 50%;
animation: pulseDot 2s ease-in-out infinite;
box-shadow: 0 0 10px var(--color-orange);
}
.badge-text {
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
color: rgba(255, 255, 255, 0.9);
text-transform: uppercase;
letter-spacing: 0.1em;
}
/* Titre */
.hero-title {
font-size: clamp(3.5rem, 10vw, 7rem);
font-weight: var(--font-weight-bold);
line-height: 1.1;
margin-bottom: var(--spacing-lg);
animation: slideInUp 1s ease-out 0.2s both;
}
.title-line {
display: block;
color: var(--color-white);
letter-spacing: -0.03em;
text-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}
.title-highlight {
display: block;
background: linear-gradient(135deg, var(--color-orange-light) 0%, var(--color-orange) 50%, var(--color-red) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
position: relative;
letter-spacing: -0.03em;
}
/* ZLECAF */
.hero-zlecaf {
margin: 0 auto var(--spacing-xl);
animation: slideInUp 1s ease-out 0.4s both;
}
.zlecaf-label {
font-size: clamp(0.875rem, 1.2vw, 1rem);
color: rgba(255, 255, 255, 0.8);
font-weight: var(--font-weight-medium);
text-transform: uppercase;
letter-spacing: 0.15em;
margin-bottom: var(--spacing-xs);
}
.zlecaf-acronym {
font-size: clamp(2rem, 5vw, 4rem);
font-weight: var(--font-weight-bold);
color: var(--color-white);
letter-spacing: 0.2em;
text-shadow: 0 2px 20px rgba(255, 255, 255, 0.2);
}
/* Description */
.hero-description {
font-size: clamp(1.125rem, 2vw, 1.5rem);
line-height: 1.7;
color: rgba(255, 255, 255, 0.9);
max-width: 700px;
margin: 0 auto var(--spacing-2xl);
animation: slideInUp 1s ease-out 0.6s both;
}
/* Actions */
.hero-actions {
display: flex;
gap: var(--spacing-md);
flex-wrap: wrap;
justify-content: center;
animation: slideInUp 1s ease-out 0.8s both;
}
.hero-btn {
display: inline-flex;
align-items: center;
gap: var(--spacing-sm);
padding: var(--spacing-md) var(--spacing-xl);
font-size: 1rem;
font-weight: var(--font-weight-semibold);
border-radius: 12px;
text-decoration: none;
transition: all var(--transition-base);
position: relative;
overflow: hidden;
}
.hero-btn-primary {
background: var(--color-white);
color: var(--color-blue-dark);
box-shadow: 0 4px 20px rgba(255, 255, 255, 0.2);
}
.hero-btn-primary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.1), transparent);
transition: left 0.5s;
}
.hero-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(255, 255, 255, 0.3);
}
.hero-btn-primary:hover::before {
left: 100%;
}
.hero-btn-outline {
background: transparent;
color: var(--color-white);
border: 2px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
}
.hero-btn-outline:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-2px);
}
.hero-btn svg {
transition: transform var(--transition-base);
}
.hero-btn:hover svg {
transform: translateX(4px);
}
/* Scroll indicator */
.hero-scroll {
position: absolute;
bottom: var(--spacing-xl);
left: 50%;
transform: translateX(-50%);
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-sm);
color: rgba(255, 255, 255, 0.7);
animation: fadeIn 1s ease-out 1s both;
}
.scroll-line {
width: 1px;
height: 50px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent);
animation: scrollLine 2s ease-in-out infinite;
}
.scroll-text {
font-size: 0.75rem;
font-weight: var(--font-weight-medium);
text-transform: uppercase;
letter-spacing: 0.2em;
}
/* Animations */
@keyframes heroFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes floatShape {
0%, 100% {
transform: translate(0, 0) scale(1);
}
33% {
transform: translate(30px, -30px) scale(1.1);
}
66% {
transform: translate(-20px, 20px) scale(0.9);
}
}
@keyframes pulseDot {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.7;
transform: scale(1.2);
}
}
@keyframes scrollLine {
0% {
opacity: 0;
transform: translateY(-10px);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(20px);
}
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
}
}
@keyframes scroll {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(20px);
}
}
/* Responsive Hero */
@media (max-width: 768px) {
.hero-section {
min-height: 100vh;
text-align: center;
}
.hero-content {
text-align: center;
}
.hero-actions {
flex-direction: column;
width: 100%;
}
.hero-btn {
width: 100%;
justify-content: center;
}
.shape-1,
.shape-2,
.shape-3 {
display: none;
}
}
@media (max-width: 480px) {
.hero-title {
font-size: clamp(2.5rem, 12vw, 4rem);
}
.hero-description {
font-size: 1rem;
}
.zlecaf-acronym {
font-size: clamp(1.5rem, 8vw, 2.5rem);
}
}
/* ========================================
SYSTÈME DE TYPOGRAPHIE HARMONISÉ
======================================== */
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 var(--spacing-xl);
}
.section-header {
text-align: left;
margin-bottom: var(--spacing-2xl);
max-width: 700px;
}
.section-header-center {
text-align: center;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.section-label {
display: inline-block;
font-size: 0.875rem;
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-primary);
background: var(--color-primary-soft);
padding: var(--spacing-xs) var(--spacing-md);
border-radius: 20px;
margin-bottom: var(--spacing-md);
}
.section-label-light {
background: rgba(255, 255, 255, 0.2);
color: var(--color-white);
}
.section-title {
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: var(--font-weight-bold);
line-height: 1.2;
color: var(--color-gray-900);
margin-bottom: var(--spacing-lg);
letter-spacing: -0.02em;
}
.section-title-light {
color: var(--color-white);
}
.section-description {
font-size: 1.125rem;
line-height: 1.8;
color: var(--color-gray-600);
max-width: 600px;
}
/* ========================================
SECTION AFRIQUE EN 5 ZONES
======================================== */
.section-africa-zones {
padding: var(--spacing-2xl) 0;
background: var(--color-white);
}
.africa-zones-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-2xl);
align-items: center;
}
/* Contenu texte à gauche */
.zones-text {
max-width: 600px;
}
.zones-description {
font-size: 1.125rem;
line-height: 1.8;
color: var(--color-gray-600);
margin-bottom: var(--spacing-xl);
}
.zones-list {
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
margin-bottom: var(--spacing-xl);
}
.zone-item {
display: flex;
align-items: flex-start;
gap: var(--spacing-md);
padding: var(--spacing-md);
border-radius: 16px;
transition: all var(--transition-base);
cursor: pointer;
position: relative;
}
.zone-link {
text-decoration: none;
color: inherit;
display: block;
}
.zone-link:hover {
background: var(--color-gray-50);
transform: translateX(8px);
}
.zone-arrow {
position: absolute;
right: var(--spacing-md);
top: 50%;
transform: translateY(-50%);
opacity: 0;
transition: all var(--transition-base);
color: var(--color-primary);
}
.zone-link:hover .zone-arrow {
opacity: 1;
transform: translateY(-50%) translateX(4px);
}
.zone-number {
font-size: 2rem;
font-weight: var(--font-weight-bold);
background: var(--gradient-primary);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 1;
min-width: 50px;
flex-shrink: 0;
}
.zone-info {
flex: 1;
}
.zone-name {
font-size: 1.25rem;
font-weight: var(--font-weight-bold);
color: var(--color-gray-900);
margin-bottom: var(--spacing-xs);
}
.zone-desc {
font-size: 0.95rem;
line-height: 1.6;
color: var(--color-gray-600);
}
/* Carte de l'Afrique à droite */
.zones-map {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.africa-map-container {
position: relative;
width: 100%;
max-width: 600px;
aspect-ratio: 1;
background: linear-gradient(135deg, var(--color-gray-50) 0%, var(--color-gray-100) 100%);
border-radius: 24px;
padding: var(--spacing-xl);
box-shadow: 0 20px 60px rgba(37, 99, 235, 0.1);
}
.africa-map {
width: 100%;
height: 100%;
filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
}
.africa-map a {
display: block;
transition: all var(--transition-base);
}
.zone-path {
transition: all var(--transition-base);
cursor: pointer;
stroke: rgba(255, 255, 255, 0.8);
stroke-width: 2;
}
.africa-map a:hover .zone-path {
opacity: 1;
transform: scale(1.05);
filter: brightness(1.2);
stroke-width: 3;
}
.zone-north {
fill: var(--color-blue);
}
.zone-west {
fill: var(--color-green);
}
.zone-central {
fill: var(--color-orange);
}
.zone-east {
fill: var(--color-purple);
}
.zone-south {
fill: var(--color-red);
}
.coastline {
pointer-events: none;
}
/* Points interactifs */
.zone-point {
position: absolute;
transform: translate(-50%, -50%);
cursor: pointer;
z-index: 10;
}
.point-dot {
width: 12px;
height: 12px;
background: var(--color-white);
border: 3px solid var(--color-blue);
border-radius: 50%;
position: relative;
z-index: 2;
box-shadow: 0 2px 10px rgba(37, 99, 235, 0.4);
}
.point-pulse {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 12px;
height: 12px;
background: var(--color-blue);
border-radius: 50%;
animation: pulsePoint 2s ease-in-out infinite;
opacity: 0.6;
}
.zone-point-north {
top: 25%;
left: 50%;
}
.zone-point-north .point-dot {
border-color: var(--color-blue);
}
.zone-point-north .point-pulse {
background: var(--color-blue);
}
.zone-point-west {
top: 50%;
left: 20%;
}
.zone-point-west .point-dot {
border-color: var(--color-green);
}
.zone-point-west .point-pulse {
background: var(--color-green);
}
.zone-point-central {
top: 60%;
left: 50%;
}
.zone-point-central .point-dot {
border-color: var(--color-orange);
}
.zone-point-central .point-pulse {
background: var(--color-orange);
}
.zone-point-east {
top: 40%;
left: 85%;
}
.zone-point-east .point-dot {
border-color: var(--color-purple);
}
.zone-point-east .point-pulse {
background: var(--color-purple);
}
.zone-point-south {
top: 85%;
left: 50%;
}
.zone-point-south .point-dot {
border-color: var(--color-red);
}
.zone-point-south .point-pulse {
background: var(--color-red);
}
.zone-point:hover .point-dot {
transform: scale(1.3);
box-shadow: 0 4px 20px rgba(37, 99, 235, 0.6);
}
@keyframes pulsePoint {
0%, 100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.6;
}
50% {
transform: translate(-50%, -50%) scale(2.5);
opacity: 0;
}
}
/* Responsive */
@media (max-width: 992px) {
.africa-zones-content {
grid-template-columns: 1fr;
gap: var(--spacing-xl);
}
.zones-text {
max-width: 100%;
}
.zones-map {
order: -1;
}
}
@media (max-width: 768px) {
.africa-map-container {
padding: var(--spacing-md);
}
.zone-item {
padding: var(--spacing-sm);
}
.zone-number {
font-size: 1.5rem;
min-width: 40px;
}
}
/* ========================================
SECTION POURQUOI INITIATIVESAFRICA
======================================== */
.section-why {
padding: var(--spacing-2xl) 0;
background: linear-gradient(135deg, var(--color-gray-50) 0%, var(--color-white) 100%);
position: relative;
overflow: hidden;
}
.section-why::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 30%, rgba(37, 99, 235, 0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.05) 0%, transparent 50%);
pointer-events: none;
}
.why-content {
position: relative;
z-index: 1;
}
.why-header {
text-align: center;
max-width: 800px;
margin: 0 auto var(--spacing-2xl);
}
.why-description {
font-size: 1.125rem;
line-height: 1.8;
color: var(--color-gray-600);
margin-top: var(--spacing-lg);
}
.why-points {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: var(--spacing-xl);
max-width: 1200px;
margin: 0 auto;
}
.why-point {
background: var(--color-white);
padding: var(--spacing-2xl);
border-radius: 24px;
border: 2px solid var(--color-gray-100);
transition: all var(--transition-base);
position: relative;
overflow: hidden;
}
.why-point::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gradient-primary);
transform: scaleX(0);
transition: transform var(--transition-base);
transform-origin: left;
}
.why-point:hover {
transform: translateY(-8px);
border-color: transparent;
box-shadow: 0 16px 48px rgba(37, 99, 235, 0.15);
}
.why-point:hover::before {
transform: scaleX(1);
}
.why-point-icon {
width: 80px;
height: 80px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--spacing-lg);
transition: all var(--transition-base);
}
.why-icon-1 {
background: var(--color-blue-soft);
color: var(--color-blue);
}
.why-icon-2 {
background: var(--color-green-soft);
color: var(--color-green);
}
.why-icon-3 {
background: var(--color-orange-soft);
color: var(--color-orange);
}
.why-point:hover .why-point-icon {
transform: scale(1.1) rotate(5deg);
}
.why-point-title {
font-size: 1.5rem;
font-weight: var(--font-weight-bold);
color: var(--color-gray-900);
margin-bottom: var(--spacing-md);
line-height: 1.3;
}
.why-point-text {
font-size: 1rem;
line-height: 1.7;
color: var(--color-gray-600);
margin-bottom: var(--spacing-md);
}
.why-tags {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
margin-top: var(--spacing-lg);
}
.why-tag {
display: inline-block;
padding: var(--spacing-xs) var(--spacing-md);
background: var(--color-gray-100);
color: var(--color-gray-700);
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
border-radius: 20px;
transition: all var(--transition-base);
}
.why-point:hover .why-tag {
background: var(--color-primary-soft);
color: var(--color-primary);
}
/* Responsive */
@media (max-width: 768px) {
.why-points {
grid-template-columns: 1fr;
gap: var(--spacing-lg);
}
.why-point {
padding: var(--spacing-xl);
}
.why-header {
text-align: left;
}
}
/* ========================================
SECTION L'AFRIQUE & LA ZLECAF EN CHIFFRES
======================================== */
.section-stats-zlecaf {
padding: var(--spacing-2xl) 0;
background: linear-gradient(180deg, var(--color-gray-50) 0%, var(--color-white) 100%);
position: relative;
}
.stats-zlecaf-header {
text-align: center;
margin-bottom: var(--spacing-2xl);
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.stats-zlecaf-subtitle {
font-size: 1.125rem;
color: var(--color-gray-600);
margin-top: var(--spacing-md);
line-height: 1.7;
}
/* Catégories */
.stats-category-header {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: var(--spacing-xl);
padding: var(--spacing-lg);
}
.category-icon {
width: 64px;
height: 64px;
border-radius: 16px;
background: var(--gradient-primary);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-white);
margin-bottom: var(--spacing-md);
box-shadow: var(--shadow-md);
}
.category-title {
font-size: 1.875rem;
font-weight: var(--font-weight-bold);
color: var(--color-gray-900);
margin-bottom: var(--spacing-xs);
}
.category-subtitle {
font-size: 1rem;
color: var(--color-gray-600);
}
/* L'Afrique en chiffres */
.stats-africa {
margin-bottom: var(--spacing-2xl);
padding: var(--spacing-xl) 0;
}
.stats-africa-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-lg);
margin-top: var(--spacing-xl);
}
.stat-item {
background: var(--color-white);
border-radius: 16px;
padding: var(--spacing-xl);
text-align: center;
box-shadow: var(--shadow-sm);
border: 1px solid var(--color-gray-200);
transition: all var(--transition-base);
position: relative;
overflow: hidden;
}
.stat-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gradient-primary);
transform: scaleX(0);
transition: transform var(--transition-base);
}
.stat-item:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.stat-item:hover::before {
transform: scaleX(1);
}
.stat-icon-wrapper {
width: 56px;
height: 56px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--spacing-md);
transition: transform var(--transition-base);
}
.stat-item:hover .stat-icon-wrapper {
transform: scale(1.1) rotate(5deg);
}
.stat-icon-blue {
background: var(--color-blue-soft);
color: var(--color-blue);
}
.stat-icon-green {
background: var(--color-green-soft);
color: var(--color-green);
}
.stat-icon-orange {
background: var(--color-orange-soft);
color: var(--color-orange);
}
.stat-icon-purple {
background: var(--color-purple-soft);
color: var(--color-purple);
}
.stat-item .stat-number {
font-size: 2.5rem;
font-weight: var(--font-weight-bold);
color: var(--color-gray-900);
margin-bottom: var(--spacing-xs);
background: var(--gradient-primary);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.stat-item .stat-label {
font-size: 0.875rem;
color: var(--color-gray-600);
font-weight: var(--font-weight-medium);
}
/* La ZLECAF en chiffres */
.stats-zlecaf-section {
margin-bottom: var(--spacing-2xl);
padding: var(--spacing-xl);
background: var(--color-white);
border-radius: 24px;
box-shadow: var(--shadow-md);
}
.zlecaf-key-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-lg);
margin-top: var(--spacing-xl);
margin-bottom: var(--spacing-xl);
}
.zlecaf-stat-large {
background: linear-gradient(135deg, var(--color-blue) 0%, var(--color-purple) 100%);
border-radius: 20px;
padding: var(--spacing-xl);
text-align: center;
color: var(--color-white);
position: relative;
overflow: hidden;
box-shadow: var(--shadow-lg);
transition: transform var(--transition-base);
}
.zlecaf-stat-large:nth-child(2) {
background: linear-gradient(135deg, var(--color-green) 0%, var(--color-blue) 100%);
}
.zlecaf-stat-large:nth-child(3) {
background: linear-gradient(135deg, var(--color-orange) 0%, var(--color-red) 100%);
}
.zlecaf-stat-large:nth-child(4) {
background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-blue) 100%);
}
.zlecaf-stat-large::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
animation: rotate360 20s linear infinite;
}
.zlecaf-stat-large:hover {
transform: translateY(-8px) scale(1.02);
}
.zlecaf-stat-number {
font-size: 3.5rem;
font-weight: var(--font-weight-bold);
line-height: 1;
margin-bottom: var(--spacing-xs);
position: relative;
z-index: 1;
}
.zlecaf-stat-unit {
font-size: 1.25rem;
opacity: 0.9;
margin-bottom: var(--spacing-xs);
position: relative;
z-index: 1;
}
.zlecaf-stat-label {
font-size: 1rem;
opacity: 0.95;
font-weight: var(--font-weight-medium);
position: relative;
z-index: 1;
}
.zlecaf-stat-note {
font-size: 0.875rem;
opacity: 0.8;
margin-top: var(--spacing-xs);
position: relative;
z-index: 1;
}
.zlecaf-details {
margin-top: var(--spacing-xl);
padding-top: var(--spacing-xl);
border-top: 1px solid var(--color-gray-200);
}
.zlecaf-detail-item {
display: flex;
align-items: flex-start;
gap: var(--spacing-md);
margin-bottom: var(--spacing-md);
}
.detail-icon {
width: 24px;
height: 24px;
flex-shrink: 0;
color: var(--color-green);
margin-top: 2px;
}
.detail-text {
font-size: 1rem;
color: var(--color-gray-700);
line-height: 1.6;
}
.detail-text strong {
color: var(--color-gray-900);
font-weight: var(--font-weight-semibold);
}
.zlecaf-sectors {
margin-top: var(--spacing-lg);
padding-top: var(--spacing-lg);
border-top: 1px solid var(--color-gray-200);
}
.sectors-title {
font-size: 1rem;
font-weight: var(--font-weight-semibold);
color: var(--color-gray-900);
margin-bottom: var(--spacing-md);
}
.sectors-tags {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
}
.sector-tag {
padding: var(--spacing-sm) var(--spacing-md);
background: var(--color-gray-100);
color: var(--color-gray-700);
border-radius: 20px;
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
transition: all var(--transition-base);
}
.sector-tag:hover {
background: var(--color-primary);
color: var(--color-white);
transform: translateY(-2px);
}
/* Impact économique */
.stats-impact {
margin-bottom: var(--spacing-2xl);
padding: var(--spacing-xl) 0;
}
.impact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--spacing-lg);
margin-top: var(--spacing-xl);
}
.impact-item {
background: var(--color-white);
border-radius: 16px;
padding: var(--spacing-xl);
text-align: center;
box-shadow: var(--shadow-sm);
border: 2px solid var(--color-gray-200);
transition: all var(--transition-base);
position: relative;
overflow: hidden;
}
.impact-item::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gradient-primary);
transform: scaleX(0);
transition: transform var(--transition-base);
}
.impact-item:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-xl);
border-color: var(--color-primary);
}
.impact-item:hover::after {
transform: scaleX(1);
}
.impact-icon {
width: 64px;
height: 64px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--spacing-md);
transition: transform var(--transition-base);
}
.impact-item:hover .impact-icon {
transform: scale(1.1) rotate(-5deg);
}
.impact-icon-primary {
background: var(--color-blue-soft);
color: var(--color-blue);
}
.impact-icon-success {
background: var(--color-green-soft);
color: var(--color-green);
}
.impact-icon-warning {
background: var(--color-orange-soft);
color: var(--color-orange);
}
.impact-icon-info {
background: var(--color-purple-soft);
color: var(--color-purple);
}
.impact-number {
font-size: 3rem;
font-weight: var(--font-weight-bold);
background: var(--gradient-primary);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: var(--spacing-md);
line-height: 1;
}
.impact-label {
font-size: 1rem;
color: var(--color-gray-700);
line-height: 1.5;
font-weight: var(--font-weight-medium);
}
.impact-label-large {
font-size: 1.125rem;
color: var(--color-gray-900);
line-height: 1.6;
font-weight: var(--font-weight-semibold);
margin-top: var(--spacing-md);
}
/* Lecture régionale */
.stats-regional {
margin-bottom: var(--spacing-xl);
padding: var(--spacing-xl) 0;
}
.regional-table {
background: var(--color-white);
border-radius: 20px;
box-shadow: var(--shadow-md);
overflow: hidden;
margin-top: var(--spacing-xl);
}
.regional-header {
display: grid;
grid-template-columns: 1.5fr 1fr 1.5fr;
gap: var(--spacing-md);
padding: var(--spacing-lg) var(--spacing-xl);
background: var(--gradient-primary);
color: var(--color-white);
font-weight: var(--font-weight-semibold);
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.regional-row {
display: grid;
grid-template-columns: 1.5fr 1fr 1.5fr;
gap: var(--spacing-md);
padding: var(--spacing-lg) var(--spacing-xl);
border-bottom: 1px solid var(--color-gray-200);
transition: all var(--transition-base);
}
.regional-row:last-child {
border-bottom: none;
}
.regional-row:hover {
background: var(--color-gray-50);
transform: translateX(4px);
}
.region-name {
font-weight: var(--font-weight-semibold);
color: var(--color-gray-900);
font-size: 1.125rem;
}
.pib-value {
font-weight: var(--font-weight-bold);
color: var(--color-primary);
font-size: 1.25rem;
}
.dynamic-tag {
display: inline-block;
padding: var(--spacing-xs) var(--spacing-md);
background: var(--color-gray-100);
color: var(--color-gray-700);
border-radius: 12px;
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
}
/* Responsive */
@media (max-width: 768px) {
.stats-africa-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.zlecaf-key-stats {
grid-template-columns: 1fr;
}
.zlecaf-stat-number {
font-size: 2.5rem;
}
.impact-grid {
grid-template-columns: 1fr;
}
.regional-header,
.regional-row {
grid-template-columns: 1fr;
gap: var(--spacing-sm);
}
.regional-header {
display: none;
}
.regional-col-region::before {
content: 'Région: ';
font-weight: var(--font-weight-semibold);
color: var(--color-gray-600);
}
.regional-col-pib::before {
content: 'PIB: ';
font-weight: var(--font-weight-semibold);
color: var(--color-gray-600);
}
.regional-col-dynamic::before {
content: 'Dynamique: ';
font-weight: var(--font-weight-semibold);
color: var(--color-gray-600);
}
.category-title {
font-size: 1.5rem;
}
.impact-number {
font-size: 2.5rem;
}
}
/* ========================================
SECTION OPPORTUNITÉS EN COURS
======================================== */
.section-opportunities-current {
padding: var(--spacing-2xl) 0;
background: var(--color-white);
}
.opportunities-header {
margin-bottom: var(--spacing-2xl);
}
.opportunities-title-section {
text-align: center;
max-width: 800px;
margin: 0 auto;
}
.opportunities-subtitle {
font-size: 1.125rem;
line-height: 1.8;
color: var(--color-gray-600);
margin-top: var(--spacing-lg);
}
/* Filtres */
.opportunities-filters {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--spacing-md);
margin-bottom: var(--spacing-2xl);
padding: var(--spacing-lg);
background: var(--color-gray-50);
border-radius: 20px;
}
.filter-group {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.filter-label {
font-size: 0.875rem;
font-weight: var(--font-weight-semibold);
color: var(--color-gray-700);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.filter-select {
padding: var(--spacing-sm) var(--spacing-md);
border: 2px solid var(--color-gray-200);
border-radius: 12px;
background: var(--color-white);
color: var(--color-gray-700);
font-size: 0.95rem;
font-family: inherit;
cursor: pointer;
transition: all var(--transition-base);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--spacing-md) center;
padding-right: calc(var(--spacing-md) * 3);
}
.filter-select:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.filter-select:hover {
border-color: var(--color-primary-light);
}
/* Grille d'opportunités */
.section-opportunities-current .opportunities-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: var(--spacing-xl);
margin-bottom: var(--spacing-2xl);
}
.section-opportunities-current .opportunity-card {
background: var(--color-white);
border: 2px solid var(--color-gray-100);
border-radius: 24px;
overflow: hidden;
transition: all var(--transition-base);
display: block;
opacity: 1;
transform: translateY(0);
}
.section-opportunities-current .opportunity-card:hover {
transform: translateY(-8px);
border-color: transparent;
box-shadow: 0 16px 48px rgba(37, 99, 235, 0.15);
}
.section-opportunities-current .opportunity-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-md) var(--spacing-lg);
border-bottom: 1px solid var(--color-gray-100);
background: var(--color-gray-50);
}
.section-opportunities-current .opportunity-badge {
display: inline-flex;
align-items: center;
padding: var(--spacing-xs) var(--spacing-md);
border-radius: 20px;
font-size: 0.75rem;
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.section-opportunities-current .opportunity-badge-ao {
background: var(--color-blue-soft);
color: var(--color-blue);
}
.section-opportunities-current .opportunity-badge-invest {
background: var(--color-green-soft);
color: var(--color-green);
}
.section-opportunities-current .opportunity-badge-part {
background: var(--color-orange-soft);
color: var(--color-orange);
}
.section-opportunities-current .opportunity-deadline {
display: flex;
align-items: center;
gap: var(--spacing-xs);
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
color: var(--color-gray-600);
}
.section-opportunities-current .opportunity-deadline svg {
color: var(--color-orange);
}
.section-opportunities-current .opportunity-content {
padding: var(--spacing-lg);
}
.section-opportunities-current .opportunity-meta {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-md);
}
.section-opportunities-current .opportunity-location {
font-size: 0.875rem;
color: var(--color-gray-500);
font-weight: var(--font-weight-medium);
}
.section-opportunities-current .opportunity-sector {
font-size: 0.875rem;
padding: var(--spacing-xs) var(--spacing-sm);
background: var(--color-gray-100);
color: var(--color-gray-700);
border-radius: 12px;
font-weight: var(--font-weight-medium);
}
.section-opportunities-current .opportunity-title {
font-size: 1.25rem;
font-weight: var(--font-weight-bold);
color: var(--color-gray-900);
margin-bottom: var(--spacing-md);
line-height: 1.4;
}
.section-opportunities-current .opportunity-description {
font-size: 0.95rem;
line-height: 1.7;
color: var(--color-gray-600);
margin-bottom: var(--spacing-lg);
}
.section-opportunities-current .opportunity-footer {
padding-top: var(--spacing-md);
border-top: 1px solid var(--color-gray-100);
}
.section-opportunities-current .opportunity-link {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
font-weight: var(--font-weight-semibold);
color: var(--color-primary);
text-decoration: none;
transition: all var(--transition-base);
}
.section-opportunities-current .opportunity-link:hover {
gap: var(--spacing-sm);
color: var(--color-primary-dark);
}
.section-opportunities-current .opportunity-link svg {
transition: transform var(--transition-base);
}
.section-opportunities-current .opportunity-link:hover svg {
transform: translateX(4px) translateY(-4px);
}
/* CTA */
.section-opportunities-current .opportunities-cta {
text-align: center;
padding-top: var(--spacing-xl);
border-top: 2px solid var(--color-gray-100);
}
.btn-opportunities-all {
display: inline-flex;
align-items: center;
gap: var(--spacing-sm);
padding: var(--spacing-md) var(--spacing-xl);
background: var(--gradient-primary);
color: var(--color-white);
font-weight: var(--font-weight-semibold);
font-size: 1.05rem;
border-radius: 12px;
text-decoration: none;
transition: all var(--transition-base);
box-shadow: 0 4px 20px rgba(37, 99, 235, 0.3);
}
.btn-opportunities-all:hover {
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(37, 99, 235, 0.4);
}
.btn-opportunities-all svg {
transition: transform var(--transition-base);
}
.btn-opportunities-all:hover svg {
transform: translateX(4px);
}
/* Responsive */
@media (max-width: 768px) {
.section-opportunities-current .opportunities-filters {
grid-template-columns: 1fr;
padding: var(--spacing-md);
}
.section-opportunities-current .opportunities-grid {
grid-template-columns: 1fr;
gap: var(--spacing-lg);
}
.section-opportunities-current .opportunities-title-section {
text-align: left;
}
}
/* ========================================
SECTION PAYS À LA UNE
======================================== */
.section-featured-countries {
padding: var(--spacing-2xl) 0;
background: linear-gradient(135deg, var(--color-gray-50) 0%, var(--color-white) 100%);
}
.featured-countries-header {
text-align: center;
max-width: 800px;
margin: 0 auto var(--spacing-2xl);
}
.featured-countries-subtitle {
font-size: 1.125rem;
line-height: 1.8;
color: var(--color-gray-600);
margin-top: var(--spacing-lg);
}
.countries-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: var(--spacing-xl);
max-width: 1400px;
margin: 0 auto;
}
.country-card {
background: var(--color-white);
border: 2px solid var(--color-gray-100);
border-radius: 24px;
overflow: hidden;
transition: all var(--transition-base);
display: flex;
flex-direction: column;
}
.country-card:hover {
transform: translateY(-8px);
border-color: transparent;
box-shadow: 0 16px 48px rgba(37, 99, 235, 0.15);
}
.country-flag {
height: 180px;
background: var(--color-gray-100);
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
/* Drapeaux stylisés */
.flag-ivory-coast {
width: 100%;
height: 100%;
background: linear-gradient(90deg, #F77F00 0%, #F77F00 33.33%, #FFFFFF 33.33%, #FFFFFF 66.66%, #009639 66.66%, #009639 100%);
position: relative;
}
.flag-kenya {
width: 100%;
height: 100%;
background: linear-gradient(180deg, #000000 0%, #000000 20%, #CE1126 20%, #CE1126 40%, #FFFFFF 40%, #FFFFFF 45%, #000000 45%, #000000 55%, #FFFFFF 55%, #FFFFFF 60%, #CE1126 60%, #CE1126 80%, #000000 80%, #000000 100%);
position: relative;
}
.flag-kenya::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-bottom: 60px solid #FFFFFF;
}
.flag-kenya::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-bottom: 50px solid #000000;
}
.flag-nigeria {
width: 100%;
height: 100%;
background: linear-gradient(90deg, #008751 0%, #008751 33.33%, #FFFFFF 33.33%, #FFFFFF 66.66%, #008751 66.66%, #008751 100%);
position: relative;
}
.flag-south-africa {
width: 100%;
height: 100%;
background: linear-gradient(180deg,
#DE3831 0%, #DE3831 16.66%,
#FFFFFF 16.66%, #FFFFFF 33.33%,
#002395 33.33%, #002395 50%,
#FFFFFF 50%, #FFFFFF 66.66%,
#007A4D 66.66%, #007A4D 83.33%,
#FFB612 83.33%, #FFB612 100%);
position: relative;
}
.flag-ghana {
width: 100%;
height: 100%;
background: linear-gradient(180deg,
#CE1126 0%, #CE1126 33.33%,
#FCD116 33.33%, #FCD116 66.66%,
#CE1126 66.66%, #CE1126 100%);
position: relative;
}
.flag-ghana::after {
content: '';
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 120px solid transparent;
border-right: 120px solid transparent;
border-top: 80px solid #000000;
}
.flag-morocco {
width: 100%;
height: 100%;
background: #C1272D;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.flag-morocco::after {
content: '✻';
font-size: 120px;
color: #006233;
line-height: 1;
}
.country-content {
padding: var(--spacing-xl);
flex: 1;
display: flex;
flex-direction: column;
}
.country-name {
font-size: 1.75rem;
font-weight: var(--font-weight-bold);
color: var(--color-gray-900);
margin-bottom: var(--spacing-md);
line-height: 1.3;
}
.country-tagline {
font-size: 1rem;
line-height: 1.7;
color: var(--color-gray-600);
margin-bottom: var(--spacing-lg);
flex: 1;
}
.country-cta {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-sm) var(--spacing-md);
color: var(--color-primary);
font-weight: var(--font-weight-semibold);
text-decoration: none;
border-radius: 10px;
transition: all var(--transition-base);
width: fit-content;
border: 2px solid transparent;
}
.country-cta:hover {
background: var(--color-primary-soft);
border-color: var(--color-primary);
gap: var(--spacing-sm);
transform: translateX(4px);
}
.country-cta svg {
transition: transform var(--transition-base);
}
.country-cta:hover svg {
transform: translateX(4px) translateY(-4px);
}
/* Responsive */
@media (max-width: 992px) {
.countries-grid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
}
@media (max-width: 768px) {
.countries-grid {
grid-template-columns: 1fr;
}
.featured-countries-header {
text-align: left;
}
.country-flag {
height: 150px;
}
}
/* ========================================
SECTION INITIATIVESAFRICATV
======================================== */
.section-tv {
padding: var(--spacing-2xl) 0;
background: var(--color-white);
}
.tv-header {
text-align: center;
max-width: 800px;
margin: 0 auto var(--spacing-2xl);
}
.tv-subtitle {
font-size: 1.125rem;
line-height: 1.8;
color: var(--color-gray-600);
margin-top: var(--spacing-lg);
}
.tv-content {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--spacing-2xl);
margin-bottom: var(--spacing-2xl);
}
/* Vidéo principale */
.tv-main-video {
position: relative;
}
.main-video-wrapper {
background: var(--color-white);
border-radius: 24px;
overflow: hidden;
border: 2px solid var(--color-gray-100);
transition: all var(--transition-base);
}
.main-video-wrapper:hover {
box-shadow: 0 16px 48px rgba(37, 99, 235, 0.15);
transform: translateY(-4px);
}
.main-thumbnail {
width: 100%;
height: 400px;
background: linear-gradient(135deg, var(--color-blue-dark) 0%, var(--color-purple-dark) 100%);
position: relative;
overflow: hidden;
}
.main-thumbnail::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.thumbnail-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.2);
transition: all var(--transition-base);
}
.main-video-wrapper:hover .thumbnail-overlay {
background: rgba(0, 0, 0, 0.4);
}
.play-button {
cursor: pointer;
border: none;
background: none;
transition: all var(--transition-base);
position: relative;
z-index: 2;
}
.play-button:hover {
transform: scale(1.1);
}
.play-button.small {
transform: scale(0.8);
}
.play-button.small:hover {
transform: scale(0.9);
}
.video-duration {
position: absolute;
bottom: var(--spacing-md);
right: var(--spacing-md);
padding: var(--spacing-xs) var(--spacing-sm);
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(10px);
color: var(--color-white);
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
border-radius: 8px;
}
.video-badge {
position: absolute;
top: var(--spacing-md);
left: var(--spacing-md);
padding: var(--spacing-xs) var(--spacing-md);
background: var(--gradient-accent);
color: var(--color-white);
font-size: 0.75rem;
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
border-radius: 20px;
box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4);
}
.main-video-info {
padding: var(--spacing-xl);
}
.video-category {
display: inline-block;
padding: var(--spacing-xs) var(--spacing-md);
background: var(--color-primary-soft);
color: var(--color-primary);
font-size: 0.75rem;
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
border-radius: 20px;
margin-bottom: var(--spacing-md);
}
.video-title {
font-size: 1.75rem;
font-weight: var(--font-weight-bold);
color: var(--color-gray-900);
margin-bottom: var(--spacing-md);
line-height: 1.3;
}
.video-description {
font-size: 1rem;
line-height: 1.7;
color: var(--color-gray-600);
margin-bottom: var(--spacing-lg);
}
.video-meta {
display: flex;
align-items: center;
gap: var(--spacing-lg);
font-size: 0.875rem;
color: var(--color-gray-500);
}
.video-views {
display: flex;
align-items: center;
gap: var(--spacing-xs);
font-weight: var(--font-weight-medium);
}
.video-date {
font-weight: var(--font-weight-medium);
}
/* Vidéos secondaires */
.tv-secondary-videos {
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
}
.secondary-video {
display: flex;
gap: var(--spacing-md);
background: var(--color-white);
border: 2px solid var(--color-gray-100);
border-radius: 16px;
padding: var(--spacing-md);
transition: all var(--transition-base);
cursor: pointer;
}
.secondary-video:hover {
border-color: transparent;
box-shadow: 0 8px 24px rgba(37, 99, 235, 0.1);
transform: translateX(4px);
}
.secondary-thumbnail {
width: 200px;
height: 120px;
flex-shrink: 0;
background: linear-gradient(135deg, var(--color-green) 0%, var(--color-blue) 100%);
border-radius: 12px;
position: relative;
overflow: hidden;
}
.secondary-thumbnail::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.secondary-video-info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.video-title-small {
font-size: 1rem;
font-weight: var(--font-weight-bold);
color: var(--color-gray-900);
margin: var(--spacing-xs) 0;
line-height: 1.4;
}
.secondary-video .video-category {
font-size: 0.7rem;
padding: var(--spacing-xs) var(--spacing-sm);
}
.secondary-video .video-meta {
font-size: 0.8rem;
margin-top: auto;
}
/* CTA */
.tv-cta {
text-align: center;
padding-top: var(--spacing-xl);
border-top: 2px solid var(--color-gray-100);
}
.btn-tv-all {
display: inline-flex;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-md) var(--spacing-xl);
background: var(--gradient-primary);
color: var(--color-white);
font-weight: var(--font-weight-semibold);
font-size: 1.05rem;
border-radius: 12px;
text-decoration: none;
transition: all var(--transition-base);
box-shadow: 0 4px 20px rgba(37, 99, 235, 0.3);
}
.btn-tv-all:hover {
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(37, 99, 235, 0.4);
}
.btn-tv-all svg:last-child {
transition: transform var(--transition-base);
}
.btn-tv-all:hover svg:last-child {
transform: translateX(4px);
}
/* Responsive */
@media (max-width: 992px) {
.tv-content {
grid-template-columns: 1fr;
}
.main-thumbnail {
height: 300px;
}
.secondary-video {
flex-direction: column;
}
.secondary-thumbnail {
width: 100%;
height: 200px;
}
}
@media (max-width: 768px) {
.tv-header {
text-align: left;
}
.main-thumbnail {
height: 250px;
}
.video-title {
font-size: 1.5rem;
}
}
/* ========================================
SECTION RESSOURCES ET ANALYSES
======================================== */
.section-resources {
padding: var(--spacing-2xl) 0;
background: var(--color-white);
}
.resources-header {
text-align: center;
max-width: 800px;
margin: 0 auto var(--spacing-2xl);
}
.resources-subtitle {
font-size: 1.125rem;
line-height: 1.8;
color: var(--color-gray-600);
margin-top: var(--spacing-lg);
}
.resources-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: var(--spacing-xl);
max-width: 1400px;
margin: 0 auto;
}
.resource-card {
background: var(--color-white);
border: 2px solid var(--color-gray-100);
border-radius: 24px;
padding: var(--spacing-2xl);
transition: all var(--transition-base);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
.resource-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gradient-primary);
transform: scaleX(0);
transition: transform var(--transition-base);
transform-origin: left;
}
.resource-card:hover {
transform: translateY(-8px);
border-color: transparent;
box-shadow: 0 16px 48px rgba(37, 99, 235, 0.15);
}
.resource-card:hover::before {
transform: scaleX(1);
}
.resource-icon {
width: 80px;
height: 80px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--spacing-lg);
transition: all var(--transition-base);
}
.resource-icon-analysis {
background: var(--color-blue-soft);
color: var(--color-blue);
}
.resource-icon-dossier {
background: var(--color-green-soft);
color: var(--color-green);
}
.resource-icon-guide {
background: var(--color-orange-soft);
color: var(--color-orange);
}
.resource-card:hover .resource-icon {
transform: scale(1.1) rotate(5deg);
}
.resource-title {
font-size: 1.5rem;
font-weight: var(--font-weight-bold);
color: var(--color-gray-900);
margin-bottom: var(--spacing-md);
line-height: 1.3;
}
.resource-description {
font-size: 1rem;
line-height: 1.7;
color: var(--color-gray-600);
margin-bottom: var(--spacing-lg);
flex: 1;
}
.resource-features {
list-style: none;
margin-bottom: var(--spacing-xl);
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.resource-features li {
display: flex;
align-items: center;
gap: var(--spacing-sm);
font-size: 0.95rem;
color: var(--color-gray-700);
}
.resource-features li svg {
color: var(--color-green);
flex-shrink: 0;
}
.resource-link {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-md) var(--spacing-lg);
background: var(--color-gray-50);
color: var(--color-primary);
font-weight: var(--font-weight-semibold);
border-radius: 12px;
text-decoration: none;
transition: all var(--transition-base);
width: fit-content;
border: 2px solid transparent;
}
.resource-link:hover {
background: var(--color-primary-soft);
border-color: var(--color-primary);
gap: var(--spacing-sm);
transform: translateX(4px);
}
.resource-link svg {
transition: transform var(--transition-base);
}
.resource-link:hover svg {
transform: translateX(4px) translateY(-4px);
}
/* Responsive */
@media (max-width: 768px) {
.resources-grid {
grid-template-columns: 1fr;
gap: var(--spacing-lg);
}
.resources-header {
text-align: left;
}
.resource-card {
padding: var(--spacing-xl);
}
}
/* ========================================
SECTION LA PLATEFORME
======================================== */
.section-platform {
padding: var(--spacing-2xl) 0;
background: linear-gradient(135deg, var(--color-gray-50) 0%, var(--color-white) 100%);
}
.platform-header {
text-align: center;
max-width: 800px;
margin: 0 auto var(--spacing-2xl);
}
.platform-subtitle {
font-size: 1.125rem;
line-height: 1.8;
color: var(--color-gray-600);
margin-top: var(--spacing-lg);
}
.platform-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: var(--spacing-xl);
margin-bottom: var(--spacing-2xl);
}
.platform-card {
background: var(--color-white);
border: 2px solid var(--color-gray-100);
border-radius: 24px;
padding: var(--spacing-2xl);
transition: all var(--transition-base);
}
.platform-card:hover {
transform: translateY(-8px);
border-color: transparent;
box-shadow: 0 16px 48px rgba(37, 99, 235, 0.15);
}
.platform-main {
grid-column: span 1;
}
.platform-card-icon {
width: 64px;
height: 64px;
background: var(--color-primary-soft);
color: var(--color-primary);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--spacing-lg);
transition: all var(--transition-base);
}
.platform-card:hover .platform-card-icon {
transform: scale(1.1) rotate(5deg);
}
.platform-card-title {
font-size: 1.5rem;
font-weight: var(--font-weight-bold);
color: var(--color-gray-900);
margin-bottom: var(--spacing-lg);
}
.platform-card-text {
font-size: 1rem;
line-height: 1.7;
color: var(--color-gray-600);
margin-bottom: var(--spacing-lg);
}
.vision-mission-content {
display: flex;
flex-direction: column;
gap: var(--spacing-xl);
}
.vision-item,
.mission-item {
padding: var(--spacing-lg);
background: var(--color-gray-50);
border-radius: 16px;
border-left: 4px solid var(--color-primary);
}
.vision-title,
.mission-title {
font-size: 1.125rem;
font-weight: var(--font-weight-bold);
color: var(--color-primary);
margin-bottom: var(--spacing-sm);
}
.vision-text,
.mission-text {
font-size: 0.95rem;
line-height: 1.7;
color: var(--color-gray-700);
}
.charter-list {
list-style: none;
margin-bottom: var(--spacing-lg);
}
.charter-list li {
padding: var(--spacing-sm) 0;
padding-left: var(--spacing-lg);
position: relative;
color: var(--color-gray-700);
font-size: 0.95rem;
}
.charter-list li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--color-green);
font-weight: var(--font-weight-bold);
}
.platform-link {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
color: var(--color-primary);
font-weight: var(--font-weight-semibold);
text-decoration: none;
transition: all var(--transition-base);
}
.platform-link:hover {
gap: var(--spacing-sm);
}
.platform-link svg {
transition: transform var(--transition-base);
}
.platform-link:hover svg {
transform: translateX(4px) translateY(-4px);
}
.partners-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-md);
margin-bottom: var(--spacing-lg);
}
.partner-logo {
padding: var(--spacing-lg);
background: var(--color-gray-50);
border: 2px solid var(--color-gray-100);
border-radius: 12px;
text-align: center;
font-size: 0.875rem;
color: var(--color-gray-500);
font-weight: var(--font-weight-medium);
transition: all var(--transition-base);
}
.partner-logo:hover {
border-color: var(--color-primary);
background: var(--color-primary-soft);
color: var(--color-primary);
}
.platform-cta {
text-align: center;
padding-top: var(--spacing-xl);
border-top: 2px solid var(--color-gray-100);
}
.btn-partner {
display: inline-flex;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-md) var(--spacing-xl);
background: var(--gradient-primary);
color: var(--color-white);
font-weight: var(--font-weight-semibold);
font-size: 1.05rem;
border-radius: 12px;
text-decoration: none;
transition: all var(--transition-base);
box-shadow: 0 4px 20px rgba(37, 99, 235, 0.3);
}
.btn-partner:hover {
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(37, 99, 235, 0.4);
}
.btn-partner svg:last-child {
transition: transform var(--transition-base);
}
.btn-partner:hover svg:last-child {
transform: translateX(4px);
}
/* Responsive Platform */
@media (max-width: 992px) {
.platform-main {
grid-column: span 1;
}
}
@media (max-width: 768px) {
.platform-content {
grid-template-columns: 1fr;
}
.platform-header {
text-align: left;
}
}
/* ========================================
FOOTER
======================================== */
.main-footer {
background: linear-gradient(180deg, var(--color-gray-900) 0%, var(--color-black) 100%);
color: var(--color-white);
padding: var(--spacing-2xl) 0 var(--spacing-lg);
margin-top: var(--spacing-2xl);
}
.footer-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 var(--spacing-xl);
}
.footer-main {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
gap: var(--spacing-2xl);
padding-bottom: var(--spacing-2xl);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: var(--spacing-xl);
}
.footer-col-about {
max-width: 350px;
}
.footer-logo {
display: flex;
align-items: center;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-lg);
}
.footer-logo-icon {
width: 48px;
height: 48px;
background: var(--gradient-primary);
color: var(--color-white);
font-weight: var(--font-weight-bold);
font-size: 1.25rem;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.footer-logo-text {
font-size: 1.5rem;
font-weight: var(--font-weight-bold);
color: var(--color-white);
}
.footer-logo-text .logo-accent {
background: var(--gradient-accent);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.footer-description {
font-size: 0.95rem;
line-height: 1.7;
color: rgba(255, 255, 255, 0.7);
margin-bottom: var(--spacing-lg);
}
.footer-social {
display: flex;
gap: var(--spacing-sm);
}
.social-link {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 10px;
color: rgba(255, 255, 255, 0.8);
transition: all var(--transition-base);
text-decoration: none;
}
.social-link:hover {
background: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-white);
transform: translateY(-2px);
}
.footer-title {
font-size: 1rem;
font-weight: var(--font-weight-bold);
color: var(--color-white);
margin-bottom: var(--spacing-lg);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.footer-links {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.footer-link {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
font-size: 0.95rem;
transition: all var(--transition-base);
display: inline-block;
}
.footer-link:hover {
color: var(--color-white);
transform: translateX(4px);
}
.footer-col-newsletter {
max-width: 300px;
}
.footer-newsletter-text {
font-size: 0.9rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.7);
margin-bottom: var(--spacing-lg);
}
.newsletter-form {
display: flex;
gap: var(--spacing-xs);
}
.newsletter-input {
flex: 1;
padding: var(--spacing-sm) var(--spacing-md);
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 10px;
color: var(--color-white);
font-size: 0.9rem;
font-family: inherit;
transition: all var(--transition-base);
}
.newsletter-input::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.newsletter-input:focus {
outline: none;
background: rgba(255, 255, 255, 0.15);
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}
.newsletter-btn {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: var(--gradient-primary);
border: none;
border-radius: 10px;
color: var(--color-white);
cursor: pointer;
transition: all var(--transition-base);
flex-shrink: 0;
}
.newsletter-btn:hover {
transform: scale(1.05);
box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
}
.footer-bottom {
padding-top: var(--spacing-lg);
}
.footer-bottom-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--spacing-md);
}
.footer-copyright {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.6);
}
.footer-legal {
display: flex;
align-items: center;
gap: var(--spacing-sm);
font-size: 0.875rem;
}
.footer-legal-link {
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
transition: color var(--transition-base);
}
.footer-legal-link:hover {
color: var(--color-white);
}
.footer-separator {
color: rgba(255, 255, 255, 0.4);
}
/* Responsive Footer */
@media (max-width: 992px) {
.footer-main {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-xl);
}
.footer-col-about {
grid-column: span 2;
max-width: 100%;
}
.footer-col-newsletter {
grid-column: span 2;
max-width: 100%;
}
}
@media (max-width: 768px) {
.footer-main {
grid-template-columns: 1fr;
}
.footer-col-about,
.footer-col-newsletter {
grid-column: span 1;
}
.footer-bottom-content {
flex-direction: column;
text-align: center;
}
}
/* ========================================
SECTION INTRODUCTION
======================================== */
.section-intro {
padding: var(--spacing-2xl) 0;
background: var(--color-white);
}
.intro-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--spacing-xl);
}
.intro-card {
padding: var(--spacing-xl);
background: var(--color-white);
border: 2px solid var(--color-gray-100);
border-radius: 20px;
transition: all var(--transition-base);
text-align: center;
}
.intro-card:hover {
transform: translateY(-8px);
border-color: transparent;
box-shadow: 0 12px 40px rgba(37, 99, 235, 0.15);
}
.intro-icon {
width: 64px;
height: 64px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--spacing-lg);
transition: all var(--transition-base);
}
.icon-blue {
background: var(--color-blue-soft);
color: var(--color-blue);
}
.icon-green {
background: var(--color-green-soft);
color: var(--color-green);
}
.icon-orange {
background: var(--color-orange-soft);
color: var(--color-orange);
}
.icon-purple {
background: var(--color-purple-soft);
color: var(--color-purple);
}
.intro-card:hover .intro-icon {
transform: scale(1.1) rotate(5deg);
}
.intro-card-title {
font-size: 1.5rem;
font-weight: var(--font-weight-bold);
color: var(--color-gray-900);
margin-bottom: var(--spacing-sm);
}
.intro-card-text {
font-size: 1rem;
line-height: 1.7;
color: var(--color-gray-600);
}
/* ========================================
SECTION ZLECAF
======================================== */
.section-zlecaf {
padding: var(--spacing-2xl) 0;
background: var(--gradient-primary);
position: relative;
overflow: hidden;
}
.section-zlecaf::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.zlecaf-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-2xl);
align-items: center;
position: relative;
z-index: 1;
}
.zlecaf-text {
color: var(--color-white);
}
.zlecaf-description {
font-size: 1.125rem;
line-height: 1.8;
color: rgba(255, 255, 255, 0.9);
margin-bottom: var(--spacing-xl);
}
.zlecaf-features {
list-style: none;
margin-bottom: var(--spacing-xl);
}
.zlecaf-features li {
display: flex;
align-items: center;
gap: var(--spacing-md);
margin-bottom: var(--spacing-md);
font-size: 1.05rem;
color: rgba(255, 255, 255, 0.95);
}
.zlecaf-features li svg {
color: var(--color-green-light);
flex-shrink: 0;
}
.btn-primary-link {
display: inline-flex;
align-items: center;
gap: var(--spacing-sm);
padding: var(--spacing-md) var(--spacing-xl);
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 12px;
color: var(--color-white);
font-weight: var(--font-weight-semibold);
text-decoration: none;
transition: all var(--transition-base);
}
.btn-primary-link:hover {
background: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 0.5);
transform: translateX(4px);
}
.zlecaf-visual {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-lg);
position: relative;
}
.zlecaf-card {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(20px);
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 24px;
padding: var(--spacing-xl);
text-align: center;
transition: all var(--transition-base);
animation: float 6s ease-in-out infinite;
}
.zlecaf-card-1 {
animation-delay: 0s;
}
.zlecaf-card-2 {
animation-delay: 2s;
grid-column: 2;
}
.zlecaf-card-3 {
animation-delay: 4s;
grid-column: 1 / -1;
}
.zlecaf-card:hover {
transform: translateY(-8px) scale(1.02);
background: rgba(255, 255, 255, 0.25);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}
.card-number {
font-size: 3rem;
font-weight: var(--font-weight-bold);
color: var(--color-white);
margin-bottom: var(--spacing-sm);
line-height: 1;
}
.card-label {
font-size: 1rem;
color: rgba(255, 255, 255, 0.9);
font-weight: var(--font-weight-medium);
}
/* ========================================
SECTION STATISTIQUES
======================================== */
.section-stats {
padding: var(--spacing-2xl) 0;
background: var(--color-gray-50);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--spacing-xl);
}
.stat-card {
background: var(--color-white);
padding: var(--spacing-2xl);
border-radius: 24px;
text-align: center;
border: 2px solid var(--color-gray-100);
transition: all var(--transition-base);
position: relative;
overflow: hidden;
}
.stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gradient-primary);
transform: scaleX(0);
transition: transform var(--transition-base);
}
.stat-card:hover {
transform: translateY(-8px);
border-color: transparent;
box-shadow: 0 12px 40px rgba(37, 99, 235, 0.15);
}
.stat-card:hover::before {
transform: scaleX(1);
}
.stat-icon {
width: 80px;
height: 80px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--spacing-lg);
}
.stat-icon-blue {
background: var(--color-blue-soft);
color: var(--color-blue);
}
.stat-icon-green {
background: var(--color-green-soft);
color: var(--color-green);
}
.stat-icon-orange {
background: var(--color-orange-soft);
color: var(--color-orange);
}
.stat-icon-purple {
background: var(--color-purple-soft);
color: var(--color-purple);
}
.stat-number {
font-size: 3.5rem;
font-weight: var(--font-weight-bold);
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: var(--spacing-md);
line-height: 1;
}
.stat-label {
font-size: 1.05rem;
line-height: 1.6;
color: var(--color-gray-600);
font-weight: var(--font-weight-medium);
}
/* ========================================
SECTION OPPORTUNITÉS
======================================== */
.section-opportunities {
padding: var(--spacing-2xl) 0;
background: var(--color-white);
}
.opportunities-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: var(--spacing-xl);
}
.opportunity-card {
background: var(--color-white);
border: 2px solid var(--color-gray-100);
border-radius: 24px;
padding: var(--spacing-2xl);
transition: all var(--transition-base);
position: relative;
overflow: hidden;
}
.opportunity-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--gradient-primary);
opacity: 0;
transition: opacity var(--transition-base);
}
.opportunity-card:hover {
transform: translateY(-8px);
border-color: transparent;
box-shadow: 0 16px 48px rgba(37, 99, 235, 0.2);
}
.opportunity-card:hover::before {
opacity: 0.05;
}
.opportunity-number {
font-size: 5rem;
font-weight: var(--font-weight-bold);
background: linear-gradient(135deg, var(--color-gray-200), var(--color-gray-100));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
margin-bottom: var(--spacing-md);
position: relative;
z-index: 1;
}
.opportunity-card:hover .opportunity-number {
background: var(--gradient-primary);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.opportunity-icon {
width: 80px;
height: 80px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--spacing-lg);
transition: all var(--transition-base);
position: relative;
z-index: 1;
}
.opportunity-icon-tech {
background: var(--color-blue-soft);
color: var(--color-blue);
}
.opportunity-icon-agri {
background: var(--color-green-soft);
color: var(--color-green);
}
.opportunity-icon-energy {
background: var(--color-orange-soft);
color: var(--color-orange);
}
.opportunity-icon-health {
background: var(--color-red-soft);
color: var(--color-red);
}
.opportunity-icon-finance {
background: var(--color-purple-soft);
color: var(--color-purple);
}
.opportunity-icon-infra {
background: var(--color-blue-soft);
color: var(--color-blue);
}
.opportunity-card:hover .opportunity-icon {
transform: scale(1.1) rotate(5deg);
}
.opportunity-title {
font-size: 1.75rem;
font-weight: var(--font-weight-bold);
color: var(--color-gray-900);
margin-bottom: var(--spacing-md);
position: relative;
z-index: 1;
}
.opportunity-description {
font-size: 1rem;
line-height: 1.7;
color: var(--color-gray-600);
margin-bottom: var(--spacing-lg);
position: relative;
z-index: 1;
}
.opportunity-link {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
font-weight: var(--font-weight-semibold);
color: var(--color-primary);
text-decoration: none;
transition: all var(--transition-base);
position: relative;
z-index: 1;
}
.opportunity-link:hover {
gap: var(--spacing-sm);
color: var(--color-primary-dark);
}
.opportunity-link svg {
transition: transform var(--transition-base);
}
.opportunity-link:hover svg {
transform: translateX(4px) translateY(-4px);
}
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
/* Responsive */
@media (max-width: 992px) {
.zlecaf-content {
grid-template-columns: 1fr;
}
.zlecaf-visual {
margin-top: var(--spacing-xl);
}
.opportunities-grid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
}
@media (max-width: 768px) {
.container {
padding: 0 var(--spacing-md);
}
.section-intro,
.section-zlecaf,
.section-stats,
.section-opportunities {
padding: var(--spacing-xl) 0;
}
.intro-grid,
.stats-grid,
.opportunities-grid {
grid-template-columns: 1fr;
}
.zlecaf-visual {
grid-template-columns: 1fr;
}
.zlecaf-card-2,
.zlecaf-card-3 {
grid-column: 1;
}
}