/* ==========================================================================
   Gomes'renov49 — Styles partagés (multi-pages)
   Composants issus de design-system/MASTER.md
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Cabin:wght@400;500;600;700&display=swap');

:root { --ease: cubic-bezier(0.22, 1, 0.36, 1); }
html { scroll-behavior: smooth; }
body { background: #0C0A09; color: #F5F1EA; font-family: 'Cabin', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }

.eyebrow { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; color: #D4A93C; font-weight: 600; }

/* Navbar : verre dépoli au scroll (glass réservé à la navbar, cf. MASTER §4) */
#navbar { transition: background-color 350ms var(--ease), backdrop-filter 350ms var(--ease), border-color 350ms var(--ease), padding 350ms var(--ease); }
#navbar.scrolled { background: rgba(12,10,9,0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: rgba(212,169,60,0.35); }

/* Liens de nav : soulignement doré animé */
.nav-link { position: relative; transition: color 250ms var(--ease); }
.nav-link::after { content: ''; position: absolute; left: 0; bottom: -6px; height: 2px; width: 100%; background: #D4A93C; transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease); }
.nav-link:hover { color: #D4A93C; }
.nav-link:hover::after { transform: scaleX(1); }
/* Lien de la page courante */
.nav-link[aria-current="page"] { color: #D4A93C; }
.nav-link[aria-current="page"]::after { transform: scaleX(1); }

/* CTA doré */
.btn-gold { background: #D4A93C; color: #0C0A09; box-shadow: 0 8px 24px -8px rgba(212,169,60,0.35); transition: all 250ms var(--ease); }
.btn-gold:hover { background: #E6C260; transform: translateY(-2px); box-shadow: 0 12px 40px -8px rgba(212,169,60,0.5); }
.btn-outline { border: 1px solid rgba(212,169,60,0.35); color: #F5F1EA; transition: all 250ms var(--ease); }
.btn-outline:hover { border-color: #D4A93C; color: #D4A93C; background: rgba(212,169,60,0.08); }
:focus-visible { outline: 2px solid #D4A93C; outline-offset: 3px; }

/* Placeholder hero (visible tant que assets/hero.jpg absent) */
.hero-visual {
  background:
    radial-gradient(120% 120% at 80% 20%, rgba(212,169,60,0.18) 0%, transparent 55%),
    linear-gradient(135deg, #1C1917 0%, #0C0A09 60%, #1C1917 100%);
}
.hero-visual::before {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(115deg, transparent 0 38px, rgba(212,169,60,0.05) 38px 40px);
}
/* Quand une vraie photo est chargée : on masque le motif et le placeholder */
.hero-visual.has-photo::before { display: none; }
.hero-visual.has-photo .hero-caption { display: none; }

/* Vignette média réutilisable (cartes) avec placeholder tant que la photo est absente */
.media { background: linear-gradient(135deg, #292524 0%, #1C1917 60%, #292524 100%); }
.media::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(115deg, transparent 0 30px, rgba(212,169,60,0.05) 30px 32px); }
.media.has-photo::before { display: none; }
.media.has-photo .media-caption { display: none; }
/* Léger zoom de l'image au survol de la carte */
.card-service:hover .media img { transform: scale(1.05); }
.media img { transition: transform 500ms var(--ease); }

/* Étiquette de catégorie (réalisations) — informative, pas cliquable */
.tag { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; color: #D4A93C; border: 1px solid rgba(212,169,60,0.35); border-radius: 9999px; padding: 0.25rem 0.65rem; white-space: nowrap; }

/* Carte : liseré doré révélé au survol */
.card-service { position: relative; overflow: hidden; transition: transform 300ms var(--ease), box-shadow 300ms var(--ease), border-color 300ms var(--ease); }
.card-service::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: #D4A93C; transform: scaleX(0); transform-origin: left; transition: transform 320ms var(--ease); }
.card-service:hover { transform: translateY(-4px); box-shadow: 0 10px 30px -12px rgba(0,0,0,0.6); border-color: rgba(212,169,60,0.35); }
.card-service:hover::before { transform: scaleX(1); }

/* Menu mobile */
#mobileMenu { transition: opacity 300ms var(--ease), transform 300ms var(--ease); }
#mobileMenu.hidden-menu { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.burger span { transition: all 300ms var(--ease); }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}