/* --- BEBAS NEUE --- */
@font-face {
    font-family: 'Bebas Neue';
    src: url('fonts/bebas-neue-v16-latin-regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
    size-adjust: 110%; /* Ajustement LCP maintiens-le */
}

/* --- CORMORANT GARAMOND --- */
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('fonts/cormorant-garamond-v21-latin-regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('fonts/cormorant-garamond-v21-latin-300.woff2') format('woff2');
    font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('fonts/cormorant-garamond-v21-latin-italic.woff2') format('woff2');
    font-weight: 400; font-style: italic; font-display: swap;
}

/* --- SPACE MONO --- */
@font-face {
    font-family: 'Space Mono';
    src: url('fonts/space-mono-v17-latin-regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Space Mono';
    src: url('fonts/space-mono-v17-latin-700.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}

body { 
    scroll-behavior: smooth; 
    font-family: 'Cormorant Garamond', serif; 
    overflow-x: hidden; 
    cursor: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3.5" fill="%23e8001f"/></svg>') 8 8, auto;
}
body.dark { background: #0a0908; color: #e8e2d6; }
body.light { background: #f2ede4; color: #1a1612; }

a, button, .cat-card, .tool-item, .contact-item, .proj-item, .toggle-pill, .panel-close, .hdr-logo, .lb-close {
    cursor: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="4.5" fill="none" stroke="%23e8001f" stroke-width="1.5"/></svg>') 8 8, pointer !important;
}

#site { position: relative; height: 100vh; overflow: hidden; }
#sv { height: 100%; overflow-y: auto; scroll-behavior: smooth; }
#sv::-webkit-scrollbar { width: 3px; }
#sv::-webkit-scrollbar-thumb { background: #e8001f; }

/* --- Header / Nav --- */
.hdr { position: sticky; top: 0; z-index: 100; display: flex; justify-content: space-between; align-items: center; padding: 14px 32px; }
body.dark .hdr { border-bottom: 1px solid rgba(232,226,214,0.06); background: rgba(10,9,8,0.95); }
body.light .hdr { border-bottom: 1px solid rgba(26,22,18,0.08); background: rgba(242,237,228,0.95); }

.hdr-logo { font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; }
body.dark .hdr-logo { color: rgba(232,226,214,0.8); }
body.light .hdr-logo { color: rgba(26,22,18,0.9); }

.hdr-nav { display: flex; gap: 20px; align-items: center; }
.hdr-nav a { font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; transition: color 0.2s; cursor: pointer; }
body.dark .hdr-nav a { color: rgba(232,226,214,0.75); }
body.light .hdr-nav a { color: rgba(26,22,18,0.8); font-weight: 600; }
.hdr-nav a:hover { color: #e8001f; }

/* --- Toggle Pill --- */
.toggle-pill { display: flex; align-items: center; width: 46px; height: 24px; border-radius: 12px; border: 1px solid; position: relative; cursor: pointer; transition: border-color 0.3s, background 0.3s; }
.toggle-pill:focus { outline: none; box-shadow: 0 0 0 2px rgba(232,0,31,0.5); }
body.dark .toggle-pill { border-color: rgba(232,226,214,0.3); background: rgba(232,226,214,0.05); }
body.light .toggle-pill { border-color: rgba(26,22,18,0.2); background: rgba(26,22,18,0.06); }
.toggle-pill:hover { border-color: #e8001f; }
.toggle-thumb { position: absolute; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #e8001f; display: flex; align-items: center; justify-content: center; transition: transform 0.35s cubic-bezier(0.4,0,0.2,1); color: #fff; }
body.light .toggle-thumb { transform: translateX(22px); }
.t-icon { position: absolute; width: 10px; height: 10px; transition: opacity 0.2s; }
.t-sun { opacity: 0; } .t-moon { opacity: 1; }
body.light .t-sun { opacity: 1; } body.light .t-moon { opacity: 0; }

/* --- Hero --- */
.hero { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; padding: 100px 32px 80px 32px; position: relative; }
.hero-num { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: 24px; }
body.dark .hero-num { color: rgba(232,226,214,0.7); }
body.light .hero-num { color: rgba(26,22,18,0.7); font-weight: 600; }
.hero-name { font-family: 'Bebas Neue', sans-serif; font-size: clamp(52px,8vw,86px); line-height: 0.9; letter-spacing: 0.02em; }
body.dark .hero-name { color: #e8e2d6; }
body.light .hero-name { color: #1a1612; }
.accent { color: #e8001f; }
.hero-sub { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; margin-top: 24px; }
body.dark .hero-sub { color: rgba(232,226,214,0.7); }
body.light .hero-sub { color: rgba(26,22,18,0.8); font-weight: 600; }

/* --- Metrics & CV --- */
.hero-metrics { position: absolute; bottom: 60px; right: 32px; display: flex; gap: 48px; text-align: right; }
.metric { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.metric-val { font-family: 'Space Mono', monospace; font-size: 24px; color: #e8e2d6; display: flex; align-items: center; justify-content: flex-end; height: 24px; }
body.light .metric-val { color: #1a1612; }
.metric-lbl { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; }
body.dark .metric-lbl { color: rgba(232,226,214,0.7); }
body.light .metric-lbl { color: rgba(26,22,18,0.7); font-weight: 600; }


.pulsing-dot { width: 14px; height: 14px; background: #e8001f; border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 
    0% { box-shadow: 0 0 0 0 rgba(232,0,31,0.6); } 
    70% { box-shadow: 0 0 0 12px rgba(232,0,31,0); } 
    100% { box-shadow: 0 0 0 0 rgba(232,0,31,0); } 
}

/* --- Sections Globales --- */
.section { padding: 80px 32px; scroll-margin-top: 80px; }
.sec-num { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: #e8001f; margin-bottom: 6px; }
.sec-hdr { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.sec-title { font-family: 'Bebas Neue', sans-serif; font-size: 34px; letter-spacing: 0.04em; }
body.dark .sec-title { color: #e8e2d6; }
body.light .sec-title { color: #1a1612; }
.sec-line { flex: 1; height: 1px; }
body.dark .sec-line { background: rgba(232,226,214,0.2); }
body.light .sec-line { background: rgba(26,22,18,0.2); }

/* --- Grille Projets --- */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.cat-card { position: relative; padding: 24px 20px 32px; cursor: pointer; transition: background 0.25s; overflow: hidden; }
body.dark .cat-card { background: #111009; }
body.light .cat-card { background: #e8e3da; }
body.dark .cat-card:hover { background: #1c1815; }
body.light .cat-card:hover { background: #ddd8ce; }
.cat-card::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 2px; background: #e8001f; transition: width 0.35s; }
.cat-card:hover::before { width: 100%; }
.cat-card.hl { outline: 1px solid rgba(232,0,31,0.4); }
.cat-card.hl::before { width: 100%; }
.cat-img { width: 36px; height: 36px; border-radius: 4px; object-fit: contain; margin-bottom: 12px; display: block; }
.cat-name { font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: 0.04em; pointer-events: none; }
body.dark .cat-name { color: #e8e2d6; }
body.light .cat-name { color: #1a1612; }
.cat-count { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: #e8001f; margin-top: 3px; pointer-events: none; }
.cat-arr { position: absolute; bottom: 16px; right: 16px; font-size: 12px; transition: color 0.2s, transform 0.2s; pointer-events: none; }
body.dark .cat-arr { color: rgba(232,226,214,0.6); }
body.light .cat-arr { color: rgba(26,22,18,0.6); }
.cat-card:hover .cat-arr { color: #e8001f; transform: translateX(4px); }

/* --- Logos Défilants --- */
.tools-band { overflow: hidden; padding: 40px 0; scroll-margin-top: 80px; }
body.dark .tools-band { border-top: 1px solid rgba(232,226,214,0.1); border-bottom: 1px solid rgba(232,226,214,0.1); }
body.light .tools-band { border-top: 1px solid rgba(26,22,18,0.2); border-bottom: 1px solid rgba(26,22,18,0.2); }
.tools-track { display: flex; width: max-content; }
.tool-group { display: flex; align-items: center; flex-shrink: 0; }
.tool-item { display: flex; align-items: center; gap: 8px; padding: 0 16px; cursor: pointer; white-space: nowrap; }
.adobe-img { width: 34px; height: 34px; border-radius: 4px; object-fit: contain; }
.tool-name { font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; transition: color 0.2s, font-weight 0.2s; }
body.dark .tool-name { color: rgba(232,226,214,0.8); font-weight: normal; }
body.light .tool-name { color: #1a1612; font-weight: 600; }
.tool-sep { font-size: 12px; padding: 0 14px; }
body.dark .tool-sep { color: rgba(232,226,214,0.6); }
body.light .tool-sep { color: rgba(26,22,18,0.6); }

/* --- A propos : Minimalisme --- */
.about-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 60px; align-items: start; }
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; gap: 40px; } }
.about-role { font-family: 'Bebas Neue', sans-serif; font-size: 32px; letter-spacing: 0.05em; margin-bottom: 24px; color: #e8001f; }
.about-text p { font-size: 16px; line-height: 1.6; margin-bottom: 24px; }
body.dark .about-text p { color: rgba(232,226,214,0.8); }
body.light .about-text p { color: rgba(26,22,18,0.9); }

.about-data { display: flex; flex-direction: column; gap: 32px; padding-left: 40px; border-left: 1px solid; }
body.dark .about-data { border-color: rgba(232,226,214,0.3); }
body.light .about-data { border-color: rgba(26,22,18,0.3); }
@media (max-width: 900px) { .about-data { padding-left: 0; border-left: none; border-top: 1px solid; padding-top: 32px; } }

.data-block { display: flex; flex-direction: column; gap: 8px; }
.d-title { font-family: 'Space Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; }
body.dark .d-title { color: rgba(232,226,214,0.75); }
body.light .d-title { color: rgba(26,22,18,0.7); font-weight: 600; }
.d-info { font-size: 15px; line-height: 1.5; }
body.dark .d-info { color: #e8e2d6; }
body.light .d-info { color: #1a1612; font-weight: 500; }

.data-eq { display: flex; gap: 4px; height: 32px; align-items: flex-end; margin-top: 16px; }
.data-eq span { width: 4px; background: #e8001f; animation: eq 1.5s infinite ease-in-out alternate; }
.data-eq span:nth-child(1) { animation-delay: 0.1s; height: 30%; }
.data-eq span:nth-child(2) { animation-delay: 0.4s; height: 80%; }
.data-eq span:nth-child(3) { animation-delay: 0.2s; height: 50%; }
.data-eq span:nth-child(4) { animation-delay: 0.5s; height: 100%; }
.data-eq span:nth-child(5) { animation-delay: 0.3s; height: 40%; }
.data-eq span:nth-child(6) { animation-delay: 0.6s; height: 90%; }
.data-eq span:nth-child(7) { animation-delay: 0.1s; height: 60%; }
.data-eq span:nth-child(8) { animation-delay: 0.4s; height: 20%; }
@keyframes eq { 0% { transform: scaleY(0.2); transform-origin: bottom; } 100% { transform: scaleY(1); transform-origin: bottom; } }

/* --- Contact --- */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.contact-item { display: block; padding: 32px 24px; text-decoration: none; transition: background 0.3s; position: relative; overflow: hidden; }
body.dark .contact-item { background: #111009; color: #e8e2d6; }
body.light .contact-item { background: #e8e3da; color: #1a1612; }
body.dark .contact-item:hover { background: #1c1815; }
body.light .contact-item:hover { background: #ddd8ce; }
.contact-item::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 2px; background: #e8001f; transition: width 0.35s; }
.contact-item:hover::before { width: 100%; }
.contact-meta { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 24px; opacity: 1; }
body.dark .contact-meta { color: rgba(232,226,214,0.8); }
body.light .contact-meta { color: rgba(26,22,18,0.8); font-weight: 600; }
.contact-link { font-family: 'Bebas Neue', sans-serif; font-size: 42px; letter-spacing: 0.04em; display: flex; align-items: center; justify-content: space-between; color: inherit; transition: color 0.2s; }
.contact-arr { font-family: 'Space Mono', monospace; font-size: 18px; transition: transform 0.3s, color 0.3s; opacity: 1; }
body.dark .contact-arr { color: rgba(232,226,214,0.6); }
body.light .contact-arr { color: rgba(26,22,18,0.6); }
.contact-item:hover .contact-link { color: #e8001f; }
.contact-item:hover .contact-arr { color: #e8001f; transform: translateX(6px); }

/* --- Footer --- */

.footer { 
    padding: 40px 32px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

body.dark .footer { border-top: 1px solid rgba(232,226,214,0.15); }
body.light .footer { border-top: 1px solid rgba(26,22,18,0.2); }

.footer-l, .footer-r { 
    font-family: 'Space Mono', monospace; 
    font-size: 13px; 
    letter-spacing: 0.1em; 
    opacity: 1; 
}

body.dark .footer-l, body.dark .footer-r { color: rgba(232,226,214,0.85); }
body.light .footer-l, body.light .footer-r { color: rgba(26,22,18,0.9); font-weight: 600; }

/* --- Tiroir Panel --- */
.panel-bd { position: absolute; inset: 0; background: rgba(0,0,0,0); pointer-events: none; transition: background 0.35s; z-index: 300; }
.panel-bd.open { background: rgba(0,0,0,0.65); pointer-events: all; }
.panel { position: absolute; top: 0; right: 0; width: 72%; max-width: 360px; height: 100%; background: #161412; border-left: 1px solid rgba(232,226,214,0.2); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.38s cubic-bezier(0.4,0,0.2,1); z-index: 301; }
.panel-bd.open .panel { transform: translateX(0); }
.panel-hdr { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid rgba(232,226,214,0.1); flex-shrink: 0; }
.panel-hdr-l { display: flex; align-items: center; gap: 10px; }
.panel-logo { width: 32px; height: 32px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-family: 'Space Mono', monospace; font-size: 11px; font-weight: bold; color: #fff; }
.panel-title { font-family: 'Bebas Neue', sans-serif; font-size: 22px; color: #e8e2d6; letter-spacing: 0.04em; }
.panel-close { background: none; border: 1px solid rgba(232,226,214,0.3); color: rgba(232,226,214,0.8); font-family: 'Space Mono', monospace; font-size: 11px; padding: 4px 9px; }
.panel-body { overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.proj-item { display: flex; gap: 12px; align-items: center; padding: 12px; border: 1px solid rgba(232,226,214,0.1); cursor: pointer; }

.proj-thumb { 
    width: 70px; 
    height: 48px; 
    flex-shrink: 0; 
    background: #0e0d0b; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    overflow: hidden; 
    border: 1px solid rgba(232,226,214,0.1); 
}

.thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.proj-num { font-family: 'Bebas Neue', sans-serif; font-size: 24px; color: rgba(232,226,214,0.2); }
.proj-cat { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: #e8001f; }
.proj-name { font-family: 'Bebas Neue', sans-serif; font-size: 16px; color: #e8e2d6; letter-spacing: 0.04em; }
.proj-desc { font-size: 13px; font-weight: 300; color: rgba(232,226,214,0.7); margin-top: 2px; }
.proj-arr { font-size: 12px; color: rgba(232,226,214,0.6); }

.mail-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}
.mail-link:hover {
    color: #e8001f;
}

/* --- Lightbox Centrale --- */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: 500; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.lightbox.active { opacity: 1; pointer-events: all; }
.lb-close { position: absolute; top: 32px; right: 40px; font-family: 'Space Mono', monospace; font-size: 12px; color: #fff; cursor: pointer; text-transform: uppercase; letter-spacing: 0.1em; background: none; border: none; }
.lb-content { width: 70%; max-width: 1200px; max-height: 85vh; display: flex; align-items: center; justify-content: center; }
.lb-content iframe { width: 100%; aspect-ratio: 16/9; border: none; background: #000; }
.lb-content img { max-width: 100%; max-height: 85vh; object-fit: contain; }

/* --- Fades Animation --- */
.fade-el { opacity: 0; transform: translateY(18px) scale(0.97); transition: opacity 0.7s ease-out, transform 0.7s ease-out; will-change: opacity, transform; }
.fade-el.visible { opacity: 1; transform: translateY(0) scale(1); }

/* --- RESPONSIVE MOBILE (Max 768px) --- */
@media (max-width: 768px) {
    .hdr { flex-direction: column; align-items: flex-start; gap: 20px; padding: 20px 24px; }
    .hdr-nav { width: 100%; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
    .hero { padding: 100px 24px 60px 24px; min-height: auto; }
    .hero-metrics { position: relative; bottom: 0; right: 0; margin-top: 48px; flex-direction: column; align-items: flex-start; gap: 24px; text-align: left; }
    .metric { align-items: flex-start; }
    .metric-val { justify-content: flex-start; }
    .section { padding: 60px 24px; scroll-margin-top: 120px; }
    .sec-title { font-size: 28px; }
    .cat-grid, .contact-grid { grid-template-columns: 1fr; gap: 8px; }
    .cat-card, .contact-item { padding: 24px; }
    .contact-link { font-size: 32px; }
    .footer { flex-direction: column; align-items: flex-start; gap: 24px; padding: 32px 24px; }
    .panel { width: 100%; max-width: none; border-left: none; }
    .lb-close { top: 16px; right: 16px; }
    .lb-content { width: 90%; }
}