/* ========================================
   Olivier DURANT - Portfolio
   Thème : Deep Ocean / Water Element
   ======================================== */

/* --- Variables --- */
:root {
    --bg-primary: #0b1121;
    --bg-secondary: #0f1729;
    --bg-card: #151f35;
    --bg-card-hover: #1a2744;
    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-muted: #708599;
    --accent-primary: #3b82f6;
    --accent-secondary: #06b6d4;
    --accent-glow: #22d3ee;
    --accent-warm: #8b5cf6;
    --border: #1e293b;
    --font-heading: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --radius: 12px;
    --radius-sm: 8px;
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Reset & Base --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

body {
    font-family: var(--font-body);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--accent-secondary);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover { color: var(--accent-glow); }

img { max-width: 100%; display: block; }

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.accent { color: var(--accent-secondary); }

/* --- Navigation --- */
.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: rgba(11, 17, 33, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid transparent;
    transition: all var(--transition);
}

.nav.scrolled {
    border-bottom-color: var(--border);
    background: rgba(11, 17, 33, 0.95);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
}

.nav-logo {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

.nav-logo:hover { color: var(--text-primary); }

.nav-links {
    display: flex;
    list-style: none;
    gap: 8px;
}

.nav-links a {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--text-primary);
    background: rgba(59, 130, 246, 0.1);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: all var(--transition);
}

/* --- Hero --- */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-bg { position: absolute; inset: 0; z-index: 0; }

.hero-gradient {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 50% 40%, rgba(6, 182, 212, 0.12) 0%, transparent 70%),
        radial-gradient(ellipse 60% 50% at 20% 80%, rgba(59, 130, 246, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 80% 20%, rgba(139, 92, 246, 0.06) 0%, transparent 50%);
    animation: heroGlow 8s ease-in-out infinite alternate;
}

@keyframes heroGlow {
    0% { opacity: 0.8; transform: scale(1); }
    100% { opacity: 1; transform: scale(1.05); }
}

.hero-particles { position: absolute; inset: 0; }

.particle {
    position: absolute;
    width: 3px; height: 3px;
    background: var(--accent-secondary);
    border-radius: 50%;
    opacity: 0;
    animation: particleFloat linear infinite;
}

@keyframes particleFloat {
    0%   { opacity: 0; transform: translateY(100vh) scale(0); }
    10%  { opacity: 0.6; }
    90%  { opacity: 0.3; }
    100% { opacity: 0; transform: translateY(-20vh) scale(1); }
}

.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 24px;
}

.hero-greeting {
    font-size: 1.1rem;
    color: var(--accent-secondary);
    font-weight: 500;
    margin-bottom: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.hero-name {
    font-family: var(--font-heading);
    font-size: clamp(2.8rem, 7vw, 5.5rem);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 16px;
    letter-spacing: -1px;
}

.hero-role {
    font-family: var(--font-heading);
    font-size: clamp(1.2rem, 3vw, 1.6rem);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 8px;
    letter-spacing: -0.3px;
}

.hero-tagline {
    font-family: var(--font-heading);
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    color: var(--text-muted);
    margin-bottom: 24px;
    min-height: 1.6em;
}

.cursor {
    animation: blink 1s step-end infinite;
    color: var(--accent-secondary);
    font-weight: 300;
}

@keyframes blink { 50% { opacity: 0; } }

.hero-desc {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto 40px;
    line-height: 1.8;
}

.hero-cta {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    padding: 14px 32px;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    border: none;
    font-family: var(--font-body);
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: white;
    box-shadow: 0 4px 24px rgba(6, 182, 212, 0.25);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(6, 182, 212, 0.35);
    color: white;
}

.btn-outline {
    background: transparent;
    color: var(--text-primary);
    border: 1.5px solid var(--border);
}

.btn-outline:hover {
    border-color: var(--accent-secondary);
    color: var(--accent-secondary);
    transform: translateY(-2px);
}

.hero-wave { position: absolute; bottom: -2px; left: 0; right: 0; z-index: 2; }
.hero-wave svg { display: block; width: 100%; height: 80px; }

/* --- Sections --- */
.section { padding: 100px 0; }

.section-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 700;
    text-align: center;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.section-subtitle {
    text-align: center;
    color: var(--text-secondary);
    font-size: 1.05rem;
    margin-bottom: 60px;
}

/* --- About --- */
.about { background: var(--bg-secondary); }

.about-grid {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 60px;
    align-items: center;
}

.monogram-frame {
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
}

.monogram-frame svg { width: 100%; height: auto; }

.about-text p {
    color: var(--text-secondary);
    margin-bottom: 32px;
    font-size: 1.05rem;
    line-height: 1.8;
}

.about-text strong { color: var(--text-primary); }

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.stat-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 20px;
    text-align: center;
    transition: all var(--transition);
}

.stat-item:hover {
    border-color: rgba(6, 182, 212, 0.3);
    transform: translateY(-2px);
}

.stat-number {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* --- ADN 3D --- */
.about { position: relative; overflow: hidden; }

.adn-3d {
    position: absolute;
    right: 2%;
    top: 0;
    bottom: 0;
    width: 220px;
    pointer-events: none;
    z-index: 1;
}

.adn-3d canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.adn-hotspot {
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    margin-left: -16px;
    margin-top: -16px;
    border-radius: 50%;
    pointer-events: auto;
    cursor: pointer;
    outline: none;
    z-index: 2;
}

.adn-tip {
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) scale(0.85);
    transform-origin: right center;
    background: rgba(21, 31, 53, 0.92);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    backdrop-filter: blur(16px);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 10;
}

.adn-tip::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: var(--border);
}

.adn-hotspot:hover .adn-tip,
.adn-hotspot:focus .adn-tip,
.adn-hotspot.active .adn-tip {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.adn-tip strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    color: var(--text-primary);
    margin-bottom: 3px;
}

.adn-tip span {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* --- Expertise --- */
.expertise-intro {
    max-width: 800px;
    margin: 0 auto 48px;
    text-align: center;
}

.expertise-intro p {
    color: var(--text-secondary);
    font-size: 1rem;
}

.expertise-intro strong { color: var(--text-primary); }

/* Synergy schema */
.synergy-schema {
    display: flex;
    align-items: stretch;
    justify-content: center;
    margin-bottom: 60px;
}

.synergy-pillar {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px 28px;
    flex: 1;
    max-width: 320px;
    transition: all var(--transition);
}

.synergy-pillar:hover {
    border-color: rgba(59, 130, 246, 0.3);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.pillar-icon {
    width: 36px !important;
    height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    margin-bottom: 14px;
    overflow: hidden;
}
.pillar-icon svg {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 36px !important;
    max-height: 36px !important;
}

.synergy-pillar h4 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    margin-bottom: 14px;
}

.synergy-pillar ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.synergy-pillar li {
    position: relative;
    padding-left: 18px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.synergy-pillar li::before {
    content: '>';
    position: absolute;
    left: 0;
    color: var(--accent-secondary);
    font-family: monospace;
    font-weight: 700;
}

.synergy-bridge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 20px;
    min-width: 90px;
}

.bridge-line {
    width: 2px;
    flex: 1;
    background: linear-gradient(180deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 1px;
    min-height: 24px;
}

.bridge-label {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-glow);
    text-transform: uppercase;
    letter-spacing: 2px;
    white-space: nowrap;
}

/* Expertise cards */
.expertise-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.expertise-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px;
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
}

.expertise-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    opacity: 0;
    transition: opacity var(--transition);
}

.expertise-card:hover {
    border-color: rgba(59, 130, 246, 0.3);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

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

.expertise-card h3 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    margin-bottom: 10px;
}

.expertise-card > p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 16px;
}

.expertise-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.expertise-list li {
    position: relative;
    padding-left: 18px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.expertise-list li::before {
    content: '>';
    position: absolute;
    left: 0;
    color: var(--accent-secondary);
    font-family: monospace;
    font-weight: 700;
}

/* --- Parcours --- */
.parcours { background: var(--bg-primary); }

.subsection-title {
    font-family: var(--font-heading);
    font-size: clamp(1.3rem, 3vw, 1.6rem);
    text-align: center;
    margin: 72px 0 32px;
    font-weight: 600;
}

/* Timeline */
.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto 20px;
    padding-left: 32px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(180deg, var(--accent-primary), var(--accent-secondary), var(--accent-warm));
    border-radius: 1px;
}

.timeline-item {
    position: relative;
    margin-bottom: 40px;
}

.timeline-item:last-child { margin-bottom: 0; }

.timeline-marker {
    position: absolute;
    left: -32px;
    top: 6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--bg-primary);
    border: 3px solid var(--accent-secondary);
    z-index: 1;
}

.timeline-item:first-child .timeline-marker {
    border-color: var(--accent-primary);
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.4);
}

.timeline-content {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px;
    transition: all var(--transition);
}

