/*
 * ============================================================================
 *  PARCOURS « ACTIVITÉS » — listing, filtres, vue carte, détail
 *  (écrans C à G de la maquette Figma « Activités »).
 *  S'appuie sur les jetons --pl-* et réutilise .pl-card / .card-grid /
 *  .home-container / .home-section définis pour l'accueil.
 * ============================================================================
 */

/* ===========================================================================
 *  EN-TÊTE CONNECTÉ (spec §2.1)
 * ======================================================================== */
.pl-navbar--connected .pl-nav--connected { gap: var(--pl-sp-4); }

/* Boutons ronds à icône (favoris, messagerie, notifications). */
.pl-iconbtn {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    color: var(--pl-text);
    border: 0; border-radius: 50%;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.pl-iconbtn:hover { background: var(--pl-action-light); color: var(--pl-action); }

/* Avatar utilisateur + pastille verte « en ligne ». */
.pl-avatarbtn {
    position: relative;
    width: 44px; height: 44px;
    padding: 0; border: 0; border-radius: 50%;
    background: transparent;
    cursor: pointer;
}
.pl-avatarbtn img {
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.pl-avatarbtn__dot {
    position: absolute; right: 0; bottom: 2px;
    width: 11px; height: 11px;
    background: var(--pl-success);
    border: 2px solid var(--pl-white);
    border-radius: 50%;
}

/* ===========================================================================
 *  EN-TÊTE DE PAGE DU LISTING (écran C)
 * ======================================================================== */
.act-head { padding-block: var(--pl-sp-32) var(--pl-sp-8); }

.act-breadcrumb {
    display: flex; align-items: center; gap: var(--pl-sp-8);
    font-size: var(--pl-fs-caption);
    color: var(--pl-text-secondary);
    margin-bottom: var(--pl-sp-24);
}
.act-breadcrumb a { color: var(--pl-text-secondary); text-decoration: none; }
.act-breadcrumb a:hover { color: var(--pl-action); text-decoration: underline; }
.act-breadcrumb [aria-current] { color: var(--pl-action); font-weight: var(--pl-fw-semibold); }

.act-head__title {
    font-size: var(--pl-fs-h2);
    font-weight: var(--pl-fw-bold);
    color: var(--pl-text);
    margin: 0 0 var(--pl-sp-8);
}
.act-head__subtitle {
    max-width: 760px;
    font-size: var(--pl-fs-body-sm);
    line-height: var(--pl-lh-base);
    color: var(--pl-text-secondary);
    margin: 0 0 var(--pl-sp-20);
}

/* --- Recherche compacte : lieu | mots-clés | bouton carré orange. --- */
.act-search { display: flex; gap: 0; max-width: 757px; margin-bottom: var(--pl-sp-20); }
.act-search__bar {
    flex: 1;
    display: flex; align-items: center;
    background: var(--pl-white);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-sm) 0 0 var(--pl-radius-sm);
    padding-inline: var(--pl-sp-20);
    min-height: 56px;
}
.act-search__field { flex: 1; display: flex; align-items: center; gap: var(--pl-sp-12); }
.act-search__field .pl-icon { color: var(--pl-text-secondary); flex-shrink: 0; }
.act-search__field input {
    width: 100%;
    border: 0; outline: 0;
    font-size: var(--pl-fs-body-sm);
    font-weight: var(--pl-fw-medium);
    color: var(--pl-text);
    background: transparent;
}
.act-search__field input::placeholder { color: var(--pl-text-secondary); font-weight: var(--pl-fw-regular); }
.act-search__sep { width: 1px; height: 20px; background: var(--pl-border); margin-inline: var(--pl-sp-20); }
.act-search__submit {
    width: 56px; height: 56px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--pl-cta);
    color: var(--pl-white);
    border: 0;
    border-radius: 0 var(--pl-radius-sm) var(--pl-radius-sm) 0;
    cursor: pointer;
    transition: background-color .15s ease;
}
.act-search__submit:hover { background: #e56e00; }

/* --- Barre d'outils (date, budget, carte, grille/liste). --- */
.act-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--pl-sp-16);
    margin-bottom: var(--pl-sp-16);
}
.act-toolbar__left, .act-toolbar__right { display: flex; align-items: center; gap: var(--pl-sp-12); }

.act-tool {
    display: inline-flex; align-items: center; gap: var(--pl-sp-8);
    padding: 9px 14px;
    background: var(--pl-white);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-sm);
    font-size: var(--pl-fs-body-sm);
    font-weight: var(--pl-fw-medium);
    color: var(--pl-text);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s ease, color .15s ease;
}
.act-tool:hover { border-color: var(--pl-action); color: var(--pl-action); }
.act-tool--plain { border: 0; background: transparent; }
.act-tool--plain strong { font-weight: var(--pl-fw-semibold); }

