/*
 * ============================================================================
 *  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)
 * ======================================================================== */
/* Maquette : le fil d'Ariane commence à y142, soit 42px sous la navbar (y100). */
.act-head { padding-block: 39px var(--pl-sp-8); }

/* Maquette : « Accueil » n'y mesure que 33px d'encre, contre 41 en 12,5px —
   soit 10px. Releve identique sur Activites, Cadeaux et les 4 ecrans du
   compte. On fige l'interligne a 19px pour que la reduction du corps ne
   remonte pas tout le contenu des pages deja calees. */
.act-breadcrumb {
    display: flex; align-items: center; gap: var(--pl-sp-8);
    font-size: 10px; line-height: 19px;
    /* Maquette : il demarre 5px a droite du bord de colonne (x115 pour 110). */
    margin-left: 5px;
    color: #c1c7d1;
    /* Maquette : 44px entre le bas du fil d'Ariane et le haut du titre. */
    margin-bottom: var(--pl-sp-32);
}
/* Couleurs relevées sur les maquettes (Offres et Destinations) : les maillons
   sont en gris très clair #c1c7d1 et le séparateur est une BARRE verticale
   #e5e7eb — et non un « / » en gris secondaire. */
.act-breadcrumb a { color: #c1c7d1; text-decoration: none; }
.act-breadcrumb [aria-hidden] { color: var(--pl-border); }
.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); }

/* Maquette : « Toutes nos activités » mesure 456x39 px d'encre. Rendu-test
   Inter : 48px graisse 500 donne 454x38 — même typographie que les titres de
   section (.home-section__title), Agnès n'emploie qu'un seul corps de titre. */
.act-head__title {
    font-size: 48px;
    font-weight: var(--pl-fw-medium);
    color: var(--pl-text);
    /* Maquette : 32px entre le bas du titre et le haut du sous-titre. */
    margin: 0 0 15px;
}
/* Maquette : le sous-titre tient sur UNE ligne de 1059px (x111 -> x1169). */
.act-head__subtitle {
    max-width: 1100px;
    font-size: var(--pl-fs-body);
    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, background-color .15s ease;
}
/* SURVOL UNIFORME — 25/08.
   Ces boutons ne teintaient que leur bordure et leur libellé : la surface
   restait blanche, si bien qu'on ne voyait pas ce qu'on allait cliquer. Le
   reste du site remplit déjà toute la boîte (.pl-nav__link, .act-viewbtn,
   .pl-iconbtn, les grilles de calendrier…). C'est cette convention qui est
   reprise ici, pas une nouvelle : même jeton --pl-action-light. */
.act-tool:hover { border-color: var(--pl-action); color: var(--pl-action); background: var(--pl-action-light); }
.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; }
/* Le survol de .act-tool ne l'atteignait pas : un sélecteur d'identifiant
   l'emporte sur n'importe quelle classe, son fond restait donc figé alors que
   ses voisins immédiats se teintaient. C'est le bouton que le client cite
   nommément. Même convention que les autres, écrite avec la même force. */
#act-map-toggle:hover { border-color: var(--pl-action); color: var(--pl-action); background: var(--pl-action-light); }

/* --- 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); background: var(--pl-action-light); }

.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;
    /* Les chips sont devenus des liens (filtrage par categorie) : sans cette
       ligne, le Reboot de Bootstrap les soulignerait. Sans effet sur un
       <button>, qui n'a jamais de decoration. */
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.act-chip:hover { border-color: var(--pl-action); color: var(--pl-action); background: var(--pl-action-light); }
.act-chip.is-active {
    background: var(--pl-action);
    border-color: var(--pl-action);
    color: var(--pl-white);
}
.act-chip.is-active:hover { background: #4d00d6; color: var(--pl-white); }
/* Le chip « Filtre » n'est PAS violet dans les maquettes (verifie sur Activites
   et Destinations populaires) : fond blanc, bord #eceef1, texte gris. */
.act-chip--filter {
    background: var(--pl-white);
    border-color: #eceef1;
    color: var(--pl-text-secondary);
}
.act-chip--filter:hover { border-color: var(--pl-action); color: var(--pl-action); background: var(--pl-action-light); }

/* --- Ligne de résultats. --- */
.act-results {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--pl-sp-16);
    /* Maquette : 76px entre le compteur de résultats et le haut des cartes. */
    padding-block: var(--pl-sp-8) var(--pl-sp-24);
}
.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); }
/* Teinte relevée sur les maquettes qui portent une section grise (détail
   Activité, Destinations populaires, Destinations par ville) : #fafafb.
   Le listing Activités, lui, est ENTIÈREMENT blanc dans la maquette. */