.timeline-content:hover {
    border-color: rgba(59, 130, 246, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.timeline-date {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent-secondary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
}

.timeline-content h3 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.timeline-company {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin-bottom: 16px;
    font-style: italic;
}

.timeline-achievements {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.timeline-achievements li {
    position: relative;
    padding-left: 18px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.timeline-achievements li::before {
    content: '>';
    position: absolute;
    left: 0;
    color: var(--accent-secondary);
    font-family: monospace;
    font-weight: 700;
}

/* Certifications */
.certifications-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 800px;
    margin: 0 auto;
}

.cert-badge {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px 16px;
    text-align: center;
    transition: all var(--transition);
}

.cert-badge:hover {
    border-color: rgba(6, 182, 212, 0.3);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.cert-icon {
    width: 36px;
    height: 36px;
    margin: 0 auto 12px;
}

.cert-icon svg {
    width: 100%;
    height: 100%;
}

.cert-name {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.cert-desc {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Tech Stack */
.techstack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.techstack-category {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 20px;
    transition: all var(--transition);
}

.techstack-category:hover {
    border-color: rgba(59, 130, 246, 0.2);
}

.techstack-category h4 {
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.techstack-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.techstack-pills span {
    font-size: 0.75rem;
    padding: 4px 10px;
    background: rgba(6, 182, 212, 0.06);
    border: 1px solid rgba(6, 182, 212, 0.12);
    border-radius: 4px;
    color: var(--text-secondary);
    font-weight: 500;
    transition: all var(--transition);
}

.techstack-pills span:hover {
    border-color: rgba(6, 182, 212, 0.3);
    color: var(--accent-glow);
    background: rgba(6, 182, 212, 0.1);
}

/* --- Projects --- */
.projets { background: var(--bg-secondary); }

/* Featured projects */
.projects-featured {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}

.project-card.featured {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0;
    overflow: hidden;
    transition: all var(--transition);
    display: grid;
    grid-template-columns: 1fr 160px;
}

.project-card.featured:hover {
    border-color: rgba(6, 182, 212, 0.3);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.featured-content { padding: 28px; }

.featured-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.15);
    border-left: 1px solid var(--border);
}

.visual-placeholder {
    width: 120px;
    height: 80px;
    opacity: 0.8;
}

.visual-placeholder svg { width: 100%; height: 100%; display: block; }

/* Safety: prevent any external CSS from blowing up SVG sizes */
.project-header svg,
.pillar-icon svg,
.synergy-pillar svg {
    flex-shrink: 0;
}

/* Toggle button */
.projects-all-wrapper { text-align: center; }

.btn-toggle-projects { margin-bottom: 32px; }

/* Filter bar */
.filter-bar {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.filter-btn {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    font-family: var(--font-body);
}

.filter-btn:hover {
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.filter-btn.active {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border-color: transparent;
    color: white;
}

/* Compact project grid */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.project-card.compact {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 20px;
    transition: all var(--transition);
}

.project-card.compact:hover {
    border-color: rgba(6, 182, 212, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.project-card.compact .project-icon { line-height: 1; }
.project-card.compact h3 { font-size: 1rem; }
.project-card.compact p { font-size: 0.85rem; margin-bottom: 12px; }

.project-card.compact .project-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

/* Shared project styles */
.project-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}

.project-header .project-icon {
    margin-right: auto;
}

.project-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px !important;
    height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    flex-shrink: 0;
    overflow: hidden;
    line-height: 1;
}

.project-icon svg {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 28px !important;
    max-height: 28px !important;
}

.project-card.compact .project-icon {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
}

.project-card.compact .project-icon svg {
    max-width: 22px !important;
    max-height: 22px !important;
}

.project-tag {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tag-infra         { background: rgba(14, 165, 233, 0.15); color: #0ea5e9; }
.tag-logiciel      { background: rgba(59, 130, 246, 0.15); color: var(--accent-primary); }
.tag-education     { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.tag-therapeutique { background: rgba(168, 85, 247, 0.15); color: #a855f7; }
.tag-jeu           { background: rgba(249, 115, 22, 0.15); color: #f97316; }

.project-card h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.project-card p {
    color: var(--text-secondary);
    font-size: 0.88rem;
    margin-bottom: 16px;
    line-height: 1.6;
}

.project-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.project-tech span {
    font-size: 0.72rem;
    padding: 3px 8px;
    background: rgba(6, 182, 212, 0.08);
    border: 1px solid rgba(6, 182, 212, 0.15);
    border-radius: 4px;
    color: var(--accent-glow);
    font-weight: 500;
}

.project-meta { margin-top: 16px; }

.project-time {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Status badges */
.status-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 50px;
    letter-spacing: 0.3px;
}

.status-conception {
    background: rgba(100, 116, 139, 0.2);
    color: var(--text-muted);
}

.status-en-dev {
    background: rgba(59, 130, 246, 0.15);
    color: var(--accent-primary);
}

.status-fonctionnel {
    background: rgba(6, 182, 212, 0.15);
    color: var(--accent-secondary);
}

.status-en-cours {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.status-deploye {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.project-status { margin-bottom: 6px; }

.hidden { display: none !important; }

/* --- Contact --- */
.contact {
    background: var(--bg-secondary);
    text-align: center;
}

.contact-content {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.contact-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 40px;
    min-width: 220px;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 600;
    transition: all var(--transition);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
}

.contact-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    color: var(--text-primary);
}

.contact-link.email:hover {
    border-color: var(--accent-secondary);
    background: rgba(6, 182, 212, 0.08);
}

.contact-link.linkedin:hover {
    border-color: #0a66c2;
    background: rgba(10, 102, 194, 0.1);
}

/* --- Footer --- */
.footer {
    padding: 32px 0;
    text-align: center;
    border-top: 1px solid var(--border);
}

.footer-quote {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    color: var(--text-secondary);
    font-style: italic;
    margin-bottom: 8px;
}

.footer-bottom {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.footer-sep { margin: 0 8px; }

.footer-bottom a {
    color: var(--text-muted);
    transition: color var(--transition);
}

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

/* --- Legal page --- */
.legal-container {
    max-width: 800px;
    padding-top: 80px;
}

.legal-block { margin-bottom: 40px; }

.legal-block h2 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    margin-bottom: 12px;
    color: var(--accent-secondary);
}

.legal-block p {
    color: var(--text-secondary);
    margin-bottom: 10px;
    font-size: 0.95rem;
}

.legal-block ul { list-style: none; padding: 0; }

.legal-block li {
    color: var(--text-secondary);
    font-size: 0.95rem;
    padding: 4px 0;
}

.legal-block li strong { color: var(--text-primary); }

/* --- Project Modal --- */
.project-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    padding: 24px;
}

.project-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.project-modal {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    max-width: 820px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    transform: translateY(30px) scale(0.97);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.project-modal-overlay.active .project-modal {
    transform: translateY(0) scale(1);
}

.project-modal::-webkit-scrollbar { width: 6px; }
.project-modal::-webkit-scrollbar-track { background: transparent; }
.project-modal::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.modal-close {
    position: sticky;
    top: 0;
    float: right;
    z-index: 10;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 16px 16px 0 0;
    transition: all var(--transition);
}

.modal-close:hover {
    color: var(--text-primary);
    border-color: var(--accent-secondary);
    background: var(--bg-card-hover);
}

.modal-content {
    padding: 8px 40px 40px;
}

.modal-header {
    margin-bottom: 36px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

.modal-header .project-tag {
    margin-bottom: 12px;
    display: inline-block;
}

.modal-header h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.modal-subtitle {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 16px;
    line-height: 1.7;
}

.modal-header .project-tech {
    margin-bottom: 12px;
}

.modal-meta {
    display: flex;
    align-items: center;
    gap: 16px;
}

.modal-section {
    margin-bottom: 32px;
}

.modal-section h3 {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-num {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent-secondary);
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.2);
    padding: 3px 8px;
    border-radius: 4px;
    font-family: var(--font-heading);
    letter-spacing: 0.5px;
}

.modal-section p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.8;
}

.modal-section ol,
.modal-section ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0;
}

.modal-section ol li,
.modal-section ul li {
    position: relative;
    padding-left: 20px;
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.modal-section ol li::before {
    content: counter(step);
    counter-increment: step;
    position: absolute;
    left: 0;
    color: var(--accent-secondary);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.78rem;
}

.modal-section ol { counter-reset: step; }

.modal-section ul li::before {
    content: '>';
    position: absolute;
    left: 0;
    color: var(--accent-secondary);
    font-family: monospace;
    font-weight: 700;
}

.modal-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.modal-col h4 {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.modal-col-positive h4 { color: #22c55e; }
.modal-col-negative h4 { color: #f97316; }

.modal-col ul { gap: 4px; }

.modal-col li {
    font-size: 0.85rem !important;
}

.modal-competences {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.modal-competences span {
    font-size: 0.75rem;
    padding: 5px 12px;
    background: rgba(6, 182, 212, 0.08);
    border: 1px solid rgba(6, 182, 212, 0.2);
    border-radius: 50px;
    color: var(--accent-glow);
    font-weight: 500;
}

/* Project cards clickable */
.project-card {
    cursor: pointer;
}

@media (max-width: 768px) {
    .modal-content {
        padding: 8px 20px 28px;
    }

    .modal-columns {
        grid-template-columns: 1fr;
    }

    .project-modal {
        max-height: 90vh;
    }
}

/* --- Scroll Reveal --- */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

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

/* --- Responsive --- */
@media (max-width: 968px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-monogram {
        max-width: 160px;
        margin: 0 auto;
    }

    .expertise-grid {
        grid-template-columns: 1fr;
    }

    .synergy-schema {
        flex-direction: column;
        align-items: center;
    }

    .synergy-bridge {
        flex-direction: row;
        padding: 16px 0;
        min-width: auto;
        width: 60%;
    }

    .bridge-line {
        width: auto;
        height: 2px;
        min-height: auto;
        flex: 1;
    }

    .adn-3d { display: none; }

    .certifications-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .projects-featured {
        grid-template-columns: 1fr;
    }

    .project-card.featured {
        grid-template-columns: 1fr;
    }

    .featured-visual {
        border-left: none;
        border-top: 1px solid var(--border);
        padding: 24px;
    }
}

@media (max-width: 768px) {
    .nav-links {
        position: fixed;
        top: 72px;
        left: 0; right: 0;
        background: rgba(11, 17, 33, 0.98);
        backdrop-filter: blur(20px);
        flex-direction: column;
        padding: 24px;
        gap: 4px;
        transform: translateY(-120%);
        transition: transform var(--transition);
        border-bottom: 1px solid var(--border);
    }

    .nav-links.open { transform: translateY(0); }

    .nav-toggle { display: flex; }

    .nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    .nav-toggle.open span:nth-child(2) { opacity: 0; }
    .nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

    .section { padding: 70px 0; }

    .projects-grid { grid-template-columns: 1fr; }

    .hero-cta {
        flex-direction: column;
        align-items: center;
    }

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

    .filter-bar { gap: 6px; }
    .filter-btn { padding: 7px 14px; font-size: 0.8rem; }
}

/* ========================================
   V2 GAME DEV STUDIO — Session 1
   ======================================== */

/* --- [Game Designer] XP Progress Bar --- */
.game-xp-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(11, 17, 33, 0.8);
    z-index: 1100;
    overflow: hidden;
}

.xp-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #3b82f6, #06b6d4, #22d3ee, #8b5cf6);
    background-size: 300% 100%;
    animation: xpShimmer 3s linear infinite;
    transition: width 0.3s ease;
    box-shadow: 0 0 8px rgba(34, 211, 238, 0.6), 0 0 16px rgba(34, 211, 238, 0.3);
}

@keyframes xpShimmer {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

/* --- [Art Director] Scanline Overlay --- */
.scanline-overlay {
    position: fixed;
    inset: 0;
    z-index: 900;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.03) 2px,
        rgba(0, 0, 0, 0.03) 4px
    );
    mix-blend-mode: multiply;
}

/* --- [Art Director] Enhanced Neon Glow --- */
.section-title .accent {
    text-shadow: 0 0 10px rgba(6, 182, 212, 0.4), 0 0 30px rgba(6, 182, 212, 0.15);
}

.hero-name .accent {
    text-shadow: 0 0 20px rgba(6, 182, 212, 0.5), 0 0 60px rgba(6, 182, 212, 0.2);
    animation: neonPulse 4s ease-in-out infinite;
}

@keyframes neonPulse {
    0%, 100% { text-shadow: 0 0 20px rgba(6, 182, 212, 0.5), 0 0 60px rgba(6, 182, 212, 0.2); }
    50% { text-shadow: 0 0 30px rgba(6, 182, 212, 0.7), 0 0 80px rgba(6, 182, 212, 0.3), 0 0 120px rgba(6, 182, 212, 0.1); }
}

/* --- [Art Director] Vignette Effect --- */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 899;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.25) 100%);
}

.section {
    position: relative;
}

/* --- [Lead Programmer] Cursor Trail --- */
.cursor-particle {
    position: fixed;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    background: var(--accent-glow);
    mix-blend-mode: screen;
}

/* --- [Sound Designer] Interactive Hover Glow --- */
.btn:hover, .contact-link:hover, .project-card:hover, .filter-btn:hover {
    animation: interactGlow 0.15s ease-out;
}

@keyframes interactGlow {
    0% { filter: brightness(1); }
    50% { filter: brightness(1.15); }
    100% { filter: brightness(1); }
}

/* --- [QA Tester] Smooth scroll fix for XP bar --- */
html {
    scroll-padding-top: 84px;
}

/* ========================================
   V2 GAME DEV STUDIO — Session 2
   ======================================== */

/* --- [Art Director] Parallax Depth on Hero --- */
.hero-bg {
    transition: transform 0.1s linear;
    will-change: transform;
}

.hero-particles {
    will-change: transform;
}

/* --- [Game Designer] Animated Stat Counters --- */
.stat-number {
    transition: opacity 0.3s ease;
}

.stat-number.counting {
    animation: countPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes countPop {
    0% { transform: scale(0.8); opacity: 0.5; }
    60% { transform: scale(1.08); }
    100% { transform: scale(1); opacity: 1; }
}

/* --- [UI/UX Designer] Enhanced Button Feedback --- */
.btn-primary {
    position: relative;
    overflow: hidden;
}

.btn-primary::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    opacity: 0;
    z-index: -1;
    filter: blur(12px);
    transition: opacity 0.3s ease;
}

.btn-primary:hover::after {
    opacity: 0.5;
}

.btn-outline {
    position: relative;
    overflow: hidden;
}

.btn-outline::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(6, 182, 212, 0.06);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
}

.btn-outline:hover::before {
    width: 300px;
    height: 300px;
}

/* --- [Level Designer] Depth Layers on Sections --- */
.expertise-card,
.project-card.featured,
.cert-badge,
.timeline-content {
    transition: all var(--transition), box-shadow 0.4s ease;
}

.expertise-card:hover,
.project-card.featured:hover {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35), 0 0 1px rgba(6, 182, 212, 0.2);
}

/* --- [Narrative Designer] Cinematic Hero Intro --- */
.hero-content .hero-greeting {
    animation: cinematicFade 0.8s ease-out 0.3s both;
}

.hero-content .hero-name {
    animation: cinematicFade 0.8s ease-out 0.6s both;
}

.hero-content .hero-role {
    animation: cinematicFade 0.8s ease-out 0.9s both;
}

.hero-content .hero-tagline {
    animation: cinematicFade 0.8s ease-out 1.2s both;
}

.hero-content .hero-desc {
    animation: cinematicFade 0.8s ease-out 1.5s both;
}

.hero-content .hero-cta {
    animation: cinematicFade 0.8s ease-out 1.8s both;
}

@keyframes cinematicFade {
    from {
        opacity: 0;
        transform: translateY(20px);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* --- [QA Tester] Focus visibility fix --- */
.btn:focus-visible,
.nav-links a:focus-visible,
.filter-btn:focus-visible,
.contact-link:focus-visible {
    outline: 2px solid var(--accent-glow);
    outline-offset: 2px;
}

/* --- [Lead Programmer] GPU-accelerated cursor trail --- */
.cursor-particle {
    will-change: opacity, transform;
    transform: translate(-50%, -50%);
}

/* ========================================
   V2 GAME DEV STUDIO — Session 3
   ======================================== */

/* --- [Art Director] Chromatic Aberration on Card Hover --- */
.project-card.featured:hover h3,
.expertise-card:hover h3 {
    text-shadow:
        -1px 0 0.5px rgba(255, 0, 80, 0.18),
        1px 0 0.5px rgba(0, 200, 255, 0.18);
    transition: text-shadow 0.2s ease;
}

/* --- [Game Designer] Nav Active Indicator Slide --- */
.nav-links {
    position: relative;
}

.nav-indicator {
    position: absolute;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 1px;
    transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 8px rgba(6, 182, 212, 0.4);
    pointer-events: none;
}

/* --- [UI/UX Designer] Tilt 3D on Cards --- */
.expertise-card,
.project-card.featured {
    transform-style: preserve-3d;
    perspective: 800px;
}

/* --- [Level Designer] Section Divider Gradients --- */
.about::after,
.expertise::after,
.parcours::after,
.projets::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.15) 30%, rgba(59, 130, 246, 0.15) 70%, transparent);
    pointer-events: none;
}

/* --- [Narrative Designer] Staggered Title Letter Reveal --- */
.section-title .accent-letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(8px);
    animation: letterReveal 0.4s ease-out forwards;
}

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

/* --- [Sound Designer] Nav hover feedback visual pulse --- */
.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 1px;
    background: var(--accent-secondary);
    transition: width 0.25s ease, left 0.25s ease;
}

.nav-links a {
    position: relative;
}

.nav-links a:hover::after {
    width: 60%;
    left: 20%;
}

.nav-links a.active::after {
    display: none; /* Indicator bar handles active state */
}

/* --- [QA Tester] Prevent layout shift on stat counter animation --- */
.stat-number {
    min-width: 3ch;
    display: inline-block;
    text-align: center;
}

/* --- [Lead Programmer] Reduced motion support --- */
@media (prefers-reduced-motion: reduce) {
    .scanline-overlay { display: none; }
    .cursor-particle { display: none; }
    .xp-fill { animation: none; }
    .hero-name .accent { animation: none; }
    .hero-content .hero-greeting,
    .hero-content .hero-name,
    .hero-content .hero-role,
    .hero-content .hero-tagline,
    .hero-content .hero-desc,
    .hero-content .hero-cta {
        animation: none;
        opacity: 1;
        filter: none;
    }
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ========================================
   V2 GAME DEV STUDIO — Session 4
   ======================================== */

/* --- [Art Director] Animated Gradient Ring on Monogram --- */
.monogram-frame svg circle[r="90"] {
    stroke-dasharray: 565;
    stroke-dashoffset: 565;
    animation: monogramDraw 2.5s ease-out 2s forwards;
}

.monogram-frame svg circle[r="75"] {
    stroke-dasharray: 471;
    stroke-dashoffset: 471;
    animation: monogramDraw 2s ease-out 2.8s forwards;
}

@keyframes monogramDraw {
    to { stroke-dashoffset: 0; }
}

/* --- [UI/UX Designer] Scroll-to-Top Button --- */
.scroll-top-btn {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--accent-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 950;
    opacity: 0;
    transform: translateY(16px) scale(0.9);
    transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    pointer-events: none;
    backdrop-filter: blur(12px);
}

.scroll-top-btn.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.scroll-top-btn:hover {
    border-color: var(--accent-secondary);
    box-shadow: 0 4px 20px rgba(6, 182, 212, 0.2), 0 0 12px rgba(6, 182, 212, 0.1);
    transform: translateY(-2px) scale(1);
}

.scroll-top-btn svg {
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease;
}

.scroll-top-btn:hover svg {
    transform: translateY(-2px);
}

/* --- [Level Designer] Ambient Particles on Expertise Section --- */
.expertise {
    overflow: hidden;
}

.ambient-particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: var(--accent-secondary);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    animation: ambientFloat linear infinite;
}

@keyframes ambientFloat {
    0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
    15% { opacity: 0.25; }
    85% { opacity: 0.15; }
    100% { opacity: 0; transform: translate(var(--drift-x, 30px), var(--drift-y, -80px)) scale(1); }
}

/* --- [Game Designer] Project Card Hover Info Slide --- */
.project-card.featured .featured-content {
    position: relative;
    overflow: hidden;
}

.project-card.featured .project-tech {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.project-card.featured:hover .project-tech span {
    animation: techPillPop 0.3s ease-out backwards;
}

.project-card.featured:hover .project-tech span:nth-child(1) { animation-delay: 0s; }
.project-card.featured:hover .project-tech span:nth-child(2) { animation-delay: 0.04s; }
.project-card.featured:hover .project-tech span:nth-child(3) { animation-delay: 0.08s; }
.project-card.featured:hover .project-tech span:nth-child(4) { animation-delay: 0.12s; }
.project-card.featured:hover .project-tech span:nth-child(5) { animation-delay: 0.16s; }
.project-card.featured:hover .project-tech span:nth-child(6) { animation-delay: 0.2s; }

@keyframes techPillPop {
    from {
        opacity: 0;
        transform: translateY(6px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* --- [Narrative Designer] Section Title Accent Glow on Scroll --- */
.section-title.in-view .accent {
    animation: titleAccentGlow 1s ease-out forwards;
}

@keyframes titleAccentGlow {
    0% { text-shadow: none; filter: brightness(1); }
    40% { text-shadow: 0 0 20px rgba(6, 182, 212, 0.6), 0 0 40px rgba(6, 182, 212, 0.3); filter: brightness(1.3); }
    100% { text-shadow: 0 0 10px rgba(6, 182, 212, 0.4), 0 0 30px rgba(6, 182, 212, 0.15); filter: brightness(1); }
}

/* --- [QA Tester] Fix tilt 3D + existing translateY conflict --- */
.expertise-card {
    transition: all var(--transition), transform 0.15s ease-out, box-shadow 0.4s ease;
}

.project-card.featured {
    transition: all var(--transition), transform 0.15s ease-out, box-shadow 0.4s ease;
}

/* --- [Sound Designer] Visual transition cue between sections --- */
.section.section-entering {
    animation: sectionEnterPulse 0.6s ease-out;
}

@keyframes sectionEnterPulse {
    0% { box-shadow: inset 0 2px 30px rgba(6, 182, 212, 0.06); }
    100% { box-shadow: inset 0 0 0 transparent; }
}

/* ========================================
   V2 GAME DEV STUDIO — Session 5
   ======================================== */

/* --- [Art Director] Cert Badge Shimmer Sweep --- */
.cert-badge {
    position: relative;
    overflow: hidden;
}

.cert-badge::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 40%;
    height: 200%;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(6, 182, 212, 0.06) 45%,
        rgba(6, 182, 212, 0.12) 50%,
        rgba(6, 182, 212, 0.06) 55%,
        transparent 60%
    );
    transform: skewX(-15deg);
    transition: none;
    pointer-events: none;
}

.cert-badge:hover::after {
    animation: shimmerSweep 0.7s ease-out;
}

@keyframes shimmerSweep {
    from { left: -60%; }
    to { left: 130%; }
}

/* --- [Game Designer] Techstack Wave Reveal --- */
.techstack-pills span {
    opacity: 0;
    transform: translateY(8px);
}

.techstack-grid.wave-revealed .techstack-pills span {
    animation: pillWave 0.35s ease-out forwards;
}

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

/* --- [UI/UX Designer] Enhanced Modal Transition --- */
.project-modal-overlay {
    transition: opacity 0.4s ease, visibility 0.4s ease, backdrop-filter 0.4s ease;
    backdrop-filter: blur(0px);
}

.project-modal-overlay.active {
    backdrop-filter: blur(10px);
}

.project-modal {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    opacity: 0;
}

.project-modal-overlay.active .project-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* --- [Level Designer] Contact Animated Gradient Background --- */
.contact {
    overflow: hidden;
}

.contact::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 50% 80% at 25% 50%, rgba(59, 130, 246, 0.04) 0%, transparent 70%),
        radial-gradient(ellipse 50% 80% at 75% 50%, rgba(6, 182, 212, 0.04) 0%, transparent 70%);
    animation: contactGlow 6s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

@keyframes contactGlow {
    0% { opacity: 0.5; transform: scale(1); }
    100% { opacity: 1; transform: scale(1.1); }
}

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

/* --- [Narrative Designer] Breathing Cursor --- */
.cursor {
    animation: cursorBreathe 1.2s ease-in-out infinite;
}

@keyframes cursorBreathe {
    0%, 100% { opacity: 1; }
    40% { opacity: 1; }
    50% { opacity: 0; }
    90% { opacity: 0; }
}

/* --- [Sound Designer] Contact Link Pulse Ring on Hover --- */
.contact-link {
    position: relative;
    overflow: visible;
}

.contact-link::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    border: 1px solid transparent;
    transition: border-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
}

.contact-link.email:hover::before {
    border-color: rgba(6, 182, 212, 0.25);
    transform: scale(1.03);
    opacity: 1;
}

.contact-link.linkedin:hover::before {
    border-color: rgba(10, 102, 194, 0.25);
    transform: scale(1.03);
    opacity: 1;
}

/* --- [Lead Programmer] Smooth scroll for all anchor navigations --- */
.nav-links a,
.btn[href^="#"] {
    scroll-behavior: smooth;
}

/* --- [QA Tester] Fix techstack pills initial visibility before wave --- */
.techstack-grid:not(.wave-revealed) .techstack-pills span {
    opacity: 1;
    transform: none;
}

/* --- [QA Tester] Footer subtle gradient separator --- */
.footer {
    border-top: none;
    position: relative;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.12) 30%, rgba(139, 92, 246, 0.1) 70%, transparent);
}

/* ========================================
   V2 GAME DEV STUDIO — Session 6
   ======================================== */

/* --- [Art Director] Animated Hero Wave --- */
.hero-wave svg path {
    animation: waveUndulate 8s ease-in-out infinite;
    transform-origin: center bottom;
}

@keyframes waveUndulate {
    0%, 100% { d: path("M0,60 C360,120 720,0 1080,60 C1260,90 1380,80 1440,60 L1440,120 L0,120 Z"); }
    50% { d: path("M0,70 C300,30 600,100 960,50 C1200,20 1350,90 1440,70 L1440,120 L0,120 Z"); }
}

/* Fallback for browsers that don't support d: path() in keyframes */
@supports not (d: path("M0,0")) {
    .hero-wave svg path {
        animation: waveFallback 6s ease-in-out infinite;
    }
    @keyframes waveFallback {
        0%, 100% { transform: scaleY(1); }
        50% { transform: scaleY(1.15); }
    }
}

/* --- [Game Designer] Synergy Bridge Energy Pulse --- */
.bridge-line {
    position: relative;
    overflow: hidden;
}

.bridge-line::after {
    content: '';
    position: absolute;
    left: 0;
    top: -100%;
    width: 100%;
    height: 30%;
    background: linear-gradient(180deg, transparent, var(--accent-glow), transparent);
    animation: energyPulse 2.5s ease-in-out infinite;
    border-radius: 2px;
}

@keyframes energyPulse {
    0% { top: -30%; opacity: 0; }
    30% { opacity: 0.8; }
    70% { opacity: 0.8; }
    100% { top: 130%; opacity: 0; }
}

.synergy-bridge .bridge-label {
    animation: bridgeLabelPulse 3s ease-in-out infinite;
}

@keyframes bridgeLabelPulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; text-shadow: 0 0 8px rgba(34, 211, 238, 0.4); }
}

/* --- [UI/UX Designer] Compact Card Gradient Border --- */
.project-card.compact {
    position: relative;
    background-clip: padding-box;
}

.project-card.compact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-secondary), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.project-card.compact:hover::before {
    opacity: 1;
}

/* --- [Level Designer] Monogram Float Animation --- */
.monogram-frame {
    animation: monogramFloat 5s ease-in-out infinite;
}

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

.monogram-frame svg text {
    transition: filter 0.3s ease;
}

.about-monogram:hover .monogram-frame svg text {
    filter: drop-shadow(0 0 12px rgba(6, 182, 212, 0.5));
}

/* --- [Narrative Designer] Timeline Viewed Glow --- */
.timeline-item.viewed .timeline-marker {
    border-color: var(--accent-glow);
    box-shadow: 0 0 8px rgba(34, 211, 238, 0.3);
    transition: all 0.5s ease;
}

.timeline-item.viewed .timeline-content {
    border-color: rgba(34, 211, 238, 0.12);
    transition: border-color 0.5s ease;
}

/* --- [Sound Designer] Typed Effect Keystroke Visual --- */
.hero-tagline {
    position: relative;
}

#typed {
    transition: text-shadow 0.05s ease;
}

