/* ══════════════════════════════════════════════════════════════
   CSF — Animations (aperçu)
   Cascade des cartes, réactions au survol, menu au défilement,
   carte animée des 4 sites. Le planning et la réservation ne sont
   pas concernés. Tout est coupé si le visiteur refuse les animations.
══════════════════════════════════════════════════════════════ */

/* ── Cascade : chaque carte arrive un peu après la précédente ── */
.reveal.mo-stagger { transition-delay: var(--mo-delay, 0s); }

/* ── Boutons : l'icône glisse légèrement ── */
.btn .ico, .fc-btn .ico { transition: transform .25s ease; }
.btn:hover .ico, .fc-btn:hover .ico { transform: translateX(3px); }
/* Le planning et la réservation gardent exactement leur comportement actuel */
#planning .ico, #inscription .ico { transition: none !important; transform: none !important; }

/* ── Liens soulignés : le trait se remplit au survol ── */
.site-card-link, .fc-more, .rg-seealso a {
  border-bottom: 0 !important;
  background-image: linear-gradient(var(--csf-green), var(--csf-green)), linear-gradient(var(--csf-line), var(--csf-line));
  background-size: 0 2px, 100% 2px;
  background-position: 0 100%, 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size .35s ease, color .2s ease;
}
.site-card-link:hover, .fc-more:hover, .rg-seealso a:hover { background-size: 100% 2px, 100% 2px; }

/* ── Menu : le logo se réduit quand on descend dans la page ── */
.navbar .nav-brand img { transition: transform .3s ease; transform-origin: left center; }
.navbar.scrolled .nav-brand img { transform: scale(.86); }
.navbar.scrolled { border-bottom: 3px solid var(--csf-green); }

/* ── Carte des 4 sites ── */
.mo-map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; margin: 0 0 2.8rem; }
.mo-map svg { width: 100%; max-width: 460px; height: auto; display: block; margin: 0 auto; }
.mo-france { fill: #EEF3F9; stroke: var(--csf-blue); stroke-width: 1.6; stroke-linejoin: round; }
.mo-pin circle.dot { fill: var(--csf-blue); stroke: #fff; stroke-width: 3; }
.mo-pin.main circle.dot { fill: var(--csf-green); }
.mo-pin circle.ring { fill: none; stroke: var(--csf-green); stroke-width: 2; opacity: 0; }
.mo-pin text { font-family: var(--csf-head); font-size: 17px; font-weight: 700; fill: var(--csf-navy); paint-order: stroke; stroke: #fff; stroke-width: 5px; stroke-linejoin: round; }
.mo-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.mo-legend a { display: flex; align-items: center; gap: .9rem; padding: .95rem 1.2rem; background: #fff; border: 1px solid var(--csf-line); border-left: 4px solid var(--csf-blue); border-radius: var(--csf-r); color: var(--text); transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.mo-legend a:hover { transform: translateX(4px); border-color: var(--csf-blue); box-shadow: 0 6px 18px rgba(18, 80, 168, .10); }
.mo-legend li.main a { border-left-color: var(--csf-green); background: #F7FAF4; }
.mo-legend strong { display: block; font-family: var(--csf-head); font-size: 1.2rem; font-weight: 700; line-height: 1.15; }
.mo-legend span { display: block; font-size: .85rem; color: var(--text-light); }
.mo-legend .num { flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--csf-blue); color: #fff; font-weight: 700; font-size: .9rem; }
.mo-legend li.main .num { background: var(--csf-green); }

/* Animation de la carte, déclenchée quand elle devient visible */
.mo-map.is-ready .mo-france { stroke-dasharray: 3600; stroke-dashoffset: 3600; fill-opacity: 0; transition: stroke-dashoffset 1.6s ease, fill-opacity .8s ease 1.1s; }
.mo-map.is-ready .mo-pin { opacity: 0; transform: translateY(-14px); transform-box: fill-box; transform-origin: center; transition: opacity .45s ease, transform .45s cubic-bezier(.2, .9, .3, 1.3); transition-delay: var(--mo-delay, 0s); }
.mo-map.is-ready .mo-legend li { opacity: 0; transform: translateX(14px); transition: opacity .45s ease, transform .45s ease; transition-delay: var(--mo-delay, 0s); }
.mo-map.is-on .mo-france { stroke-dashoffset: 0; fill-opacity: 1; }
.mo-map.is-on .mo-pin, .mo-map.is-on .mo-legend li { opacity: 1; transform: none; }
.mo-map.is-on .mo-pin.main circle.ring { animation: mo-pulse 2.2s ease-out 2.4s infinite; }
@keyframes mo-pulse { 0% { r: 10; opacity: .8; } 100% { r: 30; opacity: 0; } }

@media (max-width: 860px) {
  .mo-map { grid-template-columns: 1fr; gap: 1.5rem; }
  .mo-map svg { max-width: 340px; }
  .mo-pin text { font-size: 24px; }
  .mo-pin circle.dot { r: 12; }
}

/* ── Visiteurs qui refusent les animations : tout s'affiche immédiatement ── */
@media (prefers-reduced-motion: reduce) {
  .reveal.mo-stagger { transition-delay: 0s; }
  .mo-map.is-ready .mo-france, .mo-map.is-ready .mo-pin, .mo-map.is-ready .mo-legend li { transition: none; opacity: 1; transform: none; stroke-dashoffset: 0; fill-opacity: 1; }
  .mo-map.is-on .mo-pin.main circle.ring { animation: none; }
  .navbar .nav-brand img, .mo-legend a, .btn .ico, .fc-btn .ico { transition: none; }
}