/* ───────── "Venez rencontrer l'équipe": entrance, a route line that draws itself, a "click to explore" map,
   rows that copy, a pulsing ring on the pin, and the live "Ouvert maintenant" badge. Loaded after home.css.
   To undo all of it: remove the two includes in home.html. ───────── */

.hm-visitsec { --ease: cubic-bezier(.2, .7, .2, 1); position: relative; isolation: isolate; overflow: hidden; }

/* ── the route to the school, drawn as you scroll (visit.js builds it; wide screens only) ── */
.hm-route { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hm-route-dash { fill: none; stroke: var(--navy-2); stroke-opacity: .42; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 13; vector-effect: non-scaling-stroke; }
.hm-route-reveal { fill: none; stroke: #fff; stroke-width: 16; stroke-dasharray: 1; stroke-dashoffset: 1; }
.hm-route-start { fill: var(--navy-2); fill-opacity: .5; }
.hm-route-end { fill: var(--yellow); stroke: var(--navy-2); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; scale: .3; transition: opacity .4s ease, scale .6s var(--ease); }
.hm-route.is-done .hm-route-end { opacity: 1; scale: 1; }
@media (max-width: 991.98px) { .hm-route { display: none; } }

/* ── the live opening badge ── */
.hm-open { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .45rem .6rem; margin: 1.1rem 0 0; padding: .45rem .95rem; border-radius: 999px; background: #fdecea; color: #8a1c10; font-size: .92rem; }
.hm-open b { font-weight: 700; }
.hm-open span { font-weight: 500; opacity: .9; }
.hm-open i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.hm-open.is-open { background: #e5f6ec; color: #0f6a38; }
.hm-open.is-open i { animation: hm-live 1.9s ease-out infinite; }
@keyframes hm-live { 0% { box-shadow: 0 0 0 0 rgba(26, 155, 83, .55); } 70%, 100% { box-shadow: 0 0 0 8px rgba(26, 155, 83, 0); } }

/* ── contact rows ── */
.hm-contact li { transition: translate .7s var(--ease) calc(var(--r, 0) * .12s + .4s), opacity .7s ease calc(var(--r, 0) * .12s + .4s), transform .3s var(--ease); }
.hm-contact li > div { flex: 1; min-width: 0; }
.hm-contact div > span { display: block; }
.hm-contact .gs-ico { transition: background-color .25s, color .25s; }
.hm-copy { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-width: 40px; height: 40px; padding: 0 .6rem; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; color: var(--navy-2); font: 700 .82rem var(--body); cursor: pointer; opacity: 0; transition: opacity .2s, background-color .2s, color .2s, border-color .2s; }
.hm-copy svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hm-contact li:hover .hm-copy, .hm-copy:focus-visible { opacity: 1; }
.hm-copy:hover { background: var(--sky); }
.hm-copy.is-done { opacity: 1; background: #1a9b53; border-color: #1a9b53; color: #fff; }
@media (hover: hover) {
    .hm-contact li:hover { transform: translateX(6px); }
    .hm-contact li:hover .gs-ico { background: var(--yellow); color: var(--ink); }
}
@media (hover: none) { .hm-copy { opacity: .75; } }

.hm-visit-actions { display: flex; flex-wrap: wrap; gap: .9rem; }
.hm-visit-actions .gs-btn .gs-ic { width: 1.2em; height: 1.2em; }
.hm-visit-actions .gs-btn-line { background: #fff; }   /* the route line passes behind it */
.hm-visit-actions .gs-btn-line:hover { background: var(--navy-2); }
.hm-visit-actions .gs-btn-line .gs-ic { transition: translate .3s var(--ease); }
.hm-visit-actions .gs-btn-line:hover .gs-ic { translate: 0 -3px; }

/* ── the map: protected from accidental scrolling until it is clicked ── */
.hm-map { position: relative; }
.hm-map.is-locked iframe { pointer-events: none; }
.hm-map-lock { position: absolute; inset: 0; z-index: 3; display: flex; align-items: flex-end; justify-content: center; padding: 1.2rem; border: 0; background: linear-gradient(0deg, rgba(11, 28, 51, .45), transparent 42%); cursor: pointer; transition: opacity .35s ease; }
.hm-map-lock span { display: inline-flex; align-items: center; gap: .55rem; padding: .65rem 1.2rem; border-radius: 999px; background: rgba(11, 28, 51, .85); color: #fff; font: 700 .95rem var(--body); backdrop-filter: blur(4px); transition: background-color .2s, color .2s; }
.hm-map-lock svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hm-map-lock:hover span, .hm-map-lock:focus-visible span { background: var(--yellow); color: var(--ink); }
.hm-map:not(.is-locked) .hm-map-lock { opacity: 0; pointer-events: none; }

/* ── a radar ring around the school's pin when the map appears ── */
.hm-map-ping { position: absolute; left: 50%; top: 50%; z-index: 2; width: 0; height: 0; pointer-events: none; }
.hm-map-ping i { position: absolute; left: -32px; top: -32px; width: 64px; height: 64px; border: 3px solid var(--yellow); border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .3); opacity: 0; scale: .2; }
.hm-visitsec.is-in .hm-map-ping i { animation: hm-ping 2.4s ease-out 3 both; }
.hm-visitsec.is-in .hm-map-ping i:nth-child(2) { animation-delay: .55s; }
.hm-visitsec.is-in .hm-map-ping i:nth-child(3) { animation-delay: 1.1s; }
@keyframes hm-ping { 0% { opacity: .95; scale: .2; } 100% { opacity: 0; scale: 1.7; } }

/* ── entrance: title words, then badge / rows / buttons from the left, and the map unrolls from the left ── */
.hm-visitsec .hm-word { display: inline-block; transition: opacity .8s ease calc(var(--w, 0) * .07s), translate .8s var(--ease) calc(var(--w, 0) * .07s); }
.hm-open, .hm-visit-actions { transition: opacity .7s ease .35s, translate .7s var(--ease) .35s; }
.hm-visit-actions { transition-delay: .95s; }
.hm-map { transition: clip-path 1.1s var(--ease) .3s, opacity .6s ease .3s, scale 1.1s var(--ease) .3s; }
.hm-visitsec.is-armed:not(.is-in) .hm-word { opacity: 0; translate: 0 .6em; }
.hm-visitsec.is-armed:not(.is-in) .hm-open, .hm-visitsec.is-armed:not(.is-in) .hm-contact li, .hm-visitsec.is-armed:not(.is-in) .hm-visit-actions { opacity: 0; translate: -34px 0; }
.hm-visitsec.is-armed:not(.is-in) .hm-map { clip-path: inset(0 100% 0 0 round 28px); opacity: 0; scale: .97; }

@media (prefers-reduced-motion: reduce) {
    .hm-visitsec .hm-word, .hm-open, .hm-visit-actions, .hm-contact li, .hm-map, .hm-route-end { transition: none; }
    .hm-open.is-open i { animation: none; }
    .hm-visitsec.is-in .hm-map-ping i { animation: none; }
    .hm-contact li:hover { transform: none; }
}