/* Maquette : icônes nues, l'active sur un carré gris clair. */
.act-viewswitch { display: inline-flex; gap: 6px; }
.act-viewbtn {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    color: #8798b4;
    border: 0;
    border-radius: var(--pl-radius-sm);
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}
.act-viewbtn:hover { color: var(--pl-action); background: var(--pl-action-light); }
.act-viewbtn.is-active { background: #eef1f5; color: var(--pl-text); }

/* « Afficher la carte » : liseré bleuté et fond très clair (maquette). */
#act-map-toggle { border-color: #b9c9e8; background: #f6f9ff; }

/* --- Chips de filtres / villes. --- */
.act-chipbar {
    display: flex; align-items: center; gap: var(--pl-sp-8);
    margin-bottom: var(--pl-sp-16);
}
.act-chipbar__sep { width: 1px; height: 40px; background: var(--pl-border); margin-inline: var(--pl-sp-4); }
.act-chipbar__scroll { display: flex; align-items: center; gap: var(--pl-sp-8); overflow-x: auto; scrollbar-width: none; }
.act-chipbar__scroll::-webkit-scrollbar { display: none; }
.act-chipbar__more {
    width: 40px; height: 40px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--pl-white);
    border: 1px solid var(--pl-border);
    border-radius: 50%;
    color: var(--pl-text);
    cursor: pointer;
}
.act-chipbar__more:hover { color: var(--pl-action); border-color: var(--pl-action); }

.act-chip {
    display: inline-flex; align-items: center; gap: var(--pl-sp-8);
    padding: 9px 16px;
    background: var(--pl-white);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-pill);
    font-size: var(--pl-fs-body-sm);
    font-weight: var(--pl-fw-medium);
    color: var(--pl-text);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.act-chip:hover { border-color: var(--pl-action); color: var(--pl-action); }
.act-chip.is-active,
.act-chip--filter {
    background: var(--pl-action);
    border-color: var(--pl-action);
    color: var(--pl-white);
}
.act-chip.is-active:hover, .act-chip--filter:hover { background: #4d00d6; color: var(--pl-white); }

/* --- Ligne de résultats. --- */
.act-results {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--pl-sp-16);
    padding-block: var(--pl-sp-8);
}
.act-results__count { font-size: var(--pl-fs-body-sm); color: var(--pl-text-secondary); margin: 0; }
.act-results__count strong { color: var(--pl-text); font-weight: var(--pl-fw-bold); }

/* ===========================================================================
 *  SECTIONS & GRILLE DU LISTING
 * ======================================================================== */
.act-section { padding-block: var(--pl-sp-32) var(--pl-sp-40); }
.act-section--alt { background: #f4f5f7; }
.act-section .home-section__head { margin-bottom: var(--pl-sp-20); }

.act-more { display: flex; justify-content: center; margin-top: var(--pl-sp-32); }

/* Bouton contour violet (Voir plus, Voir l'offre). */
.pl-btn--outline-action {
    background: var(--pl-white);
    color: var(--pl-action);
    border: 1.5px solid var(--pl-action);
    font-weight: var(--pl-fw-semibold);
    font-size: var(--pl-fs-body-sm);
}
.pl-btn--outline-action:hover { background: var(--pl-action); color: var(--pl-white); }

/* --- Compléments de la carte activité (badge note or, durée). --- */
.act-card__meta { display: flex; align-items: center; gap: var(--pl-sp-8); margin-top: 2px; }
.act-rating {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 7px;
    background: var(--pl-warning);
    color: var(--pl-white);
    border-radius: var(--pl-radius-pill);
    font-size: var(--pl-fs-caption);
    font-weight: var(--pl-fw-bold);
}
.act-card__reviews { font-size: var(--pl-fs-caption); color: var(--pl-text-secondary); }
.act-card__duration {
    display: inline-flex; align-items: center; gap: 4px;
    margin-left: auto;
    font-size: var(--pl-fs-caption);
    color: var(--pl-text-secondary);
}

/* --- Carte « sélection » : titre + volume seulement. --- */
.sel-card__count { font-size: var(--pl-fs-body-sm); color: var(--pl-text-secondary); }

/* --- Logo type d'activité (pro payante / privée gratuite), coin bas-gauche
   de la photo — demande Loïc (commentaire maquette du 2026-07-27). --- */
.act-card__kind {
    position: absolute; left: 10px; bottom: 10px;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: var(--pl-fw-bold);
    border-radius: var(--pl-radius-pill);
    color: var(--pl-white);
    box-shadow: 0 2px 8px rgba(15, 23, 42, .25);
}
.act-card__kind--pro { background: var(--pl-action); }
.act-card__kind--free { background: var(--pl-success); }
.pl-card__price--free { color: var(--pl-success); }

/* --- Carte « offre exclusive ». --- */
.offer-card { position: relative; }
/* Pilule blanche centrée en bas d'image (maquette) : horloge orange + texte. */
.offer-card__timer {
    position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: var(--pl-white);
    color: var(--pl-text);
    font-size: var(--pl-fs-caption);
    font-weight: var(--pl-fw-semibold);
    border-radius: var(--pl-radius-pill);
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .18);
}
.offer-card__timer .pl-icon { color: var(--pl-cta); flex-shrink: 0; }
.offer-card__timer strong { font-weight: var(--pl-fw-bold); color: var(--pl-cta); }
.offer-card__timer.is-expired { background: #fdecec; color: var(--pl-error); }
.offer-card__old {
    font-size: var(--pl-fs-body-sm);
    color: var(--pl-text-secondary);
    text-decoration: line-through;
}
.offer-card__cta { margin-top: var(--pl-sp-12); justify-content: center; }

/* --- Chips de villes (« Votre sélection d'activités »). --- */
.act-citybar { display: flex; align-items: center; gap: var(--pl-sp-8); margin-bottom: var(--pl-sp-24); }
.act-citybar__scroll { display: flex; align-items: center; gap: var(--pl-sp-8); overflow-x: auto; scrollbar-width: none; }
.act-citybar__scroll::-webkit-scrollbar { display: none; }
.act-citybar__nav {
    width: 36px; height: 36px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--pl-white);
    border: 1px solid var(--pl-border);
    border-radius: 50%;
    color: var(--pl-text);
    cursor: pointer;
}
.act-citybar__nav:hover { color: var(--pl-action); border-color: var(--pl-action); }

