/* ---------- Pages « Activités et services » et page d'une activité ---------- */

/* Fil d'Ariane et lien fléché : mêmes règles que css/pages/gites.css, une seule à garder à la fusion dans site.css */

/* ---------- Liste, par mode d'accès ---------- */
.activites__chapeau { max-width: 720px; }
.activites__groupe { margin-top: var(--lg); }
.activites__mode { max-width: 760px; margin-top: var(--xs); }
.activites__mode .lien-fleche { margin-left: 4px; color: var(--on-surface); }
.activites__grille { margin-top: var(--md); }
.activites__nudge { margin-top: var(--lg); }

/* Toute la carte mène à la page de l'activité : le lien du titre la recouvre */
.carte-activite { position: relative; }
.carte-activite .titre-carte a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.carte-activite .titre-carte a:focus-visible { outline: none; }
.carte-activite:has(a:focus-visible) { outline: 2px solid var(--on-surface); outline-offset: 2px; }
.carte-activite__picto { display: block; box-sizing: border-box; width: 100%; height: auto; aspect-ratio: 3 / 2; padding: 22%; background: color-mix(in srgb, var(--secondary) 10%, var(--surface-dim)); color: var(--on-secondary-container); }
.carte-activite__acces { justify-self: start; padding: 2px 10px; border-radius: var(--r-full); background: color-mix(in srgb, var(--secondary) 12%, var(--surface)); color: var(--on-secondary-container); font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: 0.02em; }

/* ---------- Page d'une activité ---------- */
.page-activite { padding-top: var(--md); }
.page-activite__mode { display: inline-block; margin-top: var(--sm); }
.page-activite__grille { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--xl); align-items: start; margin-top: var(--lg); }
.page-activite__contenu { display: grid; gap: var(--md); }
.page-activite__photo { width: 100%; height: auto; border-radius: var(--r-lg); }
.page-activite__mention { padding: 0; margin-top: calc(var(--sm) - var(--md)); }
.page-activite__contenu .texte-lg { max-width: 720px; }
.page-activite__infos { position: sticky; top: 104px; display: grid; gap: var(--md); padding: var(--md); border-radius: var(--r-xl); box-shadow: var(--elev-lg); }
.page-activite__liste { display: grid; gap: var(--sm); }
.page-activite__liste div { display: grid; gap: 2px; padding-bottom: var(--sm); border-bottom: 1px solid var(--surface-variant); }
.page-activite__liste div:last-child { padding-bottom: 0; border-bottom: 0; }
.page-activite__liste dt { font-weight: 600; }
.page-activite__liste dd { margin: 0; font-size: 16px; line-height: 24px; }
.page-activite__note { font-size: 14px; line-height: 20px; }
.page-activite__autres a { display: block; text-decoration: none; font-weight: 500; }
.page-activite__autres a:hover { text-decoration: underline; }

@media (max-width: 1128px) {
    .page-activite__grille { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--lg); }
}

@media (max-width: 860px) {
    .page-activite__grille { grid-template-columns: 1fr; margin-top: var(--md); }
    .page-activite__infos { position: static; box-shadow: var(--elev-sm); }
}