:root {
    --bs-body-font-family: 'Inter', sans-serif;
    --bg-custom: #030712; 
    --text-main: #f8fafc;
    --accent-main: #3b82f6; 
    --accent-cyan: #06b6d4;
}

body {
    background-color: var(--bg-custom);
    color: var(--text-main);
    font-family: var(--bs-body-font-family);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, .font-title {
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: -0.02em;
}

a { text-decoration: none; color: inherit; transition: all 0.3s ease; }
ul { padding-left: 0; list-style: none; }

::selection { background-color: var(--accent-main); color: #ffffff; }


.text-white-50 { color: rgba(157, 165, 171, 1) !important; }
.text-white-60 { color: rgba(157, 165, 171, 1) !important; }
.text-white-70 { color: rgba(157, 165, 171, 1) !important; }
.text-white-80 { color: rgba(157, 165, 171, 1) !important; }
.bg-white-5 { background-color: rgba(255, 255, 255, 0.02); }
.bg-white-10 { background-color: rgba(255, 255, 255, 0.05); }

.tracking-widest { letter-spacing: 0.15em; text-transform: uppercase; }
.tracking-tight { letter-spacing: -0.03em; }
.leading-relaxed { line-height: 1.7; }
.font-light { font-weight: 300; }

/* ESPACEMENTS LARGES */
.pt-hero { padding-top: 8rem; }
.mt-40 { margin-top: 8rem; }
.mb-40 { margin-bottom: 8rem; }

/* TYPOGRAPHIE HERO */
.text-hero { font-size: 3.5rem; line-height: 1.05; }
@media (min-width: 768px) { .text-hero { font-size: 5.5rem; } }

/* FOND NÉON ABYSSAL - Lueurs Bleues */
.neon-bg {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: -3;
    background: 
        radial-gradient(circle at 50% 0%, rgba(30, 64, 175, 0.25) 0%, transparent 60%),
        radial-gradient(circle at 10% 40%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 90% 60%, rgba(6, 182, 212, 0.1) 0%, transparent 50%);
    filter: blur(60px);
}

/* =========================================================================
   COMPOSANTS UI PRINCIPAUX
   ========================================================================= */

/* NAVIGATION */
.nav-glass { 
    background: rgba(3, 7, 18, 0.8); 
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255,255,255,0.05); 
}
.nav-pills-glass { background: rgba(255,255,255,0.03); backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,0.05); box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.nav-link-custom { color: rgba(255,255,255,0.6); padding: 0.5rem 1.25rem; border-radius: 50rem; font-size: 0.85rem; font-weight: 500; }
.nav-link-custom:hover { color: #fff; background-color: rgba(255,255,255,0.05); }

.btn-audit { background: #fff; color: var(--bg-custom); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); border: 1px solid transparent; }
.btn-audit:hover { transform: translateY(-2px); background: transparent; color: #fff; border-color: rgba(255,255,255,0.3); box-shadow: 0 5px 15px rgba(59,130,246,0.3); }

/* EFFET VERRE FLOTTANT (Glassmorphism "Sharp") */
.glass-panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.04); 
    border-top: 1px solid rgba(255, 255, 255, 0.15); 
    border-radius: 1.5rem;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.6);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.glass-panel:hover { 
    border-color: rgba(59, 130, 246, 0.3); 
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%);
    box-shadow: 0 25px 50px -10px rgba(0, 0, 0, 0.8), 0 0 20px rgba(59, 130, 246, 0.15);
    transform: translateY(-4px); 
}

/* DÉGRADÉ DE TEXTE VIBRANT BLEU FINTECH */
.text-glow { 
    background: linear-gradient(to right, #ffffff 10%, #93c5fd 50%, #3b82f6 100%); 
    -webkit-background-clip: text; 
    background-clip: text;
    -webkit-text-fill-color: transparent; 
    text-shadow: 0 0 30px rgba(59, 130, 246, 0.4); 
}

/* BOUTON NEON BLEU */
.btn-neon {
    background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.4); color: #fff;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); text-decoration: none;
}
.btn-neon:hover {
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.5), inset 0 0 15px rgba(59, 130, 246, 0.2);
    background: rgba(59, 130, 246, 0.2); transform: translateY(-2px); color: #fff;
}

/* TICKER / MARQUEE INCLINÉ */
.ticker-section {
    position: relative;
    width: 110vw; 
    left: -5vw;
    padding: 2.5rem 0;
    background: linear-gradient(90deg, rgba(3,7,18,0.9), rgba(30,64,175,0.2), rgba(3,7,18,0.9));
    border-top: 1px solid rgba(59,130,246,0.15);
    border-bottom: 1px solid rgba(59,130,246,0.15);
    transform: rotate(-3deg);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    z-index: 0;
    margin-bottom: 6rem;
    margin-top: 3rem;
    overflow: hidden;
}
.ticker-container { overflow: hidden; display: flex; flex-direction: column; gap: 0.5rem; }
.ticker-row { display: flex; white-space: nowrap; font-size: 2.5rem; font-weight: 800; font-family: 'Space Grotesk'; text-transform: uppercase; color: rgba(255,255,255,0.05); }
.ticker-item span { color: var(--accent-main); margin: 0 1.5rem; opacity: 0.6; }
.ticker-item {
    color: #ffffff !important;
    opacity: 1 !important;
}


