:root {
    /* Palette Blue Tech */
    --bg-main: #020617;
    --card-bg: #0f172a;
    --card-hover: #1e293b;
    --border: rgba(255, 255, 255, 0.08);
    --accent: #3b82f6;
    --accent-dark: #2563eb;
    --text-main: #f1f5f9;
    --text-muted: #94a3b8;
    --radius: 20px;
    --font: 'Inter', sans-serif;
}

html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { background-color: var(--bg-main); color: var(--text-main); font-family: var(--font); margin: 0; line-height: 1.6; overflow-x: hidden; }

/* Ambiance */
.noise-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.03; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); }
.ambient-glow { position: fixed; width: 800px; height: 800px; border-radius: 50%; background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 70%); top: -300px; left: 50%; transform: translateX(-50%); z-index: -1; pointer-events: none; }

/* Nav */
nav { position: fixed; top: 20px; width: 100%; display: flex; justify-content: center; z-index: 100; }
.nav-pill { background: rgba(15, 23, 42, 0.7); backdrop-filter: blur(12px); border: 1px solid var(--border); padding: 10px 30px; border-radius: 100px; display: flex; align-items: center; gap: 50px; box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
.logo { font-weight: 800; color: white; text-decoration: none; font-size: 1.1rem; }
.nav-links { display: flex; gap: 30px; }
.nav-links a { color: var(--text-muted); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: 0.2s; }
.nav-links a:hover { color: white; }
.nav-btn { background: var(--accent); color: white; padding: 10px 24px; border-radius: 100px; text-decoration: none; font-weight: 600; font-size: 0.85rem; transition: 0.2s; }
.nav-btn:hover { background: var(--accent-dark); }

/* Hero */
.hero { text-align: center; padding: 140px 20px 100px; max-width: 800px; margin: 0 auto; position: relative; z-index: 1; }
.status-badge { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 25px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); padding: 8px 16px; border-radius: 50px; font-size: 0.8rem; color: var(--text-muted); }
.pulse { width: 8px; height: 8px; background: #22c55e; border-radius: 50%; box-shadow: 0 0 12px rgba(34, 197, 94, 0.5); }
.hero-title { font-size: 3.5rem; font-weight: 800; margin: 0; letter-spacing: -1.5px; line-height: 1.1; }
.hero-role { font-size: 2rem; font-weight: 600; color: var(--text-muted); margin: 5px 0 30px; }
.text-gradient { background: linear-gradient(to right, #60a5fa, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero-desc { font-size: 1.15rem; color: var(--text-muted); max-width: 600px; margin: 0 auto 40px; }
.hero-buttons { display: flex; justify-content: center; gap: 20px; }
.btn-primary { background: var(--accent); color: white; padding: 12px 28px; border-radius: 12px; text-decoration: none; font-weight: 600; transition: 0.3s; }
.btn-primary:hover { background: var(--accent-dark); box-shadow: 0 0 20px rgba(59, 130, 246, 0.4); }
.btn-secondary { background: rgba(255,255,255,0.05); color: white; padding: 12px 28px; border-radius: 12px; text-decoration: none; border: 1px solid var(--border); transition: 0.3s; }
.btn-secondary:hover { background: rgba(255,255,255,0.1); border-color: white; }

/* Grid (AÉRÉE & CORRIGÉE) */
.bento-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 32px; /* Plus d'espace */
    max-width: 1100px; 
    margin: 0 auto; 
    padding: 0 20px 100px; 
    position: relative; 
    z-index: 1;
    align-items: start; /* Empêche l'étirement vertical forcé */
}

.card { 
    background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px; /* Plus de padding */
    position: relative; overflow: hidden; display: flex; flex-direction: column; transition: all 0.3s ease; 
    height: auto; /* IMPORTANT pour éviter le chevauchement */
}

.spotlight-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y), rgba(255,255,255,0.06), transparent 40%); opacity: 0; transition: opacity 0.3s; z-index: 1; }
.spotlight-group:hover .spotlight-card::before { opacity: 1; }
.card-content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; }

/* Layouts */
.col-span-1 { grid-column: span 1; }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.center-content { align-items: center; text-align: center; justify-content: center; }

/* Profil */
.profile-layout { display: flex; align-items: center; gap: 30px; height: 100%; }
.profile-img { width: 120px; height: 120px; border-radius: 20px; object-fit: cover; border: 2px solid rgba(255,255,255,0.1); flex-shrink: 0; }
h3 { margin: 0 0 10px; font-size: 1.2rem; font-weight: 600; color: white; }
p { color: var(--text-muted); font-size: 0.95rem; margin: 0; line-height: 1.6; }

/* Mobilité */
.mobility-card { padding: 0 !important; }
.mobility-content { padding: 30px; justify-content: flex-start; gap: 20px; }
.mobility-header { display: flex; justify-content: space-between; align-items: center; }
.mobility-header h3 { margin: 0; }
.tag-status { font-size: 0.7rem; color: #4ade80; background: rgba(74, 222, 128, 0.1); padding: 4px 10px; border-radius: 20px; font-weight: 600; border: 1px solid rgba(74, 222, 128, 0.2); }
.mobility-grid { display: flex; flex-direction: column; gap: 15px; }
.mob-item { display: flex; align-items: center; gap: 15px; background: rgba(255,255,255,0.02); padding: 12px; border-radius: 12px; }
.mob-icon { font-size: 1.2rem; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.03); border-radius: 10px; border: 1px solid var(--border); flex-shrink: 0; }
.mob-text { display: flex; flex-direction: column; }
.mob-label { font-size: 0.7rem; color: var(--text-muted); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 2px; }
.mob-value { font-size: 0.95rem; color: white; font-weight: 500; }
.radar-bg { position: absolute; top: -60px; right: -60px; width: 220px; height: 220px; pointer-events: none; z-index: 0; }
.radar-circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid rgba(99, 102, 241, 0.15); border-radius: 50%; }
.c1 { width: 70px; height: 70px; opacity: 0.8; } .c2 { width: 140px; height: 140px; opacity: 0.5; } .c3 { width: 210px; height: 210px; opacity: 0.2; }
.location-pin { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 15px var(--accent); }
.pin-pulse { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background: var(--accent); opacity: 0.5; animation: ping 2.5s infinite; }
@keyframes ping { 75%, 100% { transform: scale(3.5); opacity: 0; } }