/* --- Pagination ‹ 1 2 3 4 ›. --- */
.act-pagination {
    display: flex; align-items: center; justify-content: center;
    gap: var(--pl-sp-12);
    margin-top: var(--pl-sp-32);
}
.act-page-btn {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--pl-white);
    border: 1px solid var(--pl-border);
    border-radius: 50%;
    font-size: var(--pl-fs-body-sm);
    font-weight: var(--pl-fw-semibold);
    color: var(--pl-text);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.act-page-btn:hover { border-color: var(--pl-action); color: var(--pl-action); }
.act-page-btn.is-active { background: var(--pl-action); border-color: var(--pl-action); color: var(--pl-white); }

/* ===========================================================================
 *  SIDEBAR DE FILTRES (écran D) — la page bascule via .has-filters :
 *  la sidebar s'affiche à gauche et la grille passe de 4 à 3 colonnes.
 * ======================================================================== */
.act-page.has-filters .act-body {
    display: grid;
    grid-template-columns: 296px minmax(0, 1fr);
    gap: var(--pl-sp-32);
    max-width: var(--pl-container-desktop);
    margin: 0 auto;
    padding-inline: 100px;
}
/* Dans la colonne droite, les conteneurs internes n'ont plus à se centrer. */
.act-page.has-filters .act-content .home-container { max-width: none; padding-inline: 0; }
.act-page.has-filters .act-content .card-grid { grid-template-columns: repeat(3, 1fr); }
/* Volumes de la maquette : 2 rangées de 4 par défaut (écran C), 2 rangées
   de 3 quand la sidebar est ouverte (écran D), 3 cartes par section ailleurs. */
.act-grid > :nth-child(n+9) { display: none; }
.act-page.has-filters .act-grid > :nth-child(n+7) { display: none; }
.act-page.has-filters .act-content .card-grid:not(.act-grid) > :nth-child(n+4) { display: none; }

.act-filters {
    position: sticky;
    top: 116px;
    align-self: start;
    max-height: calc(100vh - 132px);
    overflow-y: auto;
    background: var(--pl-white);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-md);
    padding: var(--pl-sp-20);
    margin-block: var(--pl-sp-32);
    display: flex; flex-direction: column; gap: var(--pl-sp-16);
}
.act-filters[hidden] { display: none; }
.act-filters__head { display: flex; align-items: center; justify-content: space-between; }
.act-filters__title { font-size: var(--pl-fs-body); font-weight: var(--pl-fw-bold); color: var(--pl-text); }
.act-filters__reset { background: 0; border: 0; padding: 0; font-size: var(--pl-fs-body-sm); color: var(--pl-action); font-weight: var(--pl-fw-semibold); cursor: pointer; }
.act-filters__reset:hover { text-decoration: underline; }
.act-filters__applied { display: flex; flex-wrap: wrap; gap: var(--pl-sp-8); }
.act-filters__applied:empty { display: none; }

.act-filters__field { display: flex; flex-direction: column; gap: 4px; }
.act-filters__field > span:first-child, .act-filters__group > legend {
    font-size: var(--pl-fs-body-sm);
    font-weight: var(--pl-fw-semibold);
    color: var(--pl-text);
}
.act-filters__input {
    display: flex; align-items: center; gap: var(--pl-sp-8);
    padding: 9px 12px;
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-sm);
    color: var(--pl-text-secondary);
}
.act-filters__input input { width: 100%; border: 0; outline: 0; font-size: var(--pl-fs-body-sm); color: var(--pl-text); background: transparent; }
.act-filters__input input::placeholder { color: var(--pl-text-secondary); }

