/* ===== FileSwiftly — Global Styles ===== */

/* Animation gradient hero — CSS pure, sans JS setInterval */
@keyframes gold-shift {
    0%   { background-position: 0%   center; }
    50%  { background-position: 100% center; }
    100% { background-position: 0%   center; }
}
h1.hero-animated .text-gold,
h1.hero-animated .bg-clip-text {
    background-size: 200% auto !important;
    animation: gold-shift 4s ease infinite;
}

/* ===== CSS Variables — Dark (default) ===== */
:root {
    --bg:          #0A0A0A;
    --bg-card:     #111111;
    --bg-nav:      rgba(10,10,10,0.95);
    --border:      #1A1A1A;
    --text:        #ffffff;
    --text-muted:  #9ca3af;
    --text-faint:  #6b7280;
    --input-bg:    #0A0A0A;
    --scrollbar-track: #0A0A0A;
    --scrollbar-thumb: #1A1A1A;
    --upload-border: #333;
    --progress-bg: #1A1A1A;
    --loader-track: #1A1A1A;
    --toast-bg:    #111;
    --result-card-bg: linear-gradient(135deg, rgba(255,215,0,0.05) 0%, rgba(17,17,17,1) 100%);
}

/* ===== CSS Variables — Light ===== */
html.light {
    --bg:          #f0f0ff;
    --bg-card:     rgba(255,255,255,0.75);
    --bg-nav:      rgba(255,255,255,0.85);
    --border:      rgba(255,215,0,0.25);
    --text:        #1a1040;
    --text-muted:  #4c3d8f;
    --text-faint:  #7c6fad;
    --input-bg:    rgba(255,255,255,0.6);
    --scrollbar-track: #e8e4ff;
    --scrollbar-thumb: #c4b5fd;
    --upload-border: rgba(139,92,246,0.35);
    --progress-bg: #e8e4ff;
    --loader-track: #ddd6fe;
    --toast-bg:    rgba(255,255,255,0.9);
    --result-card-bg: linear-gradient(135deg, rgba(255,215,0,0.12) 0%, rgba(255,255,255,0.9) 100%);
}