/* Expérience */
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
.tag { font-size: 0.75rem; background: rgba(59, 130, 246, 0.1); padding: 4px 10px; border-radius: 6px; color: var(--accent); border: 1px solid rgba(59, 130, 246, 0.2); }
.xp-list { display: flex; flex-direction: column; gap: 30px; }
.xp-item { display: flex; gap: 20px; align-items: flex-start; }
.xp-logo { width: 45px; height: 45px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; }
.orange-bg { background: rgba(255, 121, 0, 0.15); color: #ff7900; } .green-bg { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.xp-details { flex-grow: 1; width: 100%; }
.xp-top { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 5px; }
.xp-top h4 { margin: 0; font-size: 1rem; color: white; font-weight: 600; }
.date { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }
.company { display: block; font-size: 0.9rem; font-weight: 500; color: var(--accent); margin-bottom: 8px; }
.skill-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.skill-chips span { font-size: 0.75rem; background: rgba(255,255,255,0.03); border: 1px solid var(--border); padding: 4px 10px; border-radius: 6px; color: var(--text-muted); }

/* Formation */
.timeline-clean { border-left: 2px solid var(--border); padding-left: 20px; margin-left: 10px; }
.tl-item { position: relative; margin-bottom: 20px; }
.tl-dot { position: absolute; left: -26px; top: 5px; width: 10px; height: 10px; background: var(--bg-main); border: 2px solid var(--text-muted); border-radius: 50%; }
.tl-dot.active { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.tl-text strong { display: block; font-size: 0.95rem; color: white; }
.tl-text .sub-text { display: block; font-size: 0.85rem; color: var(--text-main); font-weight: 500; margin: 2px 0; }
.tl-text small { color: var(--text-muted); font-size: 0.8rem; }

/* Certifications */
.cert-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.cert-badge { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.03); padding: 12px; border-radius: 12px; border: 1px solid var(--border); font-size: 0.85rem; font-weight: 600; color: white; }
.c-icon { font-size: 1.2rem; }

/* Stack avec Tooltips */
.stack-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.stack-item { position: relative; display: flex; justify-content: center; align-items: center; }
.stack-item i { font-size: 2.2rem; color: var(--text-muted); transition: all 0.3s ease; cursor: pointer; }
.stack-item:hover i { color: var(--accent); transform: scale(1.1) translateY(-5px); filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.4)); }
.tooltip {
    position: absolute; bottom: -35px; left: 50%; transform: translateX(-50%) translateY(10px);
    background-color: rgba(255, 255, 255, 0.95); color: var(--bg-main); padding: 5px 10px;
    border-radius: 6px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; pointer-events: none;
    opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); z-index: 10;
}
.tooltip::before { content: ''; position: absolute; top: -4px; left: 50%; transform: translateX(-50%); border-width: 0 5px 5px 5px; border-style: solid; border-color: transparent transparent rgba(255, 255, 255, 0.95) transparent; }
.stack-item:hover .tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* PROJETS : Logo cliquable */
.project-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; cursor: pointer; position: relative; }
.clickable-card:hover { border-color: var(--accent); box-shadow: 0 0 20px rgba(59, 130, 246, 0.2); transform: translateY(-5px); }
.clickable-card:hover .interactive-title { color: var(--accent); transition: 0.3s; }
.project-head { margin-bottom: 10px; }
.mini-tag { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; }
.mini-tag.cyber { color: #f87171; } .mini-tag.radio { color: #a78bfa; }
.project-tags { margin-top: 15px; }

/* LE LOGO "FLÈCHE" EN HAUT A DROITE */
.card-action {
    position: absolute; top: 20px; right: 20px; width: 32px; height: 32px;
    background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: var(--text-muted);
    transition: all 0.3s ease;
}
.project-card:hover .card-action {
    background: var(--accent); color: white; border-color: var(--accent); transform: rotate(45deg);
}

/* Contact */
.bento-form { display: flex; flex-direction: column; gap: 15px; margin-top: 15px; }
.row { display: flex; gap: 15px; }
input, textarea { width: 100%; background: rgba(0,0,0,0.3); border: 1px solid var(--border); padding: 15px; border-radius: 12px; color: white; outline: none; font-family: inherit; transition: 0.2s; box-sizing: border-box;;}
input:focus, textarea:focus { border-color: var(--accent); background: rgba(59, 130, 246, 0.05); }
.submit-btn { background: white; color: black; border: none; padding: 15px; border-radius: 12px; font-weight: 600; cursor: pointer; transition: 0.2s; }
.submit-btn:hover { background: #e2e8f0; }

/* Infos */
.quick-info-stack { display: flex; flex-direction: column; gap: 15px; margin-top: 15px; }
.quick-item { display: flex; align-items: center; gap: 15px; padding: 15px; background: rgba(255,255,255,0.03); border-radius: 12px; text-decoration: none; border: 1px solid transparent; transition: 0.2s; cursor: pointer; }
.quick-item:hover { background: rgba(255,255,255,0.06); border-color: var(--border); }
.quick-item.highlight { background: rgba(59, 130, 246, 0.1); border-color: var(--accent); }
.quick-icon { font-size: 1.2rem; }
.quick-text { display: flex; flex-direction: column; }
.label { font-size: 0.8rem; color: var(--text-muted); }
.value { font-size: 0.95rem; color: white; font-weight: 500; }
#toast { margin-left: auto; color: #4ade80; font-size: 0.8rem; font-weight: 600; opacity: 0; transition: 0.3s; }
.icon-square { width: 45px; height: 45px; background: rgba(255,255,255,0.05); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 15px; }

/* Footer & Anim */
.reveal { opacity: 0; transform: translateY(20px); transition: 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
.visible { opacity: 1; transform: translateY(0); }
footer { text-align: center; padding: 50px 0; color: var(--text-muted); font-size: 0.8rem; border-top: 1px solid var(--border); margin-top: 50px; }

@media (max-width: 900px) {
    .bento-grid { grid-template-columns: 1fr; }
    .col-span-1, .col-span-2, .col-span-3 { grid-column: span 1; }
    .hero-title { font-size: 2.8rem; }
    .profile-layout { flex-direction: column; text-align: center; }
    .row { flex-direction: column; gap: 15px; }
}


/* --- CERTIFICATIONS (Style Badge Détaillé) --- */
.cert-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.cert-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.03);
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    transition: all 0.3s ease;
    cursor: default;
}

.cert-badge:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.c-icon {
    font-size: 1.4rem;
}

.c-info {
    display: flex;
    flex-direction: column;
}

.c-name {
    font-weight: 700;
    color: white;
    font-size: 0.9rem;
    line-height: 1.1;
}

.c-sub {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 2px;
}



/* --- STACK PROPRE (3x2) --- */
.stack-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px 10px; 
    text-align: center; 
    padding: 15px 0;
}

