/* Styles CSS */
/* CSS Reset et Variables */
:root {
    /* Palette sombre (par défaut) */
    --color-bg: #0f172a;
    --color-surface: #1e293b;
    --color-surface-light: #334155;
    --color-text: #f8fafc;
    --color-text-secondary: #cbd5e1;
    --color-primary: #1e3a8a;
    --color-primary-light: #3b82f6;
    --color-accent: #22d3ee;
    --color-success: #10b981;
    --color-error: #ef4444;
    --color-border: #475569;
    --color-shadow: rgba(0, 0, 0, 0.3);
    
    /* Typographie */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-mono: 'SF Mono', Monaco, Consolas, monospace;
    
    /* Espacement */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;
    
    /* Bordures */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;
    
    /* Z-index */
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-modal: 30;
    --z-popover: 40;
    --z-toast: 50;
}

.light-theme {
    --color-bg: #f8fafc;
    --color-surface: #ffffff;
    --color-surface-light: #f1f5f9;
    --color-text: #0f172a;
    --color-text-secondary: #475569;
    --color-primary: #1e3a8a;
    --color-primary-light: #3b82f6;
    --color-accent: #0ea5e9;
    --color-success: #059669;
    --color-error: #dc2626;
    --color-border: #e2e8f0;
    --color-shadow: rgba(0, 0, 0, 0.1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg);
    transition: background-color var(--transition-base), color var(--transition-base);
    overflow-x: hidden;
}

body.no-scroll {
    overflow: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

button {
    font: inherit;
    border: none;
    background: none;
    cursor: pointer;
    color: inherit;
}

ul, ol {
    list-style: none;
}

/* Accessibilité */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Layout */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-md);
}

.section {
    padding: var(--space-2xl) 0;
}

.section-dark {
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    margin: var(--space-xl) 0;
    padding: var(--space-2xl) var(--space-md);
}

.section-header {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.section-title {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: var(--space-sm);
    background: linear-gradient(135deg, var(--color-text) 0%, var(--color-accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-subtitle {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    max-width: 36rem;
    margin: 0 auto;
}

.accent {
    color: var(--color-accent);
}
.approche {
    color: var(--color-primary-light);
}

/* Typographie */
h1, h2, h3, h4 {
    font-weight: 700;
    line-height: 1.2;
}

h1 { font-size: 3rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

@media (max-width: 768px) {
    h1 { font-size: 2.25rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.25rem; }
}

/* Boutons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.025em;
    transition: all var(--transition-base);
    border: 2px solid transparent;
    text-align: center;
    white-space: nowrap;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px var(--color-shadow);
}

.btn:active {
    transform: translateY(0);
}

.btn-primary {
    background-color: var(--color-primary);
    color: white;
}

.btn-primary:hover {
    background-color: var(--color-primary-light);
}

.btn-outline {
    border-color: var(--color-border);
    color: var(--color-text);
}

.btn-outline:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1rem;
}

.btn-block {
    display: flex;
    width: 100%;
}

/* Header & Navigation */
.header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background-color: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
    transition: all var(--transition-base);
}

.light-theme .header {
    background-color: rgba(248, 250, 252, 0.95);
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4rem;
    gap: var(--space-md);
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
}

.logo-icon {
    color: var(--color-accent);
}

.nav-menu {
    display: none;
    gap: var(--space-lg);
}

@media (min-width: 1024px) {
    .nav-menu {
        display: flex;
    }
}

.nav-link {
    position: relative;
    padding: var(--space-xs) 0;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.nav-link:hover,
.nav-link.active {
    color: var(--color-text);
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-accent);
    border-radius: var(--radius-full);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.theme-toggle {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
}

.theme-toggle:hover {
    background-color: var(--color-surface-light);
}

.moon-icon {
    display: none;
}

.light-theme .sun-icon {
    display: none;
}

.light-theme .moon-icon {
    display: block;
}

.hamburger {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.375rem;
    padding: var(--space-xs);
}

@media (min-width: 1024px) {
    .hamburger {
        display: none;
    }
}

.hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--color-text);
    border-radius: var(--radius-full);
    transition: transform var(--transition-base);
}

.hamburger[aria-expanded="true"] span:first-child {
    transform: rotate(45deg) translate(6px, 6px);
}

.hamburger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.hamburger[aria-expanded="true"] span:last-child {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Menu Mobile */
.mobile-menu {
    position: fixed;
    top: 4rem;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-bg);
    z-index: var(--z-modal);
    padding: var(--space-lg);
    transform: translateX(100%);
    transition: transform var(--transition-base);
    overflow-y: auto;
}

.mobile-menu.active {
    transform: translateX(0);
}

.mobile-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);
}

.mobile-link {
    display: block;
    padding: var(--space-sm);
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    border-radius: var(--radius-md);
}

.mobile-link:hover,
.mobile-link.active {
    color: var(--color-text);
    background-color: var(--color-surface);
}

.mobile-contact {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* Hero */
.hero {
    padding: var(--space-2xl) 0;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 50%, rgba(30, 58, 138, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(34, 211, 238, 0.1) 0%, transparent 50%);
    z-index: -1;
}

.hero-grid {
    display: grid;
    gap: var(--space-2xl);
    align-items: center;
}

@media (min-width: 768px) {
    .hero-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2xl);
    }
}

.hero-content {
    max-width: 36rem;
}

.hero-title {
    font-size: 2.5rem;
    margin-bottom: var(--space-md);
    line-height: 1.2;
}

@media (min-width: 768px) {
    .hero-title {
        font-size: 3rem;
    }
}

.hero-subtitle {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xl);
}

.hero-cta {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

@media (min-width: 640px) {
    .hero-cta {
        flex-direction: row;
    }
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    padding: var(--space-lg);
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}

@media (min-width: 768px) {
    .hero-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

.stat {
    text-align: center;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-accent);
    line-height: 1;
    margin-bottom: var(--space-xs);
}

.stat-label {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

/* Barre de confiance */
.trust-bar {
    background-color: var(--color-surface);
    padding: var(--space-lg) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

@media (min-width: 768px) {
    .trust-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-xl);
    }
}

.trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-sm);
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.trust-icon {
    color: var(--color-accent);
}

/* Cartes */
.cards-grid {
    display: grid;
    gap: var(--space-lg);
}

@media (min-width: 768px) {
    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.card {
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    border: 1px solid var(--color-border);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px var(--color-shadow);
}

.card-icon {
    margin-bottom: var(--space-md);
}

.card-title {
    margin-bottom: var(--space-sm);
}

.card-text {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
}

.card-list {
    margin-bottom: var(--space-lg);
}

.card-list li {
    position: relative;
    padding-left: var(--space-md);
    margin-bottom: var(--space-xs);
    color: var(--color-text-secondary);
}

.card-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-accent);
    font-weight: bold;
}