.act-section--alt { background: #fafafb; }
.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 { display: inline-flex; align-items: center; gap: 6px; 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); background: var(--pl-action-light); }

/* --- 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); background: var(--pl-action-light); }
.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.
 * ======================================================================== */
/* Sur l'ecran D la maquette met la sidebar TOUT EN HAUT : elle borde le fil
   d'Ariane, le titre et la barre de recherche, qui passent tous dans la
   colonne de droite. La page entiere devient donc une grille de deux
   colonnes (sidebar relevee a x103 -> x398, soit 296 de large). */
.act-page.has-filters {
    display: grid;
    grid-template-columns: 296px minmax(0, 1fr);
    column-gap: var(--pl-sp-32);
    align-items: start;
    max-width: var(--pl-container-desktop);
    margin: 0 auto;
    padding-inline: 100px;
}
.act-page.has-filters > .act-filters__appliedlabel {
    display: block;
    font-size: var(--pl-fs-body-sm);
    font-weight: var(--pl-fw-semibold);
    color: var(--pl-text);
}

.act-filters { grid-column: 1; grid-row: 1 / span 2; }
.act-page.has-filters > .act-head { grid-column: 2; grid-row: 1; }
.act-page.has-filters > .act-body { grid-column: 2; grid-row: 2; }
/* Dans la colonne droite, les conteneurs internes n'ont plus a se centrer. */
.act-page.has-filters .act-content .container,
.act-page.has-filters .act-head .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 : 3 rangées de 4 par défaut (écran C — la troisième
   rangée reprend les cartes 5 à 8, c'est la maquette qui les répète), 2 rangées
   de 3 quand la sidebar est ouverte (écran D), 3 cartes par section ailleurs. */
.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); }
/* « Reinitialiser » est devenu un lien (il ne fait que renvoyer sur l'adresse
   sans parametres) : sans cette neutralisation, le Reboot de Bootstrap le
   soulignerait en permanence, alors que la maquette ne le souligne qu'au
   survol. Sans effet sur un <button>. */
.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; text-decoration: none; }
.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; }
/* Maquette : titres de groupe en 16px (« Type de destination » mesure 152px
   de large, contre 133 en 14px). */
.act-filters__field > span:first-child, .act-filters__group > legend {
    font-size: var(--pl-fs-body);
    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); }

/* Le formulaire du panneau ne doit creer AUCUNE boite : `.act-filters` est un
   conteneur flex en colonne, un <form> ordinaire ramasserait tous ses blocs
   dans un seul element flex et ecraserait l'agencement. */
.act-filters__form { display: contents; }
.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); }

/* Maquette : pas de 57px d'une ligne à l'autre (nous étions à 46). */
.act-filters__dest {
    display: flex; align-items: center; gap: var(--pl-sp-8);
    padding: 12px 10px;
    background: 0; border: 0;
    border-radius: var(--pl-radius-sm);
    font-size: var(--pl-fs-body);
    /* Maquette : libellés en texte principal, pas en gris secondaire. */
    color: var(--pl-text);
    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);
    padding-block: 6px;
    font-size: var(--pl-fs-body);
    color: var(--pl-text);
    cursor: pointer;
}
/* Maquette : cases à cocher de 22px. */
.act-filters__check input { width: 22px; height: 22px; 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.
   Maquette : la galerie occupe 3 colonnes de 296 + 2 gouttières de 16 = 920,
   puis 16px et le panneau de 296 — soit exactement les 1232px du conteneur.
   La gouttière de 40px volait 24px à la galerie. */
.act-detail__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 296px;
    gap: var(--pl-sp-16);
    align-items: start;
    /* Maquette : 37px entre la ligne d'infos du titre et le haut des deux
       colonnes (galerie et panneau de réservation). */
    padding-top: 29px;
    padding-bottom: var(--pl-sp-48);
    /* Comme les grilles de cartes, les images débordent de 6px (x104 -> x1335).
       L'élément porte AUSSI .home-container : élargir par marge négative ou par
       width est sans effet, son max-width de 1440px reclampe la boîte. On
       réduit donc son padding de 110 à 104. */
    padding-inline: 104px;
}