.stack-item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Style de base des icônes */
.stack-item i { 
    font-size: 3rem; /* Bonne taille */
    color: #ffffff; /* Blanc par défaut pour les versions -plain */
    transition: 0.3s ease;
}

/* Exception pour Windows (version originale déjà colorée) */
.devicon-windows8-original {
    /* Pas besoin de forcer la couleur, le bleu d'origine est top */
    font-size: 3rem;
}

/* Exception pour Splunk (format large) */
.devicon-splunk-plain-wordmark {
    font-size: 2.5rem !important;
    width: 100%;
}

/* Effet au survol : Zoom + Bleu */
.stack-item:hover i { 
    transform: scale(1.2) translateY(-5px); 
    /* On force le bleu uniquement pour les icônes blanches (plain) */
    color: var(--accent);
    filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.5));
}

/* Tooltips (Infobulles) */
.tooltip {
    position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%) translateY(10px);
    background-color: white; color: #020617; padding: 4px 10px;
    border-radius: 6px; font-size: 0.75rem; font-weight: 800; white-space: nowrap; 
    opacity: 0; visibility: hidden; transition: all 0.3s ease; pointer-events: none; z-index: 10;
}
.tooltip::before { content: ''; position: absolute; top: -4px; left: 50%; transform: translateX(-50%); border-width: 0 5px 5px 5px; border-style: solid; border-color: transparent transparent white transparent; }
.stack-item:hover .tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }




/* --- HERO AVATAR (NOUVEAU) --- */
.hero-avatar {
    margin: 0 auto 25px; /* Centre et espacement avec le titre */
    width: 120px;       /* Taille de l'image */
    height: 120px;
    position: relative;
}

.hero-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%; /* Cercle parfait */
    
    /* Bordure subtile */
    border: 2px solid rgba(255, 255, 255, 0.1);
    
    /* Effet de lueur interne/externe */
    box-shadow: 
        0 0 0 4px rgba(255, 255, 255, 0.02), /* Anneau externe */
        0 20px 40px rgba(0, 0, 0, 0.4);      /* Ombre portée */
    
    transition: transform 0.3s ease;
}

/* Petit effet au survol */
.hero-avatar img:hover {
    transform: scale(1.05);
    border-color: var(--accent);
}











/* --- REGLAGES FLOTTANTS (TOP RIGHT) --- */
.settings-container {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
    z-index: 101; /* Au-dessus de la nav */
}

.setting-btn {
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    color: var(--text-muted);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s;
    text-decoration: none; /* Pour le lien a */
}

.setting-btn:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
    transform: rotate(15deg);
}

.text-btn { font-weight: 700; font-size: 0.8rem; } /* Style pour "EN" */

/* --- GESTION DES ICÔNES THEME (LOGIQUE INVERSÉE) --- */

/* 1. PAR DÉFAUT (Mode Sombre) : On affiche le SOLEIL */
/* Cela invite l'utilisateur à cliquer pour "allumer la lumière" */
.icon-sun { 
    display: block !important; 
}
.icon-moon { 
    display: none !important; 
}

/* 2. EN MODE CLAIR (body.light-mode) : On affiche la LUNE */
/* Cela invite l'utilisateur à cliquer pour "éteindre la lumière" */
body.light-mode .icon-sun { 
    display: none !important; 
}
body.light-mode .icon-moon { 
    display: block !important; 
}


/* --- THEME CLAIR (LIGHT MODE) --- */
/* Cette classe sera ajoutée au body via JS */
body.light-mode {
    --bg-main: #f8fafc;       /* Fond très clair */
    --card-bg: #ffffff;       /* Cartes blanches */
    --card-hover: #f1f5f9;    /* Hover gris clair */
    --border: rgba(0, 0, 0, 0.1); /* Bordures grises */
    --text-main: #0f172a;     /* Texte quasi noir */
    --text-muted: #64748b;    /* Texte secondaire gris */
    --accent: #2563eb;        /* Bleu un peu plus vif */
}
body.light-mode input:focus, 
body.light-mode textarea:focus {
    border-color: var(--accent) !important;
    background: #ffffff !important; /* Devient blanc pur au focus */
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important; /* Légère lueur bleue */
}