/* ===== Apply variables to base elements ===== */
body {
    background-color: var(--bg);
    color: var(--text);
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE — Glassmorphism Premium
   ═══════════════════════════════════════════════════════════════ */

/* ---- Body : fond dégradé violet/indigo animé ---- */
html.light body {
    background: linear-gradient(135deg, #e8e4ff 0%, #f0e6ff 25%, #fff0e6 50%, #e6f0ff 75%, #e8e4ff 100%) !important;
    background-size: 400% 400% !important;
    color: #1a1040 !important;
    animation: pageFadeIn 0.4s ease-out, bgShift 12s ease infinite !important;
}

/* ---- Navigation glassmorphism ---- */
html.light nav {
    background: rgba(255,255,255,0.75) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-color: rgba(255,215,0,0.2) !important;
    box-shadow: 0 4px 24px rgba(139,92,246,0.08) !important;
}

/* ---- Backgrounds : verre dépoli ---- */
html.light [class*="bg-dark-card"] {
    background: rgba(255,255,255,0.65) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-color: rgba(255,255,255,0.8) !important;
    box-shadow: 0 4px 24px rgba(139,92,246,0.10), inset 0 1px 0 rgba(255,255,255,0.9) !important;
}
html.light .bg-dark\/80,
html.light .bg-dark\/95,
html.light .bg-dark\/90,
html.light [class*="bg-dark/"] {
    background: rgba(255,255,255,0.80) !important;
    backdrop-filter: blur(20px) !important;
}
html.light [class*="bg-dark"] {
    background: transparent !important;
}

/* Gradient CTA sections */
html.light [class*="via-dark-card"],
html.light [class*="to-dark-card"] {
    --tw-gradient-via: rgba(255,255,255,0.7) !important;
    --tw-gradient-to:  rgba(240,230,255,0.8) !important;
}
html.light [class*="from-gold"][class*="via-dark-card"] {
    background: linear-gradient(135deg, rgba(255,215,0,0.15) 0%, rgba(255,255,255,0.7) 100%) !important;
    backdrop-filter: blur(16px) !important;
}

/* ---- Borders ---- */
html.light [class*="border-dark-border"] {
    border-color: rgba(139,92,246,0.15) !important;
}

/* ---- Text ---- */
html.light [class*="text-white"]    { color: #1a1040 !important; }
html.light [class*="text-gray-300"] { color: #4c3d8f !important; }
html.light [class*="text-gray-400"] { color: #6d5da8 !important; }
html.light [class*="text-gray-500"] { color: #8b7dc0 !important; }
html.light [class*="text-gray-600"] { color: #8b7dc0 !important; }

/* ---- Inputs verre ---- */
html.light input:not([type="color"]):not([type="range"]):not([type="checkbox"]),
html.light textarea,
html.light select {
    background: rgba(255,255,255,0.55) !important;
    backdrop-filter: blur(8px) !important;
    color: #1a1040 !important;
    border-color: rgba(139,92,246,0.25) !important;
}
html.light input:focus:not([type="color"]):not([type="range"]):not([type="checkbox"]),
html.light textarea:focus {
    background: rgba(255,255,255,0.85) !important;
    border-color: #FFD700 !important;
    box-shadow: 0 0 0 3px rgba(255,215,0,0.2), 0 4px 16px rgba(139,92,246,0.12) !important;
}
html.light input::placeholder,
html.light textarea::placeholder { color: #9d8ec7 !important; }

/* ---- Tool cards verre ---- */
html.light .tool-card {
    background: rgba(255,255,255,0.60) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-color: rgba(255,255,255,0.9) !important;
    box-shadow: 0 4px 20px rgba(139,92,246,0.08), inset 0 1px 0 rgba(255,255,255,0.95) !important;
}
html.light .tool-card:hover {
    background: rgba(255,255,255,0.85) !important;
    border-color: rgba(255,215,0,0.6) !important;
    box-shadow: 0 12px 40px rgba(255,215,0,0.18), 0 4px 16px rgba(139,92,246,0.12) !important;
    transform: translateY(-4px) !important;
}

/* ---- Dropdowns verre ---- */
html.light [class*="dropdown-menu"] {
    background: rgba(255,255,255,0.9) !important;
    backdrop-filter: blur(20px) !important;
    border-color: rgba(255,215,0,0.2) !important;
    box-shadow: 0 16px 48px rgba(139,92,246,0.16) !important;
}

/* ---- Upload zone ---- */
html.light .upload-zone {
    background: rgba(255,255,255,0.45) !important;
    backdrop-filter: blur(8px) !important;
    border-color: rgba(139,92,246,0.3) !important;
    border-style: dashed !important;
}
html.light .upload-zone:hover,
html.light .upload-zone.drag-over {
    background: rgba(255,215,0,0.06) !important;
    border-color: #FFD700 !important;
    box-shadow: 0 0 0 4px rgba(255,215,0,0.1) !important;
}

/* ---- Progress ---- */
html.light .progress-bar { background: rgba(139,92,246,0.15) !important; }

/* ---- Loader ---- */
html.light .loader {
    border-color: rgba(139,92,246,0.2) !important;
    border-top-color: #FFD700 !important;
}

/* ---- Toasts ---- */
html.light .toast-success {
    background: rgba(255,255,255,0.9) !important;
    backdrop-filter: blur(16px) !important;
    border-color: rgba(34,197,94,0.5) !important;
    color: #15803d !important;
    box-shadow: 0 8px 32px rgba(34,197,94,0.12) !important;
}
html.light .toast-error {
    background: rgba(255,255,255,0.9) !important;
    backdrop-filter: blur(16px) !important;
    border-color: rgba(239,68,68,0.5) !important;
    color: #b91c1c !important;
    box-shadow: 0 8px 32px rgba(239,68,68,0.12) !important;
}
html.light .toast-info {
    background: rgba(255,255,255,0.9) !important;
    backdrop-filter: blur(16px) !important;
    border-color: rgba(255,215,0,0.5) !important;
    color: #92400e !important;
    box-shadow: 0 8px 32px rgba(255,215,0,0.12) !important;
}

/* ---- Result card ---- */
html.light .result-card {
    background: linear-gradient(135deg, rgba(255,215,0,0.10) 0%, rgba(255,255,255,0.8) 60%) !important;
    backdrop-filter: blur(12px) !important;
    border-color: rgba(255,215,0,0.35) !important;
    box-shadow: 0 8px 32px rgba(255,215,0,0.10) !important;
}

/* ---- Mobile menu ---- */
html.light #mobile-menu {
    background: rgba(255,255,255,0.92) !important;
    backdrop-filter: blur(20px) !important;
    border-color: rgba(139,92,246,0.15) !important;
    box-shadow: 0 8px 32px rgba(139,92,246,0.10) !important;
}

/* ---- Scrollbar ---- */
html.light ::-webkit-scrollbar-track { background: rgba(139,92,246,0.05); }
html.light ::-webkit-scrollbar-thumb { background: rgba(139,92,246,0.3); border-radius: 4px; }
html.light ::-webkit-scrollbar-thumb:hover { background: #FFD700; }

/* ---- Selection ---- */
html.light ::selection { background: rgba(255,215,0,0.3); color: #1a1040; }

/* ---- Footer stays dark ---- */
html.light footer { background-color: #0f172a !important; }
html.light footer [class*="text-gray"] { color: #94a3b8 !important; }
html.light footer [class*="border"] { border-color: #1e293b !important; }

/* ---- Icônes des tool cards en mode clair : violet ---- */
html.light .tool-card [class*="text-gold"] { color: #b8960c !important; }
html.light .tool-card [class*="bg-gold"] { background-color: #FFD700 !important; }

/* ---- Orbs décoratives light mode ---- */
html.light .hero-orb-1 { opacity: 0.25; }
html.light .hero-orb-2 { opacity: 0.20; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #FFD700; }

/* Theme toggle button */
#theme-toggle {
    transition: transform 0.3s ease, color 0.2s ease;
}
#theme-toggle:hover { transform: rotate(20deg); }

/* Selection */
::selection { background: rgba(255, 215, 0, 0.3); color: #fff; }

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Glow text */
.text-glow {
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.3);
}

/* Neon border effect */
.neon-border {
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.1), inset 0 0 5px rgba(255, 215, 0, 0.05);
}
.neon-border:hover {
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.2), 0 0 30px rgba(255, 215, 0, 0.1), inset 0 0 5px rgba(255, 215, 0, 0.05);
}

/* Tool card hover */
.tool-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.tool-card:hover {
    transform: translateY(-2px);
}

/* Upload zone */
.upload-zone {
    border: 2px dashed #333;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.upload-zone::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255, 215, 0, 0.03) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.upload-zone:hover,
.upload-zone.drag-over {
    border-color: #FFD700;
    background: rgba(255, 215, 0, 0.02);
}
.upload-zone:hover::before,
.upload-zone.drag-over::before {
    opacity: 1;
}
.upload-zone.drag-over {
    transform: scale(1.01);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.1);
}

/* Progress bar */
.progress-bar {
    height: 6px;
    border-radius: 3px;
    background: #1A1A1A;
    overflow: hidden;
}
.progress-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #FFD700, #FFE44D);
    transition: width 0.3s ease;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

/* Loader spinner */
.loader {
    width: 40px;
    height: 40px;
    border: 3px solid #1A1A1A;
    border-top-color: #FFD700;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Pulse dot */
.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FFD700;
    animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.5); }
}

/* Fade in animation */
.fade-in {
    animation: fadeIn 0.5s ease-out forwards;
    opacity: 0;
}
@keyframes fadeIn {
    to { opacity: 1; }
}

/* Toast notifications */
.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    padding: 16px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    animation: toastIn 0.3s ease-out, toastOut 0.3s ease-in 3.7s forwards;
    max-width: 400px;
}
.toast-success {
    background: #111;
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22c55e;
}
.toast-error {
    background: #111;
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}
.toast-info {
    background: #111;
    border: 1px solid rgba(255, 215, 0, 0.3);
    color: #FFD700;
}

@keyframes toastIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes toastOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

/* File item in list */
.file-item {
    animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
    from { transform: translateX(-10px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Button glow */
.btn-glow {
    position: relative;
    overflow: hidden;
}
.btn-glow::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s;
}
.btn-glow:hover::after {
    opacity: 1;
}

/* Result card */
.result-card {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.05) 0%, rgba(17, 17, 17, 1) 100%);
}

/* Dropdown menu */
.dropdown-menu {
    transform: translateY(5px);
    transition: all 0.2s ease;
}
.group:hover .dropdown-menu {
    transform: translateY(0);
}

/* ── Scroll Reveal (reveal-item seul, tool-card géré par borderGlow) ── */
@keyframes revealUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

.reveal-item {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.55s cubic-bezier(0.22,1,0.36,1),
                transform 0.55s cubic-bezier(0.22,1,0.36,1);
}
.reveal-item.revealed {
    opacity: 1;
    transform: translateY(0);
}
.reveal-section {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-section.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ── Ripple Effect ── */
.ripple-effect {
    position: absolute;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.35);
    transform: translate(-50%, -50%) scale(0);
    animation: ripple 0.6s ease-out forwards;
    pointer-events: none;
}
@keyframes ripple {
    to { transform: translate(-50%, -50%) scale(28); opacity: 0; }
}

/* ── Tool card tilt ── */
.tool-card {
    transition: transform 0.15s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
    will-change: transform;
}

/* ── Shimmer effect sur les skeletons / chargement ── */
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}
.shimmer {
    background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* ── Entrée hero section ── */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-slide-up {
    animation: slideUp 0.8s cubic-bezier(0.22,1,0.36,1) both;
}

/* ── Stagger stats hero ── */
.animate-slide-up + div .text-center:nth-child(1) { animation: slideUp 0.6s 0.4s both; }
.animate-slide-up + div .text-center:nth-child(2) { animation: slideUp 0.6s 0.5s both; }
.animate-slide-up + div .text-center:nth-child(3) { animation: slideUp 0.6s 0.6s both; }
.animate-slide-up + div .text-center:nth-child(4) { animation: slideUp 0.6s 0.7s both; }

/* ── Ancien typewriter supprimé — texte présent en HTML statique ── */
h1 .text-gold, h1 span.text-gold {
    display: inline-block;
}

/* ── Page transition ── */
body {
    animation: pageFadeIn 0.4s ease-out;
}
@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════
   ANIMATIONS ICÔNES
   ════════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes iconSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes iconBounce {
    0%, 100% { transform: translateY(0); }
    40%      { transform: translateY(-6px); }
    60%      { transform: translateY(-3px); }
}
@keyframes iconWiggle {
    0%,100%  { transform: rotate(0deg); }
    20%      { transform: rotate(-12deg); }
    40%      { transform: rotate(12deg); }
    60%      { transform: rotate(-6deg); }
    80%      { transform: rotate(6deg); }
}
@keyframes iconPulse {
    0%,100% { transform: scale(1);    opacity: 1; }
    50%     { transform: scale(1.25); opacity: 0.8; }
}
@keyframes iconShake {
    0%,100% { transform: translateX(0); }
    20%     { transform: translateX(-4px); }
    40%     { transform: translateX(4px); }
    60%     { transform: translateX(-3px); }
    80%     { transform: translateX(3px); }
}
@keyframes iconFloat {
    0%,100% { transform: translateY(0px); }
    50%     { transform: translateY(-5px); }
}
@keyframes iconGlow {
    0%,100% { filter: drop-shadow(0 0 0px #FFD700); }
    50%     { filter: drop-shadow(0 0 6px #FFD700); }
}
@keyframes iconPop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* ── Icône zap (logo nav) — pulse doré permanent ── */
[data-lucide="zap"] {
    animation: iconPulse 2.5s ease-in-out infinite;
}

/* ── Icône sparkles — flottement doux ── */
[data-lucide="sparkles"] {
    animation: iconFloat 3s ease-in-out infinite;
}

/* ── Icône crown — wiggle au hover sur le bouton parent ── */
a:hover [data-lucide="crown"],
button:hover [data-lucide="crown"] {
    animation: iconWiggle 0.5s ease-in-out;
}

/* ── Icônes de téléchargement — bounce au hover ── */
a:hover [data-lucide="download"],
button:hover [data-lucide="download"] {
    animation: iconBounce 0.5s ease-in-out;
}

/* ── Icône upload — bounce permanent léger ── */
.upload-zone [data-lucide="upload"] {
    animation: iconBounce 2s ease-in-out infinite;
}

/* ── Icône moon/sun (theme toggle) — spin au clic ── */
#theme-toggle:hover [data-lucide="moon"],
#theme-toggle:hover [data-lucide="sun"] {
    animation: iconSpin 0.5s ease-in-out;
}

/* ── Icônes dans les tool-cards — pop au hover ── */
.tool-card:hover [data-lucide] {
    animation: iconPop 0.35s cubic-bezier(0.34,1.56,0.64,1);
}

/* ── Icônes de navigation — slide-in léger au hover ── */
a:hover [data-lucide="arrow-right"] {
    animation: none;
    transform: translateX(4px);
    transition: transform 0.2s ease;
}

/* ── arrow-down dans le hero ── */
[data-lucide="arrow-down"] {
    animation: iconBounce 1.8s ease-in-out infinite;
}

/* ── Icône settings — spin lent au hover ── */
a:hover [data-lucide="settings"],
button:hover [data-lucide="settings"] {
    animation: iconSpin 0.7s linear;
}

/* ── Icône repeat — spin au hover ── */
a:hover [data-lucide="repeat"],
button:hover [data-lucide="repeat"],
.tool-card:hover [data-lucide="repeat"] {
    animation: iconSpin 0.5s ease-in-out !important;
}

/* ── Icône scissors — wiggle ── */
.tool-card:hover [data-lucide="scissors"] {
    animation: iconWiggle 0.4s ease-in-out !important;
}

/* ── Icône layers — flottement ── */
.tool-card:hover [data-lucide="layers"] {
    animation: iconFloat 0.6s ease-in-out !important;
}

/* ── Icône lock — shake ── */
.tool-card:hover [data-lucide="lock"] {
    animation: iconShake 0.4s ease-in-out !important;
}

/* ── Icône qr-code — pulse doré ── */
.tool-card:hover [data-lucide="qr-code"] {
    animation: iconGlow 0.6s ease-in-out !important;
}

/* ── Icône shield — pulse ── */
.tool-card:hover [data-lucide="shield"] {
    animation: iconPulse 0.5s ease-in-out !important;
}

/* ── Toutes les icônes dans les boutons — transition smooth ── */
button [data-lucide],
a [data-lucide] {
    transition: transform 0.2s ease, filter 0.2s ease;
    display: inline-block;
}

/* ── Nav scroll shrink ── */
nav.nav-scrolled {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
nav { transition: box-shadow 0.3s ease, background 0.3s ease; }

/* ════════════════════════════════════════
   CURSEUR — natif restauré
   ════════════════════════════════════════ */
* { cursor: auto; }
a, button, [role="button"], input, textarea, select, label { cursor: pointer; }

/* ════════════════════════════════════════
   EFFET HERO — CSS pur (remplace canvas)
   ════════════════════════════════════════ */
section:first-of-type {
    position: relative;
    overflow: hidden;
}
section:first-of-type::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 40% at 20% 30%, rgba(255,215,0,0.06) 0%, transparent 60%),
        radial-gradient(ellipse 50% 35% at 80% 70%, rgba(255,165,0,0.04) 0%, transparent 55%);
    pointer-events: none;
    z-index: 0;
    animation: heroGlow 6s ease-in-out infinite alternate;
}
@keyframes heroGlow {
    from { opacity: 0.6; }
    to   { opacity: 1; }
}
section:first-of-type > * {
    position: relative;
    z-index: 1;
}

/* ════════════════════════════════════════
   GRADIENT ANIMÉ HERO
   ════════════════════════════════════════ */
@keyframes gradientShift {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}
h1 .text-gold {
    background: linear-gradient(90deg, #FFD700, #FFE44D, #FFA500, #FFD700);
    background-size: 300% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 4s ease infinite;
}
/* Fallback light mode */
html.light h1 .text-gold {
    background: linear-gradient(90deg, #b8960c, #FFD700, #d4a017, #b8960c);
    background-size: 300% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 4s ease infinite;
}

/* ════════════════════════════════════════
   GLOW PULSE SUR LE LOGO
   ════════════════════════════════════════ */
@keyframes logoPulse {
    0%,100% { box-shadow: 0 0 0px #FFD700,  0 0 0px #FFD700; }
    50%     { box-shadow: 0 0 14px #FFD700, 0 0 28px rgba(255,215,0,0.3); }
}
nav a .bg-gold.rounded-lg {
    animation: logoPulse 3s ease-in-out infinite;
}

/* ════════════════════════════════════════
   GRADIENT BACKGROUND ANIMÉ (BODY)
   ════════════════════════════════════════ */
@keyframes bgShift {
    0%   { background-position: 0% 50%;   }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%;   }
}
body {
    background: linear-gradient(-45deg, #0A0A0A, #0d0d0d, #111111, #0A0A0A);
    background-size: 400% 400%;
    animation: pageFadeIn 0.4s ease-out, bgShift 12s ease infinite;
}
html.light body {
    background: linear-gradient(-45deg, #f0f2f5, #eef1f7, #f5f7fa, #f0f2f5) !important;
    background-size: 400% 400% !important;
    animation: pageFadeIn 0.4s ease-out, bgShift 12s ease infinite !important;
}

/* ════════════════════════════════════════
   BORDER GLOW + HOVER CARTES
   ════════════════════════════════════════ */
@keyframes borderGlow {
    0%,100% { border-color: rgba(255,215,0,0.12); box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
    50%     { border-color: rgba(255,215,0,0.35); box-shadow: 0 4px 20px rgba(255,215,0,0.08); }
}
.tool-card {
    animation: borderGlow 4s ease-in-out infinite;
    transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease !important;
    will-change: transform;
}
.tool-card:hover {
    transform: translateY(-5px) scale(1.015) !important;
    box-shadow: 0 12px 40px rgba(255,215,0,0.12), 0 4px 16px rgba(0,0,0,0.4) !important;
    border-color: rgba(255,215,0,0.4) !important;
}

/* ════════════════════════════════════════
   STAGGER ANIMATION LISTE FEATURES
   ════════════════════════════════════════ */
.reveal-item:nth-child(1) { transition-delay: 0ms !important; }
.reveal-item:nth-child(2) { transition-delay: 80ms !important; }
.reveal-item:nth-child(3) { transition-delay: 160ms !important; }
.reveal-item:nth-child(4) { transition-delay: 240ms !important; }
.reveal-item:nth-child(5) { transition-delay: 320ms !important; }
.reveal-item:nth-child(6) { transition-delay: 400ms !important; }

/* ════════════════════════════════════════
   FLOATING ORBS (décoration hero)
   ════════════════════════════════════════ */
@keyframes orbFloat1 {
    0%,100% { transform: translate(0,0) scale(1); }
    33%     { transform: translate(30px,-20px) scale(1.05); }
    66%     { transform: translate(-20px,15px) scale(0.97); }
}
@keyframes orbFloat2 {
    0%,100% { transform: translate(0,0) scale(1); }
    40%     { transform: translate(-25px,20px) scale(1.08); }
    70%     { transform: translate(20px,-15px) scale(0.95); }
}
.hero-orb-1 {
    animation: orbFloat1 8s ease-in-out infinite;
    filter: blur(60px);
    opacity: 0.15;
}
.hero-orb-2 {
    animation: orbFloat2 10s ease-in-out infinite;
    filter: blur(80px);
    opacity: 0.10;
}