/* =================================================================
   GLOBAL STYLES & COLOR PALETTE
   ================================================================= */

:root {
    /* Color Palette */
    --brand-purple: #6d28d9; /* A richer, deeper purple */
    --brand-yellow: #facc15; /* A vibrant, sunflower yellow */
    --brand-teal: #14b8a6;   /* A cool, modern teal for accents */
    
    /* Base (Light Theme) */
    --bg-primary: #f8fafc; /* Almost white, very light gray */
    --bg-secondary: #ffffff;
    --bg-accent: #f1f5f9; /* Light gray for section backgrounds */
    --bg-card: #ffffff;
    
    --text-primary: #1e293b; /* Dark slate for main text */
    --text-secondary: #475569; /* Lighter slate for subtext */
    --text-accent: var(--brand-purple);

    /* Interactive Elements */
    --link-hover: var(--brand-teal);
    --shadow-color: 220, 40%, 85%; /* Used for generating box-shadows */
    --shadow-elevation-low:
        0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34),
        0.4px 0.8px 1px -1.2px hsl(var(--shadow-color) / 0.34),
        1px 2px 2.5px -2.5px hsl(var(--shadow-color) / 0.34);
    --shadow-elevation-medium:
        0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.36),
        0.8px 1.6px 2px -0.8px hsl(var(--shadow-color) / 0.36),
        2.1px 4.1px 5.2px -1.7px hsl(var(--shadow-color) / 0.36),
        5px 10px 12.6px -2.5px hsl(var(--shadow-color) / 0.36);
}

/* =================================================================
   DARK MODE PALETTE
   ================================================================= */

[data-theme="dark"] {
    /* Color Palette */
    --brand-purple: #a78bfa; /* A lighter, softer purple for dark mode */
    --brand-yellow: #fde047; /* A slightly brighter yellow */
    --brand-teal: #2dd4bf;   /* A vibrant teal for dark mode */

    /* Base (Dark Theme) */
    --bg-primary: #0f172a; /* Deep, dark blue */
    --bg-secondary: #1e293b; /* Dark slate for cards/modals */
    --bg-accent: #1a2436; /* Slightly lighter dark blue for sections */
    --bg-card: #1e293b;

    --text-primary: #f1f5f9; /* Light gray for main text */
    --text-secondary: #94a3b8; /* Softer gray for subtext */
    --text-accent: var(--brand-purple);

    /* Interactive Elements */
    --link-hover: var(--brand-teal);
    --shadow-color: 220, 40%, 3%;
}


/* =================================================================
   BASE & TYPOGRAPHY
   ================================================================= */

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif; /* A modern, clean font */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-accent);
    font-weight: 700;
}

p {
    color: var(--text-secondary);
    line-height: 1.75;
    font-size: 1.1rem;
}

ul {
    font-size: 1.1rem;
    line-height: 1.75;
}

/* =================================================================
   LAYOUT & REUSABLE COMPONENTS
   ================================================================= */

.card {
    background-color: var(--bg-card);
    border-radius: 1rem; /* More rounded corners */
    box-shadow: var(--shadow-elevation-low);
    transition: all 0.3s ease-in-out;
    border: 1px solid transparent;
}

.card-hover:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-elevation-medium);
    border-color: var(--brand-purple);
}

.modal-content {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

/* Gradient Background for Hero/Nav */
.gradient-bg {
    background: linear-gradient(135deg, var(--brand-purple) 0%, var(--brand-teal) 100%);
}


/* =================================================================
   NAVIGATION & HEADER
   ================================================================= */

nav a .group-hover\:w-full {
    background-color: var(--brand-yellow);
    height: 2px;
}

nav a:hover {
    color: var(--brand-yellow);
}


/* =================================================================
   BUTTONS
   ================================================================= */

.btn {
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
    box-shadow: var(--shadow-elevation-low);
    border: 1px solid transparent;
}

.btn-primary {
    background: linear-gradient(90deg, var(--brand-purple) 0%, var(--brand-teal) 100%);
    color: white;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-elevation-medium);
}

.btn-secondary {
    background-color: var(--bg-card);
    color: var(--text-accent);
    border-color: var(--text-accent);
}

.btn-secondary:hover {
    background-color: var(--text-accent);
    color: var(--bg-card);
}


/* =================================================================
   SECTION SPECIFIC STYLES
   ================================================================= */

#profil, #veille {
    background-color: var(--bg-accent);
}

/* --- Timeline --- */
.timeline {
    position: relative;
    padding: 2rem 0;
}

.timeline::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    margin-left: -2px;
    background: linear-gradient(to bottom, var(--brand-purple), var(--brand-teal));
    border-radius: 2px;
    box-shadow: 0 0 10px var(--brand-purple);
}

.timeline-item {
    position: relative;
    width: 50%;
    padding: 1rem 2rem;
}

