:root {
    --primary-color: #4a90e2;
    --secondary-color: #64ffda;
    --background-color: #0a192f;
    --text-color: #e6f1ff;
    --border-color: #233554;
    
    /* New Colors */
    --success-color: #28a745;
    --warning-color: #ff9800;
    --error-color: #ff4d4f;
    --info-color: #87CEEB;
    --highlight-color: #FFD700;
  }
  
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Roboto:wght@300;400;700&display=swap');

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

h1, h2, h3 {
    margin-bottom: 20px;
}
h2 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2.5rem;
}
p {
    margin-bottom: 15px;
    line-height: 1.6;
}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
}
body {
    margin: 0;
    padding: 0;
    background-color: #0a192f;
    color: #e6f1ff;
    padding-top: 70px;
    /* Needed for .site-footer { margin-top:auto } so footer sits at bottom of
       viewport on short pages but doesn't overlay content (A07-11 fix). */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 50px;
}


.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: #0f172a;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1000;
}

.navbar .container {
    max-width: 100%; /* Important pour utiliser toute la largeur */
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.logo {
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: none;
}

.nav-links a {
    color: white;
    text-decoration: none;
    margin-left: 1rem;
}


.btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
}

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

.btn-secondary {
    background-color: transparent;
    color: var(--secondary-color);
    border: 2px solid var(--secondary-color);
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn-primary:hover {
    background-color: #3a7bc8;
}

.hero {
    position: relative;
    width: 100vw; /* Pleine largeur de la fenêtre */
    margin-left: calc(-50vw + 50%); /* Centrage négatif */
    margin-right: calc(-50vw + 50%);
    height: calc(100vh - 70px); /* Hauteur totale moins la navbar */
    overflow: hidden;
}
.hero .container {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
    position: relative;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/static/assets/images/background.png');
    background-size: cover;
    background-position: center;
    z-index: 0;
}
.gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(10, 25, 47, 0.95) 0%,
        rgba(10, 25, 47, 0.7) 100%
    );
    z-index: 1;
}

.hero-content,
.container {
    position: relative;
    z-index: 2;
}