/* --- 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); }
/* Maquette : « voir sur la carte » en rouge, pas dans le violet d'action. */
.act-detail__maplink { display: inline-flex; align-items: center; gap: 4px; font-size: var(--pl-fs-body); color: var(--pl-error); 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);
}
/* Maquette : libellés en 16px et en texte principal (nous étions en 12px gris
   secondaire, d'où un bandeau bien plus discret que sur la maquette). */
.act-fact { display: flex; flex-direction: column; gap: 6px; }
.act-fact__label { font-size: var(--pl-fs-body); color: var(--pl-text); }
.act-fact__value { display: inline-flex; align-items: center; gap: 4px; font-size: var(--pl-fs-body); 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);
}
/* Maquette : titres de bloc (« Présentation générale ») en 26px. */
.act-block__title { font-size: var(--pl-fs-h3); 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 {
    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);
}
/* Maquette : un filet sépare le prix du formulaire. */
.act-booking__price { font-size: var(--pl-fs-body); color: var(--pl-text-secondary); margin: 0 0 var(--pl-sp-16); padding-bottom: var(--pl-sp-16); border-bottom: 1px solid var(--pl-border); }
.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); }
/* Maquette : libellés du formulaire en 16px gras. */
.act-booking__field > span:first-child, .act-booking__field-label { font-size: var(--pl-fs-body); font-weight: var(--pl-fw-bold); 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); background: var(--pl-action-light); }
.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); }
/* Maquette : le total est posé sur fond blanc, séparé par un filet — pas dans
   un pavé gris. */
.act-booking__total {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--pl-sp-16) 0 var(--pl-sp-12);
    border-top: 1px solid var(--pl-border);
    font-size: var(--pl-fs-body);
    font-weight: var(--pl-fw-semibold);
    color: var(--pl-text);
    margin: 0 0 var(--pl-sp-12);
}
/* Maquette : montant du total en violet. */
.act-booking__total strong { font-size: var(--pl-fs-s1); color: var(--pl-action); }
/* Maquette : « Annulation gratuite » dans un encadré violet clair. */
.act-booking__note {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    background: var(--pl-action-light);
    border-radius: var(--pl-radius-sm);
    font-size: var(--pl-fs-body-sm); color: var(--pl-text-secondary);
    margin: var(--pl-sp-12) 0 0;
}
.act-booking__note span[aria-hidden] { color: var(--pl-action); font-weight: var(--pl-fw-bold); }
.act-booking__note strong { color: var(--pl-text); }
/* Maquette : encart violet plein (et non une carte blanche bordée), titre
   violet de 26px et bouton plein pleine largeur. */
.act-booking__gift {
    background: var(--pl-action-light);
    border: 0;
    border-radius: var(--pl-radius-md);
    padding: var(--pl-sp-20);
}
.act-booking__gift h3 { font-size: var(--pl-fs-h3); font-weight: var(--pl-fw-bold); color: var(--pl-action); margin: 0 0 var(--pl-sp-16); }
.act-booking__gift p { font-size: var(--pl-fs-body); line-height: var(--pl-lh-base); color: var(--pl-text); margin: 0 0 var(--pl-sp-20); }

/* --- 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)
 * ======================================================================== */
/* Positionnement, voile, z-index et fermeture : fournis par .modal de
   Bootstrap. Il ne reste que la mise en forme du panneau. */