#typed.keystroke {
    text-shadow: 0 0 4px rgba(6, 182, 212, 0.3);
}

/* --- [QA Tester] Mobile — disable heavy effects on small screens --- */
@media (max-width: 768px) {
    .monogram-frame {
        animation: none;
    }
    .bridge-line::after {
        animation: none;
        display: none;
    }
    .hero-wave svg path {
        animation: none;
    }
    .scroll-top-btn {
        bottom: 16px;
        right: 16px;
        width: 40px;
        height: 40px;
    }
    .ambient-particle {
        display: none;
    }
}

/* --- [Lead Programmer] Content-visibility for off-screen sections --- */
.parcours,
.projets {
    content-visibility: auto;
    contain-intrinsic-size: auto 800px;
}

/* ========================================
   V2 GAME DEV STUDIO — Session 7 (Stabilisation)
   ======================================== */

/* --- [Art Director] Tone down over-bright effects --- */
/* Reduce vignette intensity */
body::after {
    background: radial-gradient(ellipse at center, transparent 65%, rgba(0, 0, 0, 0.18) 100%);
}

/* Soften neon pulse range */
.hero-name .accent {
    animation: neonPulseV2 5s ease-in-out infinite;
}

@keyframes neonPulseV2 {
    0%, 100% { text-shadow: 0 0 15px rgba(6, 182, 212, 0.4), 0 0 40px rgba(6, 182, 212, 0.15); }
    50% { text-shadow: 0 0 22px rgba(6, 182, 212, 0.55), 0 0 60px rgba(6, 182, 212, 0.2); }
}