.act-filters__group { border: 0; margin: 0; padding: var(--pl-sp-12) 0 0; border-top: 1px solid var(--pl-border); display: flex; flex-direction: column; gap: var(--pl-sp-8); }
.act-filters__group > legend { margin-bottom: var(--pl-sp-8); }

.act-filters__dest {
    display: flex; align-items: center; gap: var(--pl-sp-8);
    padding: 8px 10px;
    background: 0; border: 0;
    border-radius: var(--pl-radius-sm);
    font-size: var(--pl-fs-body-sm);
    color: var(--pl-text-secondary);
    text-align: left;
    cursor: pointer;
}
.act-filters__dest:hover { background: #f4f5f7; color: var(--pl-text); }
.act-filters__dest.is-active { background: var(--pl-action-light); color: var(--pl-action); font-weight: var(--pl-fw-semibold); }

.act-filters__check {
    display: flex; align-items: center; gap: var(--pl-sp-8);
    font-size: var(--pl-fs-body-sm);
    color: var(--pl-text-secondary);
    cursor: pointer;
}
.act-filters__check input { width: 16px; height: 16px; accent-color: var(--pl-action); }
.act-filters__stars { display: inline-flex; gap: 2px; }
.act-filters__stars .is-on { color: var(--pl-warning); }
.act-filters__stars .is-off { color: var(--pl-border); }

/* Slider double du budget : deux <input type=range> superposés. */
.act-budget__slider { position: relative; height: 24px; }
.act-budget__track {
    position: absolute; top: 10px; left: 0; right: 0; height: 4px;
    background: var(--pl-border);
    border-radius: 2px;
}
.act-budget__range { position: absolute; top: 10px; height: 4px; background: var(--pl-action); border-radius: 2px; }
.act-budget__slider input[type="range"] {
    position: absolute; inset: 0;
    width: 100%;
    appearance: none; -webkit-appearance: none;
    background: transparent;
    pointer-events: none;   /* seul le pouce est cliquable */
    margin: 0;
}
.act-budget__slider input[type="range"]::-webkit-slider-thumb {
    appearance: none; -webkit-appearance: none;
    width: 18px; height: 18px;
    margin-top: 1px;
    background: var(--pl-white);
    border: 2px solid var(--pl-action);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: var(--pl-shadow-sm);
}
.act-budget__bounds { display: flex; justify-content: space-between; font-size: var(--pl-fs-caption); color: var(--pl-text-secondary); }
.act-budget__inputs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pl-sp-8); }
.act-budget__inputs input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-sm);
    font-size: var(--pl-fs-body-sm);
    color: var(--pl-text);
    text-align: center;
}
.act-filters__count { margin: 0; text-align: center; font-size: var(--pl-fs-caption); color: var(--pl-text-secondary); }
.act-filters__count strong { color: var(--pl-text); }

/* Pastille compteur du bouton « Filtre » (① quand la sidebar est ouverte). */
.act-chip__counter {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px;
    background: var(--pl-white);
    color: var(--pl-action);
    border-radius: 50%;
    font-size: 11px;
    font-weight: var(--pl-fw-bold);
}

/* ===========================================================================
 *  VUE CARTE (écran E) — split liste horizontale / carte Leaflet.
 * ======================================================================== */
.act-mapview {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 0;
    height: calc(100vh - 100px);
}
.act-mapview[hidden] { display: none; }
.act-mapview__list {
    overflow-y: auto;
    padding: var(--pl-sp-24) var(--pl-sp-24) var(--pl-sp-24) 100px;
    display: flex; flex-direction: column; gap: var(--pl-sp-16);
    scrollbar-width: thin;   /* scrollbar visible, comme la maquette */
}
.act-mapview__map { position: relative; }
.act-mapview__map #act-map { position: absolute; inset: 0; z-index: 0; }
.act-mapview__close {
    position: absolute; top: var(--pl-sp-16); right: var(--pl-sp-16);
    z-index: 500;
    display: inline-flex; align-items: center; gap: var(--pl-sp-8);
    padding: 10px 16px;
    background: var(--pl-white);
    border: 0;
    border-radius: var(--pl-radius-sm);
    font-size: var(--pl-fs-body-sm);
    font-weight: var(--pl-fw-semibold);
    color: var(--pl-text);
    box-shadow: 0 4px 14px rgba(15, 23, 42, .18);
    cursor: pointer;
}
.act-mapview__close:hover { background: var(--pl-primary); color: var(--pl-white); }

/* --- Carte activité horizontale (panneau liste). --- */
.act-card--horizontal { flex-direction: row; min-height: 168px; }
.act-card--horizontal .pl-card__media { flex: 0 0 220px; aspect-ratio: auto; }
.act-card--horizontal .pl-card__body { flex: 1; }
.act-card--horizontal.is-hot { border-color: var(--pl-action); box-shadow: 0 8px 24px rgba(93, 0, 255, .18); }