.timeline-item.left {
    left: 0;
    padding-right: 3rem;
}

.timeline-item.right {
    left: 50%;
    padding-left: 3rem;
}

.timeline-item::after {
    content: '';
    position: absolute;
    top: 1.5rem;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--bg-accent);
    border: 4px solid var(--brand-purple);
    z-index: 1;
    transition: all 0.2s ease;
}

.timeline-item.left::after {
    right: -10px;
}

.timeline-item.right::after {
    left: -10px;
}

.timeline-item:hover::after {
    transform: scale(1.2);
    border-color: var(--brand-teal);
}

.timeline-content {
    background-color: var(--bg-card);
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: var(--shadow-elevation-medium);
    position: relative;
}

/* --- Tech Icons --- */
.tech-icon {
    transition: all 0.3s ease;
}
.tech-icon:hover {
    transform: scale(1.1) rotate(5deg);
    background-color: var(--bg-accent);
}

/* =================================================================
   DARK MODE OVERRIDES (from original file, kept for compatibility)
   ================================================================= */

[data-theme="dark"] body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] #veille {
    background-color: var(--bg-accent) !important;
}

[data-theme="dark"] .card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .timeline-content {
    background-color: var(--bg-card) !important;
}

[data-theme="dark"] .bg-purple-100 { background-color: #3730a3 !important; }
[data-theme="dark"] .bg-yellow-100 { background-color: #78350f !important; }
[data-theme="dark"] .bg-red-100 { background-color: #7f1d1d !important; }
[data-theme="dark"] .bg-blue-100 { background-color: #1e3a8a !important; }
[data-theme="dark"] .pdf-container { background: #2c333d !important; }

[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-700,
[data-theme="dark"] .text-gray-600 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] p,
[data-theme="dark"] .text-gray-500,
[data-theme="dark"] .text-gray-400 {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6,
[data-theme="dark"] .text-purple-600,
[data-theme="dark"] .text-purple-800,
[data-theme="dark"] [style*="--text-accent"],
[data-theme="dark"] [style*="--brand-purple"] {
    color: var(--text-accent) !important;
}

[data-theme="dark"] .text-yellow-600,
[data-theme="dark"] [style*="--brand-yellow"] {
    color: var(--brand-yellow) !important;
}

[data-theme="dark"] .hover\:text-yellow-300:hover {
    color: var(--brand-yellow) !important;
}

[data-theme="dark"] .text-green-500 { color: #4ade80 !important; }
[data-theme="dark"] .border-purple-500 { border-color: var(--brand-purple) !important; }
[data-theme="dark"] .hover\:border-yellow-400:hover { border-color: var(--brand-yellow) !important; }

[data-theme="dark"] #darkModeToggle { background-color: #4b5563; }
[data-theme="dark"] #darkModeToggle i { color: var(--brand-yellow) !important; }

/* ==========================================================================
   Variables & Thème
   ========================================================================== */
:root {
    --brand-purple: #8B5CF6;
    --brand-yellow: #FBBF24;
    --brand-blue: #3B82F6;
    --brand-green: #10B981;
    --brand-red: #EF4444;

    --bg-primary: #F9FAFB;
    --bg-secondary: #FFFFFF;
    --bg-accent: #F3F4F6;
    --bg-card: #FFFFFF;
    --bg-card-accent-purple: #F5F3FF;
    --bg-card-accent-yellow: #FFFBEB;

    --text-primary: #1F2937;
    --text-secondary: #4B5563;
    --text-accent: #6D28D9;
    --text-on-color: #FFFFFF;

    --border-color: #E5E7EB;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --shadow-color-darker: rgba(0, 0, 0, 0.15);

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --transition-speed: 300ms;
    --transition-func: cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
    --brand-purple: #A78BFA;
    --brand-yellow: #FCD34D;

    --bg-primary: #111827;
    --bg-secondary: #1F2937;
    --bg-accent: #10141d;
    --bg-card: #1F2937;
    --bg-card-accent-purple: #3730A3;
    --bg-card-accent-yellow: #78350F;

    --text-primary: #F9FAFB;
    --text-secondary: #D1D5DB;
    --text-accent: #C4B5FD;

    --border-color: #374151;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --shadow-color-darker: rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   Styles de base
   ========================================================================== */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--transition-speed) var(--transition-func), color var(--transition-speed) var(--transition-func);
}

/* Style de la scrollbar */
body::-webkit-scrollbar {
    width: 12px;
}
body::-webkit-scrollbar-track {
    background: var(--bg-primary);
}
body::-webkit-scrollbar-thumb {
    background-color: var(--brand-purple);
    border-radius: 20px;
    border: 3px solid var(--bg-primary);
}

/* ==========================================================================
   Animations
   ========================================================================== */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.pdf-viewer {
    width: 100%;
    height: 75vh; /* vh unit for viewport height, good for modals */
    border: none;
}