/* --- [Game Designer] Smooth 3D Tilt Reset --- */
.expertise-card,
.project-card.featured {
    transition: all var(--transition), transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease;
}

/* --- [UI/UX Designer] Audio Mute Toggle --- */
.audio-toggle {
    position: fixed;
    bottom: 28px;
    left: 28px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 950;
    transition: all 0.3s ease;
    backdrop-filter: blur(12px);
    padding: 0;
}

.audio-toggle:hover {
    color: var(--accent-secondary);
    border-color: var(--accent-secondary);
}

.audio-toggle.muted {
    opacity: 0.5;
}

/* --- [Level Designer] Harmonize section spacing rhythm --- */
.about { padding-bottom: 80px; }
.expertise { padding-top: 80px; padding-bottom: 80px; }

/* --- [Narrative Designer] Typed text slight letter-spacing for readability --- */
#typed {
    letter-spacing: 0.5px;
}

/* --- [QA Tester] Fix z-index conflicts audit --- */
/* Ordered z-index scale:
   900  - scanline overlay
   899  - vignette (body::after)
   950  - scroll-to-top, audio toggle
   1000 - nav
   1100 - progress bar
   2000 - modal
   9999 - cursor trail (stays on top)
*/

/* Fix: progress bar behind nav on some browsers */
.game-xp-bar { z-index: 1001; }

