/* ==========================================================================
   1. VARIABLES & THÈMES
   ========================================================================== */
:root {
    --bg-cream: #FAFAF7;
    --bg-surface: #F2F1EC;
    --text-ink: #111110;
    --text-muted: #686763;
    --accent-cobalt: #2946DC;
    --hairline: rgba(17, 17, 16, 0.11);
    --hairline-strong: rgba(17, 17, 16, 0.22);
}

[data-theme="dark"] {
    --bg-cream: #0B0B0C;
    --bg-surface: #141417;
    --text-ink: #FAFAF7;
    --text-muted: #A0A09A;
    --accent-cobalt: #3B5BFF;
    --hairline: rgba(250, 250, 247, 0.12);
    --hairline-strong: rgba(250, 250, 247, 0.24);
}

/* ==========================================================================
   2. BASE & RESET
   ========================================================================== */
* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background-color: var(--accent-cobalt);
    color: #FAFAF7;
}

html, body {
    background-color: var(--bg-cream);
    color: var(--text-ink);
    font-family: 'Plus Jakarta Sans', sans-serif;
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: var(--bg-cream);
}
::-webkit-scrollbar-thumb {
    background: var(--hairline-strong);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--accent-cobalt);
}

/* ==========================================================================
   3. COMPOSANTS ÉDITORIAUX & BORDURES
   ========================================================================== */
.noise-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 90;
    opacity: 0.032;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

.border-hairline {
    border-color: var(--hairline) !important;
}
.border-hairline-t {
    border-top: 1px solid var(--hairline);
}
.border-hairline-b {
    border-bottom: 1px solid var(--hairline);
}
.border-hairline-l {
    border-left: 1px solid var(--hairline);
}
.border-hairline-r {
    border-right: 1px solid var(--hairline);
}

.editorial-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.editorial-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1.5px;
    background-color: var(--accent-cobalt);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.editorial-link:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
}

/* ==========================================================================
   4. CURSEUR PERSONNALISÉ
   ========================================================================== */
@media (pointer: fine) {
    body.custom-cursor-ready,
    body.custom-cursor-ready a,
    body.custom-cursor-ready button,
    body.custom-cursor-ready [data-cursor] {
        cursor: none !important;
    }
}

#cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    background-color: var(--accent-cobalt);
    border-radius: 9999px;
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    height 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.25s ease;
}

#cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(41, 70, 220, 0.45);
    border-radius: 9999px;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    height 0.35s cubic-bezier(0.3, 1, 0.3, 1),
    background-color 0.3s ease,
    border-color 0.3s ease;
}

#cursor-ring.is-expanded {
    width: 96px;
    height: 96px;
    background-color: var(--accent-cobalt);
    border-color: var(--accent-cobalt);
}

#cursor-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: #FAFAF7;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.2s ease, transform 0.25s ease;
    text-align: center;
    line-height: 1.1;
    padding: 0 6px;
    white-space: nowrap;
}

#cursor-ring.is-expanded #cursor-label {
    opacity: 1;
    transform: scale(1);
}

#loader {
    background-color: var(--bg-cream) !important;
    color: var(--text-ink) !important;
}

#loader [class*="text-cream"] {
    color: var(--text-ink) !important;
}

#loader [class*="bg-cream"] {
    background-color: var(--hairline-strong) !important;
}

/* ==========================================================================
   5. SURCHARGES DARK MODE (TAILWIND, PROJETS, SVG & BOUTONS)
   ========================================================================== */
[data-theme="dark"] [class*="bg-cream"],
[data-theme="dark"] .bg-white,
[data-theme="dark"] #hero-canvas-container {
    background-color: var(--bg-cream) !important;
    color: var(--text-ink) !important;
}

[data-theme="dark"] [class*="bg-surface"] {
    background-color: var(--bg-surface) !important;
}

[data-theme="dark"] [class*="text-ink"] {
    color: var(--text-ink) !important;
}

[data-theme="dark"] [class*="text-muted"] {
    color: var(--text-muted) !important;
}

/* Inversion uniquement sur les boutons, liens et badges (exclut le sommaire/index) */
[data-theme="dark"] a.bg-ink,
[data-theme="dark"] button.bg-ink,
[data-theme="dark"] span.bg-ink,
[data-theme="dark"] #copy-email-btn span:last-child,
[data-theme="dark"] #copy-badge {
    background-color: var(--text-ink) !important;
    color: var(--bg-cream) !important;
}

[data-theme="dark"] a.bg-ink .text-cream,
[data-theme="dark"] button.bg-ink .text-cream,
[data-theme="dark"] a.bg-ink.text-cream,
[data-theme="dark"] button.bg-ink.text-cream {
    color: var(--bg-cream) !important;
}

[data-theme="dark"] .bg-cobalt,
[data-theme="dark"] .bg-cobalt.text-cream,
[data-theme="dark"] .bg-cobalt .text-cream {
    background-color: var(--accent-cobalt) !important;
    color: #FAFAF7 !important;
}

/* Conteneurs d'illustrations des projets */
[data-theme="dark"] .project-visual,
[data-theme="dark"] .project-visual-box,
[data-theme="dark"] .project-card [class*="rounded"],
[data-theme="dark"] #projets [class*="rounded"],
[data-theme="dark"] div:has(> svg) {
    background-color: var(--bg-surface) !important;
    border-color: var(--hairline) !important;
}

[data-theme="dark"] .project-card:hover .project-visual,
[data-theme="dark"] .project-card:hover .project-visual-box {
    background-color: var(--accent-cobalt) !important;
}

/* Inversion interne de tous les schémas SVG */
[data-theme="dark"] svg [fill="#FAFAF7"],
[data-theme="dark"] svg [fill="#F2F1EC"],
[data-theme="dark"] svg [fill="#FFFFFF"],
[data-theme="dark"] svg [fill="white"] {
    fill: #1C1C22 !important;
}

[data-theme="dark"] svg [stroke="#111110"] {
    stroke: var(--text-ink) !important;
}

[data-theme="dark"] svg [stroke="#686763"],
[data-theme="dark"] svg [stroke="#62625E"] {
    stroke: var(--text-muted) !important;
}

[data-theme="dark"] svg [fill="#111110"] {
    fill: var(--text-ink) !important;
}

[data-theme="dark"] svg [fill="#686763"],
[data-theme="dark"] svg [fill="#62625E"] {
    fill: var(--text-muted) !important;
}

/* Masque totalement le point et le cercle de texte sur mobile et tablette tactile */
@media (hover: none), (pointer: coarse) {
    #cursor-dot,
    #cursor-ring {
        display: none !important;
    }
}

/* Empêche le navigateur de scroller quand on glisse le doigt sur le canvas */
#hero-canvas-container,
#hero-orbital-canvas {
    touch-action: none;
}