/* ICONS EXPERTISES */
.icon-box { width: 3.5rem; height: 3.5rem; border-radius: 1rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; border: 1px solid rgba(255,255,255,0.05); }
.icon-cyan { background: rgba(6,182,212,0.1); color: #67e8f9; }
.icon-blue { background: rgba(59,130,246,0.1); color: #93c5fd; width: 4rem; height: 4rem; border-color: rgba(59,130,246,0.3); }
.icon-indigo { background: rgba(99,102,241,0.1); color: #a5b4fc; }

/* AVATARS */
.avatar-group { display: flex; }
.avatar-group img { width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--bg-custom); margin-left: -0.75rem; }
.avatar-group img:first-child { margin-left: 0; }

/* LIGNE DE MÉTHODOLOGIE */
.timeline-wrapper { position: relative; width: 100%; padding-left: 2rem; }
.timeline-line { width: 1px; background: rgba(255, 255, 255, 0.1); position: absolute; left: 2rem; top: 0; bottom: 0; }
.timeline-progress { width: 1px; background: linear-gradient(to bottom, #06b6d4, #3b82f6); height: 0%; box-shadow: 0 0 15px rgba(59, 130, 246, 0.6); }
.step-item { position: relative; margin-left: 3rem; margin-bottom: 2rem;}
.timeline-dot { position: absolute; left: -3.35rem; top: 2rem; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--bg-custom); border: 2px solid rgba(255,255,255,0.3); z-index: 10; transition: all 0.3s ease; }
.step-item:hover .timeline-dot { border-color: #3b82f6; background: #3b82f6; box-shadow: 0 0 15px #3b82f6; }

/* CARDS DASHBOARD */
.dashboard-stat-card { background-color: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: 1rem; padding: 1.5rem; transition: background 0.3s; }
.dashboard-stat-card:hover { background-color: rgba(255,255,255,0.04); border-color: rgba(59,130,246,0.2); }
.path-line { stroke-dasharray: 1000; stroke-dashoffset: 1000; }

/* ANIMATIONS ET PULSATIONS */
.pulse-bg { animation: pulse-glow 5s ease-in-out infinite alternate; }
@keyframes pulse-glow { 0% { opacity: 0.2; transform: scale(1); } 100% { opacity: 0.4; transform: scale(1.05); } }
.pulse-dot { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: #60a5fa; animation: pulse-opacity 2s infinite; }
@keyframes pulse-opacity { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* FOOTER CUSTOM */
.footer-link { color: rgba(255,255,255,0.5); transition: all 0.3s; font-size: 0.85rem; text-decoration: none; }
.footer-link:hover { color: #93c5fd; }
.social-icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.03); display: inline-flex; align-items: center; justify-content: center; color: white; transition: all 0.3s; border: 1px solid rgba(255,255,255,0.05); }
.social-icon:hover { background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.4); transform: translateY(-3px); color: #93c5fd; }


/* =========================================================================
   NOUVELLES CLASSES (Extraites des attributs style="...")
   ========================================================================= */

/* Utilitaires globaux extraits */
.pb-custom { padding-bottom: 2rem; }
.p-1px { padding: 1px; }
.max-w-64 { max-width: 64rem; }
.max-w-56 { max-width: 56rem; }
.max-w-42 { max-width: 42rem; }
.lh-1-1 { line-height: 1.1; }
.opacity-30 { opacity: 0.3; }

/* Couleurs de textes extraites */
.text-blue-300 { color: #93c5fd; }
.text-blue-400 { color: #60a5fa; }
.text-cyan-400 { color: #22d3ee; }
.text-live { font-size: 0.6rem; color: #4ade80; }
.stat-positive { font-size: 0.75rem; color: #4ade80; }
.text-2xs { font-size: 0.625rem; }
.text-3xs { font-size: 0.6rem; }

/* Bordures extraites */
.border-top-blue { border-top-color: rgba(59,130,246,0.3); }
.border-top-cyan { border-top-color: rgba(6,182,212,0.2); }

/* Badges spécifiques */
.badge-premium {
    background: rgba(255,255,255,0.03); 
    border: 1px solid rgba(59,130,246,0.3); 
    color: rgba(255,255,255,0.9); 
    font-size: 0.65rem; 
    box-shadow: 0 0 15px rgba(59,130,246,0.2);
}
.badge-outline {
    background: rgba(255,255,255,0.03); 
    border: 1px solid rgba(255,255,255,0.08); 
    color: rgba(255,255,255,0.8); 
    font-size: 0.65rem;
}
.badge-live {
    background: rgba(34,197,94,0.05); 
    border: 1px solid rgba(34,197,94,0.1);
}
.badge-success-bg {
    background: rgba(25,135,84,0.05);
}
.text-success-xs {
    font-size: 0.6rem; 
    text-transform: uppercase;
}

/* Effets visuels (Glow, Icons) */
.glow-circle-blue {
    width: 8rem; height: 8rem; 
    background: rgba(59,130,246,0.15); 
    filter: blur(3rem); 
    border-radius: 50%;
}
.icon-purple { background: rgba(217,70,239,0.1); color: #f0abfc; }
.icon-emerald { background: rgba(16,185,129,0.1); color: #6ee7b7; }
.icon-amber { background: rgba(245,158,11,0.1); color: #fcd34d; }

.dot-live {
    width: 6px; height: 6px; 
    background-color: #4ade80; 
    animation: pulse-opacity 2s infinite;
}

/* Portfolio (Remplacement des attributs en ligne et du JavaScript !) */
.portfolio-bg-1 {
    height: 16rem; 
    background: linear-gradient(to bottom right, rgba(59,130,246,0.15), transparent); 
    border-bottom: 1px solid rgba(255,255,255,0.02);
}
.portfolio-bg-2 {
    height: 16rem; 
    background: linear-gradient(to bottom left, rgba(6,182,212,0.15), transparent); 
    border-bottom: 1px solid rgba(255,255,255,0.02);
}
.portfolio-overlay {
    background: rgba(0,0,0,0.2); 
    transition: 0.5s;
}
/* Le survol en pur CSS (bien meilleur pour les performances) */
.glass-panel:hover .portfolio-overlay { 
    background: transparent; 
}

/* Dashboard Graphiques */
.dashboard-glow-bg {
    background: rgba(59, 130, 246, 0.15); 
    filter: blur(80px); 
    top: 0; left: 0;
}
.bg-panel-dark {
    background-color: rgba(2,1,1,0.5);
}
.chart-card {
    height: 8rem; padding: 0;
}
.chart-title {
    top: 1rem; left: 1.25rem; font-size: 0.6rem;
}
.h-4rem {
    height: 4rem;
}
.chart-fade-bottom {
    height: 2.5rem; 
    background: linear-gradient(to top, rgba(59, 130, 246, 0.1), transparent);
}

/* Avatars Témoignages */
.avatar-img-blue {
    width: 40px; height: 40px; 
    border: 1px solid rgba(59, 130, 246, 0.3);
}
.avatar-img-cyan {
    width: 40px; height: 40px; 
    border: 1px solid rgba(6,182,212,0.3);
}
.avatar-role {
    font-size: 0.65rem; 
    text-transform: uppercase; 
    letter-spacing: 0.05em;
}

/* Section Call To Action Final */
.cta-section {
    max-width: 64rem; padding-bottom: 6rem;
}
.cta-glow-bg {
    background: linear-gradient(to right, rgba(59,130,246,0.6), rgba(6,182,212,0.6), rgba(93,197,253,0.6)); 
    filter: blur(20px);
}
.cta-inner-panel {
    background: rgba(2,1,1,0.85); 
    backdrop-filter: blur(40px);
}
.cta-icon-box {
    width: 4rem; height: 4rem; 
    background: rgba(59, 130, 246, 0.1); 
    border-color: rgba(59, 130, 246, 0.3);
}
.cta-icon {
    color: #93c5fd; width: 2rem; height: 2rem;
}

/* Footer */
.footer-custom {
    background-color: var(--bg-custom); 
    border-top: 1px solid rgba(255,255,255,0.02);
}
.text-sm-custom {
    font-size: 0.9rem;
}

/* =========================================================================
   NOUVELLES CLASSES (Extraites de la page Services)
   ========================================================================= */

/* Utilitaires spécifiques Page Services */
.pt-hero-lg { padding-top: 10rem; }
.max-w-60 { max-width: 60rem; }
.max-w-48 { max-width: 48rem; }
.bg-glass-dark { 
    background: rgba(0,0,0,0.3); 
    border: 1px solid rgba(255,255,255,0.05); 
}

/* Badge Hero Services */
.badge-services {
    background: rgba(255,255,255,0.03); 
    border: 1px solid rgba(59,130,246,0.3); 
    color: #93c5fd; 
    font-size: 0.65rem;
}

/* Menu Déroulant (Dropdown) */
.dropdown-menu-glass { 
    background: rgba(3, 7, 18, 0.95); 
    backdrop-filter: blur(30px); 
    border: 1px solid rgba(255,255,255,0.05); 
    border-radius: 1.25rem; 
    margin-top: 0.5rem !important; 
}
.dropdown-item-glass { 
    color: rgba(255,255,255,0.7); 
    font-size: 0.85rem; 
    padding: 0.6rem 1rem; 
    transition: all 0.3s ease; 
}
.dropdown-item-glass:hover { 
    background: rgba(59, 130, 246, 0.1); 
    color: #fff; 
    border-radius: 0.75rem; 
}
.nav-link-custom.active { 
    color: #fff; 
    background-color: rgba(255,255,255,0.05); 
}

/* Bouton Audit (Variante Navbar) */
.btn-audit-custom {
    border-radius: 50px; 
    font-weight: 600; 
    padding: 0.6rem 1.5rem;
}

/* Icônes larges avec effets (Cards Services) */
.icon-box-lg { 
    width: 5rem; height: 5rem; 
    border-radius: 1.25rem; 
    display: flex; align-items: center; justify-content: center; 
    border: 1px solid rgba(255,255,255,0.05); 
}
.icon-cyan-glow { 
    background: rgba(6,182,212,0.1); color: #67e8f9; 
    border-color: rgba(6,182,212,0.3); box-shadow: 0 0 20px rgba(6,182,212,0.2);
}
.icon-blue-glow { 
    background: rgba(59,130,246,0.1); color: #93c5fd; 
    border-color: rgba(59,130,246,0.3); box-shadow: 0 0 20px rgba(59,130,246,0.2);
}
.icon-indigo-glow { 
    background: rgba(99,102,241,0.1); color: #a5b4fc; 
    border-color: rgba(99,102,241,0.3); box-shadow: 0 0 20px rgba(99,102,241,0.2);
}
.icon-fuchsia-glow { 
    background: rgba(217,70,239,0.1); color: #f0abfc; 
    border-color: rgba(217,70,239,0.3); box-shadow: 0 0 20px rgba(217,70,239,0.2);
}
.icon-green-glow { 
    background: rgba(16,185,129,0.1); color: #6ee7b7; 
    border-color: rgba(16,185,129,0.3); box-shadow: 0 0 20px rgba(16,185,129,0.2);
}
.icon-orange-glow { 
    background: rgba(245,158,11,0.1); color: #fcd34d; 
    border-color: rgba(245,158,11,0.3); box-shadow: 0 0 20px rgba(245,158,11,0.2);
}

/* Liste des fonctionnalités (Checklist) */
.feature-list li { 
    margin-bottom: 0.75rem; 
    display: flex; align-items: center; gap: 0.75rem; 
    color: rgba(248, 250, 252, 0.7); font-size: 0.9rem;
}
.feature-list li svg { 
    flex-shrink: 0; color: #3b82f6; 
}

/* Effets de lueurs radiales en arrière-plan des sections */
.glow-bg-right-cyan { background: radial-gradient(circle at right, rgba(6, 182, 212, 0.08), transparent 70%); }
.glow-bg-left-blue { background: radial-gradient(circle at left, rgba(59, 130, 246, 0.08), transparent 70%); }
.glow-bg-right-indigo { background: radial-gradient(circle at right, rgba(99, 102, 241, 0.08), transparent 70%); }
.glow-bg-left-fuchsia { background: radial-gradient(circle at left, rgba(217, 70, 239, 0.08), transparent 70%); }
.glow-bg-right-green { background: radial-gradient(circle at right, rgba(16, 185, 129, 0.08), transparent 70%); }
.glow-bg-left-orange { background: radial-gradient(circle at left, rgba(245, 158, 11, 0.08), transparent 70%); } 


/* =========================================================================
   NOUVELLES CLASSES (Extraites de la page Création Web)
   ========================================================================= */

/* Utilitaires spécifiques Page Création Web */
.max-w-90 { max-width: 90%; }
.btn-outline-custom { 
    background: transparent; 
    color: var(--text-main); 
    border: 1px solid rgba(255,254,250,0.2); 
}
.btn-outline-custom:hover {
    background: rgba(255,254,250,0.05);
    color: var(--text-main);
}

/* Badges spécifiques (Cyan & Emerald) */
.badge-cyan {
    background: rgba(255,254,250,0.03); 
    border: 1px solid rgba(6, 182, 212, 0.3); 
    color: #67e8f9; 
    font-size: 0.65rem;
}
.badge-emerald {
    background: rgba(16,185,129,0.1); 
    border: 1px solid rgba(16,185,129,0.3); 
    color: #6ee7b7;
}

/* Nouvelles bordures et fonds lumineux doux */
.border-top-cyan-300 { 
    border-top-color: rgba(6,182,212,0.3); 
}
.glow-bg-right-blue-light { 
    background: radial-gradient(circle at right, rgba(59, 130, 246, 0.1), transparent 70%); 
}
.glow-bg-left-cyan-light { 
    background: radial-gradient(circle at left, rgba(6, 182, 212, 0.1), transparent 70%); 
}

/* Cycle de développement (Process Steps) */
.process-step-default {
    width: 3rem; height: 3rem; 
    background: rgba(255,254,250,0.05); 
    color: #93c5fd; 
    font-family: 'Space Grotesk', sans-serif; 
    font-weight: 700;
}
.process-step-active {
    width: 3rem; height: 3rem; 
    background: rgba(59,130,246,0.1); 
    border: 1px solid rgba(59,130,246,0.3); 
    color: #3b82f6; 
    font-family: 'Space Grotesk', sans-serif; 
    font-weight: 700; 
    box-shadow: 0 0 15px rgba(59,130,246,0.2);
}

/* Navigation et Footer Alternatifs (Pour le Blanc cassé #FFFEFA) */
.nav-glass-alt { 
    background: linear-gradient(to bottom, rgba(2, 1, 1, 0.9) 0%, transparent 100%); 
    backdrop-filter: blur(16px); 
    border-bottom: 1px solid rgba(255,254,250,0.05); 
}
.nav-pills-glass-alt { 
    background: rgba(255,254,250,0.03); 
    backdrop-filter: blur(24px); 
    border: 1px solid rgba(255,254,250,0.05); 
}
.dropdown-menu-glass-alt { 
    background: rgba(2, 1, 1, 0.95); 
    backdrop-filter: blur(30px); 
    border: 1px solid rgba(255,254,250,0.05); 
    border-radius: 1.25rem; 
    margin-top: 0.5rem !important; 
}
.dropdown-item-glass-alt { 
    color: rgba(255,254,250,0.7); 
    font-size: 0.85rem; 
    padding: 0.6rem 1rem; 
    transition: all 0.3s ease; 
}
.dropdown-item-glass-alt:hover, 
.dropdown-item-glass-alt.active { 
    background: rgba(59, 130, 246, 0.1); 
    color: var(--text-main); 
    border-radius: 0.75rem; 
}
.btn-audit-alt { 
    background: var(--text-main); 
    color: var(--bg-custom); 
    transition: all 0.4s ease; 
    border: 1px solid transparent; 
    border-radius: 50px; 
    font-weight: 600; 
    padding: 0.6rem 1.5rem;
}
.btn-audit-alt:hover { 
    transform: translateY(-2px); 
    background: transparent; 
    color: var(--text-main); 
    border-color: rgba(255,254,250,0.3); 
    box-shadow: 0 5px 15px rgba(59,130,246,0.3); 
}
.footer-custom-alt {
    background-color: var(--bg-custom); 
    border-top: 1px solid rgba(255,254,250,0.02);
}


/* =========================================================================
   NOUVELLES CLASSES (Extraites de la page SEO)
   ========================================================================= */

/* Badges SEO spécifiques */
.badge-blue-outline {
    background: rgba(255,254,250,0.03); 
    border: 1px solid rgba(59, 130, 246, 0.3); 
    color: #93c5fd; 
    font-size: 0.65rem;
}
.badge-blue-light {
    background: rgba(59, 130, 246, 0.1); 
    border-color: rgba(59, 130, 246, 0.3); 
    color: #93c5fd;
}

/* Bordures et lueurs (Indigo) */
.border-top-indigo-300 { 
    border-top-color: rgba(99,102,241,0.3); 
}
.glow-bg-left-indigo-light { 
    background: radial-gradient(circle at left, rgba(99, 102, 241, 0.1), transparent 70%); 
}

/* =========================================================================
   NOUVELLES CLASSES (Extraites de la page SEA)
   ========================================================================= */

/* Badges SEA spécifiques */
.badge-indigo {
    background: rgba(255,254,250,0.03); 
    border: 1px solid rgba(99, 102, 241, 0.3); 
    color: #a5b4fc; 
    font-size: 0.65rem;
}
.badge-indigo-light {
    background: rgba(99, 102, 241, 0.1); 
    border-color: rgba(99, 102, 241, 0.3); 
    color: #a5b4fc;
}

/* Texte glow spécifique Indigo */
.text-glow-indigo { 
    background: linear-gradient(to right, #FFFEFA 10%, #a5b4fc 50%, #6366f1 100%); 
    -webkit-background-clip: text; 
    background-clip: text;
    -webkit-text-fill-color: transparent; 
    text-shadow: 0 0 30px rgba(99, 102, 241, 0.4); 
}

/* Bouton Neon spécifique Indigo */
.btn-neon-indigo {
    background: rgba(99, 102, 241, 0.1); 
    border: 1px solid rgba(99, 102, 241, 0.4); 
    color: var(--text-main);
    transition: all 0.4s ease; 
    text-decoration: none;
}
.btn-neon-indigo:hover { 
    box-shadow: 0 0 30px rgba(99, 102, 241, 0.5); 
    background: rgba(99, 102, 241, 0.2); 
    transform: translateY(-2px); 
    color: var(--text-main); 
}

/* Bordures et lueurs (Indigo/Purple) */
.border-top-purple-300 { 
    border-top-color: rgba(168,85,247,0.3); 
}
.glow-bg-right-indigo-light { 
    background: radial-gradient(circle at right, rgba(99, 102, 241, 0.1), transparent 70%); 
}
.glow-bg-left-purple-light { 
    background: radial-gradient(circle at left, rgba(168, 85, 247, 0.1), transparent 70%); 
}

/* CTA spécifiques Indigo */
.cta-glow-bg-indigo {
    background: linear-gradient(to right, rgba(59,130,246,0.6), rgba(99,102,241,0.6), rgba(168,85,247,0.6)); 
    filter: blur(20px);
}
.cta-icon-box-indigo {
    background: rgba(99, 102, 241, 0.1); 
    border-color: rgba(99, 102, 241, 0.3);
}
.cta-icon-indigo {
    color: #a5b4fc; width: 2rem; height: 2rem;
}
.text-glow-indigo { 
    background: linear-gradient(to right, #FFFEFA 10%, #a5b4fc 50%, #6366f1 100%); 
    -webkit-background-clip: text;  
    background-clip: text;
    -webkit-text-fill-color: transparent; 
    text-shadow: 0 0 30px rgba(99, 102, 241, 0.4); 
}

/* Cycle de développement (Process Step Active spécial Indigo) */
.process-step-active-indigo {
    width: 3rem; height: 3rem; 
    background: rgba(99,102,241,0.1); 
    border: 1px solid rgba(99,102,241,0.3); 
    color: #6366f1; 
    font-family: 'Space Grotesk', sans-serif; 
    font-weight: 700; 
    box-shadow: 0 0 15px rgba(99,102,241,0.2);
}

/* =========================================================================
   NOUVELLES CLASSES (Extraites de la page Analytics)
   ========================================================================= */

/* Surlignage de texte personnalisé (Uniquement sur Analytics) */
.page-analytics ::selection {
    background-color: #f59e0b;
    color: var(--text-main);
}

/* Fond Néon Ambre spécifique */
.neon-bg-amber {
    background: 
        radial-gradient(circle at 50% 0%, rgba(245, 158, 11, 0.15) 0%, transparent 60%),
        radial-gradient(circle at 10% 40%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 90% 60%, rgba(6, 182, 212, 0.1) 0%, transparent 50%);
}

/* Modificateurs de Navigation Ambre */
.dropdown-item-glass-alt-amber:hover, 
.dropdown-item-glass-alt-amber.active { 
    background: rgba(245, 158, 11, 0.1); 
    color: var(--text-main); 
    border-radius: 0.75rem; 
}
.btn-audit-alt-amber {
    background: var(--text-main); 
    color: var(--bg-custom); 
    transition: all 0.4s ease; 
    border: 1px solid transparent; 
    border-radius: 50px; 
    font-weight: 600; 
    padding: 0.6rem 1.5rem;
}
.btn-audit-alt-amber:hover { 
    transform: translateY(-2px); 
    background: transparent; 
    color: var(--text-main); 
    border-color: rgba(255,254,250,0.3); 
    box-shadow: 0 5px 15px rgba(245,158,11,0.3); 
}

/* Modificateurs de Cartes (Hover Ambre) */
.glass-panel-amber:hover {
    border-color: rgba(245, 158, 11, 0.3); 
    background: linear-gradient(180deg, rgba(255, 254, 250, 0.05) 0%, rgba(245, 158, 11, 0.05) 100%);
    box-shadow: 0 25px 50px -10px rgba(0, 0, 0, 0.8), 0 0 20px rgba(245, 158, 11, 0.15);
    transform: translateY(-4px); 
}

/* Textes et Boutons Ambre */
.text-glow-amber { 
    background: linear-gradient(to right, #FFFEFA 10%, #fcd34d 50%, #f59e0b 100%); 
    -webkit-background-clip: text; 
    background-clip: text;
    -webkit-text-fill-color: transparent; 
    text-shadow: 0 0 30px rgba(245, 158, 11, 0.4); 
}
.btn-neon-amber {
    background: rgba(245, 158, 11, 0.1); 
    border: 1px solid rgba(245, 158, 11, 0.4); 
    color: var(--text-main);
    transition: all 0.4s ease; 
    text-decoration: none;
}
.btn-neon-amber:hover { 
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.5); 
    background: rgba(245, 158, 11, 0.2); 
    transform: translateY(-2px); 
    color: var(--text-main); 
}

/* Badges Ambre */
.badge-amber {
    background: rgba(255,254,250,0.03); 
    border: 1px solid rgba(245, 158, 11, 0.3); 
    color: #fcd34d; 
    font-size: 0.65rem;
}
.badge-amber-light {
    background: rgba(245, 158, 11, 0.1); 
    border-color: rgba(245, 158, 11, 0.3); 
    color: #fcd34d;
}

/* Lueurs et Ombres */
.glow-bg-right-amber-light { 
    background: radial-gradient(circle at right, rgba(245, 158, 11, 0.1), transparent 70%); 
}
.glow-bg-left-blue-light { 
    background: radial-gradient(circle at left, rgba(59, 130, 246, 0.1), transparent 70%); 
}

/* Cycle de développement (Process Step Active spécial Ambre) */
.process-step-active-amber {
    width: 3rem; height: 3rem; 
    background: rgba(245,158,11,0.1); 
    border: 1px solid rgba(245,158,11,0.3); 
    color: #f59e0b; 
    font-family: 'Space Grotesk', sans-serif; 
    font-weight: 700; 
    box-shadow: 0 0 15px rgba(245,158,11,0.2);
}

/* CTA Final Ambre */
.cta-glow-bg-amber {
    background: linear-gradient(to right, rgba(245,158,11,0.6), rgba(59,130,246,0.6), rgba(6,182,212,0.6)); 
    filter: blur(20px);
}
.cta-icon-box-amber {
    background: rgba(245, 158, 11, 0.1); 
    border-color: rgba(245, 158, 11, 0.3);
}
.cta-icon-amber {
    color: #fcd34d; width: 2rem; height: 2rem;
}

/* Réseaux sociaux Ambre */
.social-icon-amber {
    width: 36px; height: 36px; border-radius: 50%; 
    background: rgba(255,254,250,0.03); 
    display: inline-flex; align-items: center; justify-content: center; 
    color: var(--text-main); transition: all 0.3s; 
    border: 1px solid rgba(255,254,250,0.05); 
}
.social-icon-amber:hover { 
    background: rgba(245,158,11,0.1); 
    border-color: rgba(245,158,11,0.4); 
    transform: translateY(-3px); 
    color: #fcd34d; 
}

/* =========================================================================
   NOUVELLES CLASSES (Extraites de la page Design UX/UI)
   ========================================================================= */

/* Fond Néon Fuchsia spécifique */
.neon-bg-fuchsia {
    background: 
        radial-gradient(circle at 50% 0%, rgba(30, 64, 175, 0.25) 0%, transparent 60%),
        radial-gradient(circle at 10% 40%, rgba(217, 70, 239, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 90% 60%, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
}

/* Modificateurs de Navigation Fuchsia */
.dropdown-item-glass-alt-fuchsia:hover, 
.dropdown-item-glass-alt-fuchsia.active { 
    background: rgba(217, 70, 239, 0.1); 
    color: var(--text-main); 
    border-radius: 0.75rem; 
}

/* Modificateurs de Cartes (Hover Fuchsia) */
.glass-panel-fuchsia:hover {
    border-color: rgba(217, 70, 239, 0.3); 
    background: linear-gradient(180deg, rgba(255, 254, 250, 0.05) 0%, rgba(217, 70, 239, 0.05) 100%);
    box-shadow: 0 25px 50px -10px rgba(0, 0, 0, 0.8), 0 0 20px rgba(217, 70, 239, 0.15);
    transform: translateY(-4px); 
}

/* Textes et Boutons Fuchsia */
.text-glow-fuchsia { 
    background: linear-gradient(to right, #FFFEFA 10%, #f0abfc 50%, #d946ef 100%); 
    -webkit-background-clip: text; 
    background-clip: text;
    -webkit-text-fill-color: transparent; 
    text-shadow: 0 0 30px rgba(217, 70, 239, 0.4); 
}
.btn-neon-fuchsia {
    background: rgba(217, 70, 239, 0.1); 
    border: 1px solid rgba(217, 70, 239, 0.4); 
    color: var(--text-main);
    transition: all 0.4s ease; 
    text-decoration: none;
}
.btn-neon-fuchsia:hover { 
    box-shadow: 0 0 30px rgba(217, 70, 239, 0.5); 
    background: rgba(217, 70, 239, 0.2); 
    transform: translateY(-2px); 
    color: var(--text-main); 
}

/* Badges Fuchsia */
.badge-fuchsia-outline {
    background: rgba(255,254,250,0.03); 
    border: 1px solid rgba(217, 70, 239, 0.3); 
    color: #f0abfc; 
    font-size: 0.65rem;
}
.badge-fuchsia-light {
    background: rgba(217, 70, 239, 0.1); 
    border-color: rgba(217, 70, 239, 0.3); 
    color: #f0abfc;
}

/* Lueurs */
.glow-bg-right-fuchsia-light { 
    background: radial-gradient(circle at right, rgba(217, 70, 239, 0.1), transparent 70%); 
}

/* Cycle de conception (Process Step Active spécial Fuchsia) */
.process-step-active-fuchsia {
    width: 3rem; height: 3rem; 
    background: rgba(217,70,239,0.1); 
    border: 1px solid rgba(217,70,239,0.3); 
    color: #d946ef; 
    font-family: 'Space Grotesk', sans-serif; 
    font-weight: 700; 
    box-shadow: 0 0 15px rgba(217,70,239,0.2);
}

/* CTA Final Fuchsia */
.cta-glow-bg-fuchsia {
    background: linear-gradient(to right, rgba(168,85,247,0.6), rgba(217,70,239,0.6), rgba(59,130,246,0.6)); 
    filter: blur(20px);
}
.cta-icon-box-fuchsia {
    background: rgba(217, 70, 239, 0.1); 
    border-color: rgba(217, 70, 239, 0.3);
}
.cta-icon-fuchsia {
    color: #f0abfc; width: 2rem; height: 2rem;
}

/* Réseaux sociaux Fuchsia */
.social-icon-fuchsia {
    width: 36px; height: 36px; border-radius: 50%; 
    background: rgba(255,254,250,0.03); 
    display: inline-flex; align-items: center; justify-content: center; 
    color: var(--text-main); transition: all 0.3s; 
    border: 1px solid rgba(255,254,250,0.05); 
}
.social-icon-fuchsia:hover { 
    background: rgba(217,70,239,0.1); 
    border-color: rgba(217,70,239,0.4); 
    transform: translateY(-3px); 
    color: #f0abfc; 
}

/* Couleurs Icones supplémentaires */
.icon-pink { 
    background: rgba(244,114,182,0.1); 
    color: #f9a8d4; 
    border-color: rgba(244,114,182,0.3); 
    box-shadow: 0 0 20px rgba(244,114,182,0.2);
}
/* =========================================================================
   NOUVELLES CLASSES (Extraites de la page Contact)
   ========================================================================= */

/* Styles spécifiques du Formulaire */
.form-label-custom { 
    font-size: 0.85rem; 
    font-weight: 500; 
    color: rgba(255, 254, 250, 0.7); 
    margin-bottom: 0.5rem; 
}
.form-control-glass, 
.form-select-glass {
    background: rgba(255, 254, 250, 0.03);
    border: 1px solid rgba(255, 254, 250, 0.1);
    border-radius: 0.75rem;
    color: var(--text-main);
    padding: 0.8rem 1rem;
    transition: all 0.3s ease;
    width: 100%;
}
.form-control-glass:focus, 
.form-select-glass:focus {
    outline: none;
    background: rgba(255, 254, 250, 0.05);
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
    color: var(--text-main);
}
.form-control-glass::placeholder { 
    color: rgba(255, 254, 250, 0.3); 
}

/* Personnalisation du select (menu déroulant natif) */
.form-select-glass option { 
    background-color: var(--bg-custom); 
    color: var(--text-main); 
}

/* Lueur d'arrière plan du formulaire */
.form-glow-bg {
    background: radial-gradient(circle at top right, rgba(59,130,246,0.05), transparent 60%);
}

/* Liste des étapes (Process Steps) */
.process-step-list {
    margin-bottom: 2rem;
}
.process-step-item { 
    display: flex; 
    align-items: flex-start; 
    gap: 1rem; 
    margin-bottom: 2rem; 
}
.process-step-number { 
    width: 2.5rem; 
    height: 2.5rem; 
    border-radius: 50%; 
    background: rgba(59, 130, 246, 0.1); 
    border: 1px solid rgba(59, 130, 246, 0.3);
    display: flex; 
    align-items: center; 
    justify-content: center;
    font-family: 'Space Grotesk', sans-serif; 
    font-weight: 700; 
    color: #93c5fd;
    flex-shrink: 0;
}

/* Liste de contact (Email / Localisation) */
.contact-list-item {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Remplacement de gap-3 */
}
.contact-link {
    color: var(--text-main);
    font-weight: 300;
    text-decoration: none;
    transition: color 0.3s;
}
.hover-white:hover {
    color: #93c5fd;
}
.border-white-10 {
    border-color: rgba(255, 254, 250, 0.1) !important;
}
/* =========================================================================
   NOUVELLES CLASSES (Extraites de la page Portfolio)
   ========================================================================= */

/* Opacité rapide */
.opacity-80 {
    opacity: 0.8;
}

/* Grille de présentation Portfolio */
.portfolio-img-wrapper {
    width: 100%;
    height: 280px;
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255,255,255,0.05);
}

.portfolio-tag {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.35rem 0.8rem;
    border-radius: 50rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.8);
}

.project-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #93c5fd;
    margin-top: 1rem;
    transition: all 0.3s ease;
}

.project-link:hover { 
    color: #fff; 
    gap: 0.75rem; 
}

/* Dégradés d'images des différents projets */
.portfolio-bg-logix {
    background: linear-gradient(135deg, rgba(30,64,175,0.3), rgba(6,182,212,0.1));
}
.portfolio-bg-nexus {
    background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(168,85,247,0.1));
}
.portfolio-bg-aura {
    background: linear-gradient(135deg, rgba(16,185,129,0.2), rgba(6,182,212,0.1));
}
.portfolio-bg-fluxchain {
    background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(217,70,239,0.1));
}

/* =========================================================================
   AJOUT : LUEUR BLEUE AU BAS DES CARTES EXPERTISES (Page d'accueil)
   ========================================================================= */
#expertises .glass-panel {
    /* Ombre interne (inset) bleue au repos */
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.6), inset 0 -20px 40px -20px rgba(59, 130, 246, 0.3);
}

#expertises .glass-panel:hover {
    /* Lueur bleue plus intense au survol */
    box-shadow: 0 25px 50px -10px rgba(0, 0, 0, 0.8), 0 0 20px rgba(59, 130, 246, 0.15), inset 0 -20px 40px -15px rgba(59, 130, 246, 0.5);
}
/* =========================================================================
   CORRECTION : DIMENSIONS DES ICÔNES CTA (Toutes les pages services)
   ========================================================================= */
.cta-icon-box-indigo,
.cta-icon-box-amber,
.cta-icon-box-emerald,
.cta-icon-box-fuchsia {
    width: 4rem;
    height: 4rem;
    flex-shrink: 0; /* Empêche l'icône de s'écraser */
}
/* =========================================================================
   CORRECTIONS : PAGE INFOGÉRANCE (100% Émeraude)
   ========================================================================= */
.process-step-default-emerald {
    width: 3rem; height: 3rem; 
    background: rgba(255,254,250,0.05); 
    color: #6ee7b7; 
    font-family: 'Space Grotesk', sans-serif; 
    font-weight: 700;
}
.border-top-emerald-300 { 
    border-top-color: rgba(16, 185, 129, 0.3); 
}
.glow-bg-left-emerald-light { 
    background: radial-gradient(circle at left, rgba(16, 185, 129, 0.1), transparent 70%); 
}
/* =========================================================================
   CLASSES PAGE INFOGÉRANCE (100% Émeraude)
   ========================================================================= */

/* Surlignage de texte personnalisé */
.page-infogerance ::selection { 
    background-color: #10b981; 
    color: var(--text-main); 
}

/* Fond Néon Émeraude spécifique */
.neon-bg-emerald {
    background: 
        radial-gradient(circle at 50% 0%, rgba(16, 185, 129, 0.15) 0%, transparent 60%),
        radial-gradient(circle at 10% 40%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 90% 60%, rgba(6, 182, 212, 0.1) 0%, transparent 50%);
}

/* Modificateurs de Navigation Émeraude */
.dropdown-item-glass-alt-emerald:hover, 
.dropdown-item-glass-alt-emerald.active { 
    background: rgba(16, 185, 129, 0.1); 
    color: var(--text-main); 
    border-radius: 0.75rem; 
}
.btn-audit-alt-emerald {
    background: var(--text-main); 
    color: var(--bg-custom); 
    transition: all 0.4s ease; 
    border: 1px solid transparent; 
    border-radius: 50px; 
    font-weight: 600; 
    padding: 0.6rem 1.5rem;
}
.btn-audit-alt-emerald:hover { 
    transform: translateY(-2px); 
    background: transparent; 
    color: var(--text-main); 
    border-color: rgba(255,254,250,0.3); 
    box-shadow: 0 5px 15px rgba(16,185,129,0.3); 
}

/* Modificateurs de Cartes (Hover Émeraude) */
.glass-panel-emerald:hover {
    border-color: rgba(16, 185, 129, 0.3); 
    background: linear-gradient(180deg, rgba(255, 254, 250, 0.05) 0%, rgba(16, 185, 129, 0.05) 100%);
    box-shadow: 0 25px 50px -10px rgba(0, 0, 0, 0.8), 0 0 20px rgba(16, 185, 129, 0.15);
    transform: translateY(-4px); 
}

/* Textes et Boutons Émeraude */
.text-glow-emerald { 
    background: linear-gradient(to right, #FFFEFA 10%, #6ee7b7 50%, #10b981 100%); 
    -webkit-background-clip: text; 
    background-clip: text;
    -webkit-text-fill-color: transparent; 
    text-shadow: 0 0 30px rgba(16, 185, 129, 0.4); 
}
.btn-neon-emerald {
    background: rgba(16, 185, 129, 0.1); 
    border: 1px solid rgba(16, 185, 129, 0.4); 
    color: var(--text-main);
    transition: all 0.4s ease; 
    text-decoration: none;
}
.btn-neon-emerald:hover { 
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.5); 
    background: rgba(16, 185, 129, 0.2); 
    transform: translateY(-2px); 
    color: var(--text-main); 
}

/* Badges et Icônes Émeraude */
.badge-emerald-outline {
    background: rgba(255,254,250,0.03); 
    border: 1px solid rgba(16, 185, 129, 0.3); 
    color: #6ee7b7; 
    font-size: 0.65rem;
}
.badge-emerald {
    background: rgba(16, 185, 129, 0.1); 
    border-color: rgba(16, 185, 129, 0.3); 
    color: #6ee7b7;
}
.icon-green { 
    background: rgba(16,185,129,0.1); 
    color: #6ee7b7; 
    border-color: rgba(16,185,129,0.3); 
    box-shadow: 0 0 20px rgba(16,185,129,0.2);
}

/* Lueurs et Ombres */
.glow-bg-right-emerald-light { background: radial-gradient(circle at right, rgba(16, 185, 129, 0.1), transparent 70%); }
.glow-bg-left-emerald-light { background: radial-gradient(circle at left, rgba(16, 185, 129, 0.1), transparent 70%); }
.border-top-emerald-300 { border-top-color: rgba(16, 185, 129, 0.3); }

/* Cycle de développement (Process Steps) */
.process-step-default-emerald {
    width: 3rem; height: 3rem; 
    background: rgba(255,254,250,0.05); 
    color: #6ee7b7; 
    font-family: 'Space Grotesk', sans-serif; 
    font-weight: 700;
}
.process-step-active-emerald {
    width: 3rem; height: 3rem; 
    background: rgba(16,185,129,0.1); 
    border: 1px solid rgba(16,185,129,0.3); 
    color: #10b981; 
    font-family: 'Space Grotesk', sans-serif; 
    font-weight: 700; 
    box-shadow: 0 0 15px rgba(16,185,129,0.2);
}

/* CTA Final Émeraude (Avec correction de la forme ronde) */
.cta-glow-bg-emerald {
    background: linear-gradient(to right, rgba(16,185,129,0.6), rgba(6,182,212,0.6), rgba(59,130,246,0.6)); 
    filter: blur(20px);
}
.cta-icon-box-emerald {
    background: rgba(16, 185, 129, 0.1); 
    border-color: rgba(16, 185, 129, 0.3);
    width: 4rem; 
    height: 4rem; 
    flex-shrink: 0;
}
.cta-icon-emerald {
    color: #6ee7b7; width: 2rem; height: 2rem;
}

/* Réseaux sociaux Émeraude */
.social-icon-emerald {
    width: 36px; height: 36px; border-radius: 50%; 
    background: rgba(255,254,250,0.03); 
    display: inline-flex; align-items: center; justify-content: center; 
    color: var(--text-main); transition: all 0.3s; 
    border: 1px solid rgba(255,254,250,0.05); 
}
.social-icon-emerald:hover { 
    background: rgba(16,185,129,0.1); 
    border-color: rgba(16,185,129,0.4); 
    transform: translateY(-3px); 
    color: #6ee7b7; 
}

/* =========================================================================
   NOUVELLES CLASSES (Extraites de la page Expertise Globale)
   ========================================================================= */

/* Opacité très faible pour les gros numéros d'arrière plan */
.text-white-5 {
    color: rgba(255, 254, 250, 0.05) !important;
}
.fw-black {
    font-weight: 900 !important;
}

/* Animations de flottaison des blocs de présentation */
.float-element { 
    animation: floating 6s ease-in-out infinite; 
}
.float-element-delayed { 
    animation: floating 6s ease-in-out infinite 3s; 
}

@keyframes floating {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}
/* =========================================================================
   CORRECTION : CLASSES MANQUANTES (Thème Cyan / SEO)
   ========================================================================= */

/* Bouton Néon Cyan */
.btn-neon-cyan {
    background: rgba(6, 182, 212, 0.1); 
    border: 1px solid rgba(6, 182, 212, 0.4); 
    color: var(--text-main) !important;
    transition: all 0.4s ease; 
    text-decoration: none;
}
.btn-neon-cyan:hover { 
    box-shadow: 0 0 30px rgba(6, 182, 212, 0.5); 
    background: rgba(6, 182, 212, 0.2); 
    transform: translateY(-2px); 
    color: var(--text-main) !important; 
}

/* Texte Lumineux Cyan (Pour le "Top 3") */
.text-glow-cyan { 
    background: linear-gradient(to right, #FFFEFA 10%, #67e8f9 50%, #06b6d4 100%); 
    -webkit-background-clip: text; 
    background-clip: text;
    -webkit-text-fill-color: transparent; 
    text-shadow: 0 0 30px rgba(6, 182, 212, 0.4); 
}

/* Badge Cyan (Pour le "Trafic Organique ROI+") */
.badge-cyan {
    background: rgba(6, 182, 212, 0.1); 
    border-color: rgba(6, 182, 212, 0.3); 
    color: #67e8f9;
}


#tarteaucitronRoot #tarteaucitron {
    background: rgba(2, 1, 1, 0.85) !important;
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
    border: 1px solid rgba(255, 254, 250, 0.1) !important;
    border-radius: 1.5rem !important;
    color: var(--text-main) !important;
    font-family: 'Inter', sans-serif !important;
    box-shadow: 0 25px 50px -10px rgba(0, 0, 0, 0.8) !important;
}

/* 2. Suppression des fonds blancs à l'intérieur */
#tarteaucitronRoot #tarteaucitronServices, 
#tarteaucitronRoot .tarteaucitronLine, 
#tarteaucitronRoot .tarteaucitronDetails,
#tarteaucitronRoot .tarteaucitronBorder,
#tarteaucitronRoot #tarteaucitronScrollbar {
    background: transparent !important;
    background-color: transparent !important;
    color: rgba(255, 254, 250, 0.7) !important;
    border-color: rgba(255, 254, 250, 0.05) !important;
}

/* 3. Titres et Textes */
#tarteaucitronRoot .tarteaucitronTitle,
#tarteaucitronRoot .tarteaucitronName {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    color: var(--text-main) !important;
}

/* 4. Bouton "Tout accepter" et "Tout refuser" (Haut à droite) */
#tarteaucitronRoot #tarteaucitronAllAllowed,
#tarteaucitronRoot #tarteaucitronAllDenied {
    background: rgba(255, 254, 250, 0.05) !important;
    color: var(--text-main) !important;
    border: 1px solid rgba(255, 254, 250, 0.1) !important;
    border-radius: 50px !important;
    padding: 8px 16px !important;
    transition: all 0.3s ease !important;
}
#tarteaucitronRoot #tarteaucitronAllAllowed:hover {
    background: rgba(59, 130, 246, 0.2) !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
    color: #93c5fd !important;
}
#tarteaucitronRoot #tarteaucitronAllDenied:hover {
    background: rgba(255, 254, 250, 0.1) !important;
}

/* 5. Gros bouton vert "Enregistrer" (Transformé en bouton Néon Bleu) */
#tarteaucitronRoot #tarteaucitronBack {
    background: rgba(59, 130, 246, 0.1) !important;
    border: 1px solid rgba(59, 130, 246, 0.4) !important;
    color: var(--text-main) !important;
    border-radius: 50px !important;
    padding: 10px 30px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    transition: all 0.3s ease !important;
}
#tarteaucitronRoot #tarteaucitronBack:hover {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4) !important;
    background: rgba(59, 130, 246, 0.2) !important;
}

/* 6. Bouton blanc "Politique de confidentialité" */
#tarteaucitronRoot button#tarteaucitronPrivacyUrlDialog {
    background: rgba(255, 254, 250, 0.03) !important;
    border: 1px solid rgba(255, 254, 250, 0.2) !important;
    color: rgba(255, 254, 250, 0.8) !important;
    border-radius: 50px !important;
    padding: 8px 20px !important;
}

/* 7. Bouton Fermer (Croix en haut à droite) */
#tarteaucitronRoot #tarteaucitronClosePanel {
    background: transparent !important;
    color: rgba(255, 254, 250, 0.5) !important;
}

/* 8. Icône flottante (Citron en bas à gauche) */
#tarteaucitronRoot #tarteaucitronManager {
    background: rgba(2, 1, 1, 0.8) !important;
    border: 1px solid rgba(255, 254, 250, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 50% !important;
}
/* =========================================================================
   CUSTOMISATION BANDEAU D'ALERTE TARTEAUCITRON (En bas de l'écran)
   ========================================================================= */

/* Le fond du bandeau en bas (Dark Glass) */
#tarteaucitronRoot #tarteaucitronAlertBig {
    background: rgba(2, 1, 1, 0.85) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-top: 1px solid rgba(255, 254, 250, 0.1) !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.6) !important;
    padding: 1rem 2rem !important;
}