/* RELEVE SUR LA MAQUETTE LE 29/08 (Figma 553:21888 « Plus d'avis ») — ce sont
   des coordonnees lues dans le fichier, pas des mesures sur une capture :
     - modal          845 de large ;
     - en-tete        retrait 32 en haut/bas, 48 a gauche/droite ;
     - corps          idem, 32 / 48 ;
     - chaque avis    retrait interne de 32 ;
     - separateur     sur toute la largeur du contenu, 32 d'air de chaque cote.
   Le client demandait « une petite marge de plus entre le bord du modal et le
   contenu » : la vraie valeur est 48, la ou nous etions a 24. L'estimation de
   32 faite le 26/08 avait ete ecartee faute de maquette ; elle etait fausse. */
.reviews-modal .modal-dialog {
    width: min(845px, calc(100vw - 48px));
    max-width: none;
    margin: 48px auto;
}
.reviews-modal__panel {
    max-height: calc(100vh - 96px);
    background: var(--pl-white);
    border: 0;
    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-32) var(--pl-sp-48);
    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-32) var(--pl-sp-48);
    /* Aucun ecart ici : l'air vient du retrait de chaque avis, comme sur la
       maquette. Un gap s'ajouterait a ces retraits et doublerait l'espace. */
    display: flex; flex-direction: column; gap: 0;
}
.reviews-modal__item { padding-block: var(--pl-sp-32); }
/* Le trait separe deux avis et n'apparait donc jamais avant le premier. Les
   32 de marge et les 64 de retrait haut recomposent l'air de la maquette :
   64 au-dessus du trait (32 de retrait bas + 32 de marge) et 64 en dessous. */
.reviews-modal__item + .reviews-modal__item {
    border-top: 1px solid var(--pl-border);
    margin-top: var(--pl-sp-32);
    padding-top: var(--pl-sp-64);
}

/* Sur un telephone, 48 de retrait mangeraient la moitie de la largeur : la
   maquette est dessinee pour 1440, elle ne dit rien des petits ecrans. */
@media (max-width: 600px) {
    .reviews-modal__head,
    .reviews-modal__body { padding-inline: var(--pl-sp-20); }
    .reviews-modal__item { padding-block: var(--pl-sp-20); }
    .reviews-modal__item + .reviews-modal__item { margin-top: var(--pl-sp-20); padding-top: var(--pl-sp-32); }
}
/* Blocage du scroll de fond quand la modale est ouverte. */
/* Le blocage du défilement de fond est assuré par Bootstrap (.modal-open). */

/* ===========================================================================
 *  Adaptation largeurs intermédiaires
 * ======================================================================== */
@media (max-width: 1199.98px) {
    .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; }
}

/* ------------------------------------------------------------------ TRI --
   Menu « Trier par » de la liste des activités (01/09).

   La maquette n'affiche qu'un libellé et ne dessine aucun menu : elle ne dit
   pas à quoi il ressemble ouvert. On reprend donc le déroulant natif
   <details> du socle, déjà calé sur l'en-tête d'accueil et le pied de page,
   plutôt que d'en inventer un — aucune valeur nouvelle n'est décidée ici.

   Le déclencheur porte la classe `act-tool` de la maquette et non
   `pl-dropdown__toggle` : il garde exactement l'apparence validée, mais il
   faut alors retirer nous-mêmes le triangle que les navigateurs ajoutent à
   un <summary>. */
.act-sort > summary { list-style: none; }
.act-sort > summary::-webkit-details-marker { display: none; }
.act-sort[open] > summary { color: var(--pl-action); }
.act-sort[open] > summary .pl-icon:last-child { transform: rotate(180deg); }

/* Le bouton se trouve à l'extrémité droite de la barre de résultats : un menu
   aligné à gauche déborderait du conteneur. */
.act-sort__menu {
    left: auto;
    right: 0;
    min-width: 210px;
}

/* Rang de la page, sous la grille. Absent de la maquette, qui ne montre
   qu'une seule page : sans lui, arriver sur la page 2 par un lien partagé ne
   se distingue pas de la page 1. */
.act-page-note {
    margin-top: var(--pl-sp-16);
    text-align: center;
    color: var(--pl-text-secondary);
}