/* FranceHost — section « Nos implantations » (page L'association) */
.implant-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: 1.5rem; align-items: start; }
@media (max-width: 900px) { .implant-grid { grid-template-columns: 1fr; } .implant-map { order: -1; } }

/* Cartes des deux sites */
.implant-sites { display: flex; flex-direction: column; gap: .75rem; }
.site-card { display: flex; gap: .9rem; align-items: flex-start; width: 100%; padding: 1.1rem 1.2rem; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 8px; font: inherit; color: var(--ink); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.site-card:hover, .site-card.is-active { border-color: var(--blue); box-shadow: 0 10px 24px -18px rgba(37,99,235,.7); }
.site-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.site-card .site-dot { flex: none; width: 16px; height: 16px; margin-top: .2rem; border-radius: 50%; border: 3px solid var(--ink); background: #fff; }
.site-card.dc .site-dot { border-color: var(--green); background: #86efac; }
.site-card b { display: block; font: 700 1.05rem var(--title); }
.site-card span.site-place { display: block; margin-top: .15rem; font-size: .92rem; color: var(--ink-2); }
.site-card small { display: block; margin-top: .35rem; font-size: .85rem; color: var(--muted); }
.implant-note { margin: .25rem 0 0; padding: 1rem 1.2rem; background: var(--blue-l); border-radius: 8px; font-size: .88rem; color: var(--ink-2); }
.implant-note b { color: var(--ink); }

/* Carte */
.implant-map { position: relative; margin: 0; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.implant-stage { position: relative; aspect-ratio: 4 / 3; background: #eef3fb; }
.implant-stage .carte-wrap { border: 0; border-radius: 0; max-width: none; background: none; }
.implant-stage .carte-label, .implant-stage .carte-pt, .implant-stage .carte-legende { display: none; }
.implant-stage .carte { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Points cliquables posés sur la carte SVG */
.implant-pt { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.45); cursor: pointer; }
.implant-pt::after { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); box-sizing: border-box; transition: transform .15s; }
.implant-pt.dc::after { background: #86efac; border-color: var(--green); }
.implant-pt::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(37,99,235,.55); animation: implant-ping 2.4s ease-out infinite; }
.implant-pt:hover::after, .implant-pt.is-active::after { transform: scale(1.25); }
.implant-pt:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@keyframes implant-ping { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .implant-pt::before { animation: none; } }

/* Bulle d'information */
.implant-pop { position: absolute; z-index: 5; width: min(260px, calc(100% - 16px)); padding: .85rem 1rem; background: #fff; border: 1px solid var(--line-2); border-radius: 8px; box-shadow: 0 16px 32px -16px rgba(26,26,26,.35); font-size: .88rem; pointer-events: none; }
.implant-pop.is-pinned { pointer-events: auto; }
.implant-pop::after { content: ''; position: absolute; width: 12px; height: 12px; background: #fff; border: 1px solid var(--line-2); border-width: 0 1px 1px 0; }
.implant-pop[data-side="top"]::after { left: var(--ax); bottom: -7px; margin-left: -6px; transform: rotate(45deg); }
.implant-pop[data-side="bottom"]::after { left: var(--ax); top: -7px; margin-left: -6px; transform: rotate(225deg); }
.implant-pop[data-side="right"]::after { top: var(--ay); left: -7px; margin-top: -6px; transform: rotate(135deg); }
.implant-pop[data-side="left"]::after { top: var(--ay); right: -7px; margin-top: -6px; transform: rotate(-45deg); }
.implant-pop b, .implant-pop-live b { display: block; font: 700 .98rem var(--title); color: var(--ink); }
.implant-pop span, .implant-pop-live span { display: block; margin-top: .15rem; color: var(--ink-2); }
.implant-pop small, .implant-pop-live small { display: block; margin-top: .35rem; color: var(--muted); font-size: .82rem; }
.implant-pop a, .implant-pop-live a { display: inline-block; margin-top: .5rem; font-weight: 600; font-size: .82rem; }

/* Barre sous la carte */
.implant-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 1rem; border-top: 1px solid var(--line); font-size: .82rem; color: var(--muted); }
.implant-bar .btn { padding: .5rem .9rem; font-size: .85rem; }
.implant-legend { display: flex; flex-wrap: wrap; gap: 1rem; }
.implant-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.implant-legend i { width: 11px; height: 11px; border-radius: 3px; background: var(--blue); }

/* Carte interactive */
.implant-live { position: absolute; inset: 0; z-index: 4; }
.is-live .implant-stage .carte, .is-live .implant-pt, .is-live .implant-pop { display: none; }
.implant-pin { display: block; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 4px solid var(--ink); box-shadow: 0 0 0 5px rgba(255,255,255,.7); box-sizing: border-box; }
.implant-pin-dc { background: #86efac; border-color: var(--green); }
.implant-live .leaflet-popup-content { margin: .8rem 1rem; font-family: var(--sans); }
.implant-privacy { margin: .6rem 0 0; font-size: .8rem; color: var(--muted); }
.implant-pt.is-active::before { animation: none; transform: none; opacity: 1; border: 3px solid var(--blue); background: rgba(37,99,235,.15); }
.site-card.is-active { box-shadow: 0 0 0 1px var(--blue), 0 10px 24px -18px rgba(37,99,235,.7); }