/* --- Marqueurs Leaflet personnalisés. --- */
.act-marker {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 10px;
    background: var(--pl-white);
    border-radius: var(--pl-radius-pill);
    font-size: var(--pl-fs-caption);
    font-weight: var(--pl-fw-bold);
    color: var(--pl-text);
    box-shadow: 0 3px 10px rgba(15, 23, 42, .25);
    border: 2px solid transparent;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .12s ease, border-color .12s ease;
}
.act-marker .pl-icon { color: var(--pl-warning); }
.act-marker.is-hot, .act-marker:hover { transform: scale(1.12); border-color: var(--pl-action); z-index: 1000 !important; }

.act-map-locate {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    background: var(--pl-white);
    color: var(--pl-text);
    margin-bottom: 8px;
    border-radius: 4px;
}
.act-map-locate:hover { color: var(--pl-action); }

.act-cluster {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    background: var(--pl-action);
    color: var(--pl-white);
    border: 3px solid var(--pl-white);
    border-radius: 50%;
    font-size: var(--pl-fs-body-sm);
    font-weight: var(--pl-fw-bold);
    box-shadow: 0 3px 10px rgba(15, 23, 42, .3);
    cursor: pointer;
}

/* Tooltip violet des clusters (« 2 activités disponibles »). */
.act-cluster-tip {
    background: var(--pl-action);
    color: var(--pl-white);
    border: 0;
    border-radius: var(--pl-radius-sm);
    font-size: var(--pl-fs-caption);
    font-weight: var(--pl-fw-semibold);
    box-shadow: 0 6px 18px rgba(15, 23, 42, .3);
    padding: 8px 12px;
}
.act-cluster-tip::before { border-top-color: var(--pl-action); }

/* Popup « activité sélectionnée » : on neutralise le style Leaflet et on
   glisse une mini-carte activité dans le contenu. */
.act-map-popup .leaflet-popup-content-wrapper { padding: 0; border-radius: var(--pl-radius-md); overflow: hidden; box-shadow: 0 12px 32px rgba(15, 23, 42, .28); }
.act-map-popup .leaflet-popup-content { margin: 0; width: 260px !important; }
.act-map-popup .leaflet-popup-close-button {
    z-index: 10;
    width: 26px; height: 26px;
    top: 8px; right: 8px;
    background: var(--pl-white);
    border-radius: 50%;
    font-size: 16px;
    line-height: 26px;
    color: var(--pl-text);
    box-shadow: var(--pl-shadow-sm);
}
.act-popup__media { position: relative; height: 130px; }
.act-popup__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.act-popup__body { padding: var(--pl-sp-12); display: flex; flex-direction: column; gap: 4px; font-family: inherit; }
.act-popup__place { display: flex; align-items: center; gap: 4px; font-size: var(--pl-fs-caption); color: var(--pl-text-secondary); }
.act-popup__title { font-size: var(--pl-fs-body-sm); font-weight: var(--pl-fw-bold); color: var(--pl-text); text-decoration: none; }
a.act-popup__title:hover { color: var(--pl-action); }
.act-popup__meta { display: flex; align-items: center; gap: var(--pl-sp-8); font-size: var(--pl-fs-caption); color: var(--pl-text-secondary); }
.act-popup__foot { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; padding-top: var(--pl-sp-8); border-top: 1px solid var(--pl-border); }
.act-popup__from { font-size: var(--pl-fs-caption); color: var(--pl-text-secondary); }
.act-popup__price { font-size: var(--pl-fs-body); font-weight: var(--pl-fw-bold); color: var(--pl-action); }

/* ===========================================================================
 *  DÉTAIL D'UNE ACTIVITÉ (écran F)
 * ======================================================================== */
.act-detail__subline { display: flex; align-items: center; gap: var(--pl-sp-12); flex-wrap: wrap; }
.act-detail__reviews-link { font-size: var(--pl-fs-body-sm); color: var(--pl-action); font-weight: var(--pl-fw-semibold); }
.act-detail__organizer { font-size: var(--pl-fs-body-sm); color: var(--pl-text-secondary); }
.act-detail__organizer strong { color: var(--pl-text); }

/* Deux colonnes : contenu principal + panneau de réservation. */
.act-detail__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 296px;
    gap: var(--pl-sp-40);
    align-items: start;
    padding-bottom: var(--pl-sp-48);
}

/* --- Galerie mosaïque : 3 colonnes, la 1re image couvre 2×2. --- */
.act-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 292px;   /* deux rangées de 292px, comme la maquette */
    gap: var(--pl-sp-16);
    margin-bottom: var(--pl-sp-16);
}
.act-gallery__item { position: relative; margin: 0; border-radius: var(--pl-radius-md); overflow: hidden; }
.act-gallery__item--big { grid-column: span 2; }
.act-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.act-gallery__all {
    position: absolute; right: 10px; bottom: 10px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px;
    background: var(--pl-white);
    border: 0; border-radius: var(--pl-radius-sm);
    font-size: var(--pl-fs-caption);
    font-weight: var(--pl-fw-semibold);
    color: var(--pl-text);
    box-shadow: var(--pl-shadow-sm);
    cursor: pointer;
}
.act-gallery__all:hover { background: var(--pl-primary); color: var(--pl-white); }