/* Fix: scanline above modal overlay */
.scanline-overlay { z-index: 899; }

/* --- [Lead Programmer] Shared audio engine flag --- */
/* No CSS needed — JS only */

/* --- [Sound Designer] Lower all audio volumes globally — see JS --- */
/* No CSS needed — JS only */

@media (max-width: 768px) {
    .audio-toggle {
        bottom: 16px;
        left: 16px;
        width: 32px;
        height: 32px;
    }
}

/* ========================================
   V2 GAME DEV STUDIO — Session 8 (Final)
   ======================================== */

/* --- [Art Director] Nav Logo Hover Glow — last touch --- */
.nav-logo:hover .accent {
    text-shadow: 0 0 8px rgba(6, 182, 212, 0.6);
    transition: text-shadow 0.3s ease;
}

/* --- [QA Tester] Print Stylesheet — disable all V2 effects --- */
@media print {
    .scanline-overlay,
    .game-xp-bar,
    .scroll-top-btn,
    .audio-toggle,
    .cursor-particle,
    .ambient-particle,
    .nav-indicator { display: none !important; }

    body::after { display: none !important; }

    .hero-name .accent { animation: none !important; text-shadow: none !important; }
    .reveal { opacity: 1 !important; transform: none !important; }
    .hero-content * { animation: none !important; opacity: 1 !important; filter: none !important; }
    .monogram-frame { animation: none !important; }
    .hero-wave svg path { animation: none !important; }
    .bridge-line::after { display: none !important; }
    .cert-badge::after { display: none !important; }

    .nav { position: static; background: none; border: none; backdrop-filter: none; }
    .section { padding: 40px 0; }
}

/* --- [Lead Programmer] Final signature comment --- */
/*
 * V2 Game Dev Studio — Portfolio Redesign
 * Client: Olivier DURANT (durant.cloud)
 * Sessions: 8 (2026-04-05)
 * Team: Producer, Game Designer, Art Director, Sound Designer,
 *       QA Tester, Narrative Designer, Level Designer,
 *       UI/UX Designer, Lead Programmer
 *
 * 35+ effects implemented. Content unchanged.
 * Visuals, interactions, audio and UX redesigned
 * with game development expertise.
 */

/* ========================================
   STUDIO PHOTO — Session 1
   Agents : Arca, Lux, Chroma, Pixel, Mythos, Lens
   ======================================== */

/* --- [Arca — Compositrice] Hero centré, cohérent avec le reste du site --- */
.hero-content {
    text-align: center;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* --- [Lux — Luminariste] Lumière directionnelle sur le hero --- */
/* Le hero manque de source lumineuse claire. Ajout d'un point
   lumineux haut-gauche comme une lumière de fenêtre latérale. */
.hero-gradient {
    background:
        radial-gradient(ellipse 40% 50% at 15% 30%, rgba(232, 213, 163, 0.07) 0%, transparent 60%),
        radial-gradient(ellipse 80% 60% at 50% 40%, rgba(6, 182, 212, 0.12) 0%, transparent 70%),
        radial-gradient(ellipse 60% 50% at 20% 80%, rgba(59, 130, 246, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 80% 20%, rgba(139, 92, 246, 0.06) 0%, transparent 50%);
}

/* --- [Chroma — Coloriste] Split toning ombres/lumières --- */
/* Le site est monochromatique cyan-bleu. En colorimétrie,
   un split toning ajoute de la chaleur dans les ombres
   pour créer du contraste perceptuel. */
:root {
    --shadow-tint: rgba(139, 92, 246, 0.03);
    --highlight-tint: rgba(6, 182, 212, 0.04);
}

.about {
    background: linear-gradient(180deg, var(--bg-secondary), color-mix(in srgb, var(--bg-secondary), #1a1535 8%));
}

.contact {
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-secondary), #1a1535 5%), var(--bg-secondary));
}

/* Warm accent for the stat numbers — golden hour tint */
.stat-number {
    background: linear-gradient(135deg, #3b82f6, #06b6d4, #e8d5a3);
    -webkit-background-clip: text;
    background-clip: text;
}

/* --- [Pixel — Retoucheur] Netteté sélective sur les titres --- */
/* Les titres de section manquent de "piqué". En post-prod,
   on applique un unsharp mask sélectif sur le sujet principal.
   Ici: text-rendering + subpixel + léger contraste de texte. */
.section-title,
.hero-name {
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: subpixel-antialiased;
}

/* Micro-contraste sur les cartes — like clarity slider in Lightroom */
.expertise-card h3,
.project-card h3,
.timeline-content h3 {
    text-shadow: 0 0 0.5px rgba(226, 232, 240, 0.3);
}

/* --- [Mythos — Narrateur Visuel] Rythme narratif de lecture --- */
/* Le site se lit en bloc. Un bon récit photo a un rythme :
   pause, tension, révélation. Ajout d'espace avant les sections
   clés pour créer des "respirations" narratives. */
.expertise {
    padding-top: 100px;
}

.projets {
    padding-top: 110px;
}

/* La citation du footer est le "mot de la fin" — lui donner du poids */
.footer-quote {
    font-size: 1rem;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
    color: var(--text-secondary);
    opacity: 0.9;
}

/* --- [Lens — Critique] Contraste global insuffisant --- */
/* Le ratio de contraste text-secondary/bg est trop faible.
   En évaluation photo, c'est un manque de séparation tonale.
   Relever les tons moyens du texte pour plus de lisibilité. */
:root {
    --text-secondary: #a0b1c5;
    --text-muted: #7d94ab;
}

/* ========================================
   STUDIO PHOTO — Session 2
   ======================================== */

/* [Arca S2] Leading line retirée — hero recentré, la diagonale n'a plus de sens */

/* Renforcer l'espace négatif : about-grid ratio or (1:1.618) */
.about-grid {
    grid-template-columns: 200px 1fr;
    gap: 72px;
}

/* --- [Lux — Luminariste] Éclairage zénithal sur les cartes --- */
/* Les cartes sont éclairées uniformément — plat comme un flash frontal.
   Ajout d'un gradient top→bottom qui simule une lumière overhead. */
.expertise-card,
.project-card.featured,
.timeline-content {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--bg-card), white 2%) 0%,
        var(--bg-card) 40%
    );
}

/* Stat items : source lumineuse cohérente avec le hero (haut-gauche) */
.stat-item {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--bg-card), white 1.5%) 0%,
        var(--bg-card) 50%
    );
}

/* --- [Chroma — Coloriste] Température progressive (heure bleue → dorée) --- */
/* En photo, la lumière évolue : aube froide → midi neutre → crépuscule chaud.
   Le scroll simule cette progression temporelle via des teintes de fond. */
.parcours {
    background: linear-gradient(
        180deg,
        var(--bg-primary) 0%,
        color-mix(in srgb, var(--bg-primary), #151225 6%) 100%
    );
}

.projets {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--bg-secondary), #1a1530 4%),
        color-mix(in srgb, var(--bg-secondary), #1c1828 6%)
    );
}

