/* Joggerie Trails — front. Tokens : Design System La Joggerie V1.1 */
.lj-root {
  --lj-brand-navy:#00182F; --lj-brand-teal:#009892; --lj-brand-green:#01A672;
  --lj-brand-lime:#A5BD01; --lj-brand-yellow:#FEBD02; --lj-brand-orange:#FE5F16;
  --lj-background:#F5FAFA; --lj-surface:#FFFFFF; --lj-surface-subtle:#E8F5F4;
  --lj-text:#00182F; --lj-text-muted:#4C626E;
  --lj-primary:#006F73; --lj-primary-hover:#00595D; --lj-primary-active:#004448;
  --lj-accent:#C13F00;
  --lj-border:#D4E1E5; --lj-border-control:#687E88; --lj-focus:#175CD3;
  --lj-success:#24633F; --lj-success-bg:#EAF5ED;
  --lj-warning:#805400; --lj-warning-bg:#FFF4D6;
  --lj-error:#B42318; --lj-error-bg:#FEECEB;
  --lj-info:#175CD3; --lj-info-bg:#EAF1FE;
  --lj-font:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  --lj-radius-control:8px; --lj-radius-card:12px; --lj-radius-pill:999px;
  --lj-shadow-raised:0 4px 16px rgb(0 24 47 / .08);
  --lj-control-height:48px;
  --lj-container:1280px;
  --lj-duration:180ms; --lj-easing:cubic-bezier(.2,0,0,1);

  background:var(--lj-background); color:var(--lj-text);
  font-family:var(--lj-font); font-size:1rem; line-height:1.5;
  padding-bottom:4rem;
}
.lj-root *, .lj-root *::before, .lj-root *::after { box-sizing:border-box; }
.lj-root :focus-visible { outline:3px solid var(--lj-focus); outline-offset:3px; }
.lj-root a { color:var(--lj-primary); }
.lj-root a:hover { color:var(--lj-primary-hover); }
.lj-root img { max-width:100%; height:auto; display:block; }
.lj-embed { background:transparent; padding-bottom:0; }
@media (prefers-reduced-motion:reduce) {
  .lj-root *, .lj-root *::before, .lj-root *::after { transition:none !important; animation:none !important; }
}

.ljt-container { max-width:var(--lj-container); margin:0 auto; padding:0 16px; }
@media (min-width:768px) { .ljt-container { padding:0 24px; } }
@media (min-width:1024px) { .ljt-container { padding:0 32px; } }

.ljt-sr { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; margin:-1px; padding:0; border:0; }
.ljt-icon { flex:none; vertical-align:middle; }
.ljt-muted { color:var(--lj-text-muted); }

/* Typo */
.ljt-h1 { font-size:2rem; line-height:1.15; letter-spacing:-.02em; font-weight:700; margin:0 0 .5rem; color:var(--lj-text); }
.ljt-h2 { font-size:1.5rem; line-height:1.2; letter-spacing:-.02em; font-weight:700; margin:0 0 1rem; color:var(--lj-text); }
.ljt-h3 { font-size:1.125rem; line-height:1.3; font-weight:700; margin:0 0 .75rem; color:var(--lj-text); }
@media (min-width:1024px) { .ljt-h1 { font-size:3rem; } .ljt-h2 { font-size:1.75rem; } }
.ljt-lead { font-size:1.125rem; color:var(--lj-text-muted); margin:0 0 1.5rem; max-width:70ch; }
@media (min-width:1024px) { .ljt-lead { font-size:1.375rem; } }
.ljt-kicker { text-transform:uppercase; letter-spacing:.2em; font-size:.75rem; font-weight:600; color:var(--lj-text-muted); margin:0 0 .5rem; }

