/* drtielemans.be : bleu indigo, repris de l'ancien site */
:root {
  --accent: #283593;
  --accent-strong: #1a237e;
  --accent-soft: #eceefa;
  --bg-alt: #f3f5fb;
  --footer-bg: #121735;
}

.brand::before { content: ""; display: inline-block; width: .7em; height: .7em; margin-right: .5em; border-radius: 3px; background: var(--accent); vertical-align: .02em; }
.eyebrow--light { color: #c5cbff; }

/* Portrait */
.portrait { justify-self: center; position: relative; }
.portrait img { width: min(22rem, 70vw); aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: var(--shadow); }
.portrait::before { content: ""; position: absolute; inset: -1rem; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--accent) 30%, transparent); }

/* Horaires */
.schedule__title { margin: 3rem 0 1rem; }
.schedule-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.schedule { width: 100%; border-collapse: collapse; margin: 0; font-size: .98rem; }
.schedule th, .schedule td { padding: .9rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.schedule thead th { background: var(--accent); color: #fff; font-weight: 600; }
.schedule tbody th { width: 8rem; color: var(--accent-strong); }
.schedule tbody tr:last-child > * { border-bottom: 0; }
.schedule tbody tr:nth-child(even) { background: var(--bg-alt); }
.schedule__off td { color: var(--muted); font-style: italic; }
@media (max-width: 640px) {
  .schedule thead { display: none; }
  .schedule, .schedule tbody, .schedule tr, .schedule th, .schedule td { display: block; width: auto; }
  .schedule tr { padding: .75rem 1rem; border-bottom: 1px solid var(--line); }
  .schedule th, .schedule td { padding: .15rem 0; border: 0; }
  .schedule td[data-label]::before { content: attr(data-label) " : "; font-weight: 600; color: var(--ink); }
}

/* Squelette interactif */
.skeleton-explorer { display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: start; }
@media (min-width: 860px) { .skeleton-explorer { grid-template-columns: minmax(16rem, 5fr) 7fr; } }
.skeleton { margin: 0; background: #000; border-radius: 24px; padding: 1rem; box-shadow: var(--shadow); max-width: 26rem; justify-self: center; width: 100%; }
@media (min-width: 860px) { .skeleton { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
.skeleton svg { display: block; width: 100%; height: auto; max-height: 78vh; }
@media (max-width: 859px) { .skeleton { max-width: 18rem; } .skeleton svg { max-height: 62vh; } }
/* Zones cliquables : invisibles au repos, colorées au survol */
.skeleton path { fill: rgb(92 107 255 / 0); stroke: rgb(175 185 255 / 0); stroke-width: 3; cursor: pointer; transition: fill .15s, stroke .15s; }
.skeleton a.is-active path, .skeleton a:hover path, .skeleton a:focus-visible path { fill: rgb(110 125 255 / .55); stroke: rgb(200 207 255 / .95); }
.skeleton a:focus { outline: none; }

/* Pastilles au centre de chaque zone (ajoutées par le script de la page) */
.dot { pointer-events: none; }
.dot__core { fill: #fff; stroke: #5c6bff; stroke-width: 5; transition: fill .15s, stroke .15s; }
.dot__halo { fill: rgb(140 155 255 / .45); transform-box: fill-box; transform-origin: center; }
.skeleton a.is-active .dot__core, .skeleton a:hover .dot__core, .skeleton a:focus-visible .dot__core { fill: #5c6bff; stroke: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .dot__halo { animation: ping 2.4s cubic-bezier(0, 0, .2, 1) infinite; }
  @keyframes ping { 0% { transform: scale(.5); opacity: .9; } 75%, 100% { transform: scale(1.9); opacity: 0; } }
}
.skeleton figcaption { margin-top: .75rem; text-align: center; color: #c9cfff; font-weight: 600; min-height: 1.6em; }
.skeleton figcaption.is-active { color: #fff; }
.legend { display: flex; align-items: center; gap: .6rem; color: var(--muted); font-size: .95rem; margin: -.25rem 0 0; }
.legend__swatch { flex: none; width: .9rem; height: .9rem; border-radius: 50%; background: #fff; border: 3px solid #5c6bff; box-shadow: 0 0 0 4px rgb(140 155 255 / .35); }

.region-list { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; padding: 0; margin: 1.5rem 0 2rem; }
.region-list a {
  display: block; padding: .6rem 1.1rem; border-radius: 999px; border: 1.5px solid var(--line); background: var(--bg);
  color: var(--ink); font-weight: 600; text-decoration: none; transition: all .15s;
}
.region-list a:hover, .region-list a.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.callout { padding: 1.25rem 1.5rem; border-left: 4px solid var(--accent); background: var(--accent-soft); border-radius: 0 12px 12px 0; margin-bottom: 1.5rem; }
.callout p { margin: .25rem 0 0; }
.note { font-size: .92rem; color: var(--muted); }