/* --- Localisation + partage / favori. --- */
.act-detail__placebar {
    display: flex; align-items: center; gap: var(--pl-sp-12);
    padding-bottom: var(--pl-sp-16);
    border-bottom: 1px solid var(--pl-border);
    margin-bottom: var(--pl-sp-16);
}
.act-detail__place { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--pl-fw-semibold); color: var(--pl-text); }
.act-detail__maplink { display: inline-flex; align-items: center; gap: 4px; font-size: var(--pl-fs-body-sm); color: var(--pl-action); font-weight: var(--pl-fw-semibold); }
.act-detail__placebar-actions { margin-left: auto; display: inline-flex; gap: var(--pl-sp-8); }
.pl-iconbtn--bordered { border: 1px solid var(--pl-border); }

/* --- Bandeau des informations clés. --- */
.act-facts {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--pl-sp-16);
    flex-wrap: wrap;
    padding-bottom: var(--pl-sp-24);
    margin-bottom: var(--pl-sp-24);
    border-bottom: 1px solid var(--pl-border);
}
.act-fact { display: flex; flex-direction: column; gap: 2px; }
.act-fact__label { font-size: var(--pl-fs-caption); color: var(--pl-text-secondary); }
.act-fact__value { display: inline-flex; align-items: center; gap: 4px; font-size: var(--pl-fs-body-sm); font-weight: var(--pl-fw-bold); color: var(--pl-text); }
.act-fact__value .pl-icon { color: var(--pl-warning); }

/* --- Blocs de contenu. --- */
.act-block { margin-bottom: var(--pl-sp-32); }
.act-block--boxed {
    background: #f8f9fb;
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-md);
    padding: var(--pl-sp-24);
}
.act-block__title { font-size: var(--pl-fs-s1); font-weight: var(--pl-fw-bold); color: var(--pl-text); margin: 0 0 var(--pl-sp-12); }
.act-block__sep { border: 0; border-top: 1px solid var(--pl-border); margin: 0 0 var(--pl-sp-16); }
.act-block__subtitle { font-size: var(--pl-fs-body); font-weight: var(--pl-fw-bold); color: var(--pl-text); margin: 0 0 var(--pl-sp-8); }
.act-block__minititle { font-size: var(--pl-fs-body); font-weight: var(--pl-fw-bold); color: var(--pl-text); margin: var(--pl-sp-16) 0 var(--pl-sp-8); }
.act-block__text, .act-block__lead { font-size: var(--pl-fs-body-sm); line-height: var(--pl-lh-base); color: var(--pl-text-secondary); margin: 0 0 var(--pl-sp-12); }
.act-block__lead { color: var(--pl-text); font-weight: var(--pl-fw-semibold); }

.act-bullets { margin: 0; padding-left: var(--pl-sp-20); display: flex; flex-direction: column; gap: 6px; }
.act-bullets li { font-size: var(--pl-fs-body-sm); line-height: var(--pl-lh-base); color: var(--pl-text-secondary); }

/* --- Listes à coches (inclus ✓ / exclus ✕). --- */
.act-includes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pl-sp-24); }
.act-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pl-sp-8); }
.act-checklist li { display: flex; align-items: flex-start; gap: var(--pl-sp-8); font-size: var(--pl-fs-body-sm); line-height: var(--pl-lh-base); color: var(--pl-text-secondary); }
.act-checklist__mark { flex-shrink: 0; font-weight: var(--pl-fw-bold); }
.act-checklist--in .act-checklist__mark { color: var(--pl-success); }
.act-checklist--out .act-checklist__mark { color: var(--pl-error); }

/* --- Bloc logistique : carte + infos. --- */
.act-logistics { display: grid; grid-template-columns: 394px minmax(0, 1fr); gap: var(--pl-sp-32); }
.act-logistics__map img {
    width: 100%; height: 445px;
    object-fit: cover;
    border-radius: var(--pl-radius-md);
    display: block;
}
.act-logistics__map-actions { display: flex; gap: var(--pl-sp-12); margin-top: var(--pl-sp-16); }
.act-logistics__info .act-block__minititle { margin-top: 0; }
.act-meeting { list-style: none; margin: 0 0 var(--pl-sp-20); padding: 0; display: flex; flex-direction: column; gap: var(--pl-sp-8); }
.act-meeting li { display: flex; flex-direction: column; font-size: var(--pl-fs-body-sm); color: var(--pl-text-secondary); }
.act-meeting strong { color: var(--pl-text); }
.act-guarantees { list-style: none; margin: 0; padding: var(--pl-sp-16) 0 0; border-top: 1px solid var(--pl-border); display: flex; flex-direction: column; gap: var(--pl-sp-12); }
.act-guarantees li { display: flex; gap: var(--pl-sp-8); font-size: var(--pl-fs-body-sm); line-height: var(--pl-lh-base); color: var(--pl-text-secondary); }
.act-guarantees strong { color: var(--pl-text); display: block; }
.act-guarantees__mark { color: var(--pl-success); flex-shrink: 0; }