/* Le texte principal du bandeau */
#tarteaucitronRoot #tarteaucitronDisclaimerAlert {
    color: rgba(255, 254, 250, 0.8) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.85rem !important;
}

/* Lien "Politique de confidentialité" */
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPrivacyUrl {
    color: rgba(255, 254, 250, 0.5) !important;
    text-decoration: underline !important;
}

/* Bouton Vert "Tout accepter" -> devient Néon Bleu Premium */
#tarteaucitronRoot #tarteaucitronPersonalize2 {
    background: rgba(59, 130, 246, 0.1) !important;
    border: 1px solid rgba(59, 130, 246, 0.4) !important;
    color: #fff !important;
    border-radius: 50px !important;
    padding: 8px 24px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}
#tarteaucitronRoot #tarteaucitronPersonalize2:hover {
    background: rgba(59, 130, 246, 0.2) !important;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.3) !important;
}

/* Bouton Rouge "Tout refuser" -> devient un contour gris discret */
#tarteaucitronRoot #tarteaucitronAllDenied2 {
    background: transparent !important;
    border: 1px solid rgba(255, 254, 250, 0.2) !important;
    color: rgba(255, 254, 250, 0.7) !important;
    border-radius: 50px !important;
    padding: 8px 20px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}
#tarteaucitronRoot #tarteaucitronAllDenied2:hover {
    background: rgba(255, 254, 250, 0.05) !important;
    color: #fff !important;
    border-color: rgba(255, 254, 250, 0.4) !important;
}

