/* Shared chrome + layout CSS for all Les Écuries du Vieux Château pages.
   Tokens come from the design-system stylesheets; this adds glue only. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ---- Background palette override: warmer & deeper, less pastel ----
   Replaces the minty/champagne washes with warm stone & sand tones,
   and deepens the base parchment a touch for a richer heritage feel.
   Change the 4 values below to re-tune the whole site at once. */
:root {
  --bg-page:      #F3EDDF;   /* warm parchment, a touch deeper */
  --bg-alt:       #EAE1CF;   /* sunken / alt section — warm stone */
  --bg-tint:      #E6DCC6;   /* was minty wash → now warm sand */
  --bg-champagne: #EFE0C0;   /* richer, more golden champagne */
  --bg-tint-line: #DACFB4;   /* hairline that reads on the sand tint */
}
body { background: var(--bg-page); overflow-x: hidden; }

/* ---- Entrance: opacity stays at 1 so content never strands hidden; only a gentle settle. ---- */
@keyframes settle { from { transform: translateY(14px); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: settle 0.7s var(--ease-out) both; }
  .reveal.d1 { animation-delay: 0.04s; }
  .reveal.d2 { animation-delay: 0.12s; }
  .reveal.d3 { animation-delay: 0.22s; }
  .reveal.d4 { animation-delay: 0.32s; }
  .reveal.d5 { animation-delay: 0.42s; }
}

/* ---- Nav link underline flourish ---- */
.navlink { position: relative; }
.navlink::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px;
  background: var(--accent); transform: scaleX(0); transform-origin: center;
  transition: transform var(--dur) var(--ease-out);
}
.navlink:hover::after, .navlink.active::after { transform: scaleX(1); }

/* ---- Footer ---- */
.footer-cta { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 44px; }
.foot-link { color: rgba(243,241,232,0.62); text-decoration: none; transition: color var(--dur); display: inline-flex; align-items: center; gap: 9px; line-height: 1.5; }
.foot-link:hover { color: #fff; }
.foot-col-h { font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-400); margin: 0 0 18px; }
.to-top { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1px solid rgba(255,255,255,0.22); color: rgba(243,241,232,0.8); border-radius: var(--radius-pill); padding: 9px 16px; cursor: pointer; font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; transition: background var(--dur), color var(--dur), transform var(--dur); }
.to-top:hover { background: rgba(255,255,255,0.08); color: #fff; transform: translateY(-2px); }

/* ---- Nav responsive ---- */
.mast-nav { display: flex; }
.compact-nav { display: flex; }
.mast-utility-right { display: flex; }
.util-phone-mobile { display: none; }
.burger { display: none; }

/* ---- Section grids (from the UI kit) ---- */
@media (max-width: 980px) {
  .hero-grid, .contact-grid { grid-template-columns: 1fr !important; }
  .svc-grid, .stat-grid, .gal-grid, .footer-grid { grid-template-columns: 1fr 1fr !important; }
  .gal-grid > div { grid-column: span 1 !important; }
}
/* Tablette & smartphone : tout le texte éditorial s'étale sur la largeur (plus de colonne étroite) */
@media (max-width: 1024px) {
  .hero-grid > div:first-child { max-width: none !important; }
  .hero-grid p { max-width: none !important; }
  .section-head { max-width: none !important; align-items: flex-start !important; text-align: left !important; }
}
@media (max-width: 1180px) {
  .mast-nav, .compact-nav, .mast-utility-right { display: none; }
  .util-eyebrow { display: none; }
  .util-phone-mobile { display: inline-flex; }
  .burger { display: inline-flex; }
}
@media (max-width: 600px) {
  .svc-grid, .stat-grid, .footer-grid { grid-template-columns: 1fr !important; }
  .footer-cta { flex-direction: column; align-items: flex-start; }
}

/* ---- Bandeau bronze animé (poussières + roues de calèche + fers à cheval) ---- */
.amb { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.amb-wheel-wrap { position: absolute; color: rgba(246,197,61,0.22); }
.amb-wheel { display: block; transform-origin: 50% 50%; }
.amb-shoe { position: absolute; color: rgba(246,197,61,0.34); opacity: 0; }
.amb-pcl { position: absolute; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 50% 50%, rgba(252,230,160,1) 0%, rgba(246,197,61,0.7) 42%, rgba(246,197,61,0) 74%); }
@keyframes ambSpin { to { transform: rotate(360deg); } }
@keyframes ambBob { from { transform: translateY(-26px); } to { transform: translateY(26px); } }
@keyframes ambDrift {
  0%   { transform: translate3d(0, 40px, 0) rotate(0deg) scale(.5); opacity: 0; }
  14%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { transform: translate3d(var(--dx, 0px), -170px, 0) rotate(240deg) scale(1); opacity: 0; }
}
@keyframes ambFloat {
  0%   { transform: translate3d(0, 30px, 0) rotate(-25deg) scale(.85); opacity: 0; }
  16%  { opacity: .9; }
  84%  { opacity: .9; }
  100% { transform: translate3d(var(--dx, 0px), -210px, 0) rotate(200deg) scale(1.05); opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .amb-wheel-wrap { animation: ambBob ease-in-out infinite alternate; }
  .amb-wheel { animation: ambSpin linear infinite; }
  .amb-shoe { animation: ambFloat linear infinite; }
  .amb-pcl { animation: ambDrift linear infinite; }
}

/* ---- Devis form: mobile fixes ---- */
@media (max-width: 980px) {
  .contact-grid { grid-template-columns: 1fr !important; }
  .contact-grid > div:first-child { position: static !important; top: auto !important; }
}

/* ---- Animations de survol (vignettes, icônes) — communes à toutes les pages ---- */
@media (prefers-reduced-motion: no-preference) {
  .svc-grid > *, .cred-grid > *, .guide-grid > *, .dir-card, .vinfo-trio > *, .vinfo-pair > * {
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur), border-color var(--dur); }
  .svc-grid > *:hover, .cred-grid > *:hover, .guide-grid > *:hover, .dir-card:hover, .vinfo-trio > *:hover, .vinfo-pair > *:hover {
    transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--green-300); }
  .svc-grid > * > span:first-child, .svc-grid > * > div:first-child > span:first-child,
  .cred-grid > * > span:first-child, .guide-grid > * > span:first-child, .vinfo-trio > * > span:first-child {
    transition: transform var(--dur) var(--ease-out), background var(--dur); }
  .svc-grid > *:hover > span:first-child, .svc-grid > *:hover > div:first-child > span:first-child,
  .cred-grid > *:hover > span:first-child, .guide-grid > *:hover > span:first-child, .vinfo-trio > *:hover > span:first-child {
    transform: scale(1.1) rotate(-6deg); background: var(--gold-100); }
}