/* Tags de projets — harmoniser avec la palette split-tonée */
.tag-therapeutique { background: rgba(168, 85, 247, 0.12); }
.tag-jeu { background: rgba(232, 180, 120, 0.12); color: #e8b478; }

/* --- [Pixel — Retoucheur] Grain argentique --- */
/* Un tirage photo sans grain est un tirage numérique. Le grain
   ajoute de la matière, de la texture, de l'authenticité. Très bas. */
.scanline-overlay {
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.03) 2px,
            rgba(0, 0, 0, 0.03) 4px
        ),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.015'/%3E%3C/svg%3E");
    background-size: auto, 256px 256px;
}

/* --- [Mythos — Narrateur Visuel] Monogramme comme sceau d'auteur --- */
/* Le monogramme est un petit cercle animé. En narration photo,
   la signature de l'artiste est un rituel. Le monogramme doit
   fonctionner comme un sceau — un repère d'identité fort. */
.monogram-frame svg text {
    font-size: 68px;
    letter-spacing: 2px;
}

.about-monogram {
    position: relative;
}

.about-monogram::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-secondary), transparent);
    opacity: 0.5;
}

/* --- [Lens — Critique] Hiérarchie visuelle — écraser le bruit --- */
/* Trop d'éléments rivalisent pour l'attention.
   En critique photo : le sujet doit dominer, le reste s'efface.
   Le hero-greeting "Bonjour, je suis" est du bruit visuel. L'atténuer. */
.hero-greeting {
    font-size: 0.9rem;
    opacity: 0.7;
    letter-spacing: 3px;
}

/* Les tech pills dans les cartes featured sont trop présentes.
   Elles sont un contexte, pas le sujet — les atténuer. */
.project-tech span {
    opacity: 0.75;
}

.project-card:hover .project-tech span {
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Le nom DURANT est le sujet. Le sous-titre est secondaire.
   Creuser l'écart de poids visuel. */
.hero-role {
    font-weight: 400;
    opacity: 0.85;
}

/* ========================================
   STUDIO PHOTO — Session 3 (Finition)
   ======================================== */

/* --- [Arca — Compositrice] Rythme asymétrique sur la grille projets --- */
/* Une grille 2x2 uniforme, c'est un catalogue. Un livre photo alterne
   les tailles : une grande image, puis des petites. On donne plus
   de poids au premier projet featured (pleine largeur). */
.projects-featured > .project-card.featured:first-child {
    grid-column: 1 / -1;
}

.projects-featured > .project-card.featured:first-child .featured-visual {
    min-height: 120px;
}

/* --- [Lux — Luminariste] Spot lumineux sur le contact --- */
/* La section contact est l'appel à l'action final. En portrait studio,
   on met un spot focalisé sur le regard du sujet. Ici : un
   spot elliptique concentré sur les boutons CTA. */
.contact-content {
    position: relative;
}

.contact-content::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 200px;
    background: radial-gradient(ellipse, rgba(6, 182, 212, 0.04) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.contact-link {
    z-index: 1;
}

/* --- [Chroma — Coloriste] Shift de température au hover --- */
/* En colorimétrie, la proximité = chaleur. Quand l'utilisateur
   engage avec un élément (hover), la température monte légèrement
   — comme si l'objet s'approchait de la lumière. */
.expertise-card:hover,
.project-card.featured:hover,
.timeline-content:hover {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--bg-card-hover), #2a2040 3%) 0%,
        var(--bg-card-hover) 40%
    );
}

/* Modal — ambiance galerie photo (fond plus profond, plus feutré) */
.project-modal {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--bg-card), white 1%) 0%,
        var(--bg-card) 20%
    );
}

/* --- [Pixel — Retoucheur] Vignettage optique réaliste --- */
/* La vignette actuelle est un radial-gradient centré.
   Un vrai vignettage optique est plus fort dans les coins
   et suit une distribution cos⁴. Simulation CSS. */
body::after {
    background:
        radial-gradient(ellipse 120% 120% at 0% 0%, rgba(0,0,0,0.12) 0%, transparent 50%),
        radial-gradient(ellipse 120% 120% at 100% 0%, rgba(0,0,0,0.10) 0%, transparent 50%),
        radial-gradient(ellipse 120% 120% at 0% 100%, rgba(0,0,0,0.10) 0%, transparent 50%),
        radial-gradient(ellipse 120% 120% at 100% 100%, rgba(0,0,0,0.14) 0%, transparent 50%);
}

/* --- [Mythos — Narrateur Visuel] Titres de section comme chapitres --- */
/* Un livre photo a des pages de chapitre : le titre est isolé,
   sobre, avec un filet discret. Ajouter un filet sous les titres. */
.section-title {
    padding-bottom: 16px;
    position: relative;
    display: inline-block;
    width: 100%;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 1.5px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 1px;
    opacity: 0.6;
}

/* --- [Lens — Critique] Dernière passe : cohérence typographique --- */
/* Les tailles de texte varient sans système clair.
   En édition photo, la légende et le titre ont un ratio fixe.
   Imposer un rythme vertical basé sur 1.25 (major third). */
.hero-desc {
    font-size: 1.05rem;
    line-height: 1.9;
}

.expertise-intro p {
    line-height: 1.9;
}

/* Certifications — les descriptions sont trop petites pour être lues.
   Remonter de 0.75rem à 0.8rem. */
.cert-desc {
    font-size: 0.8rem;
    line-height: 1.4;
}

/* Uniformiser le radius des éléments interactifs
   pour une signature visuelle cohérente */
.contact-link {
    border-radius: var(--radius);
}

/* Signature Studio Photo */
/*
 * Studio Photo — Portfolio Visual Review
 * Client: Olivier DURANT (durant.cloud)
 * Sessions: 3 (2026-04-05)
 * Team: Arca (Composition), Lux (Light), Chroma (Color),
 *       Pixel (Retouching), Mythos (Narrative), Lens (Critique)
 */

/* ========================================
   STUDIO PHOTO — Session 4 (Dernier tirage)
   ======================================== */

/* --- [Arca — Compositrice] Certifications — respiration entre badges --- */
/* La grille de certifications est trop serrée. En maquettage photo,
   les vignettes dans une planche ont besoin d'air pour exister
   individuellement. Augmenter le gap et centrer mieux sur 5 items. */
.certifications-grid {
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

/* --- [Lux — Luminariste] Lueur douce sur le logo nav --- */
/* Le logo O.D est le "filigrane" du site — comme la watermark
   d'un photographe. Il mérite un micro-éclairage propre. */
.nav-logo {
    text-shadow: 0 0 20px rgba(6, 182, 212, 0.08);
}

/* Timeline markers — point lumineux comme un phare dans le brouillard */
.timeline-item:first-child .timeline-marker {
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.35), 0 0 24px rgba(59, 130, 246, 0.12);
}

/* --- [Chroma — Coloriste] Sélection de texte brandée --- */
/* En édition photo, même la bordure du tirage est choisie.
   La sélection de texte doit refléter la palette du site. */
::selection {
    background: rgba(6, 182, 212, 0.2);
    color: #e2e8f0;
}

::-moz-selection {
    background: rgba(6, 182, 212, 0.2);
    color: #e2e8f0;
}

/* Scrollbar — cohérence chromatique jusque dans les détails */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--accent-primary);
}

/* Firefox scrollbar */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--border) var(--bg-primary);
}

/* --- [Pixel — Retoucheur] Transitions douces entre sections --- */
/* En diaporama photo, on utilise le fondu enchaîné, pas la coupe
   franche. Les bordures de section doivent se dissoudre. */
.about,
.expertise,
.parcours,
.projets,
.contact {
    mask-image: linear-gradient(
        180deg,
        transparent 0%,
        black 3%,
        black 97%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        180deg,
        transparent 0%,
        black 3%,
        black 97%,
        transparent 100%
    );
}

/* --- [Mythos — Narrateur Visuel] Footer comme colophon --- */
/* Dans un livre photo, le colophon est la dernière page :
   crédit, date, lieu d'impression. Le footer doit avoir
   cette gravité sobre. Plus d'espace, moins de bruit. */
.footer {
    padding: 48px 0 36px;
}

.footer-bottom {
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    opacity: 0.6;
}

/* --- [Lens — Critique] Derniers dixièmes de stop --- */
/* L'accent "?" dans "Qui suis-je ?" est trop lumineux par rapport
   au reste du titre. Harmoniser la luminosité des accents. */
.section-title .accent {
    opacity: 0.9;
}

/* Le pont de synergie label "SYNERGIE" est trop voyant.
   C'est une légende, pas un titre. */
.bridge-label {
    font-size: 0.7rem;
    opacity: 0.7;
}

/* Status badges — uniformiser la taille visuelle */
.status-badge {
    font-size: 0.7rem;
    padding: 3px 10px;
}

/* ========================================
   SESSION CONJOINTE 1 — Game Dev + Photo
   ======================================== */

/* --- [UI/UX Designer · Game Dev] Mobile menu polish --- */
/* Le menu mobile s'ouvre en translateY brut. En game UX,
   un menu doit glisser avec du feedback. Ajout d'un fond
   progressif et d'un espacement plus aéré. */
@media (max-width: 768px) {
    .nav-links {
        padding: 16px 24px 24px;
        gap: 2px;
        border-bottom: 1px solid rgba(6, 182, 212, 0.1);
    }

    .nav-links a {
        padding: 12px 16px;
        font-size: 1rem;
        border-radius: var(--radius-sm);
    }

    .nav-links a.active {
        background: rgba(6, 182, 212, 0.08);
    }

    /* Hero adapté — plus compact mais toujours impactant */
    .hero-name {
        font-size: clamp(2.2rem, 9vw, 3.5rem);
    }

    /* Cards featured en colonne — plus de padding */
    .project-card.featured .featured-content {
        padding: 24px 20px;
    }
}