/* Pour s'assurer que tout le contenu est au-dessus du background */
.section {
    padding: 120px 0; /* Augmentation du padding vertical */
    margin: 60px 0; /* Ajout d'une marge entre les sections */
    position: relative;
}
/* Espacement spécifique pour les sections avec fond */
.section.why-titanshield,
.section.how-it-works {
    margin: 80px 0;
    background: rgba(17, 24, 39, 0.3); /* Fond subtil pour différencier */
    border-top: 1px solid var(--border-subtle, #e8e6e1);
    border-bottom: 1px solid var(--border-subtle, #e8e6e1);
}

/* Ajustement des titres de section */
.section-header {
    margin-bottom: 60px;
}

.section-header h2 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.section-header p {
    color: var(--text-secondary);
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

/* Espacement pour la grille de features */
.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin: 60px auto;
    max-width: 800px;
}
/* Ajustement du How It Works */
.process-flow {
    margin: 80px 0;
    padding: 40px 0;
}

.process-step {
    padding: 0 30px;
}

.process-arrow {
    margin: 0 40px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .section {
        padding: 80px 0;
        margin: 40px 0;
    }

    .section-header {
        margin-bottom: 60px;
    }

    .section-header h2 {
        font-size: 2.5rem;
    }

    .process-flow {
        margin: 60px 0;
    }

    .process-step {
        padding: 0 20px;
    }
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(10, 25, 47, 0.95) 0%,
        rgba(10, 25, 47, 0.7) 100%
    );
    z-index: 1;
}
.section:not(.hero) {
    padding: 120px 0;
    margin: 60px auto;
    max-width: 1400px;
    padding: 0 50px;
}


.cta-buttons {
    z-index: 11;
    position: relative;
}

.btn {
    position: relative;
    z-index: 12;
}

.hero h1 {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.hero p {
    font-size: 1.5rem;
    margin-bottom: 2rem;
}

.section-title {
    text-align: center;
    margin-bottom: 40px;
}

.features {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.feature {
    flex-basis: calc(33.333% - 20px);
    text-align: center;
    margin-bottom: 40px;
}

.feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px;
    background: var(--bg-secondary, #f5f4f0);
    border-radius: 20px;
    transition: transform 0.3s ease;
}

.feature-item i {
    font-size: 3em;
    color: #64ffda;
    margin-bottom: 20px;
}
.feature i {
    font-size: 3em;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.pricing-section {
    position: relative;
    padding: 80px 0;
    background: var(--background);
}

.pricing-tabs {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 48px;
}

.pricing-tabs .tab-btn {
    padding: 12px 24px;
    border-radius: 8px;
    background: rgba(79, 70, 229, 0.1);
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.pricing-tabs .tab-btn.active {
    background: var(--primary-color);
    color: white;
}

.pricing-content {
    display: none;
}

.pricing-content.active {
    display: block;
}

.pricing-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 32px;
}

/* Style des cards */
.pricing-card {
    background: rgba(17, 24, 39, 0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 32px;
    position: relative;
}
.special-offers, .testimonials {
    padding: 60px 0;
}

.offer-grid, .testimonial-slider {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.offer-item, .testimonial-item {
    background-color: #112240;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
@media (max-width: 992px) {
    .pricing-cards {
        flex-wrap: wrap;
    }
    
    .pricing-card {
        flex-basis: calc(50% - 20px);
        margin-bottom: 20px;
    }
}

@media (max-width: 768px) {
    .pricing-card {
        flex-basis: 100%;
    }
}

#coming-soon {
    background-color: var(--background-color);
}

.coming-soon-features {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.contact-form {
    max-width: 600px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 5px;
}

input[type="text"],
input[type="email"],
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
}

textarea {
    height: 150px;
}

@media (max-width: 768px) {
    .features, .pricing-cards, .coming-soon-features {
        flex-direction: column;
    }

    .feature, .pricing-card {
        flex-basis: 100%;
    }
    
    .hero h1 {
        font-size: 3rem;
    }
    
    .hero p {
        font-size: 1.2rem;
    }
}

/* Timeline styles */
.timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

.timeline::after {
    content: '';
    position: absolute;
    width: 6px;
    background-color: var(--primary-color);
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
}

.timeline-item {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
}

.timeline-item::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    right: -17px;
    background-color: var(--background-color);
    border: 4px solid var(--primary-color);
    top: 15px;
    border-radius: 50%;
    z-index: 1;
}

.timeline-item:nth-child(even) {
    left: 50%;
}

.timeline-item:nth-child(odd) {
    left: 0;
}

.timeline-content {
    padding: 20px 30px;
    background-color: var(--background-color);
    position: relative;
    border-radius: 6px;
}

/* Process Flow */
.process-flow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 50px;
}

.process-step {
    text-align: center;
    flex: 1;
}

.step-icon {
    background-color: var(--primary-color);
    color: white;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 20px;
    font-size: 30px;
}

.process-arrow {
    font-size: 30px;
    color: var(--primary-color);
}

/* Tech Grid */
.tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.tech-item {
    background-color: var(--bg-secondary, #f5f4f0);
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    transition: transform 0.3s ease;
}

.tech-item:hover {
    transform: translateY(-10px);
}

.tech-item i {
    font-size: 40px;
    color: var(--primary-color);
    margin-bottom: 20px;
}

/* FAQ */
.faq-list {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background-color: var(--bg-secondary, #f5f4f0);
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 10px;
}

.faq-item h3 {
    margin-top: 0;
    color: var(--primary-color);
}

/* Offer Card */
.offer-card {
    background-color: var(--bg-secondary, #f5f4f0);
    padding: 40px;
    border-radius: 10px;
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.offer-card h3 {
    color: var(--primary-color);
    margin-bottom: 20px;
}

.offer-card ul {
    text-align: left;
    margin-bottom: 30px;
}

.offer-card .btn {
    font-size: 18px;
    padding: 15px 30px;
}

.tech-item.coming-soon {
    position: relative;
    overflow: hidden;
}

.tech-item.coming-soon::after {
    content: 'Bientôt disponible';
    position: absolute;
    top: 45px;
    right: -30px;
    background: var(--secondary-color);
    color: var(--background-color);
    padding: 5px 40px;
    transform: rotate(45deg);
    font-size: 12px;
    font-weight: bold;
}

.tech-item.coming-soon {
    opacity: 0.5;
    filter: grayscale(50%);
}


/* Early Access Program */
.beta-program {
    background: var(--surface);
    border-radius: 24px;
    padding: 48px;
    margin-top: 64px;
}

.beta-highlights {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 32px 0;
}

.highlight-item {
    text-align: center;
}

.highlight-item .number {
    font-size: 48px;
    font-weight: bold;
    color: var(--primary-color);
    display: block;
}

.highlight-item .text {
    color: var(--text-secondary);
    margin-top: 8px;
    display: block;
}

.beta-features ul {
    list-style: none;
    padding: 0;
    margin: 24px 0;
}

.beta-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 18px;
}

.beta-features li i {
    color: var(--primary-color);
    font-size: 24px;
}

/* Why TitanShield Section */
.why-titanshield {
    text-align: center;
    padding: 80px 0;
}

.why-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.why-feature-icon {
    width: 80px;
    height: 80px;
    background: var(--primary-color);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.why-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    max-width: 1200px;
    margin: 60px auto 0;
    padding: 0 20px;
}

.why-feature-icon i,
.why-feature-icon svg {
    font-size: 32px;
    color: white;
}

.why-feature-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.why-feature-description {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-secondary);
    max-width: 280px;
    margin: 0 auto;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin: 60px auto;
    max-width: 800px;
}

.feature-item {
    text-align: center;
}

.feature-icon {
    width: 80px;
    height: 80px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}
.feature-description {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.5;
}

.feature-title {
    font-size: 1.25rem;
    margin-bottom: 10px;
    color: var(--text-primary);
}

.feature-icon i {
    font-size: 32px;
    color: white;
}

.feature-item h3 {
    margin-bottom: 16px;
    font-size: 24px;
}

.feature-item p {
    color: var(--text-secondary);
    line-height: 1.6;
}



/* Grille "Why TitanShield?" */
.why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    max-width: 1000px;
    margin: 60px auto;
}

.why-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.why-icon {
    width: 80px;
    height: 80px;
    background: var(--primary-color);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.why-title {
    font-size: 1.25rem;
    margin-bottom: 10px;
    color: var(--text-primary);
}

.why-description {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    max-width: 200px;
    margin: 0 auto;
}

.process-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 48px;
    padding: 0 48px;
}

.process-step {
    text-align: center;
    flex: 1;
}

.step-number {
    font-size: 24px;
    color: var(--primary-color);
    margin-bottom: 16px;
}

.step-icon {
    width: 96px;
    height: 96px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.step-icon i {
    font-size: 40px;
    color: white;
}

.process-arrow {
    color: var(--primary-color);
    font-size: 24px;
    margin: 0 32px;
}

.features-section {
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.why-section {
    text-align: center;
    padding: 120px 0;
    background: rgba(17, 24, 39, 0.3);
}
.why-features-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.why-feature-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px;
    background: var(--bg-secondary, #f5f4f0);
    border-radius: 16px;
    transition: transform 0.3s ease;
}
.why-feature-card:hover {
    transform: translateY(-5px);
}

/* Style des icônes */
.why-feature-icon {
    width: 64px;
    height: 64px;
    background: var(--primary-color);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.why-feature-icon i {
    font-size: 24px;
    color: white;
}

/* Textes */
.why-feature-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.why-feature-text {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Section CTA */
.titan-cta-section {
    position: relative;
    padding: 100px 0;
    background: linear-gradient(180deg, 
        rgba(17, 24, 39, 0.8) 0%,
        rgba(79, 70, 229, 0.1) 100%);
    overflow: hidden;
}

.titan-cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%234f46e5' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
}

.titan-cta-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

.titan-cta-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.titan-cta-title {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #fff 0%, #a5b4fc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.titan-cta-subtitle {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: 3rem;
}

.titan-trust-indicators {
    display: flex;
    justify-content: center;
    gap: 4rem;
    margin: 3rem 0;
}

.titan-trust-item {
    text-align: center;
}

.titan-trust-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    animation: titanCountUp 2s ease-out forwards;
}

.titan-trust-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.titan-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin: 2rem 0;
}

.titan-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.titan-cta-btn i {
    font-size: 1.2rem;
}

.titan-cta-btn-primary {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3);
}

.titan-cta-btn-secondary {
    background: transparent;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.titan-cta-btn:hover {
    transform: translateY(-2px);
}

.titan-trusted-by {
    margin-top: 4rem;
    text-align: center;
}

.titan-trusted-label {
    display: block;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.titan-company-logos {
    display: flex;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
}

.titan-logo-item {
    color: var(--text-secondary);
    font-size: 1.1rem;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.titan-logo-item:hover {
    opacity: 1;
}

@keyframes titanCountUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .titan-cta-title {
        font-size: 2.5rem;
    }

    .titan-trust-indicators {
        flex-direction: column;
        gap: 2rem;
    }

    .titan-cta-buttons {
        flex-direction: column;
    }

    .titan-company-logos {
        gap: 1.5rem;
    }

    .titan-cta-btn {
        width: 100%;
        justify-content: center;
    }
}


/* Dashboard Styles */
.titan-dashboard {
    padding: 2rem;
    margin-top: 70px; /* Pour éviter le chevauchement avec la navbar */
}

.titan-welcome-banner {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

.titan-welcome-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.titan-welcome-content {
    position: relative;
    z-index: 1;
}

.titan-welcome-banner h1 {
    color: white;
    margin: 0;
    font-size: 2.5rem;
}

.titan-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.titan-stat-card {
    background: var(--surface);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.titan-stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.titan-stat-icon {
    width: 48px;
    height: 48px;
    background: rgba(79, 70, 229, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--primary-color);
}

.titan-stat-content {
    flex: 1;
}

.titan-stat-content h3 {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0 0 0.5rem 0;
}

.titan-stat-value {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text-primary);
}

.titan-actions {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.titan-action-button {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.titan-action-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .titan-dashboard {
        padding: 1rem;
    }

    .titan-welcome-banner {
        padding: 1.5rem;
    }

    .titan-welcome-banner h1 {
        font-size: 2rem;
    }

    .titan-stats-grid {
        grid-template-columns: 1fr;
    }
}

.titan-welcome-banner {
    background: rgba(17, 24, 39, 0.3); /* Fond plus subtil */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.titan-welcome-content h1 {
    color: #ffffff; /* Blanc pur pour meilleur contraste */
    margin: 0;
    font-size: 2.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Ombre pour meilleure lisibilité */
}

/* Petite animation au chargement */
.titan-welcome-content {
    animation: fadeInDown 0.6s ease-out;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.metric-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem; /* Augmentation du padding pour éviter que le graphique touche les bords */
}

#vulnerabilityBubbles {
    display: block;
    margin: 0 auto; /* Centre le graphique horizontalement */
    width: 100%; /* Adapte la taille au conteneur */
    max-width: 100%; /* Empêche le débordement */
    height: auto; /* Maintient le ratio du canvas */
}

canvas {
    box-sizing: border-box;
}


.vulnerability-tooltip {
    position: absolute;
    padding: 10px;
    background: rgba(0,0,0,0.8);
    color: white;
    border-radius: 4px;
    font-size: 12px;
    pointer-events: none;
    z-index: 1000;
}

.platform-label {
    position: absolute;
    padding: 5px 10px;
    background: rgba(0,0,0,0.7);
    color: white;
    border-radius: 4px;
    font-size: 12px;
    z-index: 1000;
}

.galaxy-legend {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,0.7);
    padding: 10px;
    border-radius: 4px;
    color: white;
    font-size: 12px;
    z-index: 1000;
}

.severity-indicator {
    display: flex;
    align-items: center;
    margin: 5px 0;
}

.severity-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
}

/* Layout principal */
.page-wrapper {
    display: flex;
    flex: 1;
    min-height: 0;
    background: var(--background-color);
}

.page-wrapper.with-sidebar {
    padding-left: 280px; /* Largeur du sidebar */
}

/* Navbar styling */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: rgba(10, 25, 47, 0.95);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0 1.5rem;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    flex-shrink: 1;
}
.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

/* Mobile: shrink navbar container padding, hide "TitanShield" wordmark,
   allow both brand and end to flex-shrink so no overflow at 375 (A07/A03/A06:
   navbar-end was landing at right=442 on a 375 viewport). */
@media (max-width: 640px) {
    .navbar .container {
        padding: 0 0.75rem;
    }
    .navbar-brand {
        gap: 0.5rem;
        flex-shrink: 1;
        min-width: 0;
    }
    .navbar-brand .logo span,
    .navbar-brand .logo > strong,
    .navbar-brand > .logo > span {
        /* Hide wordmark, keep logo mark (img) visible */
        display: none;
    }
}

/* Sidebar styling */
/* État par défaut de la sidebar */
.sidebar {
    width: 280px;
    position: fixed;
    left: 0;
    top: 60px;
    bottom: 0;
    background: #0f172a;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease;
    transform: translateX(-100%); /* Caché par défaut sur mobile */
}

.sidebar-nav {
    padding: 1.5rem 0;
}

.nav-item {
    display: flex;
    align-items: center;
    padding: 0.65rem 1.25rem;
    color: var(--text-color);
    text-decoration: none;
    transition: background-color 0.2s;
    gap: 0.6rem;
    min-width: 0;
}
/* DA fix Apr 26: long labels were truncated to "Vulnerabiliti...", "Analysi...",
   "Custom Ru..". Three combined causes: sidebar too narrow, .nav-subtle-tag
   inline eats ~85px, badges (TEAM/PRO/SOON/BETA/NEW) eat ~50px. Allow 2-line
   wrap with tight line-height (FR friendly) - safer than ellipsis truncation. */
.nav-item > span,
.nav-item .nav-label {
    overflow: hidden;
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    /* 2026-07-16: line-clamp only breaks at whitespace, so a single long word
       ("Monitoring", or a longer FR label) could not wrap and was clipped
       mid-letter by .sidebar-nav's overflow-x:hidden. Allow a mid-word break
       as a last resort: a wrapped label is readable, a clipped one is a bug. */
    overflow-wrap: anywhere;
}
/* Hide the descriptive subtle tag on sidebar nav - text is implicit + parent
   <a> has full tooltip on hover via title= attribute. */
.sidebar-nav .nav-item .nav-subtle-tag {
    display: none;
}
/* 2026-08-14: this rule set nav badges to 0.55rem (8.8px) with !important AND
   a higher specificity than the `.nav-badge` component itself, so it quietly
   won: TITAN+ rendered at 8.8px while BETA rendered at 11.2px, which is half
   of why the badges did not look like each other. It also broke DESIGN.md's
   own 11px floor for functional text, and survived the floor sweep earlier
   today because that sweep only looked at rules starting with `.nav-badge`.
   Size and padding now belong to the single component definition in
   v4-theme.css. Only the flex behaviour stays here. */
.sidebar-nav .nav-item .nav-badge {
    flex-shrink: 0;
}

.nav-item i {
    width: 20px;
    text-align: center;
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.nav-item.active {
    background: var(--primary-color);
    color: white;
}

.nav-separator {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 1rem 1.5rem;
}

/* Modern Sidebar Navigation Styles */
.nav-section {
    margin-bottom: 1rem;
}

.nav-section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1.5rem;
    margin-bottom: 0.25rem;
}

.nav-section-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.nav-section-line {
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.nav-icon-wrapper {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--bg-secondary, #f5f4f0);
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.2s ease;
}

.nav-icon-wrapper i {
    font-size: 0.875rem;
}

.nav-item:hover .nav-icon-wrapper {
    background: rgba(0, 217, 114, 0.15);
    color: #00d972;
}

.nav-item.active .nav-icon-wrapper {
    /* Brand sweep: was cyan->purple gradient (#00D4FF -> #7B61FF) = off-brand.
       Brand green with dark glyph for the active sidebar item. */
    background: linear-gradient(135deg, #00d972 0%, #00b85f 100%);
    color: #062a17;
    box-shadow: 0 4px 12px rgba(0, 217, 114, 0.3);
}

.nav-item-primary {
    margin-bottom: 1rem;
    padding: 1rem 1.5rem !important;
}

.nav-item-primary .nav-icon-wrapper {
    width: 40px;
    height: 40px;
}

.nav-item-primary .nav-icon-wrapper i {
    font-size: 1.1rem;
}

.nav-item-glow {
    display: none;
}

.nav-badge {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-left: auto;
    /* RE-FIX 2026-08-02 (Wajdi: "still not centered" after the 2026-07-31 fix
       below): that fix was never actually correct. Measured live at the
       sidebar's real 280px width (both 1-line labels like "Architecture" and
       genuinely-wrapped 2-line ones like FR "Surface d'attaque"/"Règles
       Personnalisées"): `align-self: flex-start; margin-top: 2px` put the
       badge's vertical center ~6-10px ABOVE the label's/row's center in EVERY
       case, 1-line or 2-line -- it was never centered, just less obviously
       off for the 2-line case it was written for. .nav-item already has
       `align-items: center`; the simplest correct fix is to stop fighting
       that default. For a wrapped 2-line label this centers the badge against
       the full row height (sits between the two lines), which reads as
       genuinely centered - unlike the previous always-too-high placement. */
    align-self: center;
}

/* The five nav-badge colour variants lived here too (green/amber/violet/blue/
   grey) and were fully overridden by v4-theme.css !important, so this was a
   dead second badge system sitting next to the live one -- the kind of drift
   that produced two different shapes on the same sidebar. Deleted 2026-08-14.
   The single definition is in v4-theme.css. Do not re-add colours here. */

.navbar-end {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-left: auto; /* Force l'alignement à droite */
}

/* Mobile navbar collapse - A03+A04+A06 found .navbar-end extending to right=537
   on 320 viewports (217px off-screen). Below 640px we tighten gap, shrink
   language switcher to a single compact pill, hide user name text (keep avatar),
   and enforce 44×44 hit area on every interactive chrome element (WCAG 2.5.5). */
@media (max-width: 640px) {
    .navbar-end {
        gap: 0.4rem;
    }
    .navbar-end .lang-sep {
        margin: 0 0.15rem;
    }
    .navbar-end .lang-btn,
    .navbar-end .notification-bell,
    .navbar-end .user-menu-button {
        min-width: 44px;
        min-height: 44px;
        padding: 0.5rem;
    }
    .navbar-end .lang-btn {
        min-width: 32px; /* language is a short label - keep compact but padded */
        padding: 0.5rem 0.35rem;
    }
    /* Hide user name/email text on narrow; keep avatar only */
    .navbar-end .user-menu-button .user-info {
        display: none;
    }
    .navbar-end .user-menu-button .user-avatar-modern,
    .navbar-end .user-menu-button .user-avatar-large {
        min-width: 36px;
        min-height: 36px;
        width: 36px;
        height: 36px;
    }
}
@media (max-width: 420px) {
    .navbar-end {
        gap: 0.25rem;
    }
    /* Collapse lang switcher to icon-style: show current lang only */
    .navbar-end .lang-switcher .lang-btn:not(.active),
    .navbar-end .lang-switcher .lang-sep {
        display: none;
    }
    .navbar-end .lang-switcher .lang-btn.active {
        min-width: 36px;
    }
}

/* .notification-icon {
    color: var(--text-color);
    cursor: pointer;
    position: relative;
}

.user-menu {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    padding: 0.5rem;
} */
.notification-icon,
.user-menu {
    padding: 0.5rem;
    cursor: pointer;
}
.user-avatar {
    width: 32px;
    height: 32px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}



/* Responsive */
@media (max-width: 768px) {
    .page-wrapper.with-sidebar {
        padding-left: 0;
    }

    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.active {
        transform: translateX(0);
    }
}

/* Reset du container pour le dashboard */
.page-wrapper.with-sidebar .container {
    max-width: 100%;
    padding: 0 2rem;
    min-width: 0;
}

/* Ajustement du main content */
.main-content {
    flex: 1;
    width: 100%;
    min-width: 0; /* Prevent flex item from expanding beyond container */
    min-height: calc(100vh - 60px);
    margin-top: 60px;
    background: var(--background-color);
    padding: 2rem;
    /* Footer is now static (A07-11 fix) so no padding-bottom reserve needed */
}

/* Mobile: collapse nested padding. Prod audit found main-content + .container
   + .dashboard-container each stacked 2rem padding → 192px wasted on a 375
   viewport (plan card rendered at only 183px wide). Reset to 0.75rem at xs. */
@media (max-width: 640px) {
    .main-content {
        padding: 1rem 0.75rem !important; /* !important needed - other .main-content rules override */
    }
    .page-wrapper.with-sidebar .container,
    main .container {
        padding: 0 !important;
    }
    .dashboard-container {
        padding: 0.75rem !important; /* overrides inline padding:2rem */
    }
    /* Inline style on recent-scans-section sets padding:2rem which eats 64px at xs.
       Also any dynamically-rendered scan card children should shrink to fit. */
    .recent-scans-section {
        padding: 1rem !important;
    }
    #recentScansContainer > div {
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

/* Correction du dropdown */
.user-dropdown {
    position: relative;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    min-width: 200px;
    padding: 0.5rem 0;
    z-index: 1000;
    margin-top: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.dropdown-menu.active {
    display: block;
    animation: fadeIn 0.2s ease;
}

.dropdown-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    color: var(--text-color);
    text-decoration: none;
    gap: 0.75rem;
    transition: background-color 0.2s;
}

.dropdown-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.dropdown-item.text-red-500 {
    color: #ef4444;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Styles spécifiques pour la page de landing */
body.landing-page .container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Styles spécifiques pour le dashboard */
body.dashboard-page .container {
    max-width: 100%;
}
/* Navbar Updates */
.navbar {
    background-color: #0a192f;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    height: 60px;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sidebar-toggle {
    padding: 0.5rem;
    background: none;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Ensure a 40px minimum tap target on mobile (WCAG 2.5.5) */
    min-width: 40px;
    min-height: 40px;
}

.sidebar-toggle:hover {
    color: var(--primary-color);
}

/* Sidebar Updates */
.sidebar {
    position: fixed;
    left: 0;
    top: 60px;
    bottom: 0;
    width: 280px;
    background: #0f172a;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 10;
}

.sidebar.active {
    transform: translateX(0);
}

/* Sur desktop */
@media (min-width: 768px) {
    .sidebar {
        transform: translateX(0); /* Visible par défaut */
    }

    /* Quand le menu est collapsé */
    body.sidebar-collapsed .sidebar {
        transform: translateX(-100%);
    }
    
    /* Ajuster le contenu principal quand le menu est collapsé */
    body.sidebar-collapsed .main-content {
        margin-left: 0;
    }
}

.nav-item {
    display: flex;
    align-items: center;
    padding: 0.875rem 1.5rem;
    color: var(--text-color);
    text-decoration: none;
    gap: 1rem;
    transition: all 0.2s;
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.nav-item.active {
    background: var(--primary-color);
    color: white;
}

/* Dropdown Updates */
.user-dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background: #0f172a;
    border-radius: 8px;
    min-width: 200px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s;
    z-index: 1000;
}

.dropdown-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0.5rem 0;
}

/* Main Content Updates */
.main-content {
    margin-left: 0;
    transition: margin-left 0.3s ease;
    width: 100%;
}

@media (min-width: 768px) {
    .main-content {
        margin-left: 280px;
    }
}

.container {
    padding: 2rem;
}

/* Styles dashboard uniquement visibles si authentifié */
.dashboard .dashboard-wrapper {
    display: flex;
    min-height: calc(100vh - 60px);
    margin-top: 60px;
}

.dashboard .sidebar {
    width: 280px;
    min-width: 280px;
    background: #0f172a;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    height: calc(100vh - 60px);
    position: fixed;
    top: 60px;
    left: 0;
}

.dashboard .main-content {
    flex: 1;
    padding: 2rem;
    margin-left: 280px;
}

.dashboard .nav-item {
    display: flex;
    align-items: center;
    padding: 1rem 1.5rem;
    color: var(--text-color);
    text-decoration: none;
    transition: background-color 0.2s;
    gap: 0.75rem;
}

.dashboard .nav-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.dashboard .nav-item.active {
    background: var(--primary-color);
    color: white;
}

/* Responsive pour le dashboard */
@media (max-width: 768px) {
    .dashboard .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    .dashboard .sidebar.active {
        transform: translateX(0);
    }

    .dashboard .main-content {
        margin-left: 0;
    }
}

/* Style uniquement pour le conteneur du formulaire beta */
#beta_signup_form {
    background: rgba(17, 24, 39, 0.3);
    border-radius: 16px;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Grille de formulaire */
#beta_form_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
/* Style uniforme pour les labels */
#beta_form_grid label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-color);
    opacity: 0.9;
}
/* Groupes de formulaire spécifiques */
#beta_form_grid .beta_form_group {
    position: relative;
}

#beta_form_grid .beta_form_group.full_width {
    grid-column: 1 / -1;
}

.beta_form_group {
    margin-bottom: 24px;
}

/* Style des inputs */
#beta_form_grid input,
#beta_form_grid select,
#beta_form_grid textarea {
    width: 100%;
    padding: 12px 16px;
    background: var(--border-subtle, #e8e6e1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--text-color);
    font-size: 1rem;
    margin-top: 8px;
}

/* Section de consentement */
#beta_tech_stack {
    min-height: 200px !important;
    background: var(--border-subtle, #e8e6e1) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
#beta_tech_stack option {
    padding: 8px 12px;
    background: #0a192f;
    color: var(--text-color);
}
/* Style du conteneur de consentement */
#beta_consent_container {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: var(--bg-secondary, #f5f4f0);
    border-radius: 12px;
    margin: 24px 0;
}

#beta_consent_container input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 3px;
}


/* Bouton de soumission */
#beta_submit_button {
    background: var(--primary-color);
    color: white;
    padding: 12px 32px;
    border-radius: 12px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s ease;
    width: 100%;
}

#beta_submit_button:hover {
    transform: translateY(-2px);
}
#beta_consent_container label {
    margin: 0;
    line-height: 1.5;
}
#beta_form_grid input:focus,
#beta_form_grid select:focus,
#beta_form_grid textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.1);
}
.hero-3d-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none; /* Pour ne pas interférer avec les éléments en dessous */
}