/* Bouton Blanc "Personnaliser" -> devient semi-transparent */
#tarteaucitronRoot #tarteaucitronPersonalize {
    background: rgba(255, 254, 250, 0.05) !important;
    border: 1px solid rgba(255, 254, 250, 0.1) !important;
    color: #fff !important;
    border-radius: 50px !important;
    padding: 8px 20px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}
#tarteaucitronRoot #tarteaucitronPersonalize:hover {
    background: rgba(255, 254, 250, 0.1) !important;
}
/* --- Correction Responsive Bandeau Cookies (Tarteaucitron) --- */

/* Appliquer le box-sizing à tous les éléments du bandeau */
#tarteaucitronRoot * {
    box-sizing: border-box !important;
}

/* Forcer le conteneur principal à ne jamais dépasser l'écran */
#tarteaucitronAlertBig,
#tarteaucitronAlertSmall {
    width: 100% !important;
    max-width: 100vw !important; /* Limite stricte à la largeur de la fenêtre */
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important; /* Centre l'élément s'il y a de la marge */
    box-sizing: border-box !important;
    overflow-x: hidden !important; /* Cache tout ce qui tente de sortir horizontalement */
}

/* Forcer le texte long à revenir à la ligne au lieu de déborder */
#tarteaucitronAlertBig .tarteaucitronAlertBigWrapper,
#tarteaucitronRoot .tarteaucitronTitle {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}