/* --- [Lux · Photo] Cohérence lumineuse globale --- */
/* La source lumineuse du hero (haut-gauche, dorée) doit
   se retrouver subtilement dans toutes les sections.
   Unifier : tous les fonds de section reçoivent un micro-reflet
   en haut-gauche pour simuler la même source de lumière. */
.about::before,
.parcours::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 30%;
    background: radial-gradient(
        ellipse at 0% 0%,
        rgba(232, 213, 163, 0.02) 0%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
}

.about .container,
.parcours .container {
    position: relative;
    z-index: 1;
}

/* --- [Art Director · Game Dev] Cohérence des border-radius --- */
/* Audit visuel : certains éléments ont radius:12, d'autres 8,
   les boutons 50px. Normaliser les catégories. */
.timeline-content {
    border-radius: var(--radius);
}

.stat-item {
    border-radius: var(--radius);
}

.techstack-category {
    border-radius: var(--radius);
}

/* --- [Chroma · Photo] Micro-dégradé sur le hero-wave --- */
/* La vague SVG est une couleur plate (bg-secondary).
   En colorimétrie, une transition de ton doit être graduelle.
   Ajouter un fondu sur la vague pour qu'elle se dissolve. */
.hero-wave {
    opacity: 0.85;
}

.hero-wave svg path {
    fill: var(--bg-secondary);
    filter: blur(0.5px);
}

/* --- [QA Tester · Game Dev] Conflits CSS entre studios --- */
/* Fix: le mask-image de Pixel (Photo S4) coupe le ::after
   des section-dividers (Game Dev S3). Retirer le mask
   qui crée des artefacts visibles sur certains navigateurs. */
.about,
.expertise,
.parcours,
.projets,
.contact {
    mask-image: none;
    -webkit-mask-image: none;
}

/* ========================================
   SESSION CONJOINTE 2 — Game Dev + Photo
   ======================================== */

/* --- [Game Designer · Game Dev] Affiner la progress bar --- */
/* 4px c'est épais pour une barre décorative. En game UI,
   un indicateur de progression doit être visible sans dominer.
   Réduire à 3px, adoucir le glow, fond transparent. */
.game-xp-bar {
    height: 3px;
    background: transparent;
}

.xp-fill {
    box-shadow: 0 0 6px rgba(34, 211, 238, 0.4);
    border-radius: 0 2px 2px 0;
}

/* --- [Arca · Photo] Équilibre visuel des SVG placeholder --- */
/* Les illustrations SVG des projets featured sont trop
   transparentes — elles ne "tiennent" pas visuellement face
   au texte dense à gauche. Remonter l'opacité et adoucir
   la zone de fond pour un meilleur équilibre poids gauche/droite. */
.featured-visual {
    background: rgba(0, 0, 0, 0.1);
    border-left: 1px solid rgba(30, 41, 59, 0.5);
}

.visual-placeholder {
    opacity: 1;
}

.visual-placeholder svg {
    filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.08));
}

/* --- [Pixel · Photo] Micro-contraste sur les pills techstack --- */
/* Les pills sont trop uniformes. En retouche, on ajoute de la
   séparation tonale entre les éléments répétitifs pour que l'oeil
   les distingue. Alterner légèrement l'opacité du fond. */
.techstack-pills span:nth-child(odd) {
    background: rgba(6, 182, 212, 0.08);
}

.techstack-pills span:nth-child(even) {
    background: rgba(59, 130, 246, 0.06);
}

/* --- [Narrative Designer · Game Dev] Section subtitles — entrée douce --- */
/* Les sous-titres apparaissent au même rythme que les titres.
   En cinématique, le sous-titre entre APRÈS le titre,
   avec un léger retard pour créer une hiérarchie temporelle. */
.section-subtitle {
    transition: opacity 0.8s ease 0.3s, transform 0.8s ease 0.3s;
}

.section-subtitle.reveal.visible {
    transition-delay: 0.15s;
}

/* ========================================
   SESSION CONJOINTE 3 — Consolidation finale
   ======================================== */

/* --- [Lead Programmer · Game Dev] Réduction des animations simultanées --- */
/* Le site a 10+ animations CSS en boucle (shimmer, pulse, float,
   breathe, energy, wave, glow...). Sur mobile ou machines modestes,
   c'est du GPU burn inutile. Pause toutes les animations infinies
   quand la page n'est pas visible (tab inactive). */
html.tab-hidden *,
html.tab-hidden *::before,
html.tab-hidden *::after {
    animation-play-state: paused !important;
}

/* --- [Lens · Photo] Dernier audit de cohérence visuelle --- */
/* Les hover sur compact cards manquent le même traitement
   de lumière overhead que les featured cards (Lux S2).
   Uniformiser. */
.project-card.compact {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--bg-card), white 1.5%) 0%,
        var(--bg-card) 35%
    );
}

/* Filter buttons — même radius que les pills pour cohérence */
.filter-btn {
    border-radius: 50px;
}

/* La citation footer manque la même netteté que les titres */
.footer-quote {
    text-rendering: geometricPrecision;
}

/* --- [Sound Designer · Game Dev] Throttle audio pour éviter le spam --- */
/* Pas de CSS — voir JS ci-dessous */

/* --- [Chroma · Photo] Dernière harmonisation — le modal --- */
/* Le fond du modal overlay est un noir 70%. Trop brutal.
   En color grading, un noir pur est une erreur — il faut
   un noir teinté qui reste dans la palette. */
.project-modal-overlay {
    background: rgba(8, 12, 24, 0.75);
}

/*
 * ═══════════════════════════════════════════
 * PORTFOLIO V2 — COMPLET
 *
 * Studio Game Dev : 8 sessions (35+ effets)
 * Studio Photo   : 4 sessions (20+ raffinements)
 * Sessions Conjointes : 3 (consolidation)
 *
 * Total : 15 sessions, ~3250 lignes CSS, ~1800 lignes JS
 * Contenu modifié : 0 ligne
 *
 * Équipe : 15 professionnels (9 game dev + 6 photo)
 * ═══════════════════════════════════════════
 */

/* ========================================
   SECTION CANVAS — Visuels decoratifs
   ======================================== */

/* Base commune */
.section-canvas {
    position: absolute;
    top: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
}

.section-canvas canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Positionnement par section */
.section-canvas-right {
    right: 1%;
    width: 240px;
}

.section-canvas-left {
    left: 1%;
    width: 200px;
}

.section-canvas-center {
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    top: auto;
    bottom: 0;
    height: 80px;
}

/* Sections parentes doivent etre relative + overflow hidden */
.expertise { position: relative; overflow: hidden; }
.parcours { position: relative; overflow: hidden; }
.projets { position: relative; overflow: hidden; }
.contact { position: relative; overflow: hidden; }

/* Z-index : containers au-dessus du canvas */
.expertise .container,
.parcours .container,
.projets .container,
.contact .container {
    position: relative;
    z-index: 1;
}

/* Masquer les canvas sur mobile */
@media (max-width: 968px) {
    .section-canvas { display: none; }
}

/* --- Constellation Hotspots (meme pattern que ADN) --- */
.constellation-hotspot {
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    margin-left: -16px;
    margin-top: -16px;
    border-radius: 50%;
    pointer-events: auto;
    cursor: pointer;
    outline: none;
    z-index: 2;
}

.constellation-tip {
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) scale(0.85);
    transform-origin: right center;
    background: rgba(21, 31, 53, 0.92);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    backdrop-filter: blur(16px);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 10;
}

.constellation-tip::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: var(--border);
}

.constellation-hotspot:hover .constellation-tip,
.constellation-hotspot:focus .constellation-tip,
.constellation-hotspot.active .constellation-tip {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.constellation-tip strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    color: var(--text-primary);
    margin-bottom: 3px;
}

.constellation-tip span {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ============================================================
   NEON TERMINAL ACCENTS — V2 Integration
   ============================================================ */

/* --- Violet accent color --- */
:root {
    --accent-violet: #BF00FF;
    --glow-violet: 0 0 10px rgba(191, 0, 255, 0.25), 0 0 30px rgba(191, 0, 255, 0.08);
}

/* --- Nav Logo: Command Prompt Style --- */
.nav-prompt {
    color: var(--accent-violet);
    font-family: 'Space Grotesk', monospace;
    font-weight: 400;
    margin-right: 2px;
}

.nav-cursor {
    color: var(--accent-secondary);
    animation: blink 1s step-end infinite;
    font-weight: 300;
    margin-left: 1px;
}

.nav-logo {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.5px;
    text-shadow: 0 0 20px rgba(191, 0, 255, 0.12);
}

.nav-logo:hover {
    color: var(--text-primary);
    text-shadow: var(--glow-violet);
}

.nav-logo:hover .nav-prompt {
    text-shadow: 0 0 8px rgba(191, 0, 255, 0.5);
}

/* --- Hero Tagline: Terminal Prefix --- */
.terminal-prefix {
    color: var(--accent-violet);
    font-family: 'Space Grotesk', monospace;
    font-weight: 600;
    margin-right: 4px;
}

.hero-tagline {
    font-family: var(--font-heading);
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    color: var(--text-muted);
    margin-bottom: 24px;
    min-height: 1.6em;
}

/* --- Program Labels --- */
.program-label {
    display: block;
    font-family: 'Space Grotesk', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-violet);
    text-align: center;
    margin-bottom: 8px;
    opacity: 0.6;
    transition: opacity var(--transition);
}