input::placeholder, textarea::placeholder {
    color: rgba(255, 255, 255, 0.5); /* Placeholder gris clair */
}

/* Mode Clair (Light Mode) */
body.light-mode input, 
body.light-mode textarea {
    background: #f8fafc !important; /* Fond gris très pâle */
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important; /* Texte gris très foncé (presque noir) */
    box-shadow: none !important;
}

body.light-mode input::placeholder, 
body.light-mode textarea::placeholder {
    color: #94a3b8 !important; /* Placeholder gris moyen */
}

/* Focus en Mode Clair */
body.light-mode input:focus, 
body.light-mode textarea:focus {
    border-color: var(--accent) !important;
    background: #ffffff !important; /* Devient blanc pur au focus */
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important; /* Légère lueur bleue */
}
/* Ajustements spécifiques pour le mode clair */
body.light-mode .nav-pill {
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
body.light-mode .setting-btn {
    background: rgba(255, 255, 255, 0.8);
    color: var(--text-main);
}
body.light-mode .setting-btn:hover {
    color: white; /* Reste blanc au survol sur fond bleu */
}

/* Inversion des icones en mode clair */
body.light-mode .icon-sun { display: block; }
body.light-mode .icon-moon { display: none; }

/* Inversion des icônes de la stack (Devicon) en mode clair */
/* Car elles sont forcées en blanc dans ton code actuel */
body.light-mode .stack-item i {
    color: #334155 !important; /* Gris foncé */
}
body.light-mode .stack-item:hover i {
    color: var(--accent) !important; /* Bleu au survol */
}
/* Exception : On laisse Windows et les logos colorés comme ils sont si besoin, 
   mais comme tu as tout forcé en blanc, le gris foncé ira très bien */

/* --- CORRECTIFS VISIBILITÉ MODE CLAIR (LIGHT MODE) --- */

/* 1. Titres et Textes forts */
body.light-mode h1, 
body.light-mode h2, 
body.light-mode h3, 
body.light-mode h4,
body.light-mode .logo,
body.light-mode strong,
body.light-mode .mob-value, /* Valeurs mobilité */
body.light-mode .c-name {   /* Titres certifications */
    color: #0f172a !important; /* Bleu nuit très foncé */
}

/* 2. Textes courants et descriptions */
body.light-mode p,
body.light-mode .hero-desc,
body.light-mode .c-sub,
body.light-mode .mob-label,
body.light-mode .date {
    color: #475569 !important; /* Gris foncé lisible */
}

/* 3. La Stack (Les icônes qui étaient blanches) */
body.light-mode .stack-item i {
    color: #0f172a !important; /* On force les icônes en noir */
    text-shadow: none !important; /* On enlève l'ombre blanche */
}

/* 4. Les badges et bordures */
body.light-mode .card,
body.light-mode .nav-pill,
body.light-mode .cert-badge,
body.light-mode .mob-item,
body.light-mode input,
body.light-mode textarea {
    border-color: #cbd5e1; /* Bordures gris clair visibles */
    background: #ffffff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); /* Légère ombre pour le relief */
}

/* 5. Le bouton "Me contacter" dans le Hero */
body.light-mode .btn-secondary {
    color: #0f172a;
    border-color: #cbd5e1;
}
body.light-mode .btn-secondary:hover {
    background: #f1f5f9;
}
/* --- CORRECTIFS SUPPLEMENTAIRES MODE CLAIR --- */

/* 1. Les valeurs (Texte "Copier email", "Voir profil", "Télécharger") */
body.light-mode .value {
    color: #0f172a !important; /* Noir foncé */
    font-weight: 600;
}

/* 2. Les icônes de la liste rapide (Enveloppe, Valise, Feuille) */
body.light-mode .quick-icon {
    font-size: 1.3rem; /* Un peu plus gros pour la lisibilité */
    filter: none; /* Enlève d'éventuels filtres blancs */
    /* On peut laisser l'emoji tel quel, ou forcer une couleur si c'était une font */
}

/* 3. L'icône GitHub (dans le carré) */
body.light-mode .icon-square i {
    color: #0f172a !important; /* Logo GitHub en noir */
}

/* 4. Le fond du carré GitHub pour qu'il se voie sur fond blanc */
body.light-mode .icon-square {
    background: rgba(0, 0, 0, 0.08) !important; /* Gris léger au lieu de transparent */
}

/* 5. Le bouton de téléchargement du CV (fond bleu clair en mode dark) */
body.light-mode .quick-item.highlight {
    background: #eff6ff !important; /* Bleu très très clair */
    border-color: #bfdbfe !important; /* Bordure bleu clair */
}

/* 6. Les petits labels (Email, LinkedIn...) au cas où */
body.light-mode .label {
    color: #64748b !important; /* Gris moyen */
}

/* --- THEME CLAIR : STYLE "SOFT UI" (Comme sur la photo) --- */

/* 1. La Carte Principale (Conteneur global) */
body.light-mode .card,
body.light-mode .nav-pill {
    background: #ffffff !important;
    /* Bordure extrêmement fine et légère (gris très pâle) */
    border-color: rgba(0, 0, 0, 0.04) !important; 
    /* Grande ombre douce et diffuse pour l'effet de flottement */
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.06) !important;
}

/* 2. Les éléments internes (Mobilité, Infos, Certifs) */
body.light-mode .mob-item,
body.light-mode .quick-item,
body.light-mode .cert-badge,
body.light-mode .risk-item,
body.light-mode .flow-step {
    background-color: #ffffff !important; /* On remet du blanc */
    /* Bordure très subtile pour délimiter sans agresser */
    border: 1px solid #f1f5f9 !important; 
    /* Petite ombre portée douce sous chaque élément */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.2s ease;
}

