/* Couche d'animations et menu mobile du site LD (ajoutee par-dessus les pages du site). */
:root { --fx-ease: cubic-bezier(.2, .7, .1, 1); }
html.fx-open { overflow: hidden; }

/* Hero de chaque page : image plein ecran jusqu'en bas (remplace la hauteur limitee des pages) */
body > div > section:first-of-type { height: 100vh !important; height: 100svh !important; min-height: 520px !important; max-height: none !important; }
@media (max-width: 760px) { body > div > section:first-of-type > div[style*="bottom: 0"] { padding-bottom: 96px !important; } }

/* Apparition au defilement */
.fx-r { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--fx-ease), transform .8s var(--fx-ease); transition-delay: var(--d, 0ms); }
.fx-r.fx-in { opacity: 1; transform: none; }

/* Ouverture : titre ligne par ligne, image en leger zoom arriere, en-tete en fondu */
.fx-hero .fx-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.fx-hero .fx-line > span { display: block; transform: translateY(105%); animation: fxUp 1.1s var(--fx-ease) forwards; animation-delay: calc(.15s + var(--i) * .12s); }
.fx-hero .fx-zoomin { animation: fxZoom 16s ease-out both; transform-origin: 50% 60%; }
.fx-hero header { animation: fxFade .9s .35s both; }
.fx-hero .fx-cta { animation: fxFade .9s .9s both; }
@keyframes fxUp { to { transform: none; } }
@keyframes fxZoom { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes fxPop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes fxFade { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* Liens du menu : soulignement qui se dessine */
header nav a, .fx-bar nav a { position: relative; }
header nav a::after, .fx-bar nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--fx-ease); }
header nav a:hover::after, .fx-bar nav a:hover::after { transform: scaleX(1); }

/* Cartes : image qui zoome, carte entiere cliquable */
.fx-zoom { display: block; overflow: hidden; }
.fx-zoom img { transition: transform .9s var(--fx-ease); }
.fx-card { cursor: pointer; }
.fx-card:hover .fx-zoom img { transform: scale(1.05); }
.fx-card a[style*="border-bottom"] { transition: color .2s, letter-spacing .35s var(--fx-ease); }
.fx-card:hover a[style*="border-bottom"] { letter-spacing: .22em; }

/* Barre fixe apres le hero */
.fx-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 900; background: rgba(11, 16, 24, .82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); transform: translateY(-100%); transition: transform .45s var(--fx-ease); }
.fx-bar.on { transform: none; }
.fx-bar-in { max-width: 1440px; margin: 0 auto; padding: 14px 48px; display: flex; align-items: center; gap: 16px 40px; }
.fx-bar-in nav { margin-left: auto; }

/* Bouton menu (mobile) : trois traits qui deviennent une croix */
.fx-burger { display: none; }
.menu-btn { display: none !important; }
@media (max-width: 760px) {
  header nav, .fx-bar nav { display: none !important; }
  .fx-burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 1001; width: 52px; height: 52px; padding: 0 16px; background: rgba(19, 33, 58, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(238, 241, 245, .22); border-radius: 50%; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); cursor: pointer; animation: fxPop .5s .6s var(--fx-ease) both; transition: transform .2s var(--fx-ease); }
  .fx-burger:active { transform: scale(.92); }
  .fx-burger span { display: block; height: 2px; background: var(--ink); transition: transform .45s var(--fx-ease), opacity .2s; }
  .fx-open .fx-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .fx-open .fx-burger span:nth-child(2) { opacity: 0; }
  .fx-open .fx-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .fx-bar-in { padding: 14px 20px; min-height: 76px; }
}

/* Menu plein ecran qui se deploie en cercle depuis le bouton */
.fx-menu, .fx-bar { font-family: var(--font-sans); color: var(--ink); }
.fx-menu { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; padding: 72px 28px calc(96px + env(safe-area-inset-bottom)); background: rgba(11, 16, 24, .97); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); clip-path: circle(0 at calc(100% - 44px) calc(100% - 44px)); visibility: hidden; transition: clip-path .7s var(--fx-ease), visibility 0s .7s; }
.fx-open .fx-menu { clip-path: circle(150% at calc(100% - 44px) calc(100% - 44px)); visibility: visible; transition: clip-path .7s var(--fx-ease), visibility 0s; }
.fx-menu .label { font: 500 13px/16px var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 16px; }
.fx-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fx-menu a { display: flex; align-items: center; gap: 16px; padding: 10px 0; color: var(--ink); text-decoration: none; font: 700 34px/40px var(--font-display); opacity: 0; transform: translateY(24px); transition: opacity .4s, transform .5s var(--fx-ease); }
.fx-open .fx-menu a { opacity: 1; transform: none; transition: opacity .5s, transform .7s var(--fx-ease); transition-delay: calc(.18s + var(--i) * .06s); }
.fx-menu a img { width: 30px; height: 26px; object-fit: contain; flex: none; }
.fx-menu a .dot { width: 30px; flex: none; }
.fx-menu a[aria-current="page"] span { box-shadow: inset 0 -3px 0 var(--c, var(--ink)); }
.fx-menu-foot { margin-top: auto; padding-top: 24px; border-top: 1px solid var(--line); color: var(--ink-muted); font-size: 14px; line-height: 20px; opacity: 0; transition: opacity .5s; }
.fx-open .fx-menu-foot { opacity: 1; transition-delay: .6s; }
@media (min-width: 761px) { .fx-menu { display: none; } }

/* Mobile : pas de barre fixe (le bouton menu flotte seul), resultats d'itineraire sans bandes laterales */
@media (max-width: 760px) {
  .fx-bar { display: none; }
  .it-res { background: none !important; padding-left: 0 !important; padding-right: 0 !important; gap: 0 !important; }
  .it-card { padding: 28px 0 !important; border-top: 1px solid var(--line); gap: 16px 24px !important; }
  .it-card:first-child { border-top: 0; }
  .it-leg { align-items: flex-start !important; gap: 16px !important; }
  .it-leg .ld-plaque { font-size: 40px !important; }
  .it-t { font-size: 24px !important; line-height: 28px !important; }
  .it-chg { padding-left: 0 !important; }
  .it-time { text-align: left !important; flex-direction: row !important; align-items: baseline; gap: 12px !important; }
  .it-time b { font-size: 32px !important; line-height: 36px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-r { opacity: 1; transform: none; transition: none; }
  .fx-hero .fx-line > span, .fx-hero .fx-zoomin, .fx-hero header, .fx-hero .fx-cta { animation: none; transform: none; }
  .fx-menu, .fx-menu a, .fx-burger span, .fx-bar { transition: none; }
  .fx-burger { animation: none; }
}