/* Tabs */
.tabs {
    background-color: var(--color-surface-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.tab-buttons {
    display: flex;
    flex-direction: column;
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

@media (min-width: 640px) {
    .tab-buttons {
        flex-direction: row;
    }
}

.tab-btn {
    flex: 1;
    padding: var(--space-md) var(--space-lg);
    font-weight: 600;
    color: var(--color-text-secondary);
    border-bottom: 2px solid transparent;
    transition: all var(--transition-base);
}

.tab-btn:hover {
    color: var(--color-text);
    background-color: var(--color-surface-light);
}

.tab-btn.active {
    color: var(--color-text);
    border-bottom-color: var(--color-accent);
    background-color: var(--color-surface-light);
}

.tab-content {
    padding: var(--space-lg);
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

.detail-list {
    margin-bottom: var(--space-xl);
}

.detail-list li {
    margin-bottom: var(--space-md);
    padding-left: var(--space-md);
    position: relative;
}

.detail-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--color-accent);
    font-weight: bold;
}

.detail-footer {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
}

@media (min-width: 640px) {
    .detail-footer {
        flex-direction: row;
        justify-content: space-between;
    }
}

.detail-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

/* Tarifs */
.pricing-grid {
    display: grid;
    gap: var(--space-lg);
}

@media (min-width: 768px) {
    .pricing-grid {
        grid-template-columns: repeat(3, 1fr);
        align-items: start;
    }
}

.pricing-card {
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    border: 1px solid var(--color-border);
    position: relative;
    transition: transform var(--transition-base);
}

.pricing-card:hover {
    transform: translateY(-8px);
}

.pricing-card.featured {
    border-color: var(--color-accent);
    box-shadow: 0 20px 40px rgba(34, 211, 238, 0.15);
}

.pricing-badge {
    position: absolute;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-accent);
    color: var(--color-bg);
    padding: 0.25rem 1rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pricing-header {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.pricing-title {
    font-size: 1.5rem;
    margin-bottom: var(--space-sm);
}

.pricing-price {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: var(--space-sm);
    color: var(--color-text);
}

.currency {
    font-size: 1.5rem;
    vertical-align: super;
    margin-right: 0.25rem;
}

.period {
    font-size: 1rem;
    color: var(--color-text-secondary);
    font-weight: normal;
}

.pricing-desc {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.pricing-features {
    margin-bottom: var(--space-xl);
}

.pricing-features li {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    color: var(--color-text-secondary);
}

.pricing-features li::before {
    content: '✓';
    color: var(--color-accent);
    font-weight: bold;
}

/* Processus */
.process-steps {
    display: grid;
    gap: var(--space-lg);
    counter-reset: step;
}

@media (min-width: 768px) {
    .process-steps {
        grid-template-columns: repeat(5, 1fr);
    }
}

.process-step {
    position: relative;
    text-align: center;
    padding: var(--space-lg);
}

@media (min-width: 768px) {
    .process-step::after {
        content: '';
        position: absolute;
        top: 3rem;
        right: -1.5rem;
        width: 3rem;
        height: 2px;
        background-color: var(--color-border);
    }
    
    .process-step:last-child::after {
        display: none;
    }
}

.step-number {
    width: 3rem;
    height: 3rem;
    background-color: var(--color-primary);
    color: white;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin: 0 auto var(--space-md);
    position: relative;
}

.step-title {
    margin-bottom: var(--space-sm);
}

.step-desc {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

/* Slider témoignages */
.slider {
    position: relative;
    max-width: 48rem;
    margin: 0 auto;
}

.slider-track {
    display: flex;
    overflow: hidden;
    scroll-behavior: smooth;
    border-radius: var(--radius-lg);
}

.slide {
    flex: 0 0 100%;
    padding: var(--space-sm);
}

.testimonial {
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    border: 1px solid var(--color-border);
    height: 100%;
}

.testimonial-content {
    font-size: 1.125rem;
    font-style: italic;
    margin-bottom: var(--space-lg);
    color: var(--color-text-secondary);
}

.testimonial-author {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.author-name {
    font-weight: 600;
    color: var(--color-text);
}

.author-role {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.slider-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    margin-top: var(--space-lg);
}

.slider-prev,
.slider-next {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    transition: all var(--transition-base);
}

.slider-prev:hover,
.slider-next:hover {
    background-color: var(--color-surface-light);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.slider-dots {
    display: flex;
    gap: var(--space-sm);
}

.slider-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: var(--radius-full);
    background-color: var(--color-border);
    border: none;
    padding: 0;
    transition: background-color var(--transition-base);
}

.slider-dot.active {
    background-color: var(--color-accent);
}

/* FAQ */
.faq {
    max-width: 48rem;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid var(--color-border);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-lg) 0;
    text-align: left;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text);
    transition: color var(--transition-base);
}

.faq-question:hover {
    color: var(--color-accent);
}

.faq-icon {
    transition: transform var(--transition-base);
}

.faq-question[aria-expanded="true"] .faq-icon {
    transform: rotate(180deg);
}

.faq-answer {
    padding-bottom: var(--space-lg);
    color: var(--color-text-secondary);
    display: none;
}

.faq-question[aria-expanded="true"] + .faq-answer {
    display: block;
}

/* Contact */
.contact-grid {
    display: grid;
    gap: var(--space-2xl);
}

@media (min-width: 1024px) {
    .contact-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2xl);
    }
}

.contact-subtitle {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xl);
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}

.contact-icon {
    color: var(--color-accent);
    flex-shrink: 0;
}

.contact-label {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-bottom: 0.25rem;
}

.contact-value {
    font-weight: 500;
    color: var(--color-text);
}

.contact-value:hover {
    color: var(--color-accent);
}

.contact-cta {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

@media (min-width: 640px) {
    .contact-cta {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* Formulaire */
.form {
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    border: 1px solid var(--color-border);
}

.form-group {
    margin-bottom: var(--space-lg);
}

.form-label {
    display: block;
    margin-bottom: var(--space-xs);
    font-weight: 500;
    color: var(--color-text);
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font: inherit;
    transition: border-color var(--transition-base);
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
    border-color: var(--color-accent);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.1);
}

.form-textarea {
    resize: vertical;
    min-height: 6rem;
}

/* Footer */
.footer {
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding: var(--space-2xl) 0;
    margin-top: var(--space-2xl);
}

.footer-grid {
    display: grid;
    gap: var(--space-2xl);
    margin-bottom: var(--space-2xl);
}

@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .footer-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.footer-logo {
    margin-bottom: var(--space-md);
}

.footer-text {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.footer-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--space-md);
    color: var(--color-text);
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.footer-links li {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.footer-links a:hover {
    color: var(--color-accent);
}

.footer-bottom {
    padding-top: var(--space-xl);
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

@media (min-width: 640px) {
    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* Boutons flottants */
.float-buttons {
    position: fixed;
    bottom: var(--space-lg);
    right: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    z-index: var(--z-toast);
}

.float-btn {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px var(--color-shadow);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.float-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 30px var(--color-shadow);
}

.whatsapp {
    background-color: #25D366;
    color: white;
}

.phone {
    background-color: var(--color-primary);
    color: white;
}

.back-to-top {
    background-color: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

/* Modal */
.modal {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
    z-index: var(--z-modal);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
}

.modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    max-width: 32rem;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    box-shadow: 0 25px 50px var(--color-shadow);
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        transform: translateY(-1rem);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-lg);
    border-bottom: 1px solid var(--color-border);
}

.modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text);
}

.modal-close {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-base);
}

.modal-close:hover {
    background-color: var(--color-surface-light);
}

.modal-body {
    padding: var(--space-lg);
}

.modal-footer {
    padding: var(--space-lg);
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-end;
}

/* Animations */
.reveal {
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Icones */
.icon {
    flex-shrink: 0;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .section {
        padding: var(--space-xl) 0;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .hero-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
        padding: var(--space-md);
    }
    
    .stat-number {
        font-size: 2rem;
    }
    
    .float-buttons {
        bottom: var(--space-sm);
        right: var(--space-sm);
    }
    
    .float-btn {
        width: 3rem;
        height: 3rem;
    }
}

/* Utilities */
.text-center {
    text-align: center;
}

.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

/* --- FIX: Accent visible dans les titres en dégradé --- */
.section-title .accent{
  -webkit-text-fill-color: initial;
  background: none;
  color: var(--color-accent);
}

/* --- FIX: Back-to-top caché par défaut + transition propre --- */
.float-btn.back-to-top{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-base), visibility var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}
.float-btn.back-to-top.is-visible{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* --- UX: Slider swipe fluide + snap + scrollbar cachée --- */
.slider-track{
  overflow-x: auto;            /* permet swipe */
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;       /* Firefox */
}
.slider-track::-webkit-scrollbar{ display:none; } /* Chrome/Safari */
.slide{ scroll-snap-align: start; }

.float-buttons{
  bottom: calc(var(--space-lg) + env(safe-area-inset-bottom));
  right: calc(var(--space-lg) + env(safe-area-inset-right));
}

/* ===== Développement (section + tab) ===== */
.section-dev{
  background: linear-gradient(135deg, rgba(30, 58, 138, 0.10) 0%, transparent 55%);
  border-radius: var(--radius-lg);
}

.dev-subcategories{
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  margin: var(--space-lg) 0 var(--space-xl);
}

.dev-category h4{
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  color: var(--color-text);
  font-size: 1.125rem;
}

.dev-category .detail-list{ margin-bottom: 0; }
.dev-category .detail-list li{ margin-bottom: var(--space-sm); }

/* Highlight depuis JS (flash) */
.dev-category h4.is-highlight{
  color: var(--color-accent);
}

/* Pack Entreprise (pricing) */
.pricing-card.enterprise{
  border-color: var(--color-accent);
  box-shadow: 0 20px 40px rgba(34, 211, 238, 0.12);
}

.pricing-card.enterprise .pricing-price .accent{
  font-size: 1.5rem;
  font-weight: 800;
}

/* Grille pricing : 4 cartes sans casser le responsive */
@media (min-width: 768px){
  .pricing-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px){
  .pricing-grid{
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ================================
   FIX OVERFLOW — PRICING (#pricing)
   Empêche débordements mobile/desktop
================================ */

/* Grille responsive auto (1 → 2 → 3/4 selon la place) */
#pricing .pricing-grid{
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  align-items: start;
}

/* Très important : autoriser le shrink des items grid */
#pricing .pricing-grid > *{
  min-width: 0;
}

/* Padding adaptatif pour éviter que le contenu "étouffe" en 4 colonnes */
#pricing .pricing-card{
  padding: clamp(1.25rem, 2.2vw, var(--space-xl));
}

/* Prix : taille fluide + cassure possible */
#pricing .pricing-price{
  font-size: clamp(2rem, 4.2vw, 3rem);
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Eviter que FCFA + montant colle et crée un "mot" trop long */
#pricing .pricing-price .currency{
  font-size: clamp(1rem, 2vw, 1.5rem);
  vertical-align: baseline;
  margin-right: .35rem;
}

/* Autoriser le retour à la ligne sur le suffixe */
#pricing .pricing-price .period{
  font-size: .95rem;
  margin-left: .35rem;
  white-space: normal;
}

/* Les boutons dans pricing ne doivent jamais forcer la largeur */
#pricing .btn{
  white-space: normal;     /* au lieu de nowrap */
  min-width: 0;
  text-align: center;
}

/* Les textes longs dans les listes ne doivent pas élargir la carte */
#pricing .pricing-features li{
  overflow-wrap: anywhere;
}

/* Optionnel : si tu veux 4 colonnes seulement sur écrans très larges */
@media (min-width: 1024px){
  #pricing .pricing-grid{
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (min-width: 1280px){
  #pricing .pricing-grid{
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* =========================================================
   FIX OVERFLOW / DÉCOUPE — PRICING + PROCESS
   À coller tout en bas du fichier style.css
   ========================================================= */

/* --- 0) Sécurité anti-overflow dans les grids --- */
.pricing-grid > *,
.process-steps > * {
  min-width: 0; /* permet aux items de rétrécir sans déborder */
}

/* =========================================================
   1) PRICING: grille auto-fit (robuste) + typographie responsive
   ========================================================= */

/* IMPORTANT :
   Si tu as des @media qui redéfinissent .pricing-grid en 3/4 colonnes,
   ce patch les remplace proprement (car il est en bas du CSS). */
.pricing-grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: stretch;
}

/* Cartes: padding responsive + aucune découpe */
.pricing-card {
  max-width: 100%;
  padding: clamp(1.25rem, 2.2vw, var(--space-xl));
}

/* Prix: évite les débordements (wrap + taille responsive) */
.pricing-price {
  font-size: clamp(1.9rem, 3.2vw, 3rem);
  line-height: 1.1;
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem;
  text-align: center;
  overflow-wrap: anywhere;
}

/* Texte long: autoriser le retour à la ligne proprement */
.pricing-title,
.pricing-desc,
.pricing-features li {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Badge: reste OK même si la carte est étroite */
.pricing-badge {
  max-width: calc(100% - 1rem);
  white-space: nowrap;
}

/* Variante Entreprise */
.pricing-card.enterprise {
  border-color: var(--color-accent);
  box-shadow: 0 20px 40px rgba(34, 211, 238, 0.12);
}

/* =========================================================
   2) PROCESS: breakpoints + connecteurs sans overflow
   ========================================================= */

/* Enlève le double padding (section-dark + container) UNIQUEMENT ici */
#process.section-dark {
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}
#process.section-dark .container {
  padding-left: 0;
  padding-right: 0;
}

/* Grille PROCESS plus progressive (évite 5 colonnes trop tôt) */
.process-steps {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}