/* --- Panneau de réservation sticky. --- */
.act-booking { position: sticky; top: 116px; display: flex; flex-direction: column; gap: var(--pl-sp-16); }
.act-booking__panel, .act-booking__gift {
    background: var(--pl-white);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-md);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
    padding: var(--pl-sp-16);
}
.act-booking__price { font-size: var(--pl-fs-body-sm); color: var(--pl-text-secondary); margin: 0 0 var(--pl-sp-16); }
.act-booking__price strong { font-size: var(--pl-fs-h3); color: var(--pl-text); }
.act-booking__field { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--pl-sp-12); }
.act-booking__field > span:first-child, .act-booking__field-label { font-size: var(--pl-fs-caption); font-weight: var(--pl-fw-semibold); color: var(--pl-text); }
.act-booking__input {
    display: flex; align-items: center; gap: var(--pl-sp-8);
    padding: 9px 12px;
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-sm);
    font-size: var(--pl-fs-body-sm);
    color: var(--pl-text-secondary);
    cursor: pointer;
}
.act-booking__input .pl-icon:last-child { margin-left: auto; }
.act-booking__travellers { display: flex; flex-direction: column; gap: var(--pl-sp-8); margin-bottom: var(--pl-sp-12); }
.act-stepper {
    display: flex; align-items: center; justify-content: space-between;
    font-size: var(--pl-fs-body-sm);
    color: var(--pl-text);
}
.act-stepper small { color: var(--pl-text-secondary); }
.act-stepper__controls { display: inline-flex; align-items: center; gap: var(--pl-sp-8); }
.act-stepper__controls button {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--pl-white);
    border: 1px solid var(--pl-border);
    border-radius: 50%;
    color: var(--pl-text);
    cursor: pointer;
}
.act-stepper__controls button:hover { border-color: var(--pl-action); color: var(--pl-action); }
.act-stepper__controls button:disabled { opacity: .4; cursor: not-allowed; }
.act-stepper__controls output { min-width: 20px; text-align: center; font-weight: var(--pl-fw-semibold); }
.act-booking__total {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--pl-sp-12);
    background: #f8f9fb;
    border-radius: var(--pl-radius-sm);
    font-size: var(--pl-fs-body-sm);
    font-weight: var(--pl-fw-semibold);
    color: var(--pl-text);
    margin: 0 0 var(--pl-sp-12);
}
.act-booking__total strong { font-size: var(--pl-fs-s1); }
.act-booking__note { display: flex; align-items: center; gap: 6px; font-size: var(--pl-fs-caption); color: var(--pl-text-secondary); margin: var(--pl-sp-12) 0 0; }
.act-booking__note span[aria-hidden] { color: var(--pl-success); font-weight: var(--pl-fw-bold); }
.act-booking__note strong { color: var(--pl-text); }
.act-booking__gift h3 { font-size: var(--pl-fs-body); font-weight: var(--pl-fw-bold); margin: 0 0 var(--pl-sp-8); }
.act-booking__gift p { font-size: var(--pl-fs-caption); line-height: var(--pl-lh-base); color: var(--pl-text-secondary); margin: 0 0 var(--pl-sp-12); }

/* --- Menu « … » des cartes avis (Signaler cet avis). --- */
.review-card__menu { position: relative; }
.review-card__menu summary { list-style: none; }
.review-card__menu summary::-webkit-details-marker { display: none; }
.review-card__menu-panel {
    position: absolute; right: 0; top: calc(100% + 6px);
    background: var(--pl-white);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-sm);
    box-shadow: 0 8px 20px rgba(15, 23, 42, .12);
    z-index: 20;
}
.review-card__menu-item {
    padding: 10px 14px;
    background: 0; border: 0;
    font-size: var(--pl-fs-body-sm);
    color: var(--pl-text);
    white-space: nowrap;
    cursor: pointer;
}
.review-card__menu-item:hover { color: var(--pl-error); }
.review-card__helpful { background: 0; border: 0; padding: 0; color: var(--pl-text-secondary); cursor: pointer; }
.review-card__helpful:hover { color: var(--pl-action); }

/* --- Formulaire « Ajouter un avis ». --- */
.act-review-form {
    display: flex; flex-direction: column; gap: var(--pl-sp-16);
    background: var(--pl-white);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-md);
    padding: var(--pl-sp-32);
}
.act-review-form__stars { display: flex; gap: var(--pl-sp-8); }
.act-review-form__star { background: 0; border: 0; padding: 0; color: var(--pl-border); cursor: pointer; transition: color .1s ease; }
.act-review-form__star.is-on, .act-review-form__star:hover { color: var(--pl-warning); }
.act-review-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pl-sp-16); }
.act-review-form input, .act-review-form textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-sm);
    font-size: var(--pl-fs-body-sm);
    color: var(--pl-text);
    font-family: inherit;
}
.act-review-form input::placeholder, .act-review-form textarea::placeholder { color: var(--pl-text-secondary); }
.act-review-form textarea { resize: vertical; }
.act-review-form .pl-btn { align-self: flex-start; }

