/* 🚀 CLAUDE AI SUBLIME WORDPRESS – CSS ULTRA SOPHISTIQUÉ */

:root {
–primary: #3b82f6;
–secondary: #8b5cf6;
–accent: #f59e0b;
–success: #10b981;
–danger: #ef4444;
–dark: #1e293b;
–light: #f8fafc;
–white: #ffffff;

/* Gradients Ultra */
–gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #667eea 100%);
–gradient-primary: linear-gradient(135deg, #3b82f6, #8b5cf6);
–gradient-warm: linear-gradient(135deg, #ff6b6b, #feca57);
–gradient-cool: linear-gradient(135deg, #74b9ff, #0984e3);
–gradient-purple: linear-gradient(135deg, #a855f7, #ec4899);
–gradient-green: linear-gradient(135deg, #10b981, #059669);
–gradient-dark: linear-gradient(135deg, #1e293b, #0f172a);

/* Ombres Premium */
–shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
–shadow-md: 0 8px 25px rgba(0,0,0,0.12);
–shadow-lg: 0 15px 35px rgba(0,0,0,0.15);
–shadow-xl: 0 25px 50px rgba(0,0,0,0.25);
–shadow-colored: 0 15px 35px rgba(59, 130, 246, 0.3);

/* Animations fluides */
–transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
–transition-bounce: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Reset et base */
* {
box-sizing: border-box;
}

body {
font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, sans-serif;
line-height: 1.6;
color: var(–dark);
overflow-x: hidden;
}

/* ==== SECTION HERO ULTRA ==== */
.claude-hero {
min-height: 100vh;
background: var(–gradient-hero);
display: flex;
align-items: center;
position: relative;
overflow: hidden;
padding: 6rem 2rem;
margin: 0;
}

.claude-hero::before {
content:  »;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
url(‘data:image/svg+xml,’);
animation: heroFloat 20s ease-in-out infinite;
}

@keyframes heroFloat {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-20px) rotate(1deg); }
}

.claude-hero .wp-block-columns {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
}

.claude-hero-title {
font-size: clamp(3rem, 6vw, 5rem) !important;
font-weight: 900 !important;
line-height: 1.1 !important;
margin-bottom: 2rem !important;
color: white !important;
text-shadow: 0 8px 32px rgba(0,0,0,0.3);
animation: titleReveal 1.5s ease-out;
}

@keyframes titleReveal {
0% {
opacity: 0;
transform: translateY(50px) scale(0.9);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}

.claude-hero-title .highlight {
background: linear-gradient(135deg, #ffd700, #ffed4e, #ffd700);
background-size: 200% 200%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: shimmerGold 3s ease-in-out infinite;
position: relative;
}

@keyframes shimmerGold {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}

.claude-hero-subtitle {
font-size: 1.4rem !important;
margin-bottom: 3rem !important;
color: rgba(255,255,255,0.95) !important;
line-height: 1.7 !important;
text-shadow: 0 4px 20px rgba(0,0,0,0.2);
animation: subtitleSlideIn 1s ease-out 0.3s both;
}

@keyframes subtitleSlideIn {
0% {
opacity: 0;
transform: translateX(-30px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}

.claude-hero-stats {
display: flex;
gap: 3rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 4rem;
animation: statsReveal 1s ease-out 0.6s both;
}

@keyframes statsReveal {
0% {
opacity: 0;
transform: translateY(30px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

.claude-stat {
text-align: center;
color: white;
position: relative;
padding: 1.5rem;
background: rgba(255,255,255,0.1);
backdrop-filter: blur(20px);
border-radius: 20px;
border: 1px solid rgba(255,255,255,0.2);
transition: var(–transition-smooth);
}

.claude-stat:hover {
transform: translateY(-10px) scale(1.05);
background: rgba(255,255,255,0.15);
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.claude-stat-number {
font-size: 2.5rem;
font-weight: 900;
display: block;
background: linear-gradient(135deg, #ffd700, #ffed4e);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 0.5rem;
}

.claude-stat-label {
font-size: 1rem;
opacity: 0.9;
font-weight: 500;
}

.claude-hero-visual {
position: relative;
animation: visualFloat 3s ease-in-out infinite;
}

@keyframes visualFloat {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-15px) rotate(2deg); }
}

.claude-hero-image {
width: 100%;
height: 400px;
background: rgba(255,255,255,0.15);
backdrop-filter: blur(30px);
border-radius: 30px;
border: 1px solid rgba(255,255,255,0.3);
display: flex;
align-items: center;
justify-content: center;
font-size: 5rem;
position: relative;
overflow: hidden;
box-shadow: 0 25px 50px rgba(0,0,0,0.3);
}

.claude-hero-image::before {
content:  »;
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
animation: shine 4s ease-in-out infinite;
}

@keyframes shine {
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
50% { transform: translateX(100%) translateY(100%) rotate(45deg); }
100% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
}

/* ==== BUTTONS ULTRA ==== */
.claude-btn {
display: inline-flex !important;
align-items: center;
gap: 0.75rem;
padding: 1.25rem 2.5rem !important;
border-radius: 50px !important;
text-decoration: none !important;
font-weight: 700 !important;
font-size: 1.1rem !important;
transition: var(–transition-bounce);
position: relative;
overflow: hidden;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.claude-btn::before {
content:  »;
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: var(–transition-smooth);
}

.claude-btn:hover::before {
left: 100%;
}

.claude-btn-primary {
background: linear-gradient(135deg, #ffffff, #f8fafc) !important;
color: var(–primary) !important;
box-shadow: 0 12px 35px rgba(255,255,255,0.4);
border: 2px solid rgba(255,255,255,0.3) !important;
}

.claude-btn-primary:hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 20px 50px rgba(255,255,255,0.5);
color: var(–secondary) !important;
}

.claude-btn-secondary {
background: transparent !important;
color: white !important;
border: 3px solid rgba(255,255,255,0.8) !important;
backdrop-filter: blur(10px);
}

.claude-btn-secondary:hover {
background: rgba(255,255,255,0.15) !important;
border-color: white !important;
transform: translateY(-5px) scale(1.05);
box-shadow: 0 15px 35px rgba(255,255,255,0.3);
}

.claude-pulse {
animation: megaPulse 2s ease-in-out infinite;
}

@keyframes megaPulse {
0%, 100% {
box-shadow: 0 12px 35px rgba(255,255,255,0.4);
transform: scale(1);
}
50% {
box-shadow: 0 20px 60px rgba(255,255,255,0.6);
transform: scale(1.02);
}
}

/* ==== SECTIONS AVEC BACKGROUNDS COLORÉS ==== */
.claude-features {
background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 50%, #cbd5e1 100%);
padding: 8rem 2rem;
position: relative;
overflow: hidden;
}

.claude-features::before {
content:  »;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 150px;
background: var(–gradient-hero);
clip-path: polygon(0 0, 100% 0, 100% 60%, 0 100%);
}

.claude-features::after {
content:  »;
position: absolute;
top: 20%;
right: -10%;
width: 300px;
height: 300px;
background: var(–gradient-primary);
border-radius: 50%;
opacity: 0.1;
animation: floatSlow 15s ease-in-out infinite;
}

@keyframes floatSlow {
0%, 100% { transform: translateY(0px) scale(1); }
50% { transform: translateY(-30px) scale(1.1); }
}

.claude-section-title {
font-size: clamp(2.5rem, 5vw, 4rem) !important;
font-weight: 900 !important;
text-align: center !important;
margin-bottom: 1.5rem !important;
background: var(–gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
z-index: 2;
}

.claude-section-subtitle {
font-size: 1.3rem !important;
text-align: center !important;
color: #64748b !important;
margin-bottom: 5rem !important;
max-width: 700px;
margin-left: auto !important;
margin-right: auto !important;
font-weight: 500;
position: relative;
z-index: 2;
}

.claude-feature-card {
background: linear-gradient(135deg, #ffffff, #f8fafc);
padding: 3rem 2.5rem;
border-radius: 25px;
box-shadow: var(–shadow-lg);
transition: var(–transition-bounce);
position: relative;
overflow: hidden;
height: 100%;
border: 1px solid rgba(59, 130, 246, 0.1);
}

.claude-feature-card::before {
content:  »;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: var(–gradient-primary);
transform: scaleX(0);
transition: var(–transition-smooth);
}

.claude-feature-card::after {
content:  »;
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(59, 130, 246, 0.05) 0%, transparent 70%);
transform: scale(0);
transition: var(–transition-smooth);
}

.claude-feature-card:hover {
transform: translateY(-15px) scale(1.02);
box-shadow: var(–shadow-xl);
border-color: rgba(59, 130, 246, 0.3);
}

.claude-feature-card:hover::before {
transform: scaleX(1);
}

.claude-feature-card:hover::after {
transform: scale(1);
}

.claude-feature-icon {
width: 100px;
height: 100px;
background: var(–gradient-primary);
border-radius: 25px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
margin-bottom: 2rem;
position: relative;
overflow: hidden;
box-shadow: var(–shadow-colored);
}

.claude-feature-icon::after {
content:  »;
position: absolute;
top: -50%;
left: -200%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.4), transparent);
transform: rotate(-45deg);
transition: var(–transition-smooth);
}

.claude-feature-card:hover .claude-feature-icon::after {
left: 200%;
}

.claude-feature-title {
font-size: 1.8rem !important;
font-weight: 800 !important;
margin-bottom: 1.5rem !important;
color: var(–dark) !important;
}

.claude-feature-description {
color: #64748b !important;
line-height: 1.7 !important;
font-size: 1.1rem !important;
}

/* ==== BENEFITS SECTION ==== */
.claude-benefits {
background: linear-gradient(135deg, #1e293b 0%, #334155 50%, #475569 100%);
color: white;
padding: 8rem 2rem;
position: relative;
overflow: hidden;
}

.claude-benefits::before {
content:  »;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 70% 30%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
url(‘data:image/svg+xml,’);
}

.claude-benefits::after {
content:  »;
position: absolute;
bottom: 20%;
left: -10%;
width: 400px;
height: 400px;
background: var(–gradient-cool);
border-radius: 50%;
opacity: 0.1;
animation: pulse 8s ease-in-out infinite;
}

@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.2); }
}

.claude-benefits .claude-section-title,
.claude-benefits .claude-section-subtitle {
color: white !important;
position: relative;
z-index: 2;
}

.claude-benefit-item {
display: flex;
align-items: flex-start;
gap: 2rem;
margin-bottom: 3rem;
padding: 2.5rem;
background: rgba(255,255,255,0.1);
backdrop-filter: blur(20px);
border-radius: 20px;
transition: var(–transition-smooth);
border: 1px solid rgba(255,255,255,0.2);
position: relative;
z-index: 2;
}

.claude-benefit-item:hover {
background: rgba(255,255,255,0.15);
transform: translateX(15px) translateY(-5px);
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.claude-benefit-icon {
width: 70px;
height: 70px;
background: var(–gradient-primary);
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
flex-shrink: 0;
font-size: 2rem;
box-shadow: var(–shadow-colored);
}

.claude-benefits-visual {
position: relative;
height: 500px;
background: var(–gradient-primary);
border-radius: 40px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
font-size: 8rem;
box-shadow: var(–shadow-xl);
animation: visualRotate 15s linear infinite;
}

@keyframes visualRotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

/* ==== CURRICULUM SECTION ==== */
.claude-curriculum {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
color: white;
padding: 8rem 2rem;
position: relative;
overflow: hidden;
}

.claude-curriculum::before {
content:  »;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
url(‘data:image/svg+xml,’);
opacity: 0.8;
}

.claude-module {
background: rgba(255,255,255,0.08);
backdrop-filter: blur(30px);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 25px;
padding: 3rem;
transition: var(–transition-bounce);
position: relative;
overflow: hidden;
height: 100%;
z-index: 2;
}

.claude-module::before {
content:  »;
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
transition: var(–transition-smooth);
}

.claude-module:hover::before {
left: 100%;
}

.claude-module:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 25px 60px rgba(0,0,0,0.4);
border-color: rgba(255,255,255,0.3);
background: rgba(255,255,255,0.12);
}

.claude-module-header {
display: flex;
align-items: center;
gap: 1.5rem;
margin-bottom: 2.5rem;
}

.claude-module-number {
width: 60px;
height: 60px;
background: var(–gradient-primary);
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: 1.5rem;
box-shadow: var(–shadow-colored);
}

.claude-module-title {
font-size: 1.8rem !important;
font-weight: 800 !important;
color: white !important;
}

.claude-module-lessons {
list-style: none !important;
padding: 0 !important;
}

.claude-module-lessons li {
padding: 1rem 0;
border-bottom: 1px solid rgba(255,255,255,0.1);
position: relative;
padding-left: 2rem;
color: rgba(255,255,255,0.9);
font-size: 1.1rem;
transition: var(–transition-smooth);
}

.claude-module-lessons li:hover {
color: white;
padding-left: 2.5rem;
}

.claude-module-lessons li::before {
content: ‘▶’;
position: absolute;
left: 0;
color: var(–accent);
font-size: 1rem;
}

.claude-module-lessons li:last-child {
border-bottom: none;
}

/* ==== TESTIMONIALS ==== */
.claude-testimonials {
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #facc15 100%);
padding: 8rem 2rem;
position: relative;
overflow: hidden;
}

.claude-testimonials::before {
content:  »;
position: absolute;
top: -100px;
right: -100px;
width: 400px;
height: 400px;
background: linear-gradient(135deg, #f59e0b, #eab308);
border-radius: 50%;
opacity: 0.1;
animation: floatSlow 12s ease-in-out infinite;
}

.claude-testimonial {
background: linear-gradient(135deg, #ffffff, #fefefe);
padding: 3rem;
border-radius: 25px;
box-shadow: var(–shadow-lg);
position: relative;
transition: var(–transition-bounce);
height: 100%;
border: 1px solid rgba(245, 158, 11, 0.2);
}

.claude-testimonial::before {
content: ‘ »‘;
position: absolute;
top: -30px;
left: 30px;
font-size: 5rem;
color: var(–accent);
opacity: 0.3;
font-family: serif;
}

.claude-testimonial:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: var(–shadow-xl);
border-color: rgba(245, 158, 11, 0.4);
}

.claude-testimonial-content {
margin-bottom: 2rem !important;
font-style: italic !important;
line-height: 1.8 !important;
color: #374151 !important;
font-size: 1.1rem !important;
}

.claude-author {
display: flex;
align-items: center;
gap: 1.5rem;
}

.claude-author-avatar {
width: 60px;
height: 60px;
background: var(–gradient-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 800;
font-size: 1.5rem;
box-shadow: var(–shadow-colored);
}

.claude-author-name {
font-weight: 800 !important;
color: var(–dark) !important;
margin: 0 !important;
font-size: 1.2rem !important;
}

.claude-author-role {
color: #64748b !important;
font-size: 1rem !important;
margin: 0 !important;
}

/* ==== PRICING ULTRA ==== */
.claude-pricing {
background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 50%, #a5b4fc 100%);
padding: 8rem 2rem;
position: relative;
overflow: hidden;
}

.claude-pricing::after {
content:  »;
position: absolute;
top: 30%;
left: -5%;
width: 300px;
height: 300px;
background: var(–gradient-purple);
border-radius: 50%;
opacity: 0.1;
animation: pulse 10s ease-in-out infinite;
}

.claude-pricing-card {
background: linear-gradient(135deg, #ffffff, #f8fafc);
border-radius: 40px;
padding: 4rem 3rem;
text-align: center;
position: relative;
transition: var(–transition-bounce);
border: 2px solid rgba(59, 130, 246, 0.1);
height: 100%;
overflow: hidden;
}

.claude-pricing-card::before {
content:  »;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.05) 0%, transparent 60%);
z-index: 0;
}

.claude-pricing-card > * {
position: relative;
z-index: 1;
}

.claude-pricing-card.featured {
background: var(–gradient-primary);
color: white;
transform: scale(1.08);
box-shadow: var(–shadow-xl);
border-color: transparent;
}

.claude-pricing-card:hover {
transform: translateY(-15px) scale(1.02);
border-color: var(–primary);
box-shadow: var(–shadow-xl);
}

.claude-pricing-card.featured:hover {
transform: scale(1.08) translateY(-15px);
}

.claude-pricing-badge {
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
background: var(–gradient-warm);
color: white;
padding: 0.8rem 2rem;
border-radius: 30px;
font-size: 1rem;
font-weight: 700;
box-shadow: var(–shadow-md);
z-index: 2;
}

.claude-pricing-plan {
font-size: 2rem !important;
font-weight: 800 !important;
margin-bottom: 1.5rem !important;
}

.claude-pricing-price {
font-size: 4rem !important;
font-weight: 900 !important;
margin-bottom: 1rem !important;
background: var(–gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.claude-pricing-card.featured .claude-pricing-price {
color: white !important;
background: none;
-webkit-text-fill-color: white;
}

.claude-pricing-period {
opacity: 0.7;
margin-bottom: 3rem !important;
font-size: 1.1rem !important;
}

.claude-pricing-features {
list-style: none !important;
margin-bottom: 3rem !important;
padding: 0 !important;
text-align: left;
}

.claude-pricing-features li {
padding: 1rem 0;
position: relative;
padding-left: 2rem;
font-size: 1.1rem;
border-bottom: 1px solid rgba(0,0,0,0.1);
}

.claude-pricing-card.featured .claude-pricing-features li {
border-bottom-color: rgba(255,255,255,0.2);
}

.claude-pricing-features li::before {
content: ‘✓’;
position: absolute;
left: 0;
color: var(–success);
font-weight: bold;
font-size: 1.2rem;
}

.claude-pricing-card.featured .claude-pricing-features li::before {
color: rgba(255,255,255,0.9);
}

.claude-pricing-cta {
width: 100%;
padding: 1.5rem 3rem !important;
border: none !important;
border-radius: 50px !important;
font-weight: 800 !important;
transition: var(–transition-bounce);
cursor: pointer;
font-size: 1.2rem !important;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.claude-pricing-card:not(.featured) .claude-pricing-cta {
background: var(–gradient-primary) !important;
color: white !important;
box-shadow: var(–shadow-colored);
}

.claude-pricing-card.featured .claude-pricing-cta {
background: linear-gradient(135deg, #ffffff, #f8fafc) !important;
color: var(–primary) !important;
box-shadow: 0 8px 25px rgba(255,255,255,0.3);
}

.claude-pricing-cta:hover {
transform: translateY(-5px) scale(1.05);
}

/* ==== FAQ ULTRA ==== */
.claude-faq {
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #bae6fd 100%);
padding: 8rem 2rem;
position: relative;
overflow: hidden;
}

.claude-faq::before {
content:  »;
position: absolute;
bottom: -50px;
right: -50px;
width: 200px;
height: 200px;
background: var(–gradient-cool);
border-radius: 50%;
opacity: 0.1;
animation: floatSlow 8s ease-in-out infinite;
}

.claude-faq-item {
background: linear-gradient(135deg, #ffffff, #fefefe);
border-radius: 20px;
margin-bottom: 1.5rem;
overflow: hidden;
box-shadow: var(–shadow-md);
transition: var(–transition-smooth);
border: 1px solid rgba(14, 165, 233, 0.1);
}

.claude-faq-item:hover {
box-shadow: var(–shadow-lg);
transform: translateY(-2px);
border-color: rgba(14, 165, 233, 0.3);
}

.claude-faq-question {
padding: 2rem 2.5rem !important;
background: transparent !important;
border: none !important;
width: 100% !important;
text-align: left !important;
font-size: 1.3rem !important;
font-weight: 700 !important;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: var(–transition-smooth);
color: var(–dark) !important;
}

.claude-faq-question:hover {
background: rgba(14, 165, 233, 0.05) !important;
}

.claude-faq-question::after {
content: ‘+’;
font-size: 2rem;
color: var(–primary);
transition: var(–transition-smooth);
font-weight: 300;
}

.claude-faq-question.active::after {
transform: rotate(45deg);
color: var(–secondary);
}

.claude-faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease;
background: rgba(14, 165, 233, 0.02);
}

.claude-faq-answer.active {
max-height: 400px;
}

.claude-faq-answer-content {
padding: 2rem 2.5rem;
color: #374151;
line-height: 1.8;
font-size: 1.1rem;
}

/* ==== FINAL CTA ULTRA ==== */
.claude-final-cta {
background: var(–gradient-hero);
color: white;
text-align: center;
position: relative;
overflow: hidden;
padding: 8rem 2rem;
}

.claude-final-cta::before {
content:  »;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
url(‘data:image/svg+xml,’),
radial-gradient(circle at 30% 70%, rgba(255,255,255,0.1) 0%, transparent 50%);
animation: sparkleMove 25s linear infinite;
}

@keyframes sparkleMove {
from { transform: translateY(0) translateX(0); }
to { transform: translateY(-100px) translateX(50px); }
}

.claude-final-cta h2 {
font-size: clamp(2.5rem, 5vw, 4.5rem) !important;
font-weight: 900 !important;
margin-bottom: 2rem !important;
color: white !important;
text-shadow: 0 8px 32px rgba(0,0,0,0.3);
position: relative;
z-index: 2;
}

.claude-final-cta p {
font-size: 1.4rem !important;
margin-bottom: 3rem !important;
opacity: 0.95;
color: white !important;
line-height: 1.7;
position: relative;
z-index: 2;
}

/* ==== RESPONSIVE ULTRA ==== */
@media (max-width: 768px) {
.claude-hero,
.claude-features,
.claude-benefits,
.claude-curriculum,
.claude-testimonials,
.claude-pricing,
.claude-faq,
.claude-final-cta {
padding-left: 1rem;
padding-right: 1rem;
}

.claude-hero-stats {
flex-direction: column;
gap: 1.5rem;
}

.claude-benefit-item {
flex-direction: column;
text-align: center;
gap: 1rem;
}

.claude-module-header {
flex-direction: column;
text-align: center;
gap: 1rem;
}

.claude-pricing-card.featured {
transform: scale(1);
margin: 2rem 0;
}

.claude-hero-title {
font-size: 2.5rem !important;
}

.claude-btn {
width: 100%;
justify-content: center;
max-width: 300px;
margin: 0 auto;
}
}

/* Animations d’entrée pour les éléments */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.claude-animate-in {
animation: fadeInUp 0.8s ease-out forwards;
}

/* Effet de brillance sur les cards */
.claude-shine::before {
content:  »;
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: var(–transition-smooth);
}

.claude-shine:hover::before {
left: 100%;
}