/* 2 colonnes sur petit paysage/tablette */
@media (min-width: 640px) {
  .process-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 3 colonnes sur medium */
@media (min-width: 900px) {
  .process-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 5 colonnes UNIQUEMENT sur large desktop */
@media (min-width: 1200px) {
  .process-steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: var(--space-lg);
  }
}

/* Cards process: padding responsive */
.process-step {
  padding: clamp(1rem, 1.8vw, var(--space-lg));
}

/* Lignes entre étapes: seulement en 5 colonnes ET sans sortir du container */
@media (min-width: 1200px) {
  .process-step::after {
    content: '';
    position: absolute;
    top: 3rem;
    right: -1rem;     /* moitié du gap (gap=2rem) */
    width: 2rem;      /* exactement le gap */
    height: 2px;
    background-color: var(--color-border);
  }
  .process-step:last-child::after {
    display: none;
  }
}

/* =========================================================
   HERO TYPEWRITER — FIX PROPRE (anti overflow + accessible)
   ========================================================= */

.title-line{
  display:block;
  line-height:1.15;
  margin-bottom:.25rem;
}

.typewriter-container{
  position:relative;
  display:inline-block;
  max-width:100%;
}

/* IMPORTANT: min-width adaptatif (évite le débordement mobile) */
.typewriter-text{
  color:var(--color-accent);
  display:inline-block;
  max-width:100%;
  min-width:clamp(6ch, 18vw, 16ch); /* réserve un peu de place sans forcer */
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Curseur (blink + légère pulsation) */
.typewriter-cursor{
  display:inline-block;
  margin-left:2px;
  font-weight:300;
  color:var(--color-accent);
  animation: blink 1s steps(1,end) infinite, cursorPulse 1.2s ease-in-out infinite;
  transform-origin:center;
}

@keyframes blink{
  0%,50%{opacity:1}
  51%,100%{opacity:0}
}
@keyframes cursorPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.12)}
}

.hero-subtitle-container{
  min-height:clamp(4.2rem, 10vw, 6.2rem);
  margin-bottom:var(--space-xl);
}

.typewriter-subtitle{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .5s ease, transform .5s ease;
}
.typewriter-subtitle.visible{
  opacity:1;
  transform:translateY(0);
}

/* Animation d’entrée des 3 lignes du titre */
.hero-title .title-line{
  opacity:0;
  transform:translateY(20px);
  animation:fadeInUp .8s ease forwards;
}
.hero-title .title-line:nth-child(1){animation-delay:.2s}
.hero-title .title-line:nth-child(2){animation-delay:.8s}
.hero-title .title-line:nth-child(3){animation-delay:1.4s}

@keyframes fadeInUp{
  to{opacity:1; transform:translateY(0)}
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .typewriter-cursor{animation:none; opacity:.7}
  .hero-title .title-line{animation:none; opacity:1; transform:none}
  .typewriter-subtitle{transition:none}
}

/* Mobile: garder une ligne lisible sans casser */
@media (max-width:768px){
  .hero-title{font-size:2rem}
  .title-line{display:inline}
  .hero-title .typewriter-container{display:block; margin:.5rem 0}
}

/* =========================================================
   PROCESSUS — FIX RESPONSIVE + ANIMATIONS (override safe)
   (colle ce bloc à la FIN du style.css)
========================================================= */

#process{
  position: relative;
  overflow-x: hidden;   /* évite débordements horizontaux */
  overflow-y: visible;  /* évite de couper les hovers */
}

/* Grille responsive (FINI le repeat(5) dès 768px) */
#process .process-steps{
  position: relative;
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr; /* mobile */
  align-items: stretch;
}

@media (min-width: 640px){
  #process .process-steps{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px){
  #process .process-steps{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Desktop large seulement : 5 étapes alignées */
@media (min-width: 1024px){
  #process .process-steps{
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-md);
  }
}

/* Timeline (uniquement quand on est vraiment en 5 colonnes) */
@media (min-width: 1024px){
  #process .process-steps::before{
    content:'';
    position:absolute;
    left: 2.5rem;
    right: 2.5rem;
    top: calc(var(--space-lg) + 2rem); /* centre du cercle (4rem / 2 = 2rem) */
    height: 2px;
    background: var(--color-border);
    opacity: .35;
    transform: scaleX(1);
    transform-origin: left;
    pointer-events:none;
  }

  #process .process-steps::after{
    content:'';
    position:absolute;
    left: 2.5rem;
    right: 2.5rem;
    top: calc(var(--space-lg) + 2rem);
    height: 2px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-primary-light));
    opacity: .55;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 900ms cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events:none;
  }

  #process .process-steps.timeline-animate::after{
    transform: scaleX(1);
  }
}

/* Étapes (cards) */
#process .process-step{
  min-width: 0; /* IMPORTANT: empêche les coupes en grid */
  position: relative;
  text-align: center;
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(6px);

  /* Animation entrée */
  --y: 26px;
  --lift: 0px;
  opacity: 0;
  transform: translateY(calc(var(--y) - var(--lift)));
  transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 700ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 250ms ease,
              box-shadow 250ms ease,
              background-color 250ms ease;
}

#process .process-step.animate-in{
  opacity: 1;
  --y: 0px;
}

#process .process-step:hover{
  --lift: 8px;
  border-color: rgba(34, 211, 238, 0.35);
  box-shadow: 0 18px 40px rgba(0,0,0,0.25);
  background: rgba(255,255,255,0.04);
}

#process .process-step:focus-visible{
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Numéro d’étape (UN SEUL ::before, plus de bug de duplication) */
#process .step-number{
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-full);
  margin: 0 auto var(--space-md);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  font-size: 1.25rem;
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  position: relative;
  z-index: 2;
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  transition: transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 450ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

#process .step-number::before{
  content:'';
  position:absolute;
  inset: -3px;
  border-radius: inherit;
  background: conic-gradient(from 0deg, var(--color-accent), var(--color-primary-light), var(--color-accent));
  z-index: -1;
  opacity: 0;
  transform: rotate(0deg);
  transition: opacity 250ms ease;
}

#process .process-step:hover .step-number{
  transform: scale(1.08) rotate(4deg);
  box-shadow: 0 14px 35px rgba(34, 211, 238, 0.20);
}

#process .process-step:hover .step-number::before{
  opacity: 1;
  animation: processRing 2.6s linear infinite;
}

@keyframes processRing{
  to{ transform: rotate(360deg); }
}

/* Titres et descriptions (anti-coupe + wrap propre) */
#process .step-title{
  font-size: 1.125rem;
  margin-bottom: var(--space-sm);
  color: var(--color-text);
  overflow-wrap: anywhere;
}

#process .step-desc{
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

#process .process-step:hover .step-desc{
  color: var(--color-text);
}

/* Particules */
#process .particles{
  position:absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

#process .particle{
  position:absolute;
  border-radius: 50%;
  opacity: 0;
  width: var(--size, 4px);
  height: var(--size, 4px);
  background: rgba(34, 211, 238, var(--alpha, 0.9));
  transform: translate(-50%, -50%) translate(0,0) scale(0);
  animation: particleBurst 1200ms ease-out forwards;
}

@keyframes particleBurst{
  0%{ opacity:0; transform: translate(-50%, -50%) translate(0,0) scale(0); }
  30%{ opacity:1; transform: translate(-50%, -50%) translate(calc(var(--dx)/2), calc(var(--dy)/2)) scale(1); }
  100%{ opacity:0; transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(0); }
}

/* Ripple */
#process .ripple{
  position:absolute;
  border-radius: 50%;
  pointer-events:none;
  background: rgba(34, 211, 238, 0.18);
  transform: scale(0);
  animation: rippleAnim 650ms linear;
}

@keyframes rippleAnim{
  to{ transform: scale(3.5); opacity: 0; }
}

/* Pulse sur active */
@keyframes processPulse{
  0%{ box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.35); }
  70%{ box-shadow: 0 0 0 12px rgba(34, 211, 238, 0); }
  100%{ box-shadow: 0 0 0 0 rgba(34, 211, 238, 0); }
}

#process .process-step.active .step-number{
  animation: processPulse 2s infinite;
}

/* Accessibilité motion */
@media (prefers-reduced-motion: reduce){
  #process .process-step{
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  @media (min-width: 1024px){
    #process .process-steps::after{
      transition: none !important;
      transform: scaleX(1) !important;
    }
  }
}


/* ===== Contact form UX (premium) ===== */
#contactForm .form-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 720px){
  #contactForm .form-row{ grid-template-columns: 1fr; }
}

#contactForm .field-hint{
  margin-top: 8px;
  font-size: 12px;
  opacity: .75;
}

#contactForm .form-label-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}

#contactForm .char-counter{
  font-size:12px;
  opacity:.8;
}

#contactForm .btn-spinner{
  display:none;
  width:16px;height:16px;
  border-radius:50%;
  border:2px solid currentColor;
  border-top-color: transparent;
  margin-left:10px;
  animation: spin .8s linear infinite;
}
#contactForm .is-loading .btn-spinner{ display:inline-block; }
#contactForm .is-loading{ opacity:.95; }

@keyframes spin{ to{ transform: rotate(360deg); } }

#contactForm .form-footnote{
  margin-top: 10px;
  font-size: 12px;
  opacity: .8;
}

/* Optionnel : champ invalide */
#contactForm .is-invalid{
  outline: 2px solid rgba(239,68,68,.55);
  outline-offset: 2px;
}

.email{
  background-color: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.email:hover{
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* =========================================================
   SECTION PARTENAIRES & RÉALISATIONS - Design Sublime
   ========================================================= */

.section-partners {
    position: relative;
    background: linear-gradient(135deg, 
        rgba(15, 23, 42, 0.97) 0%,
        rgba(30, 41, 59, 0.95) 50%,
        rgba(15, 23, 42, 0.97) 100%);
    overflow: hidden;
    padding: var(--space-2xl) 0;
}

.section-partners::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(30, 58, 138, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(34, 211, 238, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(59, 130, 246, 0.08) 0%, transparent 50%);
    z-index: -1;
}

/* Statistiques */
.partners-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .partners-stats {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-xl);
    }
}

.partner-stat {
    text-align: center;
    padding: var(--space-lg);
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.partner-stat::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, 
        rgba(34, 211, 238, 0.1) 0%,
        rgba(59, 130, 246, 0.05) 50%,
        transparent 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.partner-stat:hover {
    transform: translateY(-8px);
    border-color: rgba(34, 211, 238, 0.3);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(34, 211, 238, 0.1),
        inset 0 0 50px rgba(34, 211, 238, 0.05);
}

.partner-stat:hover::before {
    opacity: 1;
}

.partner-stat .stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-accent);
    margin-bottom: var(--space-xs);
    position: relative;
    z-index: 1;
}

.partner-stat .stat-label {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    position: relative;
    z-index: 1;
}

/* Grille des partenaires */
.partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
    perspective: 1000px;
}

