/* Police Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');

/* ===== PALETTE : bleu & jaune, thème clair ===== */
:root {
    --blue-900: #1e3a8a;
    --blue-700: #1d4ed8;
    --blue-600: #2563eb;
    --blue-500: #3b82f6;
    --sky-500:  #0ea5e9;
    --blue-50:  #eff6ff;
    --blue-100: #dbeafe;
    --yellow-400: #facc15;
    --yellow-500: #eab308;
    --amber-500: #f59e0b;
    --slate-600: #475569;
    --slate-500: #64748b;
}

/* ===== BASE ===== */
html body {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(180deg, #eff6ff 0%, #fffbeb 100%) fixed;
    color: var(--slate-600);
    overflow-x: hidden;
}

html { scroll-behavior: smooth; }
::selection { background: var(--yellow-400); color: var(--blue-900); }

/* ===== CARTES (glassmorphism clair) ===== */
html .glass-card {
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(37, 99, 235, 0.15);
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.06);
    transition: all 0.3s ease;
}
html .glass-card:hover {
    border-color: rgba(245, 158, 11, 0.7);
    box-shadow: 0 12px 32px rgba(37, 99, 235, 0.15);
    transform: translateY(-4px);
}

/* Dégradé de texte : bleu vers jaune */
html .text-gradient {
    background-image: linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #0ea5e9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Boutons des cartes (projets / veille) */
html .btn-action {
    background: var(--blue-50);
    border: 1px solid rgba(37, 99, 235, 0.25);
    color: var(--blue-700);
    transition: all 0.3s ease;
}
html .glass-card:hover .btn-action {
    background: var(--yellow-400);
    color: var(--blue-900);
    border-color: var(--yellow-400);
    transform: scale(1.05);
}

/* Timeline : pastille bleue, anneau couleur du fond */
html .timeline-item::before {
    background: var(--blue-600);
    border-color: #eff6ff;
}

/* ===== TEXTES (remplacent blanc / gris clairs du thème sombre) ===== */
.text-white    { color: var(--blue-900) !important; }
.text-gray-300 { color: var(--slate-600) !important; }
.text-gray-400 { color: var(--slate-600) !important; }
.text-gray-500 { color: var(--slate-500) !important; }
.text-gray-600 { color: var(--slate-600) !important; }
.text-gray-700 { color: var(--slate-500) !important; }

/* Couleurs d'accent (placées APRÈS les gris pour gagner sur le lien actif) */
.text-emerald-400, .text-emerald-500,
.hover\:text-emerald-400:hover { color: var(--blue-600) !important; }
.text-blue-500   { color: var(--amber-500) !important; }
.text-purple-500 { color: var(--sky-500) !important; }
.text-orange-500 { color: #f97316 !important; }
.text-pink-500   { color: var(--blue-500) !important; }
.text-yellow-500 { color: var(--yellow-500) !important; }

/* ===== FONDS ===== */
.bg-emerald-500 { background-color: var(--blue-600) !important; }
.bg-emerald-600 { background-color: var(--blue-600) !important; }
.hover\:bg-emerald-500:hover { background-color: var(--blue-500) !important; }
.bg-blue-500 { background-color: var(--yellow-400) !important; }

/* Logo « RF » en jaune */
.bg-emerald-500.text-black { background-color: var(--yellow-400) !important; }

/* Texte blanc conservé sur les boutons bleus */
.bg-emerald-600.text-white { color: #ffffff !important; }

.bg-white\/5 { background-color: var(--blue-50) !important; }
.hover\:bg-white\/10:hover { background-color: var(--blue-100) !important; }
.hover\:bg-emerald-500\/10:hover { background-color: rgba(37, 99, 235, 0.08) !important; }
.bg-emerald-900\/5 { background-color: rgba(255, 255, 255, 0.82) !important; }

/* Logo RATP : couleurs d'origine (on retire le filtre gris) */
img[src*="Logo-ratp"] { filter: none !important; }

/* Halos flous de la page d'accueil */
.bg-emerald-600\/20 { background-color: rgba(250, 204, 21, 0.35) !important; }
.bg-blue-600\/10    { background-color: rgba(37, 99, 235, 0.18) !important; }

/* Halo autour de la photo */
.from-emerald-500 {
    --tw-gradient-from: #2563eb !important;
    --tw-gradient-to: rgb(37 99 235 / 0) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-blue-500 { --tw-gradient-to: #facc15 !important; }

/* ===== BORDURES ===== */
.border-white\/5, .border-white\/10 { border-color: rgba(37, 99, 235, 0.15) !important; }
.border-\[\#030712\] { border-color: #ffffff !important; }
.border-emerald-500\/30 { border-color: rgba(37, 99, 235, 0.3) !important; }

.border-t-emerald-500 { border-top-color: var(--blue-600) !important; }
.border-t-blue-500    { border-top-color: var(--yellow-400) !important; }
.border-t-purple-500  { border-top-color: var(--sky-500) !important; }
.border-l-emerald-500 { border-left-color: var(--blue-600) !important; }
.border-l-gray-500    { border-left-color: #94a3b8 !important; }

/* Ligne verticale de la timeline */
.border-emerald-500\/30 { border-color: rgba(37, 99, 235, 0.3) !important; }

/* Champs du formulaire */
input:focus, textarea:focus, .focus\:border-emerald-500:focus {
    border-color: var(--blue-600) !important;
}
input, textarea { background-color: #ffffff !important; border-color: rgba(37, 99, 235, 0.25) !important; }
input::placeholder, textarea::placeholder { color: #94a3b8; }

/* ===== OMBRES DES BOUTONS ===== */
.shadow-emerald-900\/20, .shadow-emerald-900\/40 {
    --tw-shadow-color: rgba(37, 99, 235, 0.3) !important;
}

/* ===== BARRES DE DÉFILEMENT ===== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--blue-50); }
::-webkit-scrollbar-thumb { background: #93c5fd; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--yellow-400); }

/* ===== ANIMATIONS (3D, apparition, parallaxe) ===== */
html .glass-card {
    transition: transform .18s ease-out, border-color .3s, box-shadow .3s,
                opacity .8s ease, translate .8s cubic-bezier(.2,.8,.2,1), scale .8s ease;
}
html .glass-card:not(nav) { position: relative; }
html .glass-card:hover {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px);
}
nav.glass-card:hover { transform: none; }

/* Reflet jaune qui suit la souris */
.glass-card:not(nav)::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    pointer-events: none; opacity: 0; transition: opacity .3s;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(250, 204, 21, .22), transparent 55%);
}
.glass-card:not(nav):hover::after { opacity: 1; }
.glass-card.no-tilt::after { display: none; }

/* Apparition au défilement */
.reveal {
    opacity: 0; translate: 0 40px; scale: .96;
    transition: opacity .8s ease, translate .8s cubic-bezier(.2,.8,.2,1), scale .8s ease;
}
.reveal.in { opacity: 1; translate: 0 0; scale: 1; }

/* Entrée de la page */
@keyframes rise {
    from { opacity: 0; translate: 0 36px; scale: .96; }
    to   { opacity: 1; translate: 0 0;   scale: 1; }
}
.hero-in { animation: rise 1s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--d, 0s); }

/* Halos : parallaxe */
[class*="blur-[120px]"] { transition: transform .5s ease-out; }

/* Barre de progression de lecture */
#scrollBar {
    position: fixed; top: 0; left: 0; width: 100%; height: 4px; z-index: 60;
    transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
    background: linear-gradient(90deg, #2563eb, #0ea5e9, #facc15);
}

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1 !important; translate: none !important; scale: none !important; }
    .hero-in { animation: none !important; }
    html .glass-card:hover { transform: none; }
}