/* ===========================================================================
 *  MODALE « TOUS LES AVIS » (écran G)
 * ======================================================================== */
.reviews-modal { position: fixed; inset: 0; z-index: 2000; }
.reviews-modal[hidden] { display: none; }
.reviews-modal__overlay { position: absolute; inset: 0; background: rgba(6, 27, 86, .55); }
.reviews-modal__panel {
    position: relative;
    width: min(720px, calc(100vw - 48px));
    max-height: calc(100vh - 96px);
    margin: 48px auto;
    background: var(--pl-white);
    border-radius: var(--pl-radius-md);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .3);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.reviews-modal__head {
    position: relative;
    padding: var(--pl-sp-20) var(--pl-sp-24) var(--pl-sp-16);
    border-bottom: 1px solid var(--pl-border);
    background: var(--pl-white);
}
.reviews-modal__close {
    position: absolute; left: var(--pl-sp-16); top: var(--pl-sp-16);
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    background: 0; border: 0; border-radius: 50%;
    color: var(--pl-text);
    cursor: pointer;
}
.reviews-modal__close:hover { background: #f4f5f7; }
.reviews-modal__title { text-align: center; font-size: var(--pl-fs-s1); font-weight: var(--pl-fw-bold); color: var(--pl-text); margin: 0 0 var(--pl-sp-8); }
.reviews-modal__score { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: var(--pl-sp-8); }
.reviews-modal__score-label { font-size: var(--pl-fs-caption); color: var(--pl-text-secondary); }
.reviews-modal__score-value { font-size: 34px; font-weight: var(--pl-fw-bold); color: var(--pl-text); line-height: 1.15; }
.reviews-modal__score-value span { font-size: var(--pl-fs-body); font-weight: var(--pl-fw-medium); color: var(--pl-text-secondary); }
.reviews-modal__stars { display: inline-flex; gap: 2px; color: var(--pl-warning); }
.reviews-modal__count { font-size: var(--pl-fs-caption); color: var(--pl-text-secondary); }

/* En-tête contextualisé (état scrollé G.2). */
.reviews-modal__context { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-right: var(--pl-sp-40); padding-left: var(--pl-sp-40); margin-bottom: var(--pl-sp-8); }
.reviews-modal__context[hidden] { display: none; }
.reviews-modal__context-title { font-size: var(--pl-fs-body); font-weight: var(--pl-fw-bold); color: var(--pl-text); margin: 0; text-align: center; }
.reviews-modal__context-note { display: inline-flex; align-items: center; gap: 4px; font-size: var(--pl-fs-caption); color: var(--pl-text-secondary); }
.reviews-modal__context-note .pl-icon { color: var(--pl-warning); }

.reviews-modal__tools { display: flex; align-items: center; justify-content: space-between; gap: var(--pl-sp-12); }

/* Dropdown de tri (état G.3). */
.reviews-sort { position: relative; }
.reviews-sort__menu {
    position: absolute; right: 0; top: calc(100% + 8px);
    min-width: 220px;
    background: var(--pl-white);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-md);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .16);
    padding: var(--pl-sp-8);
    display: flex; flex-direction: column; gap: 2px;
    z-index: 30;
}
.reviews-sort__menu[hidden] { display: none; }
.reviews-sort__option {
    display: flex; align-items: center; gap: var(--pl-sp-8);
    padding: 9px 12px;
    background: 0; border: 0;
    border-radius: var(--pl-radius-sm);
    font-size: var(--pl-fs-body-sm);
    color: var(--pl-text);
    text-align: left;
    cursor: pointer;
}
.reviews-sort__option:hover { background: #f4f5f7; }
.reviews-sort__check { visibility: hidden; color: var(--pl-action); font-weight: var(--pl-fw-bold); }
.reviews-sort__option.is-selected { font-weight: var(--pl-fw-semibold); }
.reviews-sort__option.is-selected .reviews-sort__check { visibility: visible; }

.reviews-modal__body {
    overflow-y: auto;
    padding: var(--pl-sp-16) var(--pl-sp-24) var(--pl-sp-24);
    display: flex; flex-direction: column; gap: var(--pl-sp-16);
}
/* Blocage du scroll de fond quand la modale est ouverte. */
body.has-modal { overflow: hidden; }

/* ===========================================================================
 *  Adaptation largeurs intermédiaires
 * ======================================================================== */
@media (max-width: 1100px) {
    .act-toolbar { flex-wrap: wrap; }
    .act-detail__layout { grid-template-columns: 1fr; }
    .act-booking { position: static; }
    .act-logistics { grid-template-columns: 1fr; }
    .act-includes { grid-template-columns: 1fr; }
    .act-review-form__row { grid-template-columns: 1fr; }
}