@media (min-width: 1024px) {
    .partners-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.partner-card {
    background: linear-gradient(145deg,
        rgba(30, 41, 59, 0.9) 0%,
        rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transform-style: preserve-3d;
    min-height: 180px;
}

.partner-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, 
        rgba(34, 211, 238, 0.1) 0%,
        rgba(59, 130, 246, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}

.partner-card::after {
    content: '';
    position: absolute;
    inset: -1px;
    background: linear-gradient(45deg, 
        transparent 0%,
        rgba(34, 211, 238, 0.2) 50%,
        transparent 100%);
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: 2;
}

.partner-card-inner {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    height: 100%;
    transform: translateZ(20px);
}

.partner-logo {
    margin-bottom: var(--space-md);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
}

.logo-placeholder {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--p1) 0%, var(--p2) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 800;
    color: white;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.logo-letter {
    position: relative;
    z-index: 2;
}

.logo-mini {
    position: absolute;
    bottom: 8px;
    left: 0;
    right: 0;
    font-size: 0.6rem;
    text-align: center;
    opacity: 0.8;
    color: rgba(255, 255, 255, 0.9);
    z-index: 2;
}

.logo-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, 
        transparent 30%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 70%);
    animation: shine 3s infinite linear;
    z-index: 1;
}

@keyframes shine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.partner-info {
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.partner-name {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: var(--space-xs);
    color: var(--color-text);
    line-height: 1.4;
}

.partner-link {
    color: var(--color-accent);
    font-size: 0.875rem;
    opacity: 0.9;
    transition: opacity 0.3s ease;
    word-break: break-word;
}

.partner-link:hover {
    opacity: 1;
}

/* Effets hover */
.partner-card:hover {
    transform: translateY(-12px) scale(1.02) rotateX(5deg) rotateY(5deg);
    border-color: rgba(34, 211, 238, 0.4);
    box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(34, 211, 238, 0.2),
        inset 0 0 60px rgba(34, 211, 238, 0.1);
}

.partner-card:hover::before {
    opacity: 1;
}

.partner-card:hover::after {
    opacity: 1;
    animation: borderGlow 2s infinite linear;
}

@keyframes borderGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

/* Light effect */
.partner-light-effect {
    position: absolute;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, 
        rgba(34, 211, 238, 0.15) 0%,
        transparent 70%);
    filter: blur(40px);
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
    z-index: 1;
}

.partner-card.is-hovering .partner-light-effect {
    opacity: 1;
}

/* Carousel mobile */
.partners-carousel {
    display: none;
    margin-bottom: var(--space-2xl);
}

@media (max-width: 1023.98px) {
    .partners-carousel {
        display: block;
    }
    
    .partners-grid {
        display: none;
    }
}

.carousel-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--space-lg);
    padding: var(--space-sm);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.carousel-track::-webkit-scrollbar {
    display: none;
}

.carousel-slide {
    flex: 0 0 85%;
    scroll-snap-align: start;
}

.carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    margin-top: var(--space-lg);
}

.carousel-prev,
.carousel-next {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    transition: all 0.3s ease;
}

.carousel-prev:hover,
.carousel-next:hover {
    background: var(--color-surface-light);
    border-color: var(--color-accent);
    color: var(--color-accent);
    transform: scale(1.1);
}

.carousel-dots {
    display: flex;
    gap: var(--space-sm);
}

.carousel-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: var(--radius-full);
    background: var(--color-border);
    border: none;
    padding: 0;
    transition: all 0.3s ease;
    cursor: pointer;
}

.carousel-dot.active {
    background: var(--color-accent);
    transform: scale(1.2);
}

/* Machine à écrire */
.typewriter-container {
    max-width: 800px;
    margin: var(--space-2xl) auto 0;
}

.typewriter-machine {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.typewriter-header {
    background: linear-gradient(to right, 
        var(--color-surface-light),
        var(--color-surface));
    padding: var(--space-sm) var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
}

.typewriter-dots {
    display: flex;
    gap: 6px;
}

.typewriter-dots .dot {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
}

.typewriter-label {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-left: auto;
}

.typewriter-content {
    padding: var(--space-lg);
    background: rgba(0, 0, 0, 0.2);
    min-height: 100px;
}

.typewriter-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    color: var(--color-text);
}

.type-prefix {
    color: var(--color-accent);
    font-weight: bold;
}

.type-cursor {
    color: var(--color-accent);
    font-weight: bold;
    animation: blink 1s infinite;
}