.program-label:hover {
    opacity: 1;
}

/* Subtle violet accents on section hover */
.section-title .accent {
    transition: text-shadow 0.3s ease;
}

.section:hover .program-label {
    opacity: 0.85;
}

/* --- Violet integration in existing elements --- */
.btn-primary:hover {
    box-shadow: 0 4px 20px rgba(191, 0, 255, 0.15), 0 4px 20px rgba(59, 130, 246, 0.2);
}

.hero-name .accent {
    text-shadow: 0 0 40px rgba(191, 0, 255, 0.15);
}

/* Timeline marker violet glow */
.timeline-marker::after {
    box-shadow: 0 0 10px rgba(191, 0, 255, 0.2);
}

/* Expertise card border violet accent on hover */
.expertise-card:hover {
    border-color: rgba(191, 0, 255, 0.15);
}

/* Cert badge violet shimmer */
.cert-badge:hover .cert-icon {
    filter: drop-shadow(0 0 6px rgba(191, 0, 255, 0.2));
}

/* Scroll progress bar: add violet gradient */
.xp-fill {
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-violet), var(--accent-secondary)) !important;
}

/* ============================================================
   DOUBLE EXPOSURE — Filtres Domaine & Timeline Parallèle
   ============================================================ */

/* Domain colors */
:root {
    --domain-infra: var(--accent-primary);       /* #3b82f6 blue */
    --domain-dev: var(--accent-secondary);        /* #06b6d4 cyan */
    --domain-synergy: var(--accent-violet);       /* #BF00FF violet */
}

/* --- Filter Buttons --- */
.domain-filter {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 32px;
}

.domain-btn {
    font-family: var(--font-heading);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    padding: 6px 16px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.domain-btn:hover {
    border-color: var(--text-muted);
    color: var(--text-primary);
}

.domain-btn.active {
    color: #fff;
    border-color: transparent;
}

.domain-btn.active[data-domain="all"] {
    background: linear-gradient(135deg, var(--domain-infra), var(--domain-synergy), var(--domain-dev));
}

.domain-btn.active[data-domain="infra"] {
    background: var(--domain-infra);
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.25);
}

.domain-btn.active[data-domain="dev"] {
    background: var(--domain-dev);
    box-shadow: 0 0 12px rgba(6, 182, 212, 0.25);
}

/* --- Expertise Cards: Domain filtering --- */
.expertise-card {
    transition: opacity 0.4s ease, transform 0.4s ease, border-color 0.4s ease;
}

.expertise-card.dimmed {
    opacity: 0.2;
    transform: scale(0.97);
    pointer-events: none;
}

.expertise-card[data-domain="infra"].highlighted {
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.08);
}

.expertise-card[data-domain="dev"].highlighted {
    border-color: rgba(6, 182, 212, 0.3);
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.08);
}

/* Synergy mode: bridge pulses */
.synergy-schema.synergy-active .bridge-label {
    color: var(--accent-violet);
    text-shadow: 0 0 12px rgba(191, 0, 255, 0.3);
}

.synergy-schema.synergy-active .bridge-line {
    background: linear-gradient(90deg, var(--domain-infra), var(--domain-synergy), var(--domain-dev));
    height: 2px;
}

/* Synergy: pillar dim when filtered */
.synergy-pillar {
    transition: opacity 0.4s ease;
}

.synergy-pillar.dimmed {
    opacity: 0.25;
}

/* --- Tech Stack: Domain filtering --- */
.techstack-category {
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.techstack-category.dimmed {
    opacity: 0.15;
    transform: scale(0.97);
}

.techstack-category[data-domain="infra"] .techstack-pills span {
    transition: border-color 0.3s, box-shadow 0.3s;
}

.techstack-category.highlighted[data-domain="infra"] .techstack-pills span {
    border-color: rgba(59, 130, 246, 0.25);
}

.techstack-category.highlighted[data-domain="dev"] .techstack-pills span {
    border-color: rgba(6, 182, 212, 0.25);
}

.techstack-category.highlighted[data-domain="shared"] .techstack-pills span {
    border-color: rgba(191, 0, 255, 0.2);
}

/* --- Timeline Parallèle --- */
.timeline-parallel {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    align-items: start;
    margin-bottom: 60px;
}

.timeline-track {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px 24px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.timeline-track--infra {
    border-top: 3px solid var(--domain-infra);
}

.timeline-track--dev {
    border-top: 3px solid var(--domain-dev);
}

.timeline-track--infra:hover {
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.06);
}

.timeline-track--dev:hover {
    border-color: rgba(6, 182, 212, 0.3);
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.06);
}

.track-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.track-color-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.track-dot--infra { background: var(--domain-infra); box-shadow: 0 0 6px rgba(59, 130, 246, 0.4); }
.track-dot--dev { background: var(--domain-dev); box-shadow: 0 0 6px rgba(6, 182, 212, 0.4); }

.timeline-track h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text-primary);
}

.timeline-track .timeline-company {
    font-size: 0.88rem;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.timeline-track .timeline-achievements {
    list-style: none;
    padding: 0;
}

.timeline-track .timeline-achievements li {
    position: relative;
    padding-left: 16px;
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

.timeline-track--infra .timeline-achievements li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--domain-infra);
    opacity: 0.5;
}

.timeline-track--dev .timeline-achievements li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--domain-dev);
    opacity: 0.5;
}

.timeline-track .timeline-date {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Bridge between tracks */
.timeline-bridge {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 16px;
    gap: 8px;
    padding-top: 30px;
}

.bridge-line-vertical {
    width: 2px;
    flex: 1;
    min-height: 40px;
    background: linear-gradient(180deg, var(--domain-infra), var(--domain-synergy), var(--domain-dev));
    opacity: 0.3;
    border-radius: 1px;
}

.timeline-bridge .bridge-tag {
    font-family: var(--font-heading);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-violet);
    writing-mode: vertical-lr;
    text-orientation: mixed;
    padding: 8px 0;
    opacity: 0.7;
}

/* Mobile: stack timeline */
@media (max-width: 768px) {
    .timeline-parallel {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .timeline-bridge {
        flex-direction: row;
        padding: 0;
    }
    .bridge-line-vertical {
        height: 2px;
        width: auto;
        min-height: unset;
        flex: 1;
    }
    .timeline-bridge .bridge-tag {
        writing-mode: horizontal-tb;
    }
    .domain-btn {
        font-size: 0.7rem;
        padding: 5px 10px;
    }
}

/* ============================================================
   GOLDEN HOUR — Progression lumineuse subtile
   ============================================================ */
:root {
    --light-warmth: 0;
    --light-hue: 0;
}

.light-progression {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.4s ease;
    opacity: var(--light-warmth);
    background:
        radial-gradient(ellipse 80% 50% at 50% 30%,
            rgba(var(--light-hue), 0.06) 0%,
            transparent 70%);
    mix-blend-mode: soft-light;
}

@media (prefers-reduced-motion: reduce) {
    .light-progression { display: none; }
}

/* ============================================================
   SOMMAIRE LATÉRAL (ToC Sidebar)
   ============================================================ */

/* Trigger button — fixed left */
.toc-trigger {
    position: fixed;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1100;
    background: rgba(15, 23, 41, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(191, 0, 255, 0.2);
    color: var(--accent-violet);
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    opacity: 0;
    pointer-events: none;
}

.toc-trigger.visible {
    opacity: 0.7;
    pointer-events: auto;
}

.toc-trigger:hover {
    opacity: 1;
    border-color: var(--accent-violet);
    box-shadow: var(--glow-violet);
}

.toc-trigger[aria-expanded="true"] {
    opacity: 0;
    pointer-events: none;
}

/* Sidebar panel */
.toc-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 240px;
    z-index: 1200;
    background: rgba(11, 17, 33, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid rgba(191, 0, 255, 0.15);
    padding: 1.5rem 1.25rem;
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
}

.toc-sidebar.open {
    transform: translateX(0);
}

.toc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(191, 0, 255, 0.15);
}

.toc-title {
    font-family: var(--font-heading);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    color: var(--accent-violet);
    text-transform: uppercase;
}

.toc-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.4rem;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    transition: color 0.2s;
}

.toc-close:hover {
    color: var(--accent-violet);
}

.toc-list {
    list-style: none;
    counter-reset: toc-counter;
}

.toc-list li {
    counter-increment: toc-counter;
    margin-bottom: 2px;
}

.toc-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    color: var(--text-secondary);
    border-radius: 6px;
    transition: all 0.2s ease;
    border-left: 2px solid transparent;
}

.toc-link::before {
    content: counter(toc-counter, decimal-leading-zero);
    font-family: 'Space Grotesk', monospace;
    font-size: 0.65rem;
    color: var(--accent-violet);
    opacity: 0.5;
    min-width: 18px;
}

.toc-link:hover {
    color: var(--text-primary);
    background: rgba(191, 0, 255, 0.06);
}

.toc-link.active {
    color: var(--accent-secondary);
    border-left-color: var(--accent-violet);
    background: rgba(191, 0, 255, 0.08);
}

.toc-link.active::before {
    opacity: 1;
}

/* Hide trigger on small screens — sommaire already in hamburger */
@media (max-width: 768px) {
    .toc-trigger { display: none; }
    .toc-sidebar { width: 220px; }
}

@media (prefers-reduced-motion: reduce) {
    .nav-cursor { animation: none; opacity: 0.5; }
    .toc-sidebar { transition: none; }
}