/* Boutons */
.ljt-btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:var(--lj-control-height); padding:0 1.25rem; border-radius:var(--lj-radius-control); font:600 1rem/1.2 var(--lj-font); text-decoration:none; cursor:pointer; border:1px solid transparent; transition:background var(--lj-duration) var(--lj-easing); }
.lj-root .ljt-btn--primary { background:var(--lj-primary); color:#fff; }
.lj-root .ljt-btn--primary:hover { background:var(--lj-primary-hover); color:#fff; }
.lj-root .ljt-btn--primary:active { background:var(--lj-primary-active); }
.lj-root .ljt-btn--secondary { background:var(--lj-surface); color:var(--lj-primary); border-color:var(--lj-primary); }
.lj-root .ljt-btn--secondary:hover { background:var(--lj-surface-subtle); }
.ljt-btn--block { width:100%; }
.ljt-link { display:inline-flex; align-items:center; gap:.25rem; font-weight:700; text-decoration:none; }

/* Hero + recherche */
.ljt-hero { padding:2.5rem 0 2rem; background:linear-gradient(180deg,var(--lj-surface-subtle),var(--lj-background)); text-align:center; }
@media (min-width:1024px) { .ljt-hero { padding:4rem 0 3rem; } }
.ljt-hero .ljt-lead { margin-left:auto; margin-right:auto; }
.ljt-search { display:grid; gap:.5rem; background:var(--lj-surface); border-radius:var(--lj-radius-card); box-shadow:var(--lj-shadow-raised); padding:.75rem; max-width:920px; margin:0 auto; text-align:left; }
@media (min-width:768px) { .ljt-search { grid-template-columns:1.2fr 1fr 1.15fr auto; align-items:center; } }
.ljt-search__field { display:flex; align-items:center; gap:.75rem; padding:.25rem .5rem; border-radius:var(--lj-radius-control); }
@media (min-width:768px) { .ljt-search__field + .ljt-search__field { border-left:1px solid var(--lj-border); } }
.ljt-search__field > .ljt-icon { color:var(--lj-text); }
.ljt-search__field label { display:flex; flex-direction:column; flex:1; min-width:0; font-weight:700; font-size:.875rem; }
.ljt-search__field input, .ljt-search__field select { border:1px solid var(--lj-border-control); border-radius:var(--lj-radius-control); background:var(--lj-surface); font:400 1rem var(--lj-font); color:var(--lj-text); min-height:44px; padding:0 .5rem; width:100%; margin-top:.25rem; }
@media (min-width:768px) { .ljt-search__field input, .ljt-search__field select { border-color:transparent; padding:0; min-height:32px; margin:0; } .ljt-search__field:focus-within { outline:3px solid var(--lj-focus); outline-offset:0; } .ljt-search__field input:focus-visible, .ljt-search__field select:focus-visible { outline:none; } }

.ljt-chips { list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; padding:0; margin:1.25rem 0 0; }
.ljt-chip { display:inline-flex; align-items:center; gap:.5rem; min-height:44px; padding:0 1rem; border-radius:var(--lj-radius-pill); background:var(--lj-surface); border:1px solid var(--lj-border); color:var(--lj-text) !important; text-decoration:none; font-weight:600; }
.ljt-chip:hover { border-color:var(--lj-primary); }
.ljt-chip.is-active { background:var(--lj-primary); border-color:var(--lj-primary); color:#fff !important; }
.ljt-months { margin-top:2rem; }
.ljt-months .ljt-chips { justify-content:flex-start; margin-top:0; }
.ljt-featured { margin-top:2.5rem; }

/* Mise en page liste */
.ljt-layout { display:grid; gap:1.5rem; margin-top:2.5rem; }
@media (min-width:1024px) { .ljt-layout { grid-template-columns:280px 1fr; gap:2rem; align-items:start; } .ljt-layout__side { position:sticky; top:1.5rem; } }

.ljt-filters { background:var(--lj-surface); border:1px solid var(--lj-border); border-radius:var(--lj-radius-card); }
.ljt-filters__toggle { display:flex; align-items:center; gap:.5rem; min-height:56px; padding:0 1rem; font-weight:700; cursor:pointer; list-style:none; }
.ljt-filters__toggle::-webkit-details-marker { display:none; }
.ljt-count { background:var(--lj-primary); color:#fff; border-radius:var(--lj-radius-pill); font-size:.75rem; padding:.1rem .5rem; }
.ljt-filters__body { padding:0 1rem 1rem; display:grid; gap:1rem; }
.ljt-ffield label { display:flex; align-items:center; gap:.5rem; font-weight:700; margin-bottom:.25rem; }
.ljt-ffield select { width:100%; min-height:var(--lj-control-height); border:1px solid var(--lj-border-control); border-radius:var(--lj-radius-control); background:var(--lj-surface); font:400 1rem var(--lj-font); color:var(--lj-text); padding:0 .75rem; }
.ljt-check { display:flex; align-items:center; gap:.5rem; min-height:44px; cursor:pointer; }
.ljt-check input { width:20px; height:20px; accent-color:var(--lj-primary); }
.ljt-reset { display:inline-flex; align-items:center; gap:.5rem; justify-self:start; color:var(--lj-text-muted) !important; }

.ljt-results__head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:.5rem; }
.ljt-results__head .ljt-h2 { margin:0; }
.ljt-results__head p { margin:0; }

/* Cartes */
.ljt-list { display:grid; gap:1rem; margin-top:1rem; }
.ljt-card { position:relative; display:grid; grid-template-columns:72px 1fr; gap:1rem; background:var(--lj-surface); border:1px solid var(--lj-border); border-radius:var(--lj-radius-card); padding:1rem; transition:box-shadow var(--lj-duration) var(--lj-easing), border-color var(--lj-duration); }
.ljt-card:hover, .ljt-card:focus-within { box-shadow:var(--lj-shadow-raised); border-color:var(--lj-primary); }
.ljt-card__date { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border-right:3px solid var(--lj-brand-lime); padding-right:.75rem; line-height:1.1; }
.ljt-card__day { font-size:2rem; font-weight:700; }
.ljt-card__month { text-transform:uppercase; font-weight:700; letter-spacing:.06em; font-size:.875rem; }
.ljt-card__year { color:var(--lj-text-muted); font-size:.875rem; letter-spacing:.06em; }
.ljt-card__title { font-size:1.25rem; line-height:1.25; margin:0 0 .25rem; font-weight:700; }
.ljt-card__title a { color:var(--lj-text) !important; text-decoration:none; }
.ljt-card__title a::after { content:""; position:absolute; inset:0; border-radius:var(--lj-radius-card); } /* carte entière cliquable */
.ljt-card__loc { display:flex; align-items:flex-start; gap:.25rem; color:var(--lj-text-muted); margin:0 0 .75rem; }
.ljt-card__media, .ljt-card__aside { grid-column:1 / -1; }
.ljt-card__media img { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--lj-radius-control); }
.ljt-card__excerpt { color:var(--lj-text-muted); margin:0 0 .5rem; }
@media (min-width:768px) {
  .ljt-card { grid-template-columns:88px 1fr 200px; align-items:center; padding:1.25rem; }
  .ljt-card__media { grid-column:3; grid-row:1; }
  .ljt-card__aside { grid-column:2 / -1; }
}
@media (min-width:1200px) {
  .ljt-card { grid-template-columns:88px 1.2fr 200px 1fr; }
  .ljt-card__media { grid-column:3; }
  .ljt-card__aside { grid-column:4; grid-row:1; }
}

.ljt-tags { list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; padding:0; margin:0; }
.ljt-tag, .ljt-badge { display:inline-flex; align-items:center; gap:.375rem; border-radius:var(--lj-radius-pill); padding:.25rem .75rem; font-size:.875rem; font-weight:600; line-height:1.4; background:var(--lj-surface-subtle); color:var(--lj-text); }
.ljt-tag--green { background:#EEF6D9; }
.ljt-tag--orange { background:#FFE9DE; color:var(--lj-accent); }
.ljt-badge--success { background:var(--lj-success-bg); color:var(--lj-success); }
.ljt-badge--warning { background:var(--lj-warning-bg); color:var(--lj-warning); }
.ljt-badge--error { background:var(--lj-error-bg); color:var(--lj-error); }
.ljt-badge--info { background:var(--lj-info-bg); color:var(--lj-info); }
.ljt-badge--neutral { background:#E6EEF0; color:var(--lj-text-muted); }

.ljt-pagination ul { list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; padding:0; margin:2rem 0 0; }
.ljt-pagination a, .ljt-pagination span { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:0 .75rem; border:1px solid var(--lj-border); border-radius:var(--lj-radius-control); background:var(--lj-surface); text-decoration:none; }
.ljt-pagination .current { background:var(--lj-primary); border-color:var(--lj-primary); color:#fff; }
.ljt-empty { background:var(--lj-surface); border:1px dashed var(--lj-border-control); border-radius:var(--lj-radius-card); padding:2rem; text-align:center; margin-top:1rem; }

/* Fiche */
.ljt-shead { position:relative; padding:2rem 0; background:var(--lj-surface-subtle); }
.ljt-shead.has-media { padding:0 0 2rem; background:var(--lj-surface); }
.ljt-shead__media img { width:100%; aspect-ratio:4/3; object-fit:cover; }
@media (min-width:768px) { .ljt-shead__media img { aspect-ratio:16/9; max-height:480px; } }
.ljt-shead.has-media .ljt-shead__inner { margin-top:-3rem; position:relative; }
.ljt-shead.has-media .ljt-shead__inner > * { position:relative; }
.ljt-shead.has-media .ljt-shead__inner::before { content:""; position:absolute; inset:0 8px; background:var(--lj-surface); border-radius:var(--lj-radius-card); box-shadow:var(--lj-shadow-raised); }
@media (min-width:768px) { .ljt-shead.has-media .ljt-shead__inner::before { inset:0 16px; } }
.ljt-shead__inner { padding-top:1.5rem; padding-bottom:1.5rem; }
.ljt-shead.has-media .ljt-shead__inner { padding:1.5rem 32px; }
.ljt-crumbs { font-size:.875rem; color:var(--lj-text-muted); margin-bottom:.75rem; }
.ljt-shead .ljt-tags { margin-bottom:.75rem; }
.ljt-shead__meta { display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; margin:0 0 1rem; font-weight:600; }
.ljt-shead__meta span { display:inline-flex; align-items:center; gap:.375rem; }
.ljt-actions { display:flex; flex-wrap:wrap; gap:.75rem; }
.ljt-alert { border-radius:var(--lj-radius-control); padding:1rem; margin-top:1.5rem; }
.ljt-alert--warning { background:var(--lj-warning-bg); color:var(--lj-warning); }
.ljt-alert--error { background:var(--lj-error-bg); color:var(--lj-error); }

.ljt-sgrid { display:grid; gap:2rem; margin-top:2rem; }
@media (min-width:1024px) { .ljt-sgrid { grid-template-columns:1fr 340px; align-items:start; } .ljt-sgrid__side { position:sticky; top:1.5rem; } }
.ljt-section { margin-top:2.5rem; }
.ljt-sgrid__main > .ljt-section:first-child { margin-top:0; }
.ljt-prose { max-width:70ch; line-height:1.65; font-size:1.125rem; }
.ljt-table-wrap { overflow-x:auto; border:1px solid var(--lj-border); border-radius:var(--lj-radius-card); background:var(--lj-surface); }
.ljt-table { width:100%; border-collapse:collapse; min-width:640px; }
.ljt-table th, .ljt-table td { text-align:left; padding:.75rem 1rem; border-bottom:1px solid var(--lj-border); white-space:nowrap; }
.ljt-table thead th { background:var(--lj-surface-subtle); font-size:.875rem; }
.ljt-table tbody tr:last-child > * { border-bottom:0; }
.ljt-dl { display:grid; gap:1rem; margin:0; }
@media (min-width:768px) { .ljt-dl { grid-template-columns:1fr 1fr; } }
.ljt-dl > div { background:var(--lj-surface); border:1px solid var(--lj-border); border-radius:var(--lj-radius-card); padding:1rem; }
.ljt-dl dt { font-weight:700; margin-bottom:.25rem; }
.ljt-dl dd { margin:0; color:var(--lj-text-muted); }
.ljt-map iframe { width:100%; aspect-ratio:16/9; border:0; border-radius:var(--lj-radius-card); background:var(--lj-surface-subtle); }
.ljt-box { background:var(--lj-surface); border:1px solid var(--lj-border); border-radius:var(--lj-radius-card); padding:1.25rem; }
.ljt-box + .ljt-box { margin-top:1rem; }
.ljt-box--note { background:var(--lj-info-bg); border-color:transparent; font-size:.875rem; }
.ljt-box--note p { margin:0; }
.ljt-facts { margin:0 0 1rem; }
.ljt-facts > div { display:grid; grid-template-columns:110px 1fr; gap:.5rem; padding:.5rem 0; border-bottom:1px solid var(--lj-border); }
.ljt-facts dt { color:var(--lj-text-muted); }
.ljt-facts dd { margin:0; font-weight:600; overflow-wrap:anywhere; }
.ljt-articles { padding-left:1.25rem; line-height:1.8; }
.ljt-card__loc .ljt-icon { margin-top:3px; }

/* Vue liste / carte */
.ljt-views { display:inline-flex; border:1px solid var(--lj-border-control); border-radius:var(--lj-radius-pill); overflow:hidden; }
.ljt-views a { padding:.5rem 1rem; min-height:40px; display:inline-flex; align-items:center; font-weight:600; text-decoration:none; color:var(--lj-text) !important; }
.ljt-views a.is-active { background:var(--lj-primary); color:#fff !important; }
.ljt-map-full { height:420px; margin-top:1rem; border-radius:var(--lj-radius-card); border:1px solid var(--lj-border); background:var(--lj-surface-subtle); z-index:0; }
@media (min-width:1024px) { .ljt-map-full { height:620px; } }
.ljt-map-note { font-size:.875rem; margin:.75rem 0 .5rem; }
.ljt-pin span { display:block; width:28px; height:28px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:var(--lj-primary, #006F73); border:3px solid #fff; box-shadow:0 2px 6px rgb(0 24 47 / .35); }
.ljt-popup { font-family:var(--lj-font, sans-serif); font-size:14px; line-height:1.45; color:#00182F; }
.ljt-popup__title { display:block; font-weight:700; font-size:15px; margin-bottom:.25rem; color:#006F73; }
.lj-root .marker-cluster-small, .lj-root .marker-cluster-medium, .lj-root .marker-cluster-large { background-color:rgb(0 111 115 / .25); }
.lj-root .marker-cluster-small div, .lj-root .marker-cluster-medium div, .lj-root .marker-cluster-large div { background-color:#006F73; color:#fff; font-weight:700; }