.network-animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.node {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(79, 70, 229, 0.6);
    border-radius: 50%;
    pointer-events: none;
}

.connection {
    position: absolute;
    height: 1px;
    transform-origin: left center;
    background: linear-gradient(90deg, rgba(79, 70, 229, 0.4), transparent);
    pointer-events: none;
}

.pulse {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #4f46e5;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
}

.notification-icon {
    position: relative;
    cursor: pointer;
}

.notification-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--error-color);
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 12px;
    font-weight: bold;
}

.notification-count.hidden {
    display: none;
}

.notification-panel {
    display: none;
    position: absolute;
    top: 100%;
    right: -10px;
    width: 320px;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-top: 10px;
}

.notification-panel.active {
    display: block;
}

.notification-header {
    padding: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notification-list {
    max-height: 400px;
    overflow-y: auto;
}

.notification-item {
    padding: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: background-color 0.2s;
}

.notification-item:hover {
    background: var(--bg-secondary, #f5f4f0);
}

.notification-item.unread {
    background: rgba(79, 70, 229, 0.1);
}

.notification-footer {
    padding: 15px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.view-all-notifications {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    color: var(--primary-color);
    text-decoration: none;
    transition: all 0.2s;
}

.view-all-notifications:hover {
    background: rgba(79, 70, 229, 0.1);
    transform: translateY(-1px);
}

.view-all-notifications i {
    font-size: 14px;
    transition: transform 0.2s;
}

.view-all-notifications:hover i {
    transform: translateX(4px);
}



/* Card Containers */
.auth-container,
.reset-container {
    max-width: 500px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.auth-card,
.reset-card {
    background: rgba(15, 23, 42, 0.6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Card Header */
.card-icon {
    width: 64px;
    height: 64px;
    background: rgba(0, 217, 114, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.card-icon i {
    font-size: 24px;
    color: #00d972; /* brand green - was off-brand indigo #4f46e5 (purple shield) */
}

/* Form Elements */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    color: var(--text-primary, #1a1a1a);
    margin-bottom: 0.5rem;
    font-weight: 500;
}

/* Input Styles */
.form-group input,
.form-group select {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}

/* Password Section */
.password-section {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.password-input-wrapper {
    position: relative;
    flex: 1;
}

.toggle-password {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 0.25rem;
    transition: color 0.3s ease;
    /* Tap-target fix (2026-08-01 responsive audit): the icon-only box was
       ~23x23px on phone - well under the ~40px minimum for reliable thumb
       taps. Grow the hit area via min-width/height + flex centering rather
       than the icon itself, so the eye glyph still looks the same size;
       the box overlaps into the input's own right padding (transparent,
       no border/background) so nothing else shifts visually. */
    min-width: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.generate-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1.25rem;
    background: rgba(0, 217, 114, 0.1);
    border: 1px solid rgba(0, 217, 114, 0.2);
    border-radius: 8px;
    color: #00d972; /* brand green - was off-brand indigo #4f46e5 */
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Password Strength */
.password-strength {
    margin-top: 1rem;
}

.strength-meter {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.meter-bar {
    height: 100%;
    width: 0;
    transition: all 0.3s ease;
}

/* Requirements */
.requirements {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(30, 41, 59, 0.4);
    border-radius: 8px;
}

.requirement {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #94a3b8;
    font-size: 0.85rem;
}

.requirement.valid {
    color: #007e40;
}

/* Submit Button */
.btn-submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem;
    background: #4f46e5;
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-submit:not(:disabled):hover {
    background: #4338ca;
    transform: translateY(-1px);
}

.btn-submit:disabled {
    background: #475569;
    cursor: not-allowed;
}


.cookie-notice {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(15, 23, 42, 0.97);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    padding: 0.75rem 1.5rem;
    z-index: 1000;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
    display: none;
}

/* Push page content up so cookie banner doesn't cover forms.
   Apr 2026: 70px was too short - on viewports <800px the buttons wrap to a
   second line and the banner is ~110px tall, hiding the page footer / last
   row of any data table. Bumped to 130px (banner height + small breathing
   room). On viewports >800px banner is ~80px so we still overshoot a bit;
   that's fine - better than overlap. */
body.has-cookie-notice {
    padding-bottom: 130px;
}
@media (min-width: 800px) {
    body.has-cookie-notice {
        padding-bottom: 90px;
    }
}

.cookie-notice.show {
    display: block;
}

.cookie-content {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.cookie-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.cookie-btn-secondary {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #e2e8f0 !important;
}

@media (max-width: 640px) {
    .cookie-content {
        gap: 0.75rem;
    }
    .cookie-actions {
        width: 100%;
        gap: 0.5rem;
    }
    .cookie-actions .cookie-btn {
        flex: 1 1 auto;
        min-width: 0;
        text-align: center;
    }
}

.cookie-content p {
    color: #e2e8f0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cookie-content i {
    color: #4f46e5;
}

.cookie-btn {
    background: #4f46e5;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.cookie-btn:hover {
    background: #4338ca;
}



.flash-message {
    margin-bottom: 1.5rem;
    padding: 1rem;
    border-radius: 8px;
    font-size: 0.95rem;
}

.flash-message .alert-content {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.flash-message i {
    margin-top: 0.2rem;
}

.flash-message.error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #fecaca;
}

.flash-message.warning {
    background: rgba(234, 179, 8, 0.1);
    border: 1px solid rgba(234, 179, 8, 0.2);
    color: #fef3c7;
}

.flash-message.success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
    color: #dcfce7;
}

.resend-form {
    margin-top: 0.75rem;
}

.resend-btn {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(234, 179, 8, 0.2);
    border: 1px solid rgba(234, 179, 8, 0.3);
    border-radius: 6px;
    color: #fef3c7;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.resend-btn:hover {
    background: rgba(234, 179, 8, 0.3);
}


/* Ajoutez ceci dans base.css */
.flash-messages {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 1100;
    width: 400px;
    max-width: calc(100vw - 40px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: all 0.3s ease;
}

.flash-messages.with-sidebar {
    right: 20px;
    padding-left: 280px; /* Largeur du sidebar */
}

.alert {
    position: relative;
    padding: 16px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.95);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    animation: slideInRight 0.5s ease forwards;
}

.alert.removing {
    animation: slideOutRight 0.5s ease forwards;
}

.alert-content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.alert-content i {
    font-size: 20px;
    flex-shrink: 0;
}

.alert-close {
    background: none;
    border: none;
    color: currentColor;
    padding: 4px;
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.2s ease;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.alert-close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
}

.alert-success {
    border-color: rgba(34, 197, 94, 0.2);
    background: rgba(34, 197, 94, 0.1);
    color: #dcfce7;
}

.alert-error {
    border-color: rgba(239, 68, 68, 0.2);
    background: rgba(239, 68, 68, 0.1);
    color: #fecaca;
}

.alert-warning {
    border-color: rgba(234, 179, 8, 0.2);
    background: rgba(234, 179, 8, 0.1);
    color: #fef3c7;
}

.alert-info {
    border-color: rgba(59, 130, 246, 0.2);
    background: rgba(59, 130, 246, 0.1);
    color: #bfdbfe;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

@media (max-width: 768px) {
    .flash-messages.with-sidebar {
        padding-left: 0;
    }
}
/* ==========================================================================
   SITE FOOTER STYLES
   ========================================================================== */
.site-footer {
    position: static;
    margin-top: auto;
    background: #0a0f1a;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.75rem 1.5rem;
}

.page-wrapper.with-sidebar .site-footer {
    left: 250px;
}

/* ==========================================================================
   KEYBOARD FOCUS VISIBLE (WCAG 2.4.7) - added after audit A09 found ZERO
   :focus-visible rules site-wide (14/25 interactive elements invisible to
   keyboard users on landing alone). This gives a single accessible outline
   to every focusable element; `button:focus:not(:focus-visible){outline:none}`
   ensures the ring doesn't render on mouse clicks, only on actual Tab nav.
   ========================================================================== */
:focus-visible {
    outline: 2px solid var(--accent, #00d972);
    outline-offset: 2px;
    border-radius: 3px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
input[type="button"]:focus:not(:focus-visible),
input[type="submit"]:focus:not(:focus-visible) {
    outline: none;
}
/* High-contrast override for white/light surfaces */
[data-theme="light"] :focus-visible {
    outline-color: #007d44;
}

@media (max-width: 768px) {
    .page-wrapper.with-sidebar .site-footer {
        left: 0;
    }
    .site-footer {
        position: static;
        padding: 1rem 1rem env(safe-area-inset-bottom, 1rem);
    }
    .main-content {
        padding-bottom: 2rem;
    }
}

.footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
    flex-wrap: wrap;
}

/* flex-wrap (prod QA 2026-09-27): without it the French row ran to 462px on a
   390px phone and "Préférences cookies", the CNIL consent-withdrawal link,
   was pushed off-screen and unreachable. */
.footer-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    min-width: 0;
    max-width: 100%;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 0.8rem;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: #00d972;
}

.footer-separator {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.8rem;
}
/* Phones: the links wrap, so a "|" would dangle at a line end. Drop the
   separators and give each link a 44px-tall tap row instead. */
@media (max-width: 640px) {
    .footer-links { justify-content: center; gap: 0 1rem; }
    .footer-links .footer-separator { display: none; }
    .footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
    /* Room for the fixed chat bubble (bottom-right, ~52px + 16px): at full
       scroll the last link row sits above it instead of under it. */
    .site-footer { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 80px) !important; }
}

.footer-lang {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lang-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
    /* WCAG 2.5.5: minimum 44x44 touch target */
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lang-btn:hover {
    background: rgba(0, 217, 114, 0.2);
    border-color: rgba(0, 217, 114, 0.4);
    color: #00d972;
}

.lang-btn.active {
    background: var(--ac, #00d972);
    border-color: var(--ac, #00d972);
    color: #0c0c0d;
}

.footer-copyright {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
}

/* ==========================================================================
   MOBILE MENU STYLES
   ========================================================================== */
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        left: 0;
        top: 60px;
        bottom: 0;
        width: 280px;
        background: #0f172a;
        border-right: 1px solid rgba(255, 255, 255, 0.1);
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 1001;
        overflow-y: auto;
        padding-bottom: 100px;
    }

    .sidebar.active {
        transform: translateX(0);
    }

    .sidebar-overlay {
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: all 0.3s ease;
        z-index: 1000;
    }

    .sidebar-overlay.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .page-wrapper.with-sidebar {
        padding-left: 0;
    }

    .footer-content {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }

    .footer-links,
    .footer-lang {
        justify-content: center;
    }
}

/* Language Switcher in Navbar */
.lang-switcher {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--bg-secondary, #f5f4f0);
    border-radius: 8px;
    padding: 0.25rem;
}

.lang-switcher button {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    padding: 0.375rem 0.625rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lang-switcher button:hover {
    color: white;
    background: rgba(255, 255, 255, 0.1);
}

.lang-switcher button.active {
    background: var(--ac, #00d972);
    color: #0c0c0d;
}