/* ============================================================
   schools-list.css — page « Écoles de langue à Malte ».
   Hero repris de ling-article.css. Ici : carte interactive + liste,
   tableau des écoles, certifications, FAQ (rendu canonique global).
   ============================================================ */
.sl { --sl-accent: var(--color-primary, #3b82f6);
      --sl-ink: var(--ar-ink, #0f172a); --sl-muted: var(--ar-muted, #64748b);
      --sl-line: var(--ar-line, #e6e8ee); --sl-max: var(--ar-max, 1220px);
      --sl-text: var(--ar-text, 940px); }

.sl-map-section, .sl-table-section { max-width: var(--sl-max); margin: 5.5rem auto 0; padding: 0 clamp(1rem, 4vw, 2rem); }
.sl-cert, .sl-faq { max-width: var(--sl-text); margin: 5.5rem auto 0; padding: 0 clamp(1rem, 4vw, 2rem); }
.sl-faq { margin-bottom: 5rem; }

.sl-sec-head { margin-bottom: 2.4rem; }
.sl-sec-head h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--sl-ink); margin: 0 0 .55rem; }
.sl-sec-sub { color: var(--sl-muted); margin: 0; font-size: 1rem; line-height: 1.6; max-width: 760px; }

/* ---- Section 1 : carte + liste ---- */
.sl-map-layout { display: grid; grid-template-columns: 360px 1fr; gap: 1.4rem; align-items: start; }
.sl-cards { display: flex; flex-direction: column; gap: .8rem; max-height: 600px; overflow-y: auto; padding-right: .4rem; }
.sl-card { display: flex; align-items: center; gap: .9rem; padding: .8rem .9rem; border: 1px solid var(--sl-line);
           border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.sl-card:hover, .sl-card.is-active { border-color: var(--sl-accent); box-shadow: 0 4px 14px rgba(15,23,42,.08); }
.sl-card.is-pulse { animation: sl-pulse 1.3s ease; }
@keyframes sl-pulse { 0%,100% { box-shadow: 0 0 0 rgba(59,130,246,0); } 30% { box-shadow: 0 0 0 4px rgba(59,130,246,.25); } }
.sl-card-logo { flex-shrink: 0; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center;
                border: 1px solid var(--sl-line); border-radius: 8px; background: #fff; overflow: hidden; }
.sl-card-logo picture { display: inline-flex; max-width: 100%; max-height: 100%; }
.sl-card-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.sl-card-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.sl-card-name { font-weight: 600; font-size: .95rem; color: var(--sl-ink); line-height: 1.25; }
.sl-card-name a { color: inherit; text-decoration: none; }
.sl-card-name a:hover { text-decoration: underline; }
.sl-card-addr { color: var(--sl-muted); font-size: .82rem; line-height: 1.3; }

.sl-map-col { position: sticky; top: 1rem; }
.sl-map { height: 560px; border-radius: 16px; overflow: hidden; border: 1px solid var(--sl-line); z-index: 0; }
.sl-map-hint { text-align: center; color: var(--sl-muted); font-size: .85rem; margin: .6rem 0 0; }

/* Pin Leaflet */
.sl-pin svg path { fill: var(--sl-accent); transition: fill .15s ease; }
.sl-pin.is-active svg path { fill: #ef4444; }
.sl-pin.is-active { filter: drop-shadow(0 3px 6px rgba(0,0,0,.35)); }

/* Popup */
.sl-pop { display: flex; align-items: center; gap: .6rem; min-width: 180px; }
.sl-pop__logo { width: 46px; height: 46px; object-fit: contain; flex-shrink: 0; border: 1px solid var(--sl-line); border-radius: 6px; background: #fff; }
.sl-pop__body { display: flex; flex-direction: column; gap: .1rem; }
.sl-pop__name { font-weight: 700; color: var(--sl-ink); font-size: .92rem; text-decoration: none; }
.sl-pop__name:hover { text-decoration: underline; }
.sl-pop__addr { color: var(--sl-muted); font-size: .8rem; }

/* Accessibilite : masque visuellement mais lisible par les lecteurs d'ecran. */
.sl-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
                      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Section 2 : tableau ---- */
.sl-table-wrap { overflow-x: auto; border: 1px solid var(--sl-line); border-radius: 14px; }
.sl-table { width: 100%; border-collapse: collapse; font-size: .92rem; background: #fff; }
.sl-table th, .sl-table td { padding: 1rem 1.1rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--sl-line); }
.sl-table thead th { background: #f8fafc; color: var(--sl-ink); font-weight: 700; white-space: nowrap; position: sticky; top: 0; }
.sl-table tbody tr:last-child td { border-bottom: 0; }
.sl-table tbody tr:hover { background: #f8fafc; }
.sl-td-name { font-weight: 600; color: var(--sl-ink); min-width: 180px; }
.sl-td-name a { color: inherit; text-decoration: none; }
.sl-td-name a:hover { text-decoration: underline; }
.sl-td-year, .sl-td-city { white-space: nowrap; color: var(--sl-muted); }
.sl-td-addr { color: var(--sl-muted); min-width: 220px; }
.sl-td-none { color: #cbd5e1; }
.sl-labels { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.sl-label { display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 3px 5px;
            background: #fff; border: 1px solid var(--sl-line); border-radius: 6px; }
.sl-label picture, .sl-label img { display: block; height: 100%; width: auto; max-width: 70px; object-fit: contain; }
.sl-table-source { margin: .7rem 0 0; font-size: .85rem; color: var(--sl-muted); }
.sl-table-source a { color: var(--sl-accent); }

/* ---- Section 3 : certifications ---- */
.sl-cert h2, .sl-faq h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--sl-ink); margin: 0 0 1.4rem; }
.sl-cert p { color: var(--color-text-light, #4b5563); line-height: 1.75; margin: 0 0 1.3rem; }
.sl-cert a { color: var(--sl-accent); }

/* ---- Responsive ---- */
@media (max-width: 860px) {
    .sl-map-layout { grid-template-columns: 1fr; }
    .sl-map-col { position: static; }
    .sl-cards { max-height: none; order: 2; }
    .sl-map-col { order: 1; }
    .sl-map { height: 380px; }
}