/*
 * compat.css — Règles communes aux pages Tailwind (créations, expertises)
 *
 * Neutralise les conflits entre le reset de style.css v2 et les classes Tailwind,
 * et reprend les classes de l'ancien style.css dont ces pages dépendent.
 * Chargé juste après style.css ; les règles propres à chaque page restent
 * dans un <style> inline à la suite.
 */

/* Rétablir les marges/padding par défaut de Tailwind pour cette page */
body { background-color: #030303; color: #fff; }
html:not(.dark) body { background-color: #f9fafb; color: #111827; }

/* Rétablir les liens en couleur de texte (le reset les remet en inherit) */
a { color: inherit; }

/* Rétablir les boutons */
button { font-family: 'Manrope', sans-serif; }

/* Classes de l'ancien style.css dont cette page dépend */
.glass-nav  { background: rgba(3,3,3,0.8); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.05); transition: all 0.3s ease; }

html:not(.dark) .glass-nav   { background: rgba(255,255,255,0.85); border-bottom: 1px solid rgba(0,0,0,0.05); }


.player-controls { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 50; display: flex; align-items: center; background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2); border-radius: 9999px; padding: 0.25rem; }
.player-btn { width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; color: white; border-radius: 50%; transition: all 0.2s; background: none; border: none; cursor: pointer; }
.play-btn { background: white !important; color: black !important; }
html:not(.dark) .player-controls { background: rgba(255,255,255,0.5); border-color: rgba(0,0,0,0.1); }
html:not(.dark) .player-btn { color: #111827; }

/* Barre de progression */
#horizontal-progress-bar { position: fixed; bottom: 0; left: 0; height: 4px; background: #fff; width: 0%; z-index: 100; transition: width 0.1s ease-out; box-shadow: 0 0 10px rgba(255,255,255,0.5); }
html:not(.dark) #horizontal-progress-bar { background: #111827; }

/* Révélation au scroll */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s cubic-bezier(0.5,0,0,1), transform 0.8s cubic-bezier(0.5,0,0,1); }
.reveal.active { opacity: 1; transform: translateY(0); }

/* Nav links */
.nav-link { font-size: 0.875rem; font-weight: 500; color: #9ca3af; transition: color 0.2s; }
.nav-link:hover { color: #fff; }
html:not(.dark) .nav-link { color: #6b7280; }
html:not(.dark) .nav-link:hover { color: #111827; }

/* Social icons */
.social-link { color: #9ca3af; transition: color 0.2s; }
.social-link:hover { color: #fff; }
.insta-icon { position: relative; display: inline-block; width: 1.2em; height: 1.2em; border: 2px solid currentColor; border-radius: 0.3em; vertical-align: middle; transform: translateY(-2px); }
.insta-icon::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0.5em; height: 0.5em; border: 2px solid currentColor; border-radius: 50%; transform: translate(-50%, -50%); }
.insta-icon::after  { content: ''; position: absolute; top: 0.1em; right: 0.1em; width: 0.15em; height: 0.15em; background: currentColor; border-radius: 50%; }

/* Mobile menu */
#mobile-menu { display: none; }
#mobile-menu.is-open, #mobile-menu:not(.hidden) { display: flex; }


/* Magnetic effect */
.magnetic-effect { transition: transform 0.1s linear; will-change: transform; }

/* Focus visible */
a:focus-visible, button:focus-visible { outline: 2px solid #3b82f6; outline-offset: 3px; border-radius: 4px; }