.type-text {
    flex-grow: 1;
    color: var(--color-text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Particules */
.partner-particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* Animations d'entrée */
.partner-card {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    animation: cardAppear 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.partner-card:nth-child(1) { animation-delay: 0.1s; }
.partner-card:nth-child(2) { animation-delay: 0.2s; }
.partner-card:nth-child(3) { animation-delay: 0.3s; }
.partner-card:nth-child(4) { animation-delay: 0.4s; }
.partner-card:nth-child(5) { animation-delay: 0.5s; }
.partner-card:nth-child(6) { animation-delay: 0.6s; }
.partner-card:nth-child(7) { animation-delay: 0.7s; }
.partner-card:nth-child(8) { animation-delay: 0.8s; }
.partner-card:nth-child(9) { animation-delay: 0.9s; }

@keyframes cardAppear {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.partner-stat {
    opacity: 0;
    transform: translateY(20px);
    animation: statAppear 0.6s ease forwards;
}

.partner-stat:nth-child(1) { animation-delay: 0.1s; }
.partner-stat:nth-child(2) { animation-delay: 0.2s; }
.partner-stat:nth-child(3) { animation-delay: 0.3s; }
.partner-stat:nth-child(4) { animation-delay: 0.4s; }

@keyframes statAppear {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .partner-stat {
        padding: var(--space-md);
    }
    
    .partner-stat .stat-number {
        font-size: 2rem;
    }
    
    .partners-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: var(--space-md);
    }
    
    .partner-card {
        padding: var(--space-md);
        min-height: 160px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .partner-card,
    .partner-stat {
        animation: none;
        opacity: 1;
        transform: none;
    }
    
    .partner-card:hover {
        transform: none;
    }
    
    .partner-light-effect,
    .partner-particle {
        display: none;
    }
}

/* Assure que les layers sont corrects */
.section-partners { position: relative; overflow: hidden; }
.section-partners .container { position: relative; z-index: 2; }
.section-partners .particles-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Position du halo pilotée par ton JS (--lx/--ly) */
.partner-light-effect{
  left: var(--lx, 50%);
  top: var(--ly, 50%);
  transform: translate(-50%, -50%);
}

/* IMPORTANT: on laisse TON JS gérer animate-in (pas d’animation auto) */
.partner-card,
.partner-stat{
  opacity: 0;
  transform: translateY(18px);
}

.partner-card.animate-in,
.partner-stat.animate-in{
  opacity: 1;
  transform: translateY(0);
}

/* Optionnel: effet glow si ton JS l’ajoute */
.partner-card.glow{
  box-shadow: 0 20px 50px rgba(34,211,238,.12);
}

/* Keyframes partenaires (pour initPartnersParticles de TON JS) */
@keyframes partnersFloat{
  0%,100%{ transform: translate3d(0,0,0); }
  50%{ transform: translate3d(0,-14px,0); }
}
@keyframes partnersSparkle{
  0%,100%{ opacity: .15; }
  50%{ opacity: .55; }
}

/* IMPORTANT: éviter conflit avec ton hero => renommer blink */
.type-cursor{ animation: blinkTW 1s infinite; }
@keyframes blinkTW{
  0%,50%{opacity:1}
  51%,100%{opacity:0}
}

/* =========================================================
   FIX LISIBILITÉ PARTENAIRES (thème clair/sombre)
   + SCOPE pour éviter conflit avec le hero typewriter
   À coller tout en bas du style.css
========================================================= */

/* La section partenaires reste un bloc sombre (même si le site est en light-theme) */
.section-partners{
  --color-text: #f8fafc;
  --color-text-secondary: #cbd5e1;
  --color-border: rgba(255,255,255,.14);
  --color-surface: rgba(30,41,59,.70);
  --color-surface-light: rgba(51,65,85,.55);
  --color-shadow: rgba(0,0,0,.35);
}

/* Le titre en dégradé devient lisible même en thème clair */
.section-partners .section-title{
  background: linear-gradient(135deg, var(--color-text) 0%, var(--color-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.section-partners .section-subtitle{ color: var(--color-text-secondary); }

/* Lisibilité des noms + liens */
.section-partners .partner-name{ color: var(--color-text); }
.section-partners .partner-link{ color: var(--color-accent); }

/* Scope du terminal partenaires (évite conflit avec .typewriter-container du hero) */
.section-partners .typewriter-container{
  max-width: 800px;
  margin: var(--space-2xl) auto 0;
}
.section-partners .typewriter-machine{
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
  box-shadow: 0 20px 60px var(--color-shadow);
}
.section-partners .typewriter-header{
  background: linear-gradient(to right, var(--color-surface-light), var(--color-surface));
  padding: var(--space-sm) var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}
.section-partners .typewriter-label{
  font-size: .875rem;
  color: var(--color-text-secondary);
  margin-left: auto;
}
.section-partners .typewriter-content{
  padding: var(--space-lg);
  background: rgba(0,0,0,0.18);
  min-height: 100px;
}
.section-partners .typewriter-line{
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  color: var(--color-text);
}
.section-partners .type-prefix{ color: var(--color-accent); font-weight: 700; }
.section-partners .type-text{
  flex-grow: 1;
  color: var(--color-text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Ton CSS appelle "float" via JS : on garantit que l'animation existe */
@keyframes float{
  0%,100%{ transform: translate3d(0,0,0); }
  50%{ transform: translate3d(0,-14px,0); }
}

/* =========================================================
   FLOAT BUTTONS — WhatsApp & Appel (premium, comme Email)
   À coller tout en bas du style.css
========================================================= */

/* Base premium (tous les boutons flottants) */
.float-btn{
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;

  /* Look "glass" premium */
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow:
    0 12px 26px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.06);

  transition: transform var(--transition-base),
              box-shadow var(--transition-base),
              border-color var(--transition-base),
              background-color var(--transition-base);
}

/* Thème clair : surface plus clean */
.light-theme .float-btn{
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow:
    0 12px 26px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.65);
}

/* Icônes (FontAwesome ou SVG) */
.float-btn i,
.float-btn svg{
  width: 20px;
  height: 20px;
  font-size: 20px;
  line-height: 1;
}

/* Hover premium */
.float-btn:hover{
  transform: translateY(-4px);
  box-shadow:
    0 18px 34px rgba(0,0,0,.40),
    0 0 0 4px rgba(34,211,238,.10),
    inset 0 1px 0 rgba(255,255,255,.08);
  border-color: rgba(34,211,238,.35);
}
.light-theme .float-btn:hover{
  box-shadow:
    0 18px 34px rgba(0,0,0,.16),
    0 0 0 4px rgba(34,211,238,.14),
    inset 0 1px 0 rgba(255,255,255,.75);
}

/* Focus accessibilité */
.float-btn:focus-visible{
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* ===== Personnalisation WhatsApp ===== */
.float-btn.whatsapp{
  color: #25D366;
}
.float-btn.whatsapp:hover{
  border-color: rgba(37,211,102,.55);
  box-shadow:
    0 18px 34px rgba(0,0,0,.40),
    0 0 0 4px rgba(37,211,102,.12),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* ===== Personnalisation Appel ===== */
.float-btn.phone{
  color: var(--color-accent);
}
.float-btn.phone:hover{
  border-color: rgba(34,211,238,.55);
}

/* Optionnel : mini “tooltip” au hover (utilise aria-label) */
.float-btn[aria-label]{
  position: relative;
}
.float-btn[aria-label]::after{
  content: attr(aria-label);
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: rgba(15,23,42,.92);
  color: #fff;
  border: 1px solid rgba(255,255,255,.16);
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}
.light-theme .float-btn[aria-label]::after{
  background: rgba(255,255,255,.95);
  color: #0f172a;
  border: 1px solid rgba(15,23,42,.10);
}
.float-btn:hover::after{
  opacity: 1;
  transform: translateY(-50%) translateX(-2px);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .float-btn,
  .float-btn[aria-label]::after{
    transition: none !important;
  }
}


/* =========================================================
   ✅ RESPONSIVE GLOBAL + SAFE AREA + FLUID TYPE
   (à coller tout en bas)
========================================================= */
:root{
  --header-h: 4rem;
}

/* Container plus “smart” (évite les bords collés sur très petit écran) */
.container{
  padding-left: calc(clamp(16px, 4vw, 24px) + env(safe-area-inset-left));
  padding-right: calc(clamp(16px, 4vw, 24px) + env(safe-area-inset-right));
}

/* Sections + titres en fluid pour tous écrans */
.section{ padding: clamp(2.5rem, 6vw, 4rem) 0; }
.section-title{ font-size: clamp(1.8rem, 4.2vw, 2.5rem); }
.hero-title{ font-size: clamp(2rem, 5.5vw, 3rem); }
.hero-subtitle{ font-size: clamp(1rem, 2.5vw, 1.125rem); }

/* Anti scroll horizontal (plus safe que hidden) */
@supports (overflow: clip){
  html, body{ overflow-x: clip; }
}

/* =========================================================
   ✅ HEADER / NAV — anti débordement + bouton “Appeler” safe
========================================================= */
.navbar{ height: var(--header-h); }

.logo{ min-width: 0; }
.logo span, .logo-text{
  display: block;
  max-width: 42vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-actions{ flex-shrink: 0; gap: .5rem; }
.nav-actions .btn{
  padding: .55rem .9rem;
  font-size: .88rem;
}
@media (max-width: 360px){
  .nav-actions .btn{ padding:.48rem .75rem; font-size:.82rem; }
}

/* =========================================================
   ✅ MENU MOBILE (Hamburger) — overlay + panel + 100dvh
   Nécessite idéalement .mobile-menu__panel (voir HTML plus bas)
========================================================= */
.mobile-menu{
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: var(--z-modal);

  /* overlay */
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);

  padding: var(--space-lg);
  padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom));

  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.mobile-menu.active{
  opacity: 1;
  pointer-events: auto;
}

/* Panel */
.mobile-menu__panel{
  margin-left: auto;
  width: min(420px, 92vw);
  height: calc(100dvh - var(--header-h) - (var(--space-lg) * 2));
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: auto;

  padding: var(--space-lg);
  transform: translate3d(16px, 0, 0);
  transition: transform var(--transition-base);
  box-shadow: 0 25px 60px rgba(0,0,0,.35);
  will-change: transform;
}
.mobile-menu.active .mobile-menu__panel{
  transform: translate3d(0, 0, 0);
}

/* Liens mobile mieux espacés */
.mobile-nav{ gap: .65rem; }
.mobile-link{
  padding: .85rem 1rem;
  border: 1px solid rgba(255,255,255,.06);
}

/* =========================================================
   ✅ PARTENAIRES — stats + carousel ultra responsive
========================================================= */

/* Stats: auto-fit => impeccable 320 -> desktop */
.partners-stats{
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(.75rem, 2.5vw, 1.5rem);
}

/* Carousel: swipe très fluide + pas de "drag" parasite */
.carousel-track{
  scroll-padding-inline: .5rem;
  padding: .5rem;
  touch-action: pan-x;
}

/* Largeur slide selon écrans */
.partners-carousel .carousel-slide{ flex: 0 0 92%; }
@media (min-width: 480px){ .partners-carousel .carousel-slide{ flex-basis: 82%; } }
@media (min-width: 640px){ .partners-carousel .carousel-slide{ flex-basis: 62%; } }
@media (min-width: 900px){ .partners-carousel .carousel-slide{ flex-basis: 48%; } }

/* Carte partenaires: texte fluide + pas d’overflow */
.partner-card{
  min-width: 0;
  min-height: 170px;
}
.partner-name{
  font-size: clamp(1rem, 2.6vw, 1.125rem);
  overflow-wrap: anywhere;
}
.partner-link{
  font-size: clamp(.82rem, 2.2vw, .875rem);
  overflow-wrap: anywhere;
}

/* Dots: évite que ça déborde (beaucoup de partenaires) */
.carousel-dots{
  flex-wrap: wrap;
  max-width: min(520px, 80vw);
  justify-content: center;
}

/* ✅ Sur mobile/touch: pas de 3D hover (ça crée souvent des scroll/jitter) */
@media (hover: none) and (pointer: coarse){
  .partner-card:hover{
    transform: translateY(-4px) scale(1.01); /* léger lift */
  }
  .carousel-controls{ display: none; } /* swipe suffit */
}

/* ✅ Fallback si JS absent: ne pas rendre invisibles les cards */
.partner-card,
.partner-stat{
  opacity: 1;
  transform: none;
}
/* Si JS actif, il mettra .js sur <html> et on active l’animation */
html.js .partner-card,
html.js .partner-stat{
  opacity: 0;
  transform: translateY(18px);
}
html.js .partner-card.animate-in,
html.js .partner-stat.animate-in{
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   RESPONSIVE PATCH (Header/Hamburger + Partenaires + Logo)
   À COLLER TOUT EN BAS DU CSS
========================================================= */

:root{
  --header-h: 4rem;
  --container-pad: clamp(12px, 4vw, 24px);
}

/* Container plus “fluide” sur tous écrans */
.container{
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

/* =========================
   HEADER / NAV (mobile)
========================= */

/* Navbar : évite que le logo casse */
.navbar{
  gap: clamp(.5rem, 2vw, 1rem);
}

/* Logo : ne doit JAMAIS passer sur 2 lignes */
.logo{
  flex: 1 1 auto;
  min-width: 0;
  font-size: clamp(1.05rem, 4.2vw, 1.5rem);
}
.logo > span{
  display: inline-flex;
  align-items: baseline;
  flex-wrap: nowrap;
  white-space: nowrap; /* IMPORTANT */
}

/* Empêche tout “break” agressif sur le logo */
.logo, .logo *{
  word-break: normal;
  overflow-wrap: normal;
}

/* Actions : se compactent sur petits écrans */
.nav-actions{
  flex: 0 0 auto;
  gap: clamp(.35rem, 1.6vw, 1rem);
}

/* Bouton “Appeler” + toggles : plus compacts sur petits écrans */
@media (max-width: 420px){
  .nav-actions .btn{
    padding: .5rem .75rem;
    font-size: .825rem;
  }
  .theme-toggle,
  .hamburger{
    width: 2.25rem;
    height: 2.25rem;
  }
}

/* =========================
   MENU MOBILE (fond header + overlay)
   Objectif : quand on ouvre le hamburger,
   on voit bien le fond du header + le menu
========================= */

/* Overlay (fond sombre derrière le menu) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-base), visibility var(--transition-base);
  z-index: var(--z-modal);
}

/* Actif quand menu ouvert */
body.menu-open::before{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Le menu couvre TOUT l’écran (y compris derrière le header),
   mais le contenu commence sous le header */
.mobile-menu{
  top: 0;
  height: 100dvh; /* mieux que 100vh mobile */
  padding-top: calc(var(--header-h) + var(--space-lg));
  background: var(--color-bg);
  z-index: calc(var(--z-modal) + 1);
  will-change: transform;
}

/* Le header reste AU-DESSUS et prend un fond bien visible */
@media (max-width: 1023.98px){
  .header{
    z-index: calc(var(--z-modal) + 2);
  }
}

/* Fond du header quand menu ouvert (ce que tu demandes) */
body.menu-open .header{
  background-color: var(--color-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--color-border);
}

/* Optionnel : petit “lift” visuel quand menu open */
body.menu-open .header{
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}

/* =========================
   PARTENAIRES (mobile carousel + desktop grid)
   - zéro débordement
   - dots qui wrap
========================= */

/* Desktop grid : auto-fit (évite 3 colonnes trop serrées) */
.partners-grid{
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
@media (min-width: 1280px){
  .partners-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Mobile carousel : largeur slide “intelligente” */
@media (max-width: 1023.98px){
  .carousel-track{
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
    scroll-padding-left: var(--container-pad);
    scroll-padding-right: var(--container-pad);
  }
  .carousel-slide{
    flex: 0 0 clamp(240px, 86vw, 420px);
  }

  /* Les dots ne doivent jamais déborder */
  .carousel-controls{
    flex-wrap: wrap;
    row-gap: .75rem;
  }
  .carousel-dots{
    flex-wrap: wrap;
    justify-content: center;
    max-width: min(520px, 100%);
  }
}

/* Sécurité anti overflow pour cartes partenaires */
.partner-card,
.partner-stat{
  min-width: 0;
}

/* =========================================================
   FIX LOGO EN 1 LIGNE (BASDWEBPRO) — À mettre tout en bas
========================================================= */

.logo{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: nowrap;      /* pas de retour ligne */
  white-space: nowrap;    /* garde tout sur 1 ligne */
  min-width: 0;
}

.logo > span{
  display: inline-flex;   /* important: pas block */
  align-items: baseline;
  white-space: nowrap;
  line-height: 1;
}

/* Force les spans à rester INLINE (au cas où un style les met en block) */
.logo .approche,
.logo .accent{
  display: inline !important;
  white-space: nowrap;
}

/* Optionnel: évite que "BASD" et "WEBPRO" se séparent */
.logo *{
  max-width: 100%;
}

/* =========================
   SECTION ORDINATEUR (SAFE)
========================= */

.section-computer{
  position: relative;
  overflow: hidden;
  padding: var(--space-2xl, 4.5rem) 0;
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 35%, #312e81 65%, #0f172a 100%);
  color: #fff;
}

.section-computer::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(139,92,246,.18) 0%, transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(34,211,238,.14) 0%, transparent 55%),
    repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(255,255,255,.03) 3px, rgba(255,255,255,.03) 6px);
  pointer-events:none;
  opacity:.9;
}

.section-computer .container{ position: relative; z-index: 1; }

.computer-header{
  text-align:center;
  margin-bottom: var(--space-2xl, 3rem);
}

.computer-typewriter{
  display:inline-flex;
  align-items:baseline;
  gap:.25rem;
  white-space:nowrap;
  font-weight:800;
  letter-spacing:.5px;
  font-size: clamp(1.35rem, 2vw, 2.1rem);
}

.computer-typewriter-text{
  background: linear-gradient(90deg, #ff6b6b, #ffd93d, #6bcf7f, #4d96ff, #8b5cf6);
  background-size: 300% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color: transparent;
  animation: computerGradient 3.2s ease infinite;
}
@keyframes computerGradient { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

.computer-typewriter-cursor{
  color: rgba(255,255,255,.85);
  animation: computerBlink 1s step-end infinite;
}
@keyframes computerBlink { 0%,50%{opacity:1} 51%,100%{opacity:0} }

.computer-title-accent{
  display:block;
  margin-top:.5rem;
  font-weight:800;
  font-size: clamp(1.2rem, 1.8vw, 1.8rem);
  color: rgba(255,255,255,.95);
}

.computer-container{
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl, 2.5rem);
}

@media (min-width: 1024px){
  .computer-container{ grid-template-columns: 1fr 1fr; align-items: start; }
}

.computer-gallery{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg, 18px);
  padding: var(--space-lg, 1.25rem);
  backdrop-filter: blur(14px);
  box-shadow: 0 25px 50px rgba(0,0,0,.35);
}

.computer-gallery-main{
  position:relative;
  height: 360px;
  border-radius: var(--radius-md, 14px);
  overflow:hidden;
  margin-bottom: var(--space-md, 1rem);
}

.computer-main-image{
  position:absolute;
  inset:0;
  border:0;
  padding:0;
  background:transparent;
  opacity:0;
  transform: scale(.98);
  transition: opacity .35s ease, transform .35s ease;
  cursor: zoom-in;
}
.computer-main-image.is-active{ opacity:1; transform: scale(1); z-index:1; }

.computer-main-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.computer-thumbs{
  display:flex;
  justify-content:center;
  gap:.6rem;
  margin-bottom: var(--space-md, 1rem);
}
.computer-thumb{
  width:64px;
  height:64px;
  border-radius: 12px;
  overflow:hidden;
  border:2px solid transparent;
  padding:0;
  background:transparent;
  cursor:pointer;
  transition: transform .2s ease, border-color .2s ease;
}
.computer-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.computer-thumb:hover{ transform: translateY(-3px); border-color: rgba(34,211,238,.7); }
.computer-thumb.is-active{ border-color: rgba(34,211,238,1); }

.computer-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 1rem;
}

.computer-nav{
  width:44px; height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color:#fff;
  font-size: 1.8rem;
  line-height: 1;
  cursor:pointer;
  transition: transform .2s ease, background .2s ease;
}
.computer-nav:hover{ transform: scale(1.06); background: rgba(34,211,238,.18); }

.computer-dots{ display:flex; gap:.35rem; }
.computer-dot{
  width:10px; height:10px;
  border-radius:999px;
  border:0;
  background: rgba(255,255,255,.28);
  cursor:pointer;
}
.computer-dot.is-active{ background: rgba(34,211,238,1); }

.computer-hint{
  margin: .9rem 0 0 0;
  text-align:center;
  color: rgba(255,255,255,.75);
  font-size: .9rem;
}

.computer-info{ display:flex; flex-direction:column; gap: 1.25rem; }

.computer-price{
  border-radius: var(--radius-lg, 18px);
  padding: 1.25rem;
  border: 1px solid rgba(139,92,246,.35);
  background: linear-gradient(135deg, rgba(34,211,238,.12), rgba(139,92,246,.18));
  text-align:center;
}

.computer-price-label{
  font-size:.85rem;
  letter-spacing:2px;
  opacity:.9;
  font-weight:700;
}

.computer-price-main{
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:.5rem;
  margin:.35rem 0 .6rem 0;
}
.computer-price-currency{ font-size:1.1rem; opacity:.85; }
.computer-price-amount{
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight:900;
  background: linear-gradient(90deg, #22d3ee, #8b5cf6);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color: transparent;
}

.computer-price-sub{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  align-items:center;
}
.computer-badge{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.35rem .8rem;
  border-radius:999px;
  background: linear-gradient(90deg, #ff6b6b, #ffd93d);
  color:#0f172a;
  font-weight:800;
  font-size:.85rem;
}
.computer-old-price{ opacity:.75; text-decoration: line-through; }

.computer-block-title{
  margin:0 0 .75rem 0;
  font-size: 1.1rem;
}

.computer-specs, .computer-features, .computer-timer{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg, 18px);
  padding: 1rem;
  backdrop-filter: blur(10px);
}

.computer-spec-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: .75rem;
}
@media (max-width: 520px){
  .computer-spec-grid{ grid-template-columns: 1fr; }
}

.computer-spec{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: .9rem;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.computer-spec:hover{
  transform: translateY(-4px);
  background: rgba(34,211,238,.10);
  border-color: rgba(34,211,238,.25);
}
.computer-spec-icon{ font-size: 1.6rem; margin-bottom: .35rem; }
.computer-spec h4{ margin:0 0 .25rem 0; font-size: 1rem; }
.computer-spec p{ margin:0; opacity:.8; font-size:.92rem; }

.computer-feature-list{
  margin:0;
  padding-left: 1.1rem;
  display:grid;
  gap:.4rem;
  opacity:.9;
}

.computer-actions{
  display:grid;
  grid-template-columns: 1fr;
  gap: .75rem;
}

.computer-timer-title{ font-weight:800; margin-bottom:.5rem; color: rgba(255,255,255,.95); }
.computer-timer-row{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.5rem;
}
.computer-time{
  min-width: 56px;
  text-align:center;
  padding:.55rem .6rem;
  border-radius: 14px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.12);
  font-weight:900;
  font-size: 1.4rem;
}
.computer-sep{ font-weight:900; font-size: 1.4rem; opacity:.85; }
.computer-timer-note{ display:block; margin-top:.6rem; text-align:center; opacity:.7; }

/* Reveal (namespacé) */
.computer-reveal{ opacity: 0; transform: translateY(18px); transition: all .6s ease; }
.computer-reveal.is-visible{ opacity: 1; transform: translateY(0); }

/* Modal (namespacé) */
.computer-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  display:none;
  align-items:center;
  justify-content:center;
  z-index: 9999;
  padding: 1rem;
}
.computer-modal.is-open{ display:flex; }

.computer-modal-card{
  width: min(980px, 96vw);
  max-height: 92vh;
  overflow:auto;
  background: rgba(15,23,42,.92);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
  padding: 1rem;
  position:relative;
  box-shadow: 0 35px 70px rgba(0,0,0,.5);
}
.computer-modal-card img{
  width:100%;
  height:auto;
  display:block;
  border-radius: 14px;
}

.computer-modal-close{
  position:absolute;
  top:.6rem;
  right:.8rem;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  color:#fff;
  font-size: 1.6rem;
  cursor:pointer;
}

.computer-detail-list{ margin:.75rem 0 0 0; padding-left: 1.1rem; display:grid; gap:.35rem; }

body.computer-no-scroll{ overflow:hidden; }

/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .computer-typewriter-text, .computer-typewriter-cursor{ animation:none; }
  .computer-reveal{ transition:none; }
}

/* =========================================================
   SECTION COMMUNITY MANAGER — intégration safe (sans conflits)
   ========================================================= */

.section-community{
  position:relative;
  overflow:hidden;
  padding: var(--space-2xl) 0;
  background: linear-gradient(135deg,
    rgba(15,23,42,.98) 0%,
    rgba(30,58,138,.15) 20%,
    rgba(34,211,238,.08) 50%,
    rgba(15,23,42,.98) 100%);
}

.section-community::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 10% 20%, rgba(59,130,246,.15) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(34,211,238,.12) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(139,92,246,.08) 0%, transparent 60%);
  z-index:0;
  animation: communityBgPulse 20s ease-in-out infinite;
}

@keyframes communityBgPulse{0%,100%{opacity:1}50%{opacity:.8}}

.section-community .container{ position:relative; z-index:1; }

.community-title-wrapper{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.75rem;
  flex-wrap:wrap;
}

.community-title-main{
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight:800;
  background: linear-gradient(90deg, #22d3ee, #3b82f6, #8b5cf6);
  background-size: 300% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation: communityGradient 3s ease infinite;
}

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

.community-title-accent{
  font-size: clamp(1.8rem, 4.5vw, 2.8rem);
  font-weight:800;
  color: var(--color-accent);
  text-shadow: 0 0 20px rgba(34,211,238,.3);
}

.community-title-sparkle{
  font-size: clamp(1.5rem, 3vw, 2rem);
  animation: communitySparkle 2s ease-in-out infinite;
}
@keyframes communitySparkle{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.08)}}

/* Stats */
.community-stats{
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap: var(--space-lg);
  margin: var(--space-2xl) auto;
  max-width: 900px;
}

@media (min-width:768px){
  .community-stats{ grid-template-columns: repeat(4,1fr); gap: var(--space-xl); }
}

.community-stat{
  text-align:center;
  padding: var(--space-lg);
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  position:relative;
  overflow:hidden;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.community-stat:hover{
  transform: translateY(-6px);
  border-color: rgba(34,211,238,.3);
  box-shadow: 0 20px 40px rgba(0,0,0,.3);
}

.community-stat-number{
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}
.community-stat-label{
  color: var(--color-text-secondary);
  font-size: .9rem;
}

/* Grid */
.community-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

@media (min-width:1024px){
  .community-grid{ grid-template-columns: repeat(2,1fr); }
}

.community-card{
  background: linear-gradient(145deg, rgba(30,41,59,.9) 0%, rgba(15,23,42,.95) 100%);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  position:relative;
  overflow:hidden;
  min-height: 380px;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.community-card.featured{
  border-color: rgba(59,130,246,.4);
  box-shadow: 0 20px 60px rgba(59,130,246,.15);
}

.community-card-badge{
  position:absolute;
  top:-12px;
  left:50%;
  transform:translateX(-50%);
  background: linear-gradient(90deg, #3b82f6, #1d4ed8);
  color:#fff;
  padding:.25rem 1rem;
  border-radius: var(--radius-full);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.05em;
  z-index:3;
}

.community-card-inner{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  flex-direction:column;
}

.community-card-icon{
  margin-bottom: var(--space-md);
  display:flex;
  justify-content:center;
  align-items:center;
  height: 80px;
  color: #22d3ee;
}

.community-card.featured .community-card-icon{ color:#3b82f6; }

.community-card-title{
  font-size:1.2rem;
  font-weight:600;
  margin-bottom: var(--space-sm);
}

.community-card-desc{
  color: var(--color-text-secondary);
  margin-bottom: var(--space-lg);
  flex-grow:1;
}

.community-card-features{
  margin-bottom: var(--space-lg);
}
.community-card-features li{
  position:relative;
  padding-left: 1.2rem;
  margin-bottom: .4rem;
  color: var(--color-text-secondary);
  font-size:.9rem;
}
.community-card-features li::before{
  content:"✓";
  position:absolute;
  left:0;
  color: var(--color-accent);
  font-weight:800;
}

.community-card-glow{
  position:absolute;
  inset:0;
  background: linear-gradient(45deg, transparent 30%, rgba(34,211,238,.12) 50%, transparent 70%);
  opacity:0;
  transition: opacity .5s ease;
  z-index:1;
}

@media (hover:hover) and (pointer:fine){
  .community-card:hover{
    transform: translateY(-10px) scale(1.01);
    border-color: rgba(34,211,238,.35);
    box-shadow: 0 30px 60px rgba(0,0,0,.4);
  }
  .community-card:hover .community-card-glow{
    opacity:1;
    animation: communityShine 2s linear infinite;
  }
}

@keyframes communityShine{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

.community-more-btn{ margin-top:auto; }

/* Mobile carousel */
.community-carousel{ display:none; margin-bottom: var(--space-2xl); }
@media (max-width: 1023.98px){
  .community-carousel{ display:block; }
  .community-grid{ display:none; }
}

.community-carousel-track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  gap: var(--space-lg);
  padding: var(--space-sm);
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.community-carousel-track::-webkit-scrollbar{ display:none; }
.community-carousel-slide{
  flex: 0 0 85%;
  scroll-snap-align:start;
}

.community-carousel-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

.community-carousel-prev,
.community-carousel-next{
  width:3rem;height:3rem;
  border-radius: var(--radius-full);
  display:flex;align-items:center;justify-content:center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: transform .2s ease, border-color .2s ease;
}
.community-carousel-prev:hover,
.community-carousel-next:hover{
  border-color: var(--color-accent);
  transform: scale(1.06);
}

.community-carousel-dots{ display:flex; gap: .5rem; }
.community-carousel-dot{
  width:.75rem;height:.75rem;
  border-radius: var(--radius-full);
  background: var(--color-border);
  border:none;
  cursor:pointer;
  transition: transform .2s ease;
}
.community-carousel-dot.active{
  background: var(--color-accent);
  transform: scale(1.15);
}

/* Typewriter — SCOPÉ (pas de conflit avec ton terminal partenaires) */
.community-typewriter{
  max-width: 800px;
  margin: var(--space-2xl) auto;
}
.community-typewriter-machine{
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow:hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.community-typewriter-header{
  background: linear-gradient(to right, var(--color-surface-light), var(--color-surface));
  padding: var(--space-sm) var(--space-md);
  display:flex;
  align-items:center;
  gap: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}
.community-typewriter-dots{ display:flex; gap:6px; }
.community-typewriter-dots .dot{ width:12px;height:12px;border-radius: var(--radius-full); }
.community-typewriter-label{ margin-left:auto; font-size:.875rem; color: var(--color-text-secondary); }
.community-typewriter-content{
  padding: var(--space-lg);
  background: rgba(0,0,0,.2);
  min-height: 100px;
}
.community-typewriter-line{
  display:flex;
  align-items:center;
  gap: 8px;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
}
.community-type-prefix{ color: var(--color-accent); font-weight:800; }
.community-type-cursor{ color: var(--color-accent); font-weight:800; animation: communityBlink 1s infinite; }
@keyframes communityBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
.community-type-text{
  flex-grow:1;
  color: var(--color-text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}

/* CTA */
.community-cta{ max-width: 800px; margin: var(--space-2xl) auto 0; }
.community-cta-card{
  background: linear-gradient(135deg, rgba(34,211,238,.1) 0%, rgba(59,130,246,.1) 100%);
  border: 1px solid rgba(34,211,238,.2);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  text-align:center;
  backdrop-filter: blur(10px);
}
.community-cta-card h3{ font-size:1.5rem; margin-bottom: var(--space-sm); }
.community-cta-card p{ color: var(--color-text-secondary); margin-bottom: var(--space-lg); }

.community-cta-buttons{
  display:flex;
  flex-direction:column;
  gap: var(--space-sm);
}
@media (min-width:640px){
  .community-cta-buttons{ flex-direction:row; justify-content:center; }
}

/* Particules */
.community-particles{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}
.community-particle{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  animation: communityFloat 14s ease-in-out infinite;
}
@keyframes communityFloat{
  0%,100%{ transform: translateY(0); opacity:.2; }
  50%{ transform: translateY(-18px); opacity:.45; }
}

/* Modal détails (optionnel, safe) */
#communityModal .modal-body h4{ margin:.25rem 0 .5rem; }
#communityModal .modal-body ul{ margin:.25rem 0 0; padding-left: 1.1rem; }
#communityModal .modal-body li{ margin:.25rem 0; color: var(--color-text-secondary); }

/* =========================================================
   FIX LISIBILITÉ — COMMUNITY (thème clair)
   La section Community reste sombre même en light-theme
   À coller tout en bas du style.css
========================================================= */
.section-community{
  /* Force un set “dark” LOCAL (ne touche pas le reste du site) */
  --color-text: #f8fafc;
  --color-text-secondary: #cbd5e1;
  --color-border: rgba(255,255,255,.14);
  --color-surface: rgba(30,41,59,.72);
  --color-surface-light: rgba(51,65,85,.55);
  --color-shadow: rgba(0,0,0,.35);

  color: var(--color-text);
}

/* Titres */
.section-community .section-title,
.section-community .community-card-title,
.section-community .community-cta-card h3{
  color: var(--color-text);
}

/* Textes secondaires */
.section-community .section-subtitle,
.section-community .community-stat-label,
.section-community .community-card-desc,
.section-community .community-card-features li,
.section-community .community-cta-card p,
.section-community .community-type-text{
  color: var(--color-text-secondary);
}

/* Boutons outline dans cette section (lisibles sur fond sombre) */
.section-community .btn-outline{
  border-color: rgba(255,255,255,.18);
  color: var(--color-text);
}
.section-community .btn-outline:hover{
  border-color: var(--color-accent);
  color: var(--color-accent);
}
/* ===========================
   FIX MOBILE — cartes visibles
   =========================== */
@media (max-width: 1023.98px){
  /* on désactive le carousel mobile si tu ne l'alimentes pas */
  .community-carousel{ display:none !important; }

  /* on ré-affiche la grille */
  .community-grid{
    display:grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--space-lg);
  }

  /* optionnel: hauteur moins grande sur mobile */
  .community-card{ min-height: auto; }
}

/* Sécurité: si ton CSS global masque les .modal sans .active */
#communityModal { display: none; }
#communityModal.active { display: flex; }

/* Bonus: ne jamais bloquer les clics */
.community-card-glow { pointer-events: none; }

/* =========================================================
   SECTION VÉHICULE PREMIUM — Design ultra moderne
   ========================================================= */

.section-vehicle {
    position: relative;
    overflow: hidden;
    padding: var(--space-2xl, 4.5rem) 0;
    background: linear-gradient(135deg, 
        #0f172a 0%, 
        #1e293b 25%, 
        #334155 50%, 
        #1e293b 75%, 
        #0f172a 100%);
    color: #fff;
    isolation: isolate;
}

.section-vehicle::before {
    content: "";
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 10% 20%, rgba(34, 211, 238, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(59, 130, 246, 0.12) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.08) 0%, transparent 60%),
        repeating-linear-gradient(45deg, 
            transparent, 
            transparent 2px, 
            rgba(255, 255, 255, 0.02) 2px, 
            rgba(255, 255, 255, 0.02) 4px);
    pointer-events: none;
    opacity: 0.9;
    animation: vehicleBgPulse 20s ease-in-out infinite;
    z-index: -1;
}

@keyframes vehicleBgPulse {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 0.7; }
}

.section-vehicle .container {
    position: relative;
    z-index: 2;
}

/* Header avec machine à écrire */
.vehicle-header {
    text-align: center;
    margin-bottom: var(--space-2xl, 3rem);
    position: relative;
}

.vehicle-typewriter {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    white-space: nowrap;
    font-weight: 800;
    letter-spacing: 0.5px;
    font-size: clamp(1.35rem, 2vw, 2.1rem);
    margin-bottom: 0.5rem;
}

.vehicle-typewriter-text {
    background: linear-gradient(90deg, 
        #ff6b6b, 
        #ffa726, 
        #ffee58, 
        #4caf50, 
        #2196f3, 
        #9c27b0);
    background-size: 400% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: vehicleGradient 6s ease infinite, vehicleTextGlow 2s ease-in-out infinite alternate;
}

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

@keyframes vehicleTextGlow {
    from { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3)); }
    to { filter: drop-shadow(0 0 15px rgba(34, 211, 238, 0.5)); }
}

.vehicle-typewriter-cursor {
    color: #22d3ee;
    font-weight: 300;
    animation: vehicleBlink 1s step-end infinite, vehicleCursorPulse 2s ease-in-out infinite;
}

@keyframes vehicleBlink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

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

.vehicle-title-accent {
    display: block;
    margin-top: 0.5rem;
    font-weight: 800;
    font-size: clamp(1.2rem, 1.8vw, 1.8rem);
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Container principal */
.vehicle-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl, 2.5rem);
    margin-bottom: var(--space-2xl, 3rem);
}

@media (min-width: 1024px) {
    .vehicle-container {
        grid-template-columns: 1.2fr 0.8fr;
        align-items: start;
    }
}

/* Galerie */
.vehicle-gallery {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg, 18px);
    padding: var(--space-lg, 1.25rem);
    backdrop-filter: blur(20px);
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.vehicle-gallery::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, 
        transparent 30%, 
        rgba(34, 211, 238, 0.05) 50%, 
        transparent 70%);
    animation: vehicleShine 3s linear infinite;
    pointer-events: none;
}

@keyframes vehicleShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.vehicle-gallery-main {
    position: relative;
    height: 400px;
    border-radius: var(--radius-md, 14px);
    overflow: hidden;
    margin-bottom: var(--space-md, 1rem);
    background: rgba(0, 0, 0, 0.3);
}

.vehicle-media-item {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(0.98);
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.vehicle-media-item.is-active {
    opacity: 1;
    transform: scale(1);
    z-index: 1;
}

.vehicle-media-item img,
.vehicle-media-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vehicle-media-item[data-type="video"]::after {
    content: "▶";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    pointer-events: none;
    transition: all 0.3s ease;
}

.vehicle-media-item[data-type="video"]:hover::after {
    background: rgba(34, 211, 238, 0.9);
    transform: translate(-50%, -50%) scale(1.1);
}

/* Miniatures */
.vehicle-thumbs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: var(--space-md, 1rem);
}

.vehicle-thumb {
    width: 70px;
    height: 70px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    padding: 0;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.vehicle-thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, 
        rgba(34, 211, 238, 0.3), 
        rgba(59, 130, 246, 0.3));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.vehicle-thumb img,
.vehicle-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vehicle-thumb:hover {
    transform: translateY(-4px) scale(1.05);
    border-color: rgba(34, 211, 238, 0.5);
    box-shadow: 0 10px 20px rgba(34, 211, 238, 0.2);
}

.vehicle-thumb:hover::before {
    opacity: 1;
}

.vehicle-thumb.is-active {
    border-color: #22d3ee;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.3);
}

.vehicle-thumb[data-type="video"]::after {
    content: "▶";
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Contrôles */
.vehicle-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: var(--space-md, 1rem);
}

.vehicle-nav {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.vehicle-nav:hover {
    transform: scale(1.1);
    background: rgba(34, 211, 238, 0.2);
    border-color: #22d3ee;
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.3);
}

.vehicle-dots {
    display: flex;
    gap: 0.5rem;
}

.vehicle-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.vehicle-dot:hover {
    background: rgba(34, 211, 238, 0.7);
    transform: scale(1.2);
}

.vehicle-dot.is-active {
    background: #22d3ee;
    transform: scale(1.3);
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.5);
}

/* Indicateurs média */
.vehicle-media-indicators {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: var(--space-md, 1rem);
}

.media-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.media-indicator:hover {
    background: rgba(34, 211, 238, 0.1);
    border-color: rgba(34, 211, 238, 0.3);
    transform: translateY(-2px);
}

.media-indicator svg {
    color: #22d3ee;
}

/* Informations */
.vehicle-info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Prix */
.vehicle-price {
    border-radius: var(--radius-lg, 18px);
    padding: 1.5rem;
    border: 2px solid rgba(139, 92, 246, 0.4);
    background: linear-gradient(135deg, 
        rgba(34, 211, 238, 0.15), 
        rgba(139, 92, 246, 0.2));
    text-align: center;
    position: relative;
    overflow: hidden;
}

.vehicle-price::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: vehiclePriceShine 3s linear infinite;
}

@keyframes vehiclePriceShine {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.vehicle-price-label {
    font-size: 0.9rem;
    letter-spacing: 2px;
    opacity: 0.9;
    font-weight: 700;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 1;
}

.vehicle-price-main {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0.5rem 0;
    position: relative;
    z-index: 1;
}

.vehicle-price-currency {
    font-size: 1.2rem;
    opacity: 0.85;
}

.vehicle-price-amount {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 900;
    background: linear-gradient(90deg, #22d3ee, #8b5cf6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.vehicle-price-sub {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.vehicle-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff6b6b, #ffd93d);
    color: #0f172a;
    font-weight: 800;
    font-size: 0.85rem;
    animation: vehicleBadgePulse 2s ease-in-out infinite;
}

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

.vehicle-old-price {
    opacity: 0.75;
    text-decoration: line-through;
    font-size: 0.9rem;
}

/* Spécifications */
.vehicle-specs,
.vehicle-features,
.vehicle-timer {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg, 18px);
    padding: 1.25rem;
    backdrop-filter: blur(10px);
}

.vehicle-block-title {
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    color: #22d3ee;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.vehicle-spec-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (max-width: 520px) {
    .vehicle-spec-grid {
        grid-template-columns: 1fr;
    }
}

.vehicle-spec {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.vehicle-spec::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, 
        rgba(34, 211, 238, 0.1), 
        transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.vehicle-spec:hover {
    transform: translateY(-4px);
    background: rgba(34, 211, 238, 0.1);
    border-color: rgba(34, 211, 238, 0.3);
    box-shadow: 0 10px 20px rgba(34, 211, 238, 0.1);
}

.vehicle-spec:hover::before {
    opacity: 1;
}

.vehicle-spec-icon {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.vehicle-spec h4 {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
}

.vehicle-spec p {
    margin: 0;
    opacity: 0.8;
    font-size: 0.9rem;
}

/* Liste d'équipements */
.vehicle-feature-list {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.5rem;
    opacity: 0.9;
}

.vehicle-feature-list li {
    position: relative;
    padding-left: 0.5rem;
}

.vehicle-feature-list li::before {
    content: "✓";
    position: absolute;
    left: -1.1rem;
    color: #22d3ee;
    font-weight: bold;
}

/* Actions */
.vehicle-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .vehicle-actions {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Timer */
.vehicle-timer {
    text-align: center;
}

.vehicle-timer-title {
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: rgba(255, 255, 255, 0.95);
}

.vehicle-timer-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.vehicle-date {
    min-width: 40px;
    text-align: center;
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
    font-weight: 700;
}

.vehicle-date-sep {
    opacity: 0.7;
}

.vehicle-timer-countdown {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.vehicle-time {
    min-width: 50px;
    text-align: center;
    padding: 0.5rem;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-weight: 900;
    font-size: 1.2rem;
    color: #22d3ee;
}

.vehicle-sep {
    font-weight: 900;
    font-size: 1.2rem;
    opacity: 0.85;
}

/* Stats */
.vehicle-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    max-width: 600px;
    margin: 0 auto;
}

@media (min-width: 640px) {
    .vehicle-stats {
        grid-template-columns: repeat(4, 1fr);
    }
}

.vehicle-stat {
    text-align: center;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg, 18px);
    transition: all 0.3s ease;
}

.vehicle-stat:hover {
    transform: translateY(-5px);
    border-color: rgba(34, 211, 238, 0.3);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.vehicle-stat-number {
    font-size: 2rem;
    font-weight: 800;
    color: #22d3ee;
    margin-bottom: 0.25rem;
}

.vehicle-stat-label {
    font-size: 0.85rem;
    opacity: 0.8;
}

/* Modals */
.vehicle-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 1rem;
}

.vehicle-modal.is-open {
    display: flex;
    animation: vehicleModalFadeIn 0.3s ease;
}

@keyframes vehicleModalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.vehicle-modal-card {
    width: min(600px, 96vw);
    max-height: 90vh;
    overflow: auto;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 18px;
    padding: 1.5rem;
    position: relative;
    box-shadow: 0 35px 70px rgba(0, 0, 0, 0.5);
}

.vehicle-modal-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 1.6rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.vehicle-modal-close:hover {
    background: rgba(34, 211, 238, 0.2);
    border-color: #22d3ee;
    transform: rotate(90deg);
}

.vehicle-zoom-content {
    width: 100%;
    max-height: 70vh;
    overflow: hidden;
    border-radius: 14px;
}

.vehicle-zoom-image,
.vehicle-zoom-video {
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
    display: block;
}

.vehicle-form .form-group {
    margin-bottom: 1rem;
}

.vehicle-form label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.vehicle-form input,
.vehicle-form textarea {
    width: 100%;
    padding: 0.5rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.3);
    color: white;
    font: inherit;
}

/* Particules */
.vehicle-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.vehicle-particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: vehicleFloat 20s ease-in-out infinite;
}

@keyframes vehicleFloat {
    0%, 100% { 
        transform: translate3d(0, 0, 0) rotate(0deg); 
        opacity: 0.1;
    }
    25% { 
        transform: translate3d(20px, -40px, 0) rotate(90deg); 
        opacity: 0.3;
    }
    50% { 
        transform: translate3d(-30px, -60px, 0) rotate(180deg); 
        opacity: 0.1;
    }
    75% { 
        transform: translate3d(40px, -20px, 0) rotate(270deg); 
        opacity: 0.3;
    }
}

/* Animation reveal */
.vehicle-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.vehicle-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Classes pour body */
body.vehicle-no-scroll {
    overflow: hidden;
}

/* Respecter les préférences de mouvement */
@media (prefers-reduced-motion: reduce) {
    .vehicle-typewriter-text,
    .vehicle-typewriter-cursor,
    .vehicle-particle,
    .vehicle-gallery::before,
    .vehicle-price::before,
    .vehicle-badge,
    .vehicle-reveal {
        animation: none !important;
        transition: none !important;
    }
    
    .vehicle-reveal {
        opacity: 1;
        transform: none;
    }
}

/* --- FIX: boutons media = pas de styles par défaut --- */
.vehicle-media-item{
  border: 0;
  padding: 0;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
}
.vehicle-media-item:focus-visible,
.vehicle-thumb:focus-visible,
.vehicle-dot:focus-visible,
.vehicle-nav:focus-visible{
  outline: 2px solid rgba(34,211,238,.8);
  outline-offset: 3px;
}

/* --- FIX: rien ne doit bloquer les clics --- */
.section-vehicle::before,
.vehicle-particles,
.vehicle-gallery::before{
  pointer-events: none;
}

/* --- OPTIONNEL: tu peux supprimer ceci si tu veux, car on utilisera ScrollLock (no-scroll) --- */
/* body.vehicle-no-scroll { overflow: hidden; } */