/* 3. Au survol des éléments internes */
body.light-mode .mob-item:hover,
body.light-mode .quick-item:hover,
body.light-mode .cert-badge:hover {
    border-color: var(--accent) !important; /* Juste une fine ligne bleue */
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.15) !important; /* Lueur bleue douce */
    transform: translateY(-2px);
}

/* 4. Les icônes Emojis (Maison, Voiture, etc.) */
/* On s'assure qu'elles gardent leurs couleurs d'origine */
body.light-mode .mob-icon, 
body.light-mode .quick-icon {
    background: transparent !important; /* Pas de fond gris */
    border: none !important; /* Pas de bordure autour de l'icone */
    font-size: 1.4rem;
    filter: none !important; /* Affiche les couleurs réelles (Orange, Rouge...) */
}

/* 5. Le badge "Disponible" (Vert) */
body.light-mode .tag-status {
    background: #dcfce7 !important; /* Vert très clair */
    color: #166534 !important; /* Vert foncé */
    border: none !important;
}

/* 6. Formulaires (Inputs) */
body.light-mode input, 
body.light-mode textarea {
    background: #f8fafc !important; /* Gris très pâle */
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
}

/* 7. Typographie (pour correspondre à la photo) */
body.light-mode .mob-label,
body.light-mode .label {
    color: #94a3b8 !important; /* Gris moyen (Slate 400) */
    font-weight: 600;
    letter-spacing: 0.05em;
}

body.light-mode .mob-value,
body.light-mode .value {
    color: #1e293b !important; /* Gris très foncé (Slate 800) */
    font-weight: 600;
}






/* --- 1. CUSTOM SCROLLBAR (Look Premium) --- */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg-main);
}
::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

/* --- 2. BACKGROUND ANIMÉ (Breathing Blobs) --- */
/* On modifie l'ambient-glow pour qu'il bouge */
.ambient-glow {
    position: fixed;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    top: -100px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: -1;
    filter: blur(80px);
    animation: breathe 10s infinite ease-in-out;
    pointer-events: none;
}

/* On ajoute une 2ème lueur pour la complexité visuelle */
.ambient-glow::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.15) 0%, transparent 70%); /* Violet */
    top: 100px;
    left: -200px;
    border-radius: 50%;
    animation: float 15s infinite ease-in-out reverse;
}

@keyframes breathe {
    0%, 100% { transform: translate(-50%, 0) scale(1); opacity: 0.8; }
    50% { transform: translate(-50%, 20px) scale(1.1); opacity: 0.5; }
}

@keyframes float {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(30px, 40px); }
}

/* --- 3. CURSEUR MACHINE À ÉCRIRE --- */
.cursor {
    display: inline-block;
    color: var(--accent);
    animation: blink 1s step-end infinite;
    font-weight: 400;
}
@keyframes blink { 50% { opacity: 0; } }



/* --- 5. EFFET MAGNÉTIQUE --- */
.magnetic {
    display: inline-block;
    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}







/* --- EXPERIENCE TIMELINE DESIGN --- */

.xp-list {
    display: flex;
    flex-direction: column;
    gap: 0; /* On gère l'espace via le padding des items */
    position: relative;
}

.xp-item {
    display: flex;
    gap: 20px;
    position: relative;
    padding-bottom: 40px; /* Espace entre les expériences */
}

/* Colonne de gauche (Logo + Ligne) */
.xp-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 50px;
}

.xp-logo {
    width: 48px;
    height: 48px;
    border-radius: 14px; /* Un peu plus carré (Apple style) */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    position: relative;
    z-index: 2;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2); /* Ombre portée */
}

/* Couleurs des logos */
.orange-bg { background: linear-gradient(135deg, rgba(255, 121, 0, 0.2), rgba(255, 121, 0, 0.1)); color: #ff7900; border: 1px solid rgba(255, 121, 0, 0.3); }
.green-bg { background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.1)); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); }

/* La ligne verticale connectant les points */
.xp-line {
    width: 2px;
    flex-grow: 1;
    background: linear-gradient(to bottom, var(--border), transparent);
    margin-top: 10px;
    border-radius: 2px;
}

/* Carte de contenu (Droite) */
.xp-content-card {
    flex-grow: 1;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid transparent;
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s ease;
}

/* Effet au survol de la carte */
.xp-item:hover .xp-content-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--border);
    transform: translateX(5px);
}

.xp-item:hover .xp-logo {
    transform: scale(1.1) rotate(-5deg);
}

/* En-tête de la carte */
.xp-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 10px;
}

.xp-header h4 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main);
}

.company-link, .company-name {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    margin-top: 4px;
}

.xp-date {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.xp-desc {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 15px;
}

.xp-desc strong {
    color: var(--text-main);
    font-weight: 600;
}

/* Nouveaux Tags (Chips) plus jolis */
.skill-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.chip-tech, .chip-tool {
    font-size: 0.75rem;
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 600;
    transition: 0.2s;
    cursor: default;
}

/* Style Tech (Bleu) */
.chip-tech {
    background: rgba(59, 130, 246, 0.1);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

/* Style Outils (Gris/Violet) */
.chip-tool {
    background: rgba(148, 163, 184, 0.1);
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.xp-item:hover .chip-tech {
    background: rgba(59, 130, 246, 0.2);
}

/* --- ADAPTATION LIGHT MODE --- */
body.light-mode .xp-content-card {
    background: #ffffff;
    border-color: rgba(0,0,0,0.05);
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

body.light-mode .xp-item:hover .xp-content-card {
    background: #ffffff;
    border-color: var(--accent);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.15);
}

body.light-mode .xp-line {
    background: linear-gradient(to bottom, #e2e8f0, transparent);
}

body.light-mode .xp-date {
    background: #f1f5f9;
    color: #64748b;
}

/* Logos en Light Mode (pour qu'ils ressortent mieux) */
body.light-mode .orange-bg { background: #fff7ed; border-color: #fdba74; }
body.light-mode .green-bg { background: #f0fdf4; border-color: #86efac; }

/* Chips en Light Mode */
body.light-mode .chip-tech {
    background: #eff6ff;
    color: #2563eb;
    border-color: #bfdbfe;
}
body.light-mode .chip-tool {
    background: #f8fafc;
    color: #475569;
    border-color: #e2e8f0;
}






/* Style spécifique pour la carte profil */
.profile-card h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 1.5rem;
}

.profile-section {
    margin-bottom: 15px;
    padding-left: 15px;
    border-left: 3px solid rgba(59, 130, 246, 0.3); /* Bordure gauche colorée */
}

.highlight {
    color: var(--text-main);
    font-weight: 700;
}

.highlight-orange {
    color: #ff7900; /* Orange Business color */
    font-weight: 700;
}

.highlight-blue {
    color: var(--accent);
    font-weight: 700;
}

.tech-tag {
    background-color: rgba(59, 130, 246, 0.1);
    color: var(--accent);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    font-weight: 600;
}

/* Ajustement pour le mode clair */
body.light-mode .tech-tag {
    background-color: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}





/* --- PROFIL PREMIUM (Inline Badges) --- */

/* Amélioration de la carte globale */
.profile-premium .card-content {
    padding: 32px; /* Un peu plus d'espace */
}

.profile-premium h3 {
    font-size: 1.5rem;
    margin-bottom: 25px;
    background: linear-gradient(to right, #ffffff, #94a3b8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* Amélioration de la typographie des paragraphes */
.profile-body p {
    font-size: 1.05rem; /* Légèrement plus grand pour la lisibilité */
    line-height: 1.75;  /* Interligne plus aéré */
    color: var(--text-muted);
    margin-bottom: 25px;
}

.profile-body strong {
    color: var(--text-main); /* Les mots importants non-badgés en blanc */
    font-weight: 600;
}

/* --- STYLES DES BADGES INLINE --- */

/* Style de base pour tous les badges textuels */
span[class^="badge-"] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.95em;
    vertical-align: middle; /* Alignement parfait avec le texte */
    margin: 0 2px; /* Petit espace autour */
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

/* Badge Orange Business */
.badge-orange {
    background: rgba(255, 121, 0, 0.1);
    color: #ff7900;
    border-color: rgba(255, 121, 0, 0.2);
}

/* Badges Techniques (BUT, Compétences) */
.badge-tech {
    background: rgba(59, 130, 246, 0.1);
    color: #60a5fa; /* Bleu clair */
    border-color: rgba(59, 130, 246, 0.2);
}

/* Petits badges pour les listes de technos (Python, Linux...) */
.badge-tech.small {
    font-size: 0.85em;
    padding: 1px 6px;
    font-family: monospace; /* Petite touche "code" */
}

/* Badge Objectif (Cible) */
.badge-target {
    background: rgba(168, 85, 247, 0.15); /* Violet */
    color: #c084fc;
    border-color: rgba(168, 85, 247, 0.3);
    font-weight: 700;
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.1); /* Légère lueur */
}

/* Effet au survol des badges */
span[class^="badge-"]:hover {
    transform: translateY(-1px);
    filter: brightness(1.2);
}

/* --- ADAPTATION LIGHT MODE --- */
body.light-mode .profile-premium h3 {
    background: linear-gradient(to right, #0f172a, #475569);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
body.light-mode .badge-orange { background: #fff7ed; border-color: #fdba74; }
body.light-mode .badge-tech { background: #eff6ff; color: #2563eb; border-color: #bfdbfe; }
body.light-mode .badge-target { background: #faf5ff; color: #9333ea; border-color: #e9d5ff; }











/* --- CARTE MOBILITÉ ÉTENDUE --- */

/* Fond décoratif style "Carte" pour habiller le vide */
.map-pattern {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.3;
    pointer-events: none;
    z-index: 0;
    mask-image: linear-gradient(to bottom, transparent 0%, black 100%); /* Fondu vers le bas */
}

/* Séparateur élégant */
.card-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, var(--border), transparent);
    margin: 25px 0;
    width: 100%;
}

/* Boîte Langue */
.language-box {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    padding: 12px;
    border-radius: 12px;
    margin-bottom: 15px;
}

.lang-flag {
    font-size: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.lang-info {
    display: flex;
    flex-direction: column;
}

.lang-name {
    font-weight: 700;
    color: var(--text-main);
    font-size: 0.9rem;
}

.lang-level {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Soft Skills Tags */
.soft-skills-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.soft-tag {
    font-size: 0.75rem;
    padding: 5px 10px;
    border-radius: 6px;
    background: rgba(168, 85, 247, 0.1); /* Nuance violette */
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.2);
    font-weight: 500;
}

/* --- LIGHT MODE ADAPTATION --- */
body.light-mode .map-pattern {
    background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
    opacity: 0.4;
}

body.light-mode .language-box {
    background: #f8fafc;
    border-color: #e2e8f0;
}

body.light-mode .soft-tag {
    background: #faf5ff;
    color: #9333ea;
    border-color: #e9d5ff;
}







/* --- CSS SPECIFIQUE PAGES PROJETS --- */

/* Grille Risques */
.risk-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 20px;
}
.risk-item {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border);
    padding: 15px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
}
.risk-item strong { color: var(--accent); font-size: 0.8rem; margin-bottom: 5px; text-transform: uppercase; }
.risk-item span { color: var(--text-main); font-size: 0.9rem; font-weight: 500; }

/* Schéma Réseau CSS (Visualisation Architecture) */
.network-diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
    padding: 20px;
    background: rgba(0,0,0,0.2);
    border-radius: 16px;
    border: 1px dashed var(--border);
}

.zones-container {
    display: flex;
    gap: 20px;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
}

.net-zone {
    padding: 15px 25px;
    border-radius: 12px;
    text-align: center;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.wan { border: 1px solid #f87171; background: rgba(248, 113, 113, 0.1); width: 100%; max-width: 200px; }
.dmz { border: 1px solid #fbbf24; background: rgba(251, 191, 36, 0.1); }
.lan { border: 1px solid #34d399; background: rgba(52, 211, 153, 0.1); }
.siem { border: 1px solid #818cf8; background: rgba(129, 140, 248, 0.1); }

.zone-label { font-weight: 700; font-size: 0.9rem; color: white; }
.net-zone small { font-size: 0.75rem; color: var(--text-muted); }

.connector {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-family: monospace;
    background: var(--card-bg);
    padding: 5px 10px;
    border-radius: 20px;
    border: 1px solid var(--border);
    z-index: 2;
}

/* Responsive pour le schéma */
@media (max-width: 768px) {
    .risk-grid { grid-template-columns: 1fr; }
    .zones-container { flex-direction: column; align-items: center; }
    .net-zone { width: 100%; }
}
















/* --- CSS SPECIFIQUE PROJET SDR --- */

/* Diagramme de Flux (Flowgraph) */
.radio-flow-diagram {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0,0,0,0.2);
    border: 1px dashed var(--border);
    border-radius: 16px;
    padding: 30px 20px;
    margin-top: 20px;
    flex-wrap: wrap;
    gap: 15px;
}

.flow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    padding: 15px;
    border-radius: 12px;
    min-width: 130px;
    transition: 0.3s;
}

.flow-step:hover {
    background: rgba(168, 85, 247, 0.05); /* Violet */
    border-color: #a855f7;
    transform: translateY(-3px);
}

.active-step {
    border-color: #a855f7;
    background: rgba(168, 85, 247, 0.1);
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.15);
}

.flow-icon {
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.flow-step strong {
    font-size: 0.9rem;
    color: white;
    display: block;
    margin-bottom: 4px;
}

.flow-step small {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.flow-arrow {
    font-size: 1.2rem;
    color: var(--text-muted);
    font-weight: 800;
}

/* Responsive pour le flowgraph */
@media (max-width: 768px) {
    .radio-flow-diagram {
        flex-direction: column;
        gap: 20px;
    }
    .flow-arrow {
        transform: rotate(90deg); /* Flèches vers le bas sur mobile */
    }
}


/* ======================================================= */
/* --- DESIGN ARCHITECTURE : MODE CLAIR (LIGHT MODE) --- */
/* ======================================================= */

/* 1. Le conteneur gris clair pour faire ressortir les boites blanches */
body.light-mode .network-diagram {
    background-color: #f1f5f9 !important; /* Gris très pâle */
    border: 1px dashed #cbd5e1 !important; /* Bordure pointillée visible */
}

/* 2. Style Général des Zones (Boites) */
body.light-mode .net-zone {
    background-color: #ffffff !important; /* FOND BLANC PUR */
    border-width: 2px !important;         /* Bordure plus épaisse */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important; /* Ombre douce pour le relief */
    color: #334155 !important;            /* Texte par défaut gris foncé */
}

/* 3. Gestion des Textes à l'intérieur */
body.light-mode .zone-label {
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

body.light-mode .net-zone small {
    color: #64748b !important; /* Description en gris moyen */
    font-weight: 600;
}

/* ======================================================= */
/* --- COULEURS MARQUÉES PAR ZONE (Bordure + Titre) --- */
/* ======================================================= */

/* 1. Zone Cœur HA (ROUGE) */
body.light-mode .net-zone.wan {
    border-color: #dc2626 !important; /* Rouge vif */
}
body.light-mode .net-zone.wan .zone-label {
    color: #dc2626 !important; /* Titre Rouge */
}

/* 2. Zone DMZ (ORANGE) */
body.light-mode .net-zone.dmz {
    border-color: #d97706 !important; /* Orange foncé */
}
body.light-mode .net-zone.dmz .zone-label {
    color: #d97706 !important; /* Titre Orange */
}

/* 3. Zone Supervision (VERT) */
body.light-mode .net-zone.siem {
    border-color: #059669 !important; /* Vert Emeraude */
}
body.light-mode .net-zone.siem .zone-label {
    color: #059669 !important; /* Titre Vert */
}

/* 4. Zone LAN (BLEU) */
body.light-mode .net-zone.lan {
    border-color: #2563eb !important; /* Bleu Roi */
}
body.light-mode .net-zone.lan .zone-label {
    color: #2563eb !important; /* Titre Bleu */
}










/* Ajustement de la nouvelle icône SVG dans le bouton */
.chat-toggle-btn svg.bot-icon {
    /* On s'assure que la couleur est bien blanche */
    stroke: white; 
    /* Légère ombre pour faire ressortir l'icône */
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3));
}

/* --- STYLE CHATBOT IA --- */

/* Bouton d'ouverture */
.chat-toggle-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 1.8rem;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
    z-index: 999;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-toggle-btn:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.6);
}

/* Fenêtre du Chat */
.chat-widget {
    position: fixed;
    bottom: 100px;
    right: 30px;
    width: 350px;
    height: 500px;
    background: rgba(15, 23, 42, 0.85); /* Fond sombre par défaut */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1000;
    transform: translateY(20px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

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

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

.chat-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
}

.bot-avatar {
    font-size: 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.status-text {
    font-size: 0.75rem;
    color: #4ade80; /* Vert */
    display: block;
}

.close-chat {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 1.5rem;
    cursor: pointer;
    transition: 0.2s;
}
.close-chat:hover { color: white; }

/* Zone des messages */
.chat-messages {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
    scrollbar-width: thin;
    scrollbar-color: #334155 transparent;
}

/* Bulles de message */
.message {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 0.9rem;
    line-height: 1.4;
    position: relative;
    animation: popIn 0.3s ease;
}

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

.message.bot {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
    border-bottom-left-radius: 2px;
}

.message.user {
    align-self: flex-end;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border-bottom-right-radius: 2px;
}

/* Zone de saisie */
.chat-input-area {
    padding: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 10px;
}

#chat-input {
    flex: 1;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 15px;
    border-radius: 20px;
    color: white;
    outline: none;
    font-size: 0.9rem;
}

#chat-input:focus { border-color: #3b82f6; }

#send-btn {
    background: #3b82f6;
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

#send-btn:hover { background: #2563eb; transform: scale(1.05); }

/* Indicateur de frappe (Typing...) */
.typing-indicator {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-left: 10px;
    font-style: italic;
    opacity: 0;
    transition: opacity 0.3s;
}

/* --- ADAPTATION MODE CLAIR --- */
body.light-mode .chat-widget {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}
body.light-mode .chat-title { color: #0f172a; }
body.light-mode .message.bot {
    background: #f1f5f9;
    color: #1e293b;
}
body.light-mode #chat-input {
    background: white;
    border-color: #cbd5e1;
    color: #0f172a;
}
body.light-mode .chat-header { border-color: #e2e8f0; }
body.light-mode .chat-input-area { border-color: #e2e8f0; }


/* --- NOUVEAU : BOUTONS RÉPONSES RAPIDES --- */
.quick-replies {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
    animation: popIn 0.4s ease;
}

.reply-btn {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #60a5fa;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.reply-btn:hover {
    background: rgba(59, 130, 246, 0.3);
    transform: translateY(-2px);
}

/* Indicateur de frappe amélioré */
.typing-dots {
    display: flex;
    gap: 4px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    width: fit-content;
    margin-bottom: 10px;
}
.dot {
    width: 6px; height: 6px;
    background: #94a3b8;
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out both;
}
.dot:nth-child(1) { animation-delay: -0.32s; }
.dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }

/* --- CSS ADDITIONNEL POUR LE CHATBOT AVANCÉ --- */

/* Barre de progression lecture (Haut de page) */
.scroll-progress {
    position: fixed;
    top: 0; left: 0; width: 0%; height: 3px;
    background: linear-gradient(to right, #3b82f6, #a855f7);
    z-index: 9999;
    transition: width 0.1s;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

/* Indicateur de frappe (3 points) */
.typing-dots {
    display: flex; gap: 4px; padding: 5px;
    width: fit-content;
}
.dot {
    width: 6px; height: 6px;
    background: #94a3b8; border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out both;
}
.dot:nth-child(1) { animation-delay: -0.32s; }
.dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }

/* Boutons Réponses Rapides */
.quick-replies {
    display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap;
    animation: slideUp 0.4s ease forwards;
}
.reply-btn {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #60a5fa; padding: 6px 12px;
    border-radius: 15px; font-size: 0.75rem; cursor: pointer;
    transition: all 0.2s;
}
.reply-btn:hover {
    background: rgba(59, 130, 246, 0.3); transform: translateY(-2px);
}
@keyframes slideUp { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.chat-notification {
    position: absolute;
    top: 0;
    right: 0;
    background: #ef4444; /* Rouge */
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-main);
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* --- NAVIGATION MOBILE (BOTTOM BAR STYLE) --- */
@media (max-width: 768px) {
    /* 1. On déplace la barre en bas */
    nav {
        top: auto !important;   /* Annule la position haute */
        bottom: 20px;           /* Fixe à 20px du bas */
        padding: 0 15px;        /* Marges latérales de sécurité */
        box-sizing: border-box;
        z-index: 1000;          /* Très haut pour passer au-dessus de tout */
    }

    /* 2. Style de la "Pilule" (Le conteneur) */
    .nav-pill {
        width: 100%;
        max-width: 400px;       /* Largeur max pour ne pas être trop étiré */
        justify-content: space-between; /* Espace entre les éléments */
        padding: 12px 25px;     /* Padding confortable pour le tactile */
        
        /* Effet Glassmorphism renforcé pour la lisibilité */
        background: rgba(15, 23, 42, 0.9);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.15);
        box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
    }

    /* 3. On réaffiche les liens (qui étaient cachés sur mobile) */
    .nav-links {
        display: flex !important; /* Force l'affichage */
        width: 100%;
        justify-content: space-around; /* Répartition équitable */
        gap: 0;
    }

    /* 4. Style des liens textes */
    .nav-links a {
        font-size: 0.9rem;
        color: var(--text-muted);
        position: relative;
        padding: 5px;
    }

    /* Indicateur actif (optionnel si vous avez le JS scroll spy) */
    .nav-links a.active {
        color: white;
    }
    .nav-links a.active::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 4px;
        height: 4px;
        background: var(--accent);
        border-radius: 50%;
    }

    /* 5. On cache le Logo et le bouton Contact (trop gros pour le mobile) */
    /* On garde l'essentiel : la navigation */
    .logo, .nav-btn {
        display: none !important;
    }
    
    /* 6. On remonte un peu le bouton du Chatbot pour ne pas gêner la barre */
    .chat-toggle-btn {
        bottom: 90px !important;
